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,供参考

巴特西

javascript组件开发

最新文章

热门文章