简记 jQuery 插件模板

 1 /**
 2  * @lisence jquery plugin demo v1.0.0
 3  *
 4  * author: Jeremy Yu
 5  *
 6  * description:
 7  *   this is a jquery plugin Template
 8  *   see the end of this document to learn how to use the jquery plugin
 9  */
10 ;
11 (function($, window, document, undefined) {
12
13     /* 插件类定义 */
14     var PluginName = function(el, options) {
15         this.version = "1.0.0"
16         this.el = el;
17         this.options = options;
18         this.init(); //调用初始化方法
19     }
20
21     /* 定义无参方法,方法名为 init */
22     PluginName.prototype.init = function() {
23         /*  初始化操作 */
24         alert(‘初始化成功‘);
25     }
26
27     /* 定义有参方法,方法名为 func */
28     PluginName.prototype.func = function(arg) {
29         /* TODO  */
30     }
31
32     /* 定义有返回值方法,方法名为 funcRet */
33     PluginName.prototype.funcRet = function() {
34         /* TODO
35          * 执行完后返回结果
36          * 返回值可以是undefined、null、数字、字符串、布尔值、对象等
37          * 如果没有返回,默认返回 undefined
38          */
39         return 0;
40     }
41
42     /* 定义命名空间,且作为data的key */
43     var namespace = ‘plugin_name‘;
44     /* 定义插件 */
45     $.fn.plugin_name = function(options) {
46         var $this = $(this);
47         var value, args = Array.prototype.slice.call(arguments, 1);
48         var data = $this.data(namespace);
49         if (!data) {
50             var settings = $.extend({}, $.fn.plugin_name.defaults, options);
51             $this.data(namespace, data = new PluginName(this, settings));
52         }
53         if (typeof options == ‘string‘) {
54             value = data[options].apply(data, args);
55         }
56         return typeof value === ‘undefined‘ ? this : value;
57     };
58
59     /* 定义插件的默认值(属性、事件) */
60     $.fn.plugin_name.defaults = {
61         prop1: "",
62         prop2: "",
63         onEvent: function(arg1, arg2) {},
64         onError: function(err) {}
65     };
66
67
68     /*
69         引入 jquery.min.js 和 当前 js 文件
70
71         HTML代码:
72         <div id="#plugin"></div>
73
74         插件使用
75         $(‘#plugin‘).plugin_name({ prop1 : ‘‘, onEvent : function(){}});
76
77         方法调用
78         $(‘#plugin‘).plugin_name(‘function_name‘, args);
79     */
80
81 })(jQuery, window, document);

原文地址:https://www.cnblogs.com/silfox/p/11434206.html

时间: 2024-10-12 00:34:10

简记 jQuery 插件模板的相关文章

jQuery 插件模板

1.为每一个DOM对象创建一个插件对象 模板定义: 1 (function($) { 2 3 $.pluginName = function(element, options) { 4 5 var defaults = { 6 foo: 'bar', 7 onFoo: function() {} 8 } 9 10 var plugin = this; 11 12 plugin.settings = {} 13 14 var $element = $(element), 15 element =

jQuery插件模板

制作JQuery插件的基本框架演示:http://www.huiyi8.com/chajian/ (function($){    //The jQuery.aj namespare will automatically be created if it doesn't exist    $.widget("aj.filterable",{        //These options will be used as defaults        options: {classNam

我最喜欢的jQuery插件模板

我使用jQuery已经有相当长的时间了,并且我会常常为它写一些插件(plugin).我尝试过用不同的方式去写,现在这个模板是我最喜欢的: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 ;(function($) {   // multiple plugins can go here   (function(pluginName) {     var default

jQuery插件编写及链式编程模型小结

JQuery极大的提高了我们编写JavaScript的效率,让我们可以愉快的编写代码,做出各种特效.大多数情况下,我们都是使用别人开发的JQuery插件,今天我们就来看看如何把我们常用的功能做出JQuery插件,然后像使用jQuery那样来操作DOM.  一.jQuery插件开发快速上手 1.jQuery插件模板 关于jQuery插件的编写,我们可以通过为jQuery.fn增加一个新的函数来编写jQuery插件.属性的名字就是你的插件的名字,其模板如下: (function($){ $.fn.m

jQuery插件编写及链式编程模型

jQuery插件编写及链式编程模型小结 JQuery极大的提高了我们编写JavaScript的效率,让我们可以愉快的编写代码,做出各种特效.大多数情况下,我们都是使用别人开发的JQuery插件,今天我们就来看看如何把我们常用的功能做出JQuery插件,然后像使用jQuery那样来操作DOM.  一.jQuery插件开发快速上手 1.jQuery插件模板 关于jQuery插件的编写,我们可以通过为jQuery.fn增加一个新的函数来编写jQuery插件.属性的名字就是你的插件的名字,其模板如下:

出位的template.js 基于jquery的模板渲染插件,简单、好用

找了好几款基于jquery的模板渲染插件,无一感觉很难用(教程较少.绑定不统一),也可能我智商问题,比如jquery template.js .jtemplate.js. 然后在github上找到这一款,和我在公司之前用的差不多(apicloud云端开发app,致敬[百小僧]大神封装的HUI,简化了在公司很多工作), 这款模板渲染和HUI的很相似,也比较简单  基于jquery的模板渲染插件. 附上github https://github.com/yanhaijing/template.js

10条建议让你创建更好的jQuery插件

前言:在开发过很多 jQuery 插件以后,我慢慢的摸索出了一套开发jQuery插件比较标准的结构和模式.这样我就可以 copy & paste 大部分的代码结构,只要专注最主要的逻辑代码就行了.使用相同的设计模式和架构也让修复bug或者二次开发更容易.一套经过验证的架构可以保证我的插件不出大的问题,不论插件简单还是复杂.我在这里分享10条我总结的经验. 1. 把你的代码全部放在闭包里面 这是我用的最多的一条.但是有时候在闭包外面的方法会不能调用.不过你的插件的代码只为你自己的插件服务,所以不存

jQuery插件编写

jQuery种类 1.封装对象方法的插件,这种插件是我们常用的插件,后面将会具体针对这种插件介绍,如:$("#div").parent(); 2.封装全局函数的插件 如:jQuery.ajax() 3.选择器插件 如:$("ul li:eq(0)") 基本要点 1.所有的对象方法(第1种)都应该附加在jQuery.fn=jQuery.prototype,而所有的全局函数都应该附加在jQuery上 2.this在插件内部,是通过选择器获取的jQuery对象,而例如cl

10条建议帮助你创建更好的jQuery插件

本文总结了帮助你创建更好jQuery插件的10条建议.分享给大家供大家参考.具体说明如下: 在开发过很多 jQuery 插件以后,我慢慢的摸索出了一套开发jQuery插件比较标准的结构和模式.这样我就可以 copy & paste 大部分的代码结构,只要专注最主要的逻辑代码就行了.使用相同的设计模式和架构也让修复bug或者二次开发更容易.一套经过验证的架构可以保证我的插件不出大的问题,不论插件简单还是复杂.我在这里分享10条我总结的经验. 1. 把你的代码全部放在闭包里面 这是我用的最多的一条.