javascript组件开发

最近忙于重构项目，今天周末把在重构中的一些思想记记：

一、javascript的组件开发：基类的封装

由于这次重构项目需要对各种组件进行封装，并且这些组件的实现方式都差不多，所以想到对组件封装一个base基类(javascript没有类的概念，暂且这样叫把)，由于javascript没有原生的类和继承的实现，所以我们首先需要对javascript简单的实现以下类和继承(见一下代码注释实现方案改于jq作者John Resig)：

 //javascript简单的实现类和继承
 var Class = (function() {
   //模拟extend继承方式
   var _extend = function() {
     //属性混入函数,不混入原型上的属性,原型上的属性就多了哈
     var _mixProto = function(base, extend) {
       for (var key in extend) {
         if (extend.hasOwnProperty(key)) {
           base[key] = extend[key];
         }
       }
     };
     //这里是一个开关,目的是为了在我们继承的时候不调用父类的init方法渲染，而把渲染放在子类
     //试想没这个开关,如果在继承的时候父类有init函数就会直接渲染,而我们要的效果是继承后的子类做渲染工作
     this.initializing = true;
     //原型赋值
     var prototype = new this();
     //开关打开
     this.initializing = false;
     //for循环是为了实现多个继承,例如Base.extend(events,addLog)
     for (var i = 0,len = arguments.length; i < len; i++) {
       //把需要继承的属性混入到父类原型
       _mixProto(prototype, arguments[i].prototype||arguments[i]);
     }
     //继承后返回的子类
     function SonClass() {
       //检测开关和init函数的状态,看是否做渲染动作
       if (!SonClass.initializing && this.init)
         //调用返回的子类的init方法渲染,把传给组件的配置参数传给init方法
         this.init.apply(this, arguments);
     }
     //把混入之后的属性和方法赋值给子类完成继承
     SonClass.prototype = prototype;
     //改变constructor引用,不认子类的构造函数将永远是Class超级父类
     SonClass.prototype.constructor = SonClass;
     //给子类页也添加继承方法,子类也可以继续继承
     SonClass.extend = arguments.callee;//也可以是_extend
     //返回子类
     return SonClass
   };
   //超级父类
   var Class = function() {};

   Class.extend = _extend;
   //返回超级父类
   return Class
 })();

有了上面的代码，我们就可以这样做了：

var Base = Class.extend({
  init : function(__config) {
    this.creatDom(__config)
    this.bind(__config)
  },
  creatDom : function(config) {},
  bind : function(config) {},
  getVal : function() {},
  setVal : function() {}
})

然后如果我们有100个组件，我们可以这样:

 var mod1 = Base.extend({
 //组件独有的方法
 });
 //传入配置参数渲染mod1
 var mod1 = new mod1(__config);

以上就实现了基类的封装，then

二、javascript的组件开发：组件交互

我们知道组件交互的东西是非常头疼的，组件交互可能涉及到两个，多个(比如标题的自动补全，区域的自动匹配等等)，下面说说具体实现

有了上面的超级父类Class，现在组件间交互的实现如下：

 //定义事件交互对象(模仿jq的Callbacks的源码实现方案)
 var Event = {
   //内部方法,找出数组里某个元素的索引index
   _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
   },
   //添加事件监听
   add:function(key,listener){
     //定义组件有哪些事件,每个时间的处理函数
     if (!this.__events) {
       this.__events = {}
     }
     //监听的事件如果在组件上已经有了则不做监听
     if (!this.__events[key]) {
       this.__events[key] = []
     }
     //对监听的事件push处理函数
     //注意同一个监听事件可能有多个处理函数(比如某一个组件完成是需要对不同的组件做不同的处理)
     if (this._indexOf(this.__events[key],listener) === -1 && typeof listener === 'function') {
       this.__events[key].push(listener)
     }
     //返回this可以继续执行组件对象的方法
     return this
   },
   //事件触发器
   fire:function(key){
     //检测是否存在监听事件
     if (!this.__events || !this.__events[key]) return
     //arguments转数组
     var args = [].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)
     }
     //返回this可以继续执行组件对象的方法
     return this
   },
   //解绑事件(取消监听)
   off:function(key,listener){
     //不传任何参数直接解绑所有监听事件和执行函数
     if (!key && !listener) {
       this.__events = {}
     }
     //不传具体执行函数,解绑该事件
     if (key && !listener) {
       delete this.__events[key]
     }
     //都存在时，只解绑当前绑定事件的处理函数
     if (key && listener) {
       var listenerfn = this.__events[key];
       var index = this._indexOf(listenerfn, listener)
       //这个是加特技,如果index > -1,则执行后面的操作(如果传入的key和listener能在this.__events里面匹配到则删掉它,ps:这里没做删除后数组为空的处理)
       (index > -1) && listenerfn.splice(index, 1)
     }
     //返回this可以继续执行组件对象的方法
     return this;
   }
 };
 //让子类都拥有事件监听
 var Base = Class.extend(Event);

