首页 > 代码库 > jquery插件编写模版

jquery插件编写模版

2024-08-08 18:17:54   222人阅读

jquery插件是什么？？这里以讨论实力方法为主，比如 $("div").pluginname({});

他的最简单形势应该是

$.prototype.plugin = function(){}


我们一点点来加东西

1，自己的变量不污染全局，别人的变量不污染我们

(function($,undefined){var window = Function("return this")();//一定是window$.prototype.plugin = function(){ } )(jQuery)

　　

2,判断已加载或者处理其他附加数据，处理参数，实例化一个对象，实例化的方式不一定要new一个，你喜欢也可以拷贝一个，工厂一个等。。

        function plugin(element, options) {            var self = this;            self.element = element;            self.$element = $(element);            if (typeof options == "object") {                self.opts = $.extend({}, defaults, options);            }        }        $.fn[pluginName] = function (options, callback) {            var dataname = "plugin_" + pluginName;            $(this).each(function (index, item) {                var hasObject = $(item).data(dataname);                if (!hasObject) {                    var someobj = new plugin(item, options);                    $(item).data(dataname, someobj);                }            });        }        return $.fn[pluginName];

　　3，AMD CMD加载

    // 全局模式     var pluginobj = factory(jQuery);    //UMD    if (typeof exports === ‘object‘) {        module.exports = pluginobj;    }    //AMD    if (typeof define === "function" && define.amd) {        define(pluginName, ["jquery"], function () {            return pluginobj;        });    }    //CMD    if (typeof define === "function" && define.cmd) {        define(pluginName, [‘jquery‘], function (require, exports, module) {            var $ = require(‘jQuery‘);            module.exports = pluginobj;        });    }

　　全局模式是否开放取决于你的依赖项是否必然加载。

此时把原来的自执行外面再套一层，把原来的自执行改成普通方法改名为factory方法。

 
完整版：
(function () {    var window = Function("return this")();    var applicationPath = window.applicationPath === "" ? "" : window.applicationPath || "../..";    var pluginName = "mypluginname";    function factory($) {        "use strict";        if ($.isFunction($.fn[pluginName])) {            return $.fn[pluginName];        }        function plugin(element, options) {            var self = this;            self.element = element;            self.$element = $(element);            if (typeof options == "object") {                self.opts = $.extend({}, defaults, options);            }        }        $.fn[pluginName] = function (options, callback) {            //something like old jquery plugin            var dataname = "plugin_" + pluginName;            $(this).each(function (index, item) {                var hasObject = $(item).data(dataname);                if (!hasObject) {                    var someobj = new plugin(item, options);                    $(item).data(dataname, someobj);                }            });        }        return $.fn[pluginName];;    }    var loaded = false;    //UMD    if (typeof exports === ‘object‘) {        module.exports = factory();    }    //AMD    if (typeof define === "function" && define.amd) {        define(pluginName, ["jquery"], factory);        loaded = true;    }    //CMD    if (typeof define === "function" && define.cmd) {        define(pluginName, [‘jquery‘], function (require, exports, module) {            var $ = require(‘jQuery‘);            module.exports = factory($);        });    }    // other    if (!jQuery.xxx && jQuery.loadScript) {        $.loadScript("/scripts/plugins/xxx.js", function () {            pluginobj = factory(jQuery);        })    }    if (!loaded) {        // 全局模式 也可以不判断强制加载是执行一遍全局模式        factory(jQuery);    }})();

　　

 
 

jquery插件编写模版


联系
我们