JavaScript | JQuery插件定义方法
参考 http://www.2cto.com/kf/201507/417874.html
—————————————————————————————————————————————————————————
插件开发- 两种
类级别 - 三种
jQuery.extend(object);为扩展jQuery类本身,为类添加新的方法。
- 添加全局函数
$.foo1 = function() {
// code
}
$.foo2 = function(param) {
// code
}
$.foo1();
$.foo2(1);
- 使用jQuery.extend(object)添加全局函数 ;
禁止使用js的函数名和变量名 , 但仍有可能与其他jquery插件冲突 , 所以使用下面的方式封装到另一个命名空间中
$.extend({
foo1: function() {
// code
},
foo2: function() {
// code
}
});
- 采用命名空间的方式封装全局函数
$.myPlugin = {
foo1: function() {
// code
},
foo2: function(param) {
// code
}
}
$.myPlugin.foo1();
$.myPlugin.foo2(1);
对象级别
jQuery.fn.extend(object);给jQuery对象添加方法。
jquery本身是一个封装好的类;
$("#myDiv")会生成一个jquery类的实例;
通过jQuery.fn.extend可以对jquery.prototype进行扩展,为jquery类添加成员函数,所有的jquery类实例都可以使用这个成员函数
- 普通形式
定义了一个jQuery函数,将jQuery实参传递进去并立即调用执行;
好处是在写jQuery插件时也可以使用$这个别名,不会与prototype冲突;
metisMenu侧边栏下拉插件也是以这种形式写的
p.s.尽量在自调用函数前加分号,见文章底部细节说明
(function($) {
$.fn.pluginName = function() {
// code
}
})(jQuery);
$("#mydiv").pluginName();
- 分解代码为多个函数而不增加命名空间
将函数制定为属性,我们已经声明pluginName为jquery属性对象;
任何其他的属性或函数需要暴露出来时,都可以在pluginName函数中被声明属性;
- 接受options参数控制插件的行为
(function($) {
$.fn.pluginName = function(option) {
var defaults = {
background: "yello",
foreground: "red"
};
}
var opts = $.extend(defaults, options);
// plugin code
})(jQuery);
$("#mydiv").pluginName({
foreground: "blue"
});
- 暴露插件的默认设置
$.fn.pluginName = function(options) {
var opts = $.extend({}, $options);
};
$.fn.pluginName.default = {
foreground: "red",
background: "yellow"
};
- 样例
$.fn.extend({
plugin: function() {
$(this).click(function() {
// click event code
});
}
});
$("#input1").plugin();
<input id = "input1" type = "text" / >
—————————————————————————————————————————————————————————
细节
开头使用分号
加引号是为了防止多个js文件合并(脚本压缩)后运行异常,但由于目前(2015.4)普遍基于语法解析来进行压缩(UglifyJs)下,并不是必须的了,但通常作为分号教条;详解见 https://www.zhihu.com/question/29526862
;(function($, window, document, undefined) {
// code
})(jQuery, window, document);
JavaScript | JQuery插件定义方法的更多相关文章
- JavaScript jQuery 中定义数组与操作及jquery数组操作
首先给大家介绍javascript jquery中定义数组与操作的相关知识,具体内容如下所示: 1.认识数组 数组就是某类数据的集合,数据类型可以是整型.字符串.甚至是对象Javascript不支持多 ...
- jQuery插件制作方法详解
jQuery插件制作方法详解 jquery插件给我的感觉清一色的清洁,简单.如Jtip,要使用它的功能,只需要在你的元素的class上加 上Jtip,并引入jtip.js及其样式即可以了. ...
- JavaScript jQuery 中定义数组与操作及jquery数组操作 http://www.jb51.net/article/76601.htm
首先给大家介绍javascript jquery中定义数组与操作的相关知识,具体内容如下所示: 1.认识数组 数组就是某类数据的集合,数据类型可以是整型.字符串.甚至是对象Javascript不支持多 ...
- 编写jQuery插件的方法和注意点
编写jQuery插件的方法和注意点 插件的种类 jQuery的插件主要分为3种类型. 1. 封装对象方法的插件 这种插件是将对象方法封装起来,用于对通过选择器获取的jQuery对象进行操作,是最常见的 ...
- jQuery插件扩展方法
jQuery为扩展插件提拱了两个方法,分别是: jQuery.extend(object) —— 给jQuery对象添加方法. jQuery.fn.extend(object) —— 为扩展jQuer ...
- JQuery插件定义
一:导言 有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写$("#"),$("."),写了几年就对别人说非常熟悉JQuery.我曾经也是这样的人 ...
- JQuery : 插件定义
来源:http://www.cnblogs.com/xcj26/p/3345556.html 一:导言 有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写("#"), ...
- JQuery 插件一般方法
如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了.至于使用jquery好处这里就不再赘述了,用过的都知道.今天我们来讨论下jq ...
- 【转】JQuery插件定义
一:导言 有些WEB开发者,会引用一个JQuery类库,然后在网页上写一写("#"),("."),写了几年就对别人说非常熟悉JQuery.我曾经也是这样的人,直 ...
随机推荐
- sed 插入和替换
sed -i '/参考行/i\插入内容' *.ksh sed -i 's,原内容,替换后内容,g' *.ksh
- poj 1050(矩阵求和问题dp)
To the Max Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 44765 Accepted: 23700 Desc ...
- 【BZOJ 3669】 3669: [Noi2014]魔法森林 (动态spfa)
3669: [Noi2014]魔法森林 Description 为了得到书法大家的真传,小E同学下定决心去拜访住在魔法森林中的隐士.魔法森林可以被看成一个包含个N节点M条边的无向图,节点标号为1..N ...
- JZYZOJ 1542 [haoi2015]str 矩阵乘法 dp
http://172.20.6.3/Problem_Show.asp?id=1542 dp+矩阵乘法思路hin好想,对于我这种题目稍微学术就几乎什么也不会的人来说唯一的难点在于读题,因为一心想着划水题 ...
- [USACO 2018 Jan Gold] Tutorial
Link: USACO 2018 Jan Gold 传送门 A: 对于不同的$k$,发现限制就是小于$k$的边不能走 那么此时的答案就是由大于等于$k$的边形成的图中$v$所在的连通块除去$v$的大小 ...
- BZOJ 1532 [POI2005]Kos-Dicing(二分+最大流判断)
[题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=1532 [题目大意] n个人,给出m场比赛,求出胜出的人最少赢的场次. [题解] 我们发 ...
- rmq问题:ST表
存板子.O(nlogn)预处理,O(1)查询.空间O(nlogn). int d[1000006][25]; int mn[1000006]; void rmq_init() { for(int i= ...
- PHP手册笔记
<?php getenv — 获取一个环境变量的值 $ip = getenv ( 'REMOTE_ADDR' ); // 或简单仅使用全局变量($_SERVER 或 $_ENV) $ip = $ ...
- Educational Codeforces Round 9 D. Longest Subsequence dp
D. Longest Subsequence 题目连接: http://www.codeforces.com/contest/632/problem/D Description You are giv ...
- Unity 3D 之Playerprefs
Unity3d提供了一个用于本地持久化保存与读取的类——PlayerPrefs.工作原理非常简单,以键值对的形式将数据保存在文件中,然后程序可以根据这个名称取出上次保存的数值. 一.PlayerPre ...