Js插件开发

/**
 * 节点配置属性方式配置参数：专业的做法是配置到，每一个需要初始化为插件的那个html标签的属性上面(这个属性的value必须是标准的json字符串)，
 * 这样做的好处是，当存在多个需要初始化为插件的标签时，可以配置各自想要的参数
 * 例如：<div data-setting="{‘param1‘:1,‘param2‘:2}"></div>
 * Created by TonyZeng on 2016/7/6.
 */
//前面的这个分号，用于避免其他插件没有分号闭合导致在压缩代码后导致语法的错误。
;
(function ($) {
    /**这里相当于一个构造函数，当new AreaListBox(fitlerAreaBox)时，就会传递参数过来
     * 不过，我们没有采用new的方式来初始化插件，我们定义了一个init方法来初始化，在init方法中，我们用的其实也就是这个
     * 构造函数来初始化，init里面用each来循环初始化，将div节点对象（this）指针作为参数传入构造函数的参数列表
     */
    var AreaListBox = function (divFitlerAreaBox) {
        //保存节点对象，（获取自定义配置）getSetting方法会用它来获取节点里面的属性，比如自定义配置属性
        this.divAreaBox = divFitlerAreaBox;

        //默认配置
        this.setting = {"param1": 1, "param2": 2};
        //用自定义配置merge默认配置
        $.extend(this.setting,this.getSetting());

        //事件委托
        this.bodyNode.delegate(".filterArea", "click", function (e) {
            //弹出area选择panel
            showFilterAreaPanel();
            //阻止事件冒泡出现(冒泡事件)
            e.stopPropagation();
        });


    };
    AreaListBox.prototype = {
        //获取自定义配置
        getSetting: function () {
            var setting = this.divAreaBox.attr("data-setting");
            //如果这个节点属性存在，并且不为空的话就转成json对象传出去
            if (setting && setting != null) {
                return $.parseJSON(setting);
            } else {
                return {};
            }
        },
        showFilterAreaMask: function () {

        },
        selectedArea: function () {

        },
        renderArea: function () {

        }
    };
    //（当页面有多个地方需要初始化成插件时）为了避免用new的方式来初始化插件的繁琐，我们用一个init方法来专门处理初始化
    AreaListBox.init = function (list) {
        //这个this指向AreaListBox插件对象
        var _this_ = this;
        //用each循环初始化传入的元素为插件
        list.each(function () {
            //这个this指向each循环里面的元素对象
            new _this_(this);
        });
    };
    //全局注册
    Window["AreaListBox"] = AreaListBox;
})(jQuery);
$(function () {
    AreaListBox.init($(".AreaListBox"));
});