基本功能
最简陋的写法: 全局函数全局变量写法
<meta charset="utf-8"> <title>test</title> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script> $(function() { var input = $(‘#J_input‘); //用来获取字数 function getNum(){ return input.val().length; } //渲染元素 function render(){ var num = getNum(); //没有字数的容器就新建一个 if ($(‘#J_input_count‘).length == 0) { input.after(‘<span id="J_input_count"></span>‘); }; $(‘#J_input_count‘).html(num+‘个字‘); } //监听事件 input.on(‘keyup‘,function(){ render(); }); //初始化,第一次渲染 render(); }) </script> <input type="text" id="J_input">
这段代码跑也是可以跑的,但是没有很好的隔离作用域,当页面变的复杂的时候,会很难去维护。
作用域隔离: 使用单个变量模拟命名空间
var textCount = { input:null, init:function(config){ this.input = $(config.id); this.bind(); //这边范围对应的对象,可以实现链式调用 return this; }, bind:function(){ var self = this; this.input.on(‘keyup‘,function(){ self.render(); }); }, getNum:function(){ return this.input.val().length; }, //渲染元素 render:function(){ var num = this.getNum(); if ($(‘#J_input_count‘).length == 0) { this.input.after(‘<span id="J_input_count">0个字</span>‘); }; $(‘#J_input_count‘).html(num+‘个字‘); } } $(function() { //在domready后调用 textCount.init({id:‘#J_input‘}).render(); })
这样一改造,立马变的清晰了很多,所有的功能都在一个变量下面。代码更清晰,并且有统一的入口调用方法。但是还是有些瑕疵,这种写法没有私有的概念,比如上面的getNum,bind应该都是私有的方法。但是其他代码可以很随意的改动这些。当代码量特别特别多的时候,很容易出现变量重复,或被修改的问题。于是又出现了一种函数闭包的写法:
var TextCount = (function(){ //私有方法,外面将访问不到 var _bind = function(that){ that.input.on(‘keyup‘,function(){ that.render(); }); } var _getNum = function(that){ return that.input.val().length; } var TextCountFun = function(config){ } TextCountFun.prototype.init = function(config) { this.input = $(config.id); _bind(this); return this; }; TextCountFun.prototype.render = function() { var num = _getNum(this); if ($(‘#J_input_count‘).length == 0) { this.input.after(‘<span id="J_input_count"></span>‘); }; $(‘#J_input_count‘).html(num+‘个字‘); }; //返回构造函数 return TextCountFun; })(); $(function() { new TextCount().init({id:‘#J_input‘}).render(); })
这种写法,把所有的东西都包在了一个自动执行的闭包里面,所以不会受到外面的影响,并且只对外公开了TextCountFun构造函数,生成的对象只能访问到init,render方法。这种写法已经满足绝大多数的需求了。事实上大部分的jQuery插件都是这种写法。
面向对象
上面的写法已经可以满足绝大多数需求了。但是当一个页面特别复杂,当我们需要的组件越来越多,当我们需要做一套组件。仅仅用这个就不行了。首先的问题就是,这种写法太灵活了,写单个组件还可以。如果我们需要做一套风格相近的组件,而且是多个人同时在写。面向对象一直是被认为最佳的编写代码方式。就是因为把面向对象发挥到了极致,所以多个人写出来的代码都很接近,维护也很方便。但是很不幸的是,javascript不支持class类的定义。但是我们可以模拟。先实现个简单的javascript类:
var Class = (function() { var _mix = function(r, s) { for (var p in s) { if (s.hasOwnProperty(p)) { r[p] = s[p] } } } var _extend = function() { //开关 用来使生成原型时,不调用真正的构成流程init this.initPrototype = true var prototype = new this() this.initPrototype = false var items = Array.prototype.slice.call(arguments) || [] var item //支持混入多个属性,并且支持{}也支持 Function while (item = items.shift()) { _mix(prototype, item.prototype || item) } // 这边是返回的类,其实就是我们返回的子类 function SubClass() { if (!SubClass.initPrototype && this.init) this.init.apply(this, arguments)//调用init真正的构造函数 } // 赋值原型链,完成继承 SubClass.prototype = prototype // 改变constructor引用 SubClass.prototype.constructor = SubClass // 为子类也添加extend方法 SubClass.extend = _extend return SubClass } //超级父类 var Class = function() {} //为超级父类添加extend方法 Class.extend = _extend return Class })()
使用方法:
//继承超级父类,生成个子类Animal,并且混入一些方法。这些方法会到Animal的原型上。 //另外这边不仅支持混入{},还支持混入Function var Animal = Class.extend({ init:function(opts){ this.msg = opts.msg this.type = "animal" }, say:function(){ alert(this.msg+":i am a "+this.type) } }) //继承Animal,并且混入一些方法 var Dog = Animal.extend({ init:function(opts){ //并未实现super方法,直接简单使用父类原型调用即可 Animal.prototype.init.call(this,opts) //修改了type类型 this.type = "dog" } }) //new Animal({msg:‘hello‘}).say() new Dog({msg:‘hi‘}).say()
超级父类具有extend方法,可以继承出一个子类。子类也具有extend方法。这边要强调的是,继承的父类都是一个也就是单继承。但是可以通过extend实现多重混入
有了这个类的扩展,我们可以这么编写代码:
var TextCount = Class.extend({ init:function(config){ this.input = $(config.id); this._bind(); this.render(); }, render:function() { var num = this._getNum(); if ($(‘#J_input_count‘).length == 0) { this.input.after(‘<span id="J_input_count"></span>‘); }; $(‘#J_input_count‘).html(num+‘个字‘); }, _getNum:function(){ return this.input.val().length; }, _bind:function(){ var self = this; self.input.on(‘keyup‘,function(){ self.render(); }); } }) $(function() { new TextCount({ id:"#J_input" }); })
抽象出base
大部分组件都会有
- 比如init用来初始化属性。
- 比如render用来处理渲染的逻辑。
- 比如bind用来处理事件的绑定。
这也是一种约定俗成的规范了。如果大家全部按照这种风格来写代码,开发大规模组件库就变得更加规范,相互之间配合也更容易。这个时候面向对象的好处就来了,我们抽象出一个Base类。其他组件编写时都继承它。
var Base = Class.extend({ init:function(config){ //自动保存配置项 this.__config = config this.bind() this.render() }, //可以使用get来获取配置项 get:function(key){ return this.__config[key] }, //可以使用set来设置配置项 set:function(key,value){ this.__config[key] = value }, bind:function(){ }, render:function() { }, //定义销毁的方法,一些收尾工作都应该在这里 destroy:function(){ } })
base类主要把组件的一般性内容都提取了出来,这样我们编写组件时可以直接继承base类,覆盖里面的bind和render方法。
var TextCount = Base.extend({ _getNum:function(){ return this.get(‘input‘).val().length; }, bind:function(){ var self = this; self.get(‘input‘).on(‘keyup‘,function(){ self.render(); }); }, render:function() { var num = this._getNum(); if ($(‘#J_input_count‘).length == 0) { this.get(‘input‘).after(‘<span id="J_input_count"></span>‘); }; $(‘#J_input_count‘).html(num+‘个字‘); } }) $(function() { new TextCount({ //这边直接传input的节点了,因为属性的赋值都是自动的。 input:$("#J_input") }); })
可以看到我们直接实现一些固定的方法,bind,render就行了。其他的base会自动处理(这里只是简单处理了配置属性的赋值)。事实上init,bind,render就已经有了点生命周期的影子,但凡是组件都会具有这几个阶段,初始化,绑定事件,以及渲染。当然这边还可以加一个destroy销毁的方法,用来清理现场。此外为了方便,这边直接变成了传递input的节点。因为属性赋值自动化了,一般来说这种情况下都是使用getter,setter来处理。
引入事件机制(观察者模式)
如果我们希望输入字的时候超过5个字就弹出警告。该怎么办呢。小白可能会说,那简单啊直接改下bind方法
var TextCount = Base.extend({ ... bind:function(){ var self = this; self.get(‘input‘).on(‘keyup‘,function(){ if(self._getNum() > 5){ alert(‘超过了5个字了。。。‘) } self.render(); }); }, ... })
的确也是一种方法,但是太low了,代码严重耦合。当这种需求特别特别多,代码会越来越乱。这个时候就要引入事件机制,也就是经常说的观察者模式。
所以这分为两个部分,一个是通知,一个是监听。假设通知是 fire方法,监听是on。
var TextCount = Base.extend({ ... bind:function(){ var self = this; self.get(‘input‘).on(‘keyup‘,function(){ //通知,每当有输入的时候,就报告出去。 self.fire(‘Text.input‘,self._getNum()) self.render(); }); }, ... }) $(function() { var t = new TextCount({ input:$("#J_input") }); //监听这个输入事件 t.on(‘Text.input‘,function(num){ //可以获取到传递过来的值 if(num>5){ alert(‘超过了5个字了。。。‘) } }) })
fire用来触发一个事件,可以传递数据。而on用来添加一个监听。这样组件里面只负责把一些关键的事件抛出来,至于具体的业务逻辑都可以添加监听来实现。没有事件的组件是不完整的。
//辅组函数,获取数组里某个元素的索引 index var _indexOf = function(array,key){ if (array === null) return -1 var i = 0, length = array.length for (; i < length; i++) if (array[i] === item) return i return -1 } var Event = Class.extend({ //添加监听 on:function(key,listener){ //this.__events存储所有的处理函数 if (!this.__events) { this.__events = {} } if (!this.__events[key]) { this.__events[key] = [] } if (_indexOf(this.__events,listener) === -1 && typeof listener === ‘function‘) { this.__events[key].push(listener) } return this }, //触发一个事件,也就是通知 fire:function(key){ if (!this.__events || !this.__events[key]) return var args = Array.prototype.slice.call(arguments, 1) || [] var listeners = this.__events[key] var i = 0 var l = listeners.length for (i; i < l; i++) { listeners[i].apply(this,args) } return this }, //取消监听 off:function(key,listener){ if (!key && !listener) { this.__events = {} } //不传监听函数,就去掉当前key下面的所有的监听函数 if (key && !listener) { delete this.__events[key] } if (key && listener) { var listeners = this.__events[key] var index = _indexOf(listeners, listener) (index > -1) && listeners.splice(index, 1) } return this; } }) var a = new Event() //添加监听 test事件 a.on(‘test‘,function(msg){ alert(msg) }) //触发 test事件 a.fire(‘test‘,‘我是第一次触发‘) a.fire(‘test‘,‘我又触发了‘) a.off(‘test‘) a.fire(‘test‘,‘你应该看不到我了‘)
如果我们希望base拥有事件机制:
var Base = Class.extend(Event,{ ... destroy:function(){ //去掉所有的事件监听 this.off() } }) //于是可以 //var a = new Base() // a.on(xxx,fn) // // a.fire()
到这里为止,我们的base类已经像模像样了,具有了init,bind,render,destroy方法来表示组件的各个关键过程,并且具有了事件机制。基本上已经可以很好的来开发组件了。
更进一步,richbase
还差些什么。首先浏览器的事件监听还很落后,需要用户自己在bind里面绑定,再然后现在的TextCount里面还存在dom操作,也没有自己的模板机制。这都是需要扩展的,于是我们在base的基础上再继承出一个richbase用来实现更完备的组件基类。主要实现这些功能:
- 事件代理:不需要用户自己去找dom元素绑定监听,也不需要用户去关心什么时候销毁。
- 模板渲染:用户不需要覆盖render方法,而是覆盖实现setUp方法。可以通过在setUp里面调用render来达到渲染对应html的目的。
- 单向绑定:通过setChuckdata方法,更新数据,同时会更新html内容,不再需要dom操作。
var TextCount = RichBase.extend({ //事件直接在这里注册,会代理到parentNode节点,parentNode节点在下面指定 EVENTS:{ //选择器字符串,支持所有jQuery风格的选择器 ‘input‘:{ //注册keyup事件 keyup:function(self,e){ //单向绑定,修改数据直接更新对应模板 self.setChuckdata(‘count‘,self._getNum()) } } }, //指定当前组件的模板 template:‘<span id="J_input_count"><%= count %>个字</span>‘, //私有方法 _getNum:function(){ return this.get(‘input‘).val().length || 0 }, //覆盖实现setUp方法,所有逻辑写在这里。最后可以使用render来决定需不需要渲染模板 //模板渲染后会append到parentNode节点下面,如果未指定,会append到document.body setUp:function(){ var self = this; var input = this.get(‘parentNode‘).find(‘#J_input‘) self.set(‘input‘,input) var num = this._getNum() //赋值数据,渲染模板,选用。有的组件没有对应的模板就可以不调用这步。 self.render({ count:num }) } }) $(function() { //传入parentNode节点,组件会挂载到这个节点上。所有事件都会代理到这个上面。 new TextCount({ parentNode:$("#J_test_container") }); }) /**对应的html,做了些修改,主要为了加上parentNode,这边就是J_test_container <div id="J_test_container"> <input type="text" id="J_input"> </div> */
richebase的实现
var RichBase = Base.extend({ EVENTS:{}, template:‘‘, init:function(config){ //存储配置项 this.__config = config //解析代理事件 this._delegateEvent() this.setUp() }, //循环遍历EVENTS,使用jQuery的delegate代理到parentNode _delegateEvent:function(){ var self = this var events = this.EVENTS || {} var eventObjs,fn,select,type var parentNode = this.get(‘parentNode‘) || $(document.body) for (select in events) { eventObjs = events[select] for (type in eventObjs) { fn = eventObjs[type] parentNode.delegate(select,type,function(e){ fn.call(null,self,e) }) } } }, //支持underscore的极简模板语法 //用来渲染模板,这边是抄的underscore的。非常简单的模板引擎,支持原生的js语法 _parseTemplate:function(str,data){ /** * http://ejohn.org/blog/javascript-micro-templating/ * https://github.com/jashkenas/underscore/blob/0.1.0/underscore.js#L399 */ var fn = new Function(‘obj‘, ‘var p=[],print=function(){p.push.apply(p,arguments);};‘ + ‘with(obj){p.push(\‘‘ + str .replace(/[\r\t\n]/g, " ") .split("<%").join("\t") .replace(/((^|%>)[^\t]*)‘/g, "$1\r") .replace(/\t=(.*?)%>/g, "‘,$1,‘") .split("\t").join("‘);") .split("%>").join("p.push(‘") .split("\r").join("\\‘") + "‘);}return p.join(‘‘);") return data ? fn(data) : fn }, //提供给子类覆盖实现 setUp:function(){ this.render() }, //用来实现刷新,只需要传入之前render时的数据里的key还有更新值,就可以自动刷新模板 setChuckdata:function(key,value){ var self = this var data = self.get(‘__renderData‘) //更新对应的值 data[key] = value if (!this.template) return; //重新渲染 var newHtmlNode = $(self._parseTemplate(this.template,data)) //拿到存储的渲染后的节点 var currentNode = self.get(‘__currentNode‘) if (!currentNode) return; //替换内容 currentNode.replaceWith(newHtmlNode) self.set(‘__currentNode‘,newHtmlNode) }, //使用data来渲染模板并且append到parentNode下面 render:function(data){ var self = this //先存储起来渲染的data,方便后面setChuckdata获取使用 self.set(‘__renderData‘,data) if (!this.template) return; //使用_parseTemplate解析渲染模板生成html //子类可以覆盖这个方法使用其他的模板引擎解析 var html = self._parseTemplate(this.template,data) var parentNode = this.get(‘parentNode‘) || $(document.body) var currentNode = $(html) //保存下来留待后面的区域刷新 //存储起来,方便后面setChuckdata获取使用 self.set(‘__currentNode‘,currentNode) parentNode.append(currentNode) }, destroy:function(){ var self = this //去掉自身的事件监听 self.off() //删除渲染好的dom节点 self.get(‘__currentNode‘).remove() //去掉绑定的代理事件 var events = self.EVENTS || {} var eventObjs,fn,select,type var parentNode = self.get(‘parentNode‘) for (select in events) { eventObjs = events[select] for (type in eventObjs) { fn = eventObjs[type] parentNode.undelegate(select,type,fn) } } } })
结语
有了richbase,基本上组件开发就没啥问题了。但是我们还是可以继续深挖下去。
比如组件自动化加载渲染,局部刷新,比如父子组件的嵌套,再比如双向绑定,再比如实现ng-click这种风格的事件机制。
当然这些东西已经不属于组件里面的内容了。再进一步其实已经是一个框架了。实际上最近比较流行的react,ploymer还有我们的brix等等都是实现了这套东西。
参考:
http://www.devtoutiao.com/t?url=http://t.cn/RGn8ZtE
https://github.com/purplebamboo/demo-richbase