浅析 JavaScript 组件编写

之前因项目需要也编写过一些简单的JS组件，大多是基于JQuery库的，一直也没有过总结，导致再次写到的时候还去Google， 近日看到一个文章总结的挺好，拿过整理一下做个备忘。

 

此次同样是基于jquery库来开发，根据一个例子来循序渐进地说明。

了解AngularJs的同学知道，其最具魅力的特点莫过于双向绑定，那么我们今天也来实现一个双向绑定的组件，在一个text文本框后面显示输入的文本内容。

 <大概长这个模样>

 

1. 常规实现思路　　　

<input id="txt-con" type="text" />
<script>
    $(function(){
        var textInput = $("#txt-con");
        textInput.bind('keyup', function(){
            if (textInput.val()) {
                appendText(this, textInput.val());    
            }
        });

        var appendText = function(target, content) {
            var id = target.id + "-present";
            if ($("#" + id).length > 0) {
                $("#" + id).text(content);
            } else {
                $(target).after("<h2 id='"+id+"'>"+content+"</h2>");
            }
        }
    })         
</script>

 

　以上代码可以妥妥的跑，达到预期的目的。但是细心的你会发现，我们的完全没有考虑作用域的问题，appendText 方法被暴露在全局作用域里面，如果这一个页面中有几十上百个这样的全局变量，那维护起来会疯掉。

 

2. “隔离”作用域

我们现在对上面的代码进行一些修改，引入一个单独的命名空间。

var TextPresenter = {
    init: function(id){
        var textInput = $(id);
        var self = this;
        textInput.bind("keyup", function() {
            if(textInput.val()) {
                self.appendText(this, textInput.val());    //注意这里的self变量，是将TextPresenter对象的引用赋给了self
            }
        })
    },

    appendText: function(target, content){
        var id = target.id + "-present";
        if ($("#" + id).length > 0) {
            $("#" + id).text(content);
        } else {
            $(target).after("<h2 id='"+id+"'>"+content+"</h2>");
        }
    },
} //以上部分你可以写进一个单独的js文件了，如jquery.textpresenter.js， 别忘了在document ready后初始化

　　$(function(){
　　　　TextPresenter.init("#txt-con");

　　})

 

以上部分有点组件的雏形了不是，很多时候就这样被拿来用了，如果你再细细一想，好像有哪里不对，因为 TextPresenter 里面的所有成员变量都可以在外部被访问，而没有一点私有化的概念在里面。所以，说是隔离其实并没有真正隔离，只是看起来像是隔离了。

3. 真正隔离作用域

说到作用域的隔离，我们不得不引入闭包的概念了。曾经看了多少遍闭包的概念，然而实际用到的机会少之又少。借此也来实践一下闭包的基础知识。

var TextPresenter = (function(){
    var appendText = function(target, content) { //此方法成了私有化方法，外部不可直接访问
        var id = target.id + "-present";
        if ($("#" + id).length > 0) {
            $("#" + id).text(content);
        } else {
            $(target).after("<h2 id='"+id+"'>"+content+"</h2>");
        } 
    };

    var TextPresenterFun = function() {
        this.init = function(id) {
            var textInput = $(id);
            textInput.bind("keyup", function() {
                if(textInput.val()) {
                    appendText(this, textInput.val());    
                }
            })
        }
    };

    return TextPresenterFun; //返回构造函数，在调用此组件时需要实例化，然后调用init方法

})();


　　new TextPresenter().init("#txt-con"); //调用的过程

 

这种方式可以创建必要的私有方法，对外开放的只有init方法，具体的内部逻辑并不对外开放，满足我所要求的隔离作用域的需求。事实上，大多数的jQuery组件都是这么实现的。

 

先写这么多吧，都是些基础，作为一个入门，要走的路还长着啊。