标签交互与创建jquery组件

通过原生html+css就可以写出基本的组件,比如select,很简单就可以写一个符合标准的组件

        <select name="name" class="form-control">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
            <option value="4">4</option>
        </select>

我做了很长时间java程序猿,配合jsp中的jstl,很简单的创建原生的html,再加上原生的事件,一个页面直接手工

但如果抛开后端生成html的能力,由js生成html,情况产生了微妙的变化

        <select id="name" class="form-control">
        </select>
        <script type="text/javascript">
            var data=[{
                text:1,
                value:1
            },{
                text:2,
                value:2
            },{
                text:3,
                value:3
            },{
                text:4,
                value:4
            }];
            for(var i=0;i<data.length;i++){
                $("#name").append(" <option value='"+data[i].value+"'>"+data[i].text+"</option>")
            }
        </script>

js只赋予html交互的能力,并没有对html进行增强,他对html标签的增强仅限于此,出于复用的方式,我们需要对js组件化(如果设计到select,table,html这些标签,我更愿意叫脚本化标签)

出于复用的目的,写一个简单的jquery插件

        <select id="name" class="form-control">
        </select>
        <script type="text/javascript">
            
        $("#name").combobox({
            data:data
        })
        
    //丢到    <script src="">中
    (function($){
        function creatr(jq,data){
            for(var i=0;i<data.length;i++){
               jq.append(" <option value='"+data[i].value+"'>"+data[i].text+"</option>")
            }
        }
        //只处理单个jq,多个jq需要包裹一层jq.each
        $.fn.combobox=function(options){
            creatr(options.data)
        }
    })($)
        
        </script>

这样用起来就简单多了,他现在还很脆弱,任何一个小需求都能整死他,至少他缺少事件的能力,从对象角度看标签完全具有属性,方法和事件,我们的小组件也缺乏这三样基本能力

属性能力

传递过去的参数及其展示的参数的保存位置,有很多地方可以去保存,最简单的就是直接赋值给组件,没有被复用的属性将会极大的消耗性能,至少目前都会选择使用数据存储的方式对组件的属性进行保存,而非直接赋值(对属性的处理,算是js比较特殊的地方),jquery的数据存储方式也是比较流行的方式(这有两种实现,这些实现也都是为了解决组件属性存放问题的解决方案)

        //这是一种最为粗暴的方式,原因参考数据存储
        $.fn.combobox=function(options){
            this.options=options;
        }
        
        //jquery的解决方案,需要的时候    $(this).data("options")
        $.fn.combobox=function(options){
            $(this).data("options",options);
        }

方法能力

必须至于原形之中,用于方法的共享,如果使用原形,就得注意内部使用new创建,$().combobox()后,可以直接使用方法

    (function($){

         function Combobox(options){
             //除了简单必要的属性至于this中,大多数属性还丢到其相关标签的$().data中
             this.options=options;
             this.create(options.data)
         }
        
        Combobox.prototype.getValue=function(){
                return     this.options;
        }
        
        Combobox.prototype.create(data){
            for(var i=0;i<data.length;i++){
               jq.append(" <option value='"+data[i].value+"'>"+data[i].text+"</option>")
            }
        }
        $.fn.combobox=function(options){
            //流行的无new创建组件
            return new Combobox(options);
        }
          $.fn.combobox.Constructor = Combobox
        
    })($)

当然也可以将方法直接负载构造方法上,而后提供一个统一的入口(一般就是构造方法),进行方法的调用,这种方式没有new,看似也没有原形,使用了js中一切都是对象,一切都可以赋值的特性,除了重写$.fn.combobox比较麻烦外(你会把method给干掉),完全无死角

    (function($){
        function create(jq,data){
            for(var i=0;i<data.length;i++){
               jq.append(" <option value='"+data[i].value+"'>"+data[i].text+"</option>")
            }
        }

    
        $.fn.combobox=function(options){
            if(typeof options === "string"){
                $(this).data("options",options);
                return     create(this.options)
            }
            var method=$.fn.combobox.method[options]
            method||method()
        }
        
        $.fn.combobox.method={
            getOptions:function(jq){
                return     $(this).data("options");
            }
        }
    })($)

事件能力

事件能力必须依赖于构建对象时的绑定,他是一个方法,只是绑到了原生方法中,会由系统调用,并传递参数,仅此而已(可以的话我想说,这就是实现了一个系统级的接口,你可以调用,但你无法保证参数的质量)

    (function($){
        function create(jq,data){
            for(var i=0;i<data.length;i++){
               jq.append(" <option value='"+data[i].value+"'>"+data[i].text+"</option>")
            }
        }
        
        function bind(jq,options){
            if(options.onSelect){
                options.onBeforeSelect(jq);
                jq.on("select",options.onSelect);
                options.onAfterSelect(jq);
            }
            
        }
    
        $.fn.combobox=function(options){
            if(typeof options === "string"){
                $(this).data("options",options);
                     create(this.options)
                     bind(this,options)
                     return
            }
            var method=$.fn.combobox.method[options]
            method||method()
        }
        
        $.fn.combobox.method={
            getOptions:function(jq){
                return     $(this).data("options");
            }
        }
    })($)

好了,将它们实现,我们第一个jquery组件也就诞生了,回头在看一下实现,这个组件只是对select这个html标签,脚本化,我们可以使用js动态且方便的生成原生的html标签,优势在于原生,缺点在于没有增强,需要checkbox的需求就能搞死你(我一直认为checkbox+select完全无意义,浪费cpu),再来一个select+tree,估计得疯掉一票...这个时候就不得不对这个组件进行增强,比如这里,我们在其内部可能会使用div甚至ul进行实现,而非传统的select(这正好也解释了为什么是combobox而非select)

使用增强的方式可以实现更多的酷炫功能,遗憾的是每个组件实现的思路完全不一致,这会限制组件的结构,这种结构也会反过来影响css,原生的标签很容易替换css,而增强过的标签很难更换一个皮肤,除非你很熟悉这种组件结构

可以的话,我只想将标准的标签进行脚本化(放在html上纯原生,即只做标签的交互),以方便我应付不同的UI,否则,即使组件化的封装减化了功能实现,超蛋疼的皮肤修改也会让人菊紧一整天