jquery插件开发

Jquery插件开发

固定写法

//；  是为了合并的时候不出错$代表 Jquery ,window, document其实是局部变量,undefined形参
;(function ($, window, document, undefined) {
    var pluginName = "testPluginName";  //插件名字
    // 默认参数可以自定义
    var defaults = {
        id: "",
        title: "",
    };

    // 插件的构造方法  参数一:      参数二:传递过来的参数
    var MyPlugin = function (element, options) {
        this.element = element;    //使用this.  将其变为 插件对象的内部属性变量，可在内部全局使用
        // 将默认参数 和传递参数 合并
        this.options = $.extend({
            id: "",
            title: "",
        }, defaults, options);
        this._defaults = defaults;
        this.entity = null;
        this._name = pluginName;
        this.init(options);     //初始化方法
    };

    // initialize the plugin internal element  用来初始化界面布局内容
    MyPlugin.prototype.init = function (options) {
        var main = document.createElement("DIV");
        this.element.appendChild(main);

        var testDiv = document.createElement("DIV");
        main.appendChild(testDiv);
		//添加监听 参数 监听类型，监听对象，是否捕获
		this.mySelect.addEventListener("change", this, false);

        this.load(options);
    };

    // ajax请求成功返回数据
    MyPlugin.prototype.load = function (options) {

    };

    // set entity, it will be used to set data into the plugin. 设置插件显示名字(可以子啊f12 中显示)
    MyPlugin.prototype.setEntity = function (entity) {
        this.entity = entity;
    };

    // get entity from the plugin for external usage.  获取名字
    MyPlugin.prototype.getEntity = function (entity) {
        return this.entity;
    };

	//监听事件
    MyPlugin.prototype.handleEvent = function(e) {
        switch (e.type) {   //获取事件类型
            case "change":
                this.doChange(e);  //执行对应方法
                break;
        }
    };

    MyPlugin.prototype.doChange = function(evt) {
        if (evt.target == this.mySelect) {
            console.log(this.mySelect.selectedIndex);
        }
    };

	//插件入口 类似于JAVA中单利模式 只产生一个 实例，并返回 可以使用 $().data 获取到对象数据
    $.fn[pluginName] = function (options) {
        return this.each(function () {
            if (!$.data(this, pluginName)) {
                $.data(this, pluginName, new MyPlugin(this, options));
            } else if ($.isFunction(Plugin.prototype[options])) {
                $.data(this, pluginName)[options]();
            }
        });
    };

})(jQuery, window, document);