当前位置:首页 > 前端 > 关于Web前端开发的思考和探索

关于Web前端开发的思考和探索

一、引言

首先这些年关于前端技术层出不穷,从最早的只用js做简单验证,到现在发现好像大前端已经无所不能了的感觉。特别是为了降低前端开发复杂度,涌现了一大批的MVC/MVVM模式的前端框架,不停了刷新我们的代码组织结构及开发模式,比如:BackboneJS、EmberJS、KnockoutJS、AvalonJS(国产)、AngularJS、ReactJS等等。
前端

二、现有主流框架

我们的开发模式第一次革命应该算是从google提出ajax一直到nodejs变化是非常的大,我们也在尝试着找到更合理更简单更适合的开发模式。我自己也经历过从原生js的开发到使用jquery操作dom,再到应用knockoutjs、avalonjs、angularjs及reactjs到我们的项目中(backbonejs、emberjs、polymer我没实际使用过),发现我们的程序越写越简单,而且越来越有意思。但每个框架专注点是不一样的,而且也有一些缺点:
1、angularjs,体积庞大过于复杂不适合轻量级应用,而且我对1.3放弃IE8及2.0的跳跃式发展耿耿于怀,最终开始把目光投向reactjs。
2、reactjs,研究了一段时间发现还真不错,首先是比较轻量极,性能也是很赞,最主要是它提出的Virtual DOM的概念,我觉得也算是一个革新了,但是它其实算不上是一个框架,它的专注点在于生成UI,就跟ng中的directive一个等级的,所以很多东西还要自己实现,它只能算我们的一个利器要架构一个复杂的应用还需要很多的工作。还有一点就是我比较不喜欢它的jsx这个玩意,虽然它可以在服务端处理。应该算是我的个人偏见吧。
3、polymer理念很超前,基于web component实现,我个人也觉得这是未来的趋势。
但是目前来说对于Shadow DOM的浏览器的兼容性:我估计除了研究没人会想用它了,而且它还利用了html5的,它这种模式产生的问题非常明显,就是需要import太多的html,而且还有嵌套的概念,可想而知。

三、对前端框架的想法

这些框架都很强悍,但是我觉得实际开发,一个适合好用的框架应该是要把已有的类库、插件等等的这些完美的结合起,并且提供简单易用的接口及合理的代码组织结构,现有的jquery插件非常的多(其实jquery比这些东西流行的多的多),现有的开源很多的类库我们都可以使用。我的思路是现有的这些资源应该要充分利用起来。所以我想自己整一个框架出来。我构想设计了下:

1、web component思路,结合Shadow DOM 及 Virtual DOM,如果支持Shadom DOM就使用Shadom DOM否则使用Virtual DOM实现。
2、控件定义尽量简单易懂,可快速包装现有的插件,控件存在继承的概念,控件存在少量修改时可以考虑继承覆写的方式实现。
3、实现MVVM的双向绑定,实际是三向(实际dom,控件实例(无论是shadow还是virtual都对应到一个virtual dom)、数据)

我暂时把这个项目叫做 Chitu.js 即赤兔.js,接下来会放到github上。

四、细化及实现思路

1、标签定义
比如我们需要一个hello的控件

1
<hello id="id1" binding="hello1"></hello>

2、控件定义
我们定义hello的控件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
chitu.component('hello', function (self) {
    //属性定义
    self.name = {
        get: function () { return self.root.getAttribute("name"); },
        set: function (value) { self.root.setAttribute("name", value); }
    };
    self.value = {
        get: function () { return self.root.innerText; },
        set: function (value) { self.root.innerText = value; }
    };
 
    //...
 
    //事件定义
    self.onclick = function(){
 
    };
 
    //...
 
    //方法定义
    self.setColor = function(color){
        self.root.style.color = color;
    };
 
    //...
 
    //控件生成
    self.render = function () {
        //...
        var text = document.createTextNode(self.value);
        return text;
    };
 
    //控件消亡
    self.dispose = function(){
 
    };
});

这里就是整个hello的控件的定义,就是把hello控件实例看作一个virtual节点,这是reactjs的思路,但是实现上面如果是支持shadow dom可以使用把render中返回的节点放到shadow dom中。

这里的控件属性与实际dom的双向连动是通过引入get set方法来实现的,实际上这个代码还需要经过一次complie处理,把get set方法通过ES5的Object.defineProperty方法转换成属性(先不考虑兼容性)。
前端
这里如果要集成jquery控件就非常容易了,比如combobox控件:

chitu.component('combobox', function(self){
    self.value = {
        get:function(){return $(root).combobox('getValue');},
        set:function(value){$(root).combobox('setValue',value);}
    };
   
    self.render = function(){
        $(root).combobox(options);
        return root;
    };

    self.dispose = function(){
        $(root).combobox('dispose');
    };
});