有了上面的Base子类(相对于超级父类Class来说):then 下面简单实现一个组件实现和两组间的交互：

 var mobile = Base.extend({
   init : function(opts){
     this.defaults = {
       type : "mobile",
       name : "Phone",
       title : "手机号",
       classname :"phoneNumber",
       prop : {placeholder : "请输入手机号码",issub : 1},
       notnull : true
     };
     this.options = $.extend(true, {}, this.defaults, opts);
     this.render(this.options);
     this.bind();
     this.setVal();
   },
   bind : function(fnObj){
     //some event
     var _this = this;
     //绑定finish事件blur等等
     if (fnObj) {
         _this.dom.on(fnObj);
     };
     _this.dom.on({'input': function(event) {
       var value = _this.getVal();
　　　　　//当这个组件input时去触发setTitle自定义监听的事件
       _this.fire("setTitle",value);
     }});
   },
   render : function(options){
     var domStr = "<li class='_item "+options.classname+"'><span class='mb_title'>"+options.title+"</span><div class='mb_itemtext'><input type='number' placeholder='"+options.prop.placeholder+"' id='"+options.name+"' name='"+options.name+"'></div><div class='errorTip "+options.name+"error"+"'><div class='errorTipDiv'></div>"+"<span></span>"+"</div></li>";
     var dom = $(domStr);
     this.dom = dom.find("input");
     if (options.notnull) {
         dom.appendTo(".notNullGroup");
     }else{
         dom.appendTo(".canNullGroup");
     }
   },
   getVal : function(){
     return this.dom.val()
   },
   setVal : function(){
     var val = detail[this.options.name];
     this.dom.val(val)
   }
 });
 var Phone = new mobile({
     type : "mobile",
     name : "Phone",
     title : "手机号",
     classname :"phoneNumber",
     prop : {placeholder : "输入手机号码",issub : 1},
     notnull : true
 });

上面实现了一个电话号码组件下面在实现一个标题组件：

 var text = Base.extend({
       init : function(opts){
         this.defaults = {
               type : "text",
               name : "Title",
               title : "标题",
               classname :"titleInput",
               prop : {placeholder : "请填写8-28字的标题",issub : 1},
               notnull : true
         };
         this.options = $.extend(true, {}, this.defaults, opts);
         this.render(this.options);
         this.bind();
         this.setVal();
       },
       bind : function(fnObj){
           if(fnObj){
             this.dom.on(fnObj)
         }
       },
       render : function(options){
         var domStr = "<li class='_item "+options.classname+"'><span class='tx_title'>"+options.title+"</span><div class='tx_itemtext'><input type='text' value='"+detail[options.name]+"' placeholder='"+options.prop.placeholder+"' id='"+options.name+"' name='"+options.name+"'></div><div class='errorTip "+options.name+"error"+"'><div class='errorTipDiv'></div>"+"<span></span>"+"</div></li>";
         var dom = $(domStr);
         this.dom = dom.find("input");
         if (options.notnull) {
             dom.appendTo(".notNullGroup");
         }else{
             dom.appendTo(".canNullGroup");
         }
     },
       getVal : function(){
         return this.dom.val()
       },
       setVal : function(value){
           if(value){
               this.dom.val(value)
           }else{
               var val = detail[this.options.name];
             this.dom.val(val)
           }
       }
 });
 var Title = new text({
   type : "text",
   name : "Title",
   title : "标题",
   classname :"titleInput",
   prop : {placeholder : "请填写8-28字的标题",issub : 1},
   notnull : true
 });
