首页 > 代码库 > jquery插件编写模版
jquery插件编写模版
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插件编写模版
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。