如果控件需要继承可以这样,定义一个mygridEx继承mygrid控件

1
2
3
4
5
6
7
8
9
10
11
12
chitu.component('mygridEx', function(self){
    //覆写属性
    self.attr1 = {
        get:function(){},
        set:function(){}
    };
 
    //覆写方法
    self.getRowCount = function(){
 
    }
},'mygrid');

3、控制器

这里需要解释下

这里的binding实际上对应的是controller当中的属性,这个属性其实就是控件的选项参数,我们以前调用jquery控件时

1
2
3
$('#id').jqgrid({
    //一堆参数
});

这样的话,这一堆参数就可以通过一个binding跟页面联系起来,方便控件的使用,当然还可以在控件定义时就定义好很多默认的参数,只需要传入需要改变的参数。
当然我们的参数也不一定都要写在binding当中,也可以单独绑定控件属性

1
2
3
<hello id="id1"  [value]="world" ></hello>
<hello id="id1"  [value]="{data.tenant_name}" ></hello>
<hello id="id1"  binding="hello1" [value]="world" [onclick]="search1.searchClick"></hello>

第一行:没有对应的binding属性,只有一个value属性,value的值为world
第二行:value的值双向绑定到controller中的data.tenant_name数据上
第三行:先从bindig的hello1中取值,如果有[value]则覆盖原值

这里为什么给属性加上[中括号],是因为属性叫什么名字都可能,尽量避免和原dom属性冲突。

控件器中还有一点设计值得说的是,我们可以把数据集中在scope.data中
1、其它地方绑定只需要{data.row1.field1}这样指定绑定就好
2、我们可以不需要先data中的结构是怎么样子,根据绑定关系生成data的结构
3、大多数情况下我们取回来的数据就是一个返回result,我们直接赋值给scope.data即可,不需要hello1.value = result.name , grid1.data = result.list;这样的处理。
4、我们需要提交数据时,也只需要从data中取即可,非常方便

当然对于普通的标签,我们也是可以绑定的

1
<div [title]="{data.title}" [text]="{data.text}" [onclick]="search1.searchClick" ></div>

这样一来,我们的代码可能就会集中在controller的一些方法当前中了,我们在controller中可以直接获取到每个控件实例,可以直接访问控件的各个属性即可实现交互。

当然如果有绑定到data数据中,直接操作数据也可以实现ui交互了。

五、结束语

目前只是把我的想法记录起来,有很多问题可能还没具体想清楚,现在自己先实现了一个简易的版本,等我先折腾出一个0.1的版本放到github上,如果有兴趣的朋友,可以加入一起设计构思及开发。大家有好的想法,意见建议欢迎给我留言。

  • << Ruby快速入门
  • WP开发的前景 >>
  • 作者:
    除非注明,本文原创:知道91,欢迎转载!转载请以链接形式注明本文地址,谢谢。
    原文链接:http://www.zhidao91.com/web-think/

    相关文章 近期热评 最新文章

    • 使用微信JDK实现微信接口签名验证
      要使用微信的接口必须在绑定的域名下测试;签名必须先向微信请求到access_token,然后用access_token再去请求jsapi_ticket,最后用jsapi_ticket和相关的参数按照ASCII码...
    • oracle数据库相关操作注意事项
      修改Oracle SGA(共享内存) 很多网站说修改Oracle的内存通过命令 如果你这么做了,那么恭喜你,你的Oracle数据库无法启动了。如果你已经这么做了,恢复Oracle启动的方...
    • oracle数据库相关操作注意事项
      修改Oracle SGA(共享内存) 很多网站说修改Oracle的内存通过命令 如果你这么做了,那么恭喜你,你的Oracle数据库无法启动了。如果你已经这么做了,恢复Oracle启动的方...
    • 使用微信JDK实现微信接口签名验证
      要使用微信的接口必须在绑定的域名下测试;签名必须先向微信请求到access_token,然后用access_token再去请求jsapi_ticket,最后用jsapi_ticket和相关的参数按照ASCII码...
    • ABP开发指南系列教程(2) – 多层架构...
      为了减少复杂性和提高代码的可重用性,采用分层架构是一种被广泛接受的技术。为了实现分层的体系结构,ABP遵循DDD(领域驱动设计)的原则,将工程分为四个层: 展现层(...
    • ABP开发指南系列教程(1) – 入...
      ABP是“ASP.NET Boilerplate Project (ASP.NET样板项目)”的简称。 ASP.NET Boilerplate是一个用最佳实践和流行技术开发现代WEB应用程序的新起点,它旨在成为一个通用的WE...
    • Windows下 JIRA + Agile + Mysql 破解...
      本文讲述了Windows下 JIRA + Agile + Mysql 破解安装示例教程
    • c#类的构造函数继承关系示例剖析
      本文通过示例代码讲解了c#子类的构造函数与父类的关系,子类怎样集成父类的构造函数的。