　　//这里是添加监听setTitle事件
51 Phone.add("setTitle",function(val){Title.setVal(val);});

OK 两个组件dom渲染实现 也简单的实现了组件交互

then：

实现了还不够，还要易于管理代码，这样做的话如果pm使劲加复杂的组件交互我们得累趴

then:

单拿出一个模块作为时间交互模块：

 detailObj["Phone"].bind({'input': function(event) {
   var value = detailObj["Phone"].getVal();
   detailObj["Phone"].fire("setTitle",value);
 }});
 detailObj["Phone"].add("setTitle",function(value){
   detailObj["Title"].setVal(value);
 });

OK上面的detailObj是一个所有组件的Map,用于查找实例化组件对象

这样我们就可以统一管理我们的时间交互模块了，需要加事件交互就可以往这里添加

 detailObj["Phone"].bind({'blur': function(event) {
   var value = detailObj["Phone"].getVal();
   detailObj["Phone"].fire("aaa",value);
 }});
 detailObj["Phone"].add("aaa",function(value){
   alert(value)
 });

三、javascript的组件开发：代码统一管理

上面是实现了基类的封装，我们的组件都可以继承父类的属性和方法，现在问题来了PM使劲加需求，什么错误日志、什么点击统计、什么组件交互啥的，我们就需要统一管理它们，要不然在组件内部封装好了，每次加需求都得动组件内部，是不是很想捶PM哇，这样我们就需要把日志统计、点击统计啥的单独封装模块，今天PM要下掉错误日志，把模块拿掉就是了，而不用动每个组件。

其实上面已经实现了简单的组件交互模块管理，下面看看一个简单的埋点统计clickLog模块的实现(线上的埋点统计好像是直接写在页面上的)

首先我们需要和上面的组件交互一样定义在Base里面为每个组件添加一个addLog对象

 var addLog = {
   //参数定义:(暂时只做了addLog,当然也需要delLog等不在这儿贴代码了)
   //type 需要统计日志类型click?load?change等等
   //targetDomArr 可以是数组,可以是单个元素 需要统计的组件对象的哪些Dom节点
   //fromName 统计日志传后台的参数
   addLog : function(type,targetDomArr,fromName){
     if($(targetDomArr).length > 1){
       for (var i = 0; i < targetDomArr.length; i++) {
         (function(i){
           var targetDom = $(targetDomArr[i]);
           targetDom.on(type,function(e){
             clickLog("from="+fromName[i]);
             //e.stopPropagation();
             //e.preventDefault();
           })
         })(i)
       }
     }else{
       targetDomArr.on(type,function(e){
         clickLog("from="+fromName);
         //e.stopPropagation();
         //e.preventDefault();
       })
     }
   }
 };
 var Base = Class.extend(Event,addLog);

这样我们每个组件对象都有一个addLog方法,需要统计啥就addLog就好了(当然像头尾并未封装成组件所以只能用$("xxx")绑定)，如下：

 define([],function(){
     var  _clickLog = function(detailObj){
         //日志统计,PM要多少写多少
         $(".h_regist").on("click",function(){clickLog("from=post_fill_regist")});
         $(".h_login").on("click",function(){clickLog("from=post_fill_login")});
         detailObj["imgUpload"].addLog("click",[$(".upload_action"),$(".upload_delete")],["post_fill_camera","post_fill_camera_del"]);
         detailObj["canNullSplit"].addLog("click",detailObj["canNullSplit"].dom,"post_fill_optional");
         detailObj["button"].addLog("click",$(".btn_post"),"post_fill_release");
     };
     return _clickLog;
 })

ok:上面简单的实现了一个addLog模块

then:

该休息了(大晚上的语言组织有误还望指正)

下面是一个简单的组件交互demo,供参考