jQuery插件开发小结
jQuery插件开发规范
1. 使用闭包
(function($) {
// Code goes here
})(jQuery);
这是来自jQuery官方的插件开发规范要求,使用这种编写方式有什么好处呢?
2. 扩展
jQuery提供了2个供用户扩展的‘基类’ - $.extend和$.fn.extend.
$.extend 用于扩展自身方法,如$.ajax, $.getJSON等;
$.fn.extend则是用于扩展jQuery类,包括方法和对jQuery对象的操作。
为了保持jQuery的完整性,趋向于使用$.fn.extend进行插件开发而尽量少使用$.extend.
demo.js
;(function($){ //“;”是为了避免代码合并等不必要的错误 $.fn.demo=function(options){
//使用对象的形式
var defaults={ //默认参数
color:'green'
}
// 将用户传进来的参数扩展覆盖默认参数
var options=$.extend({},defaults,options); //{}主要是为了创建一个新对象,保留对象的默认值
// 功能实现
this.each(function(){ //支持jQuery选择器
$(this).css('background',options.color);
});
return this; //使之能够链式操作
} })(jQuery);
demo.html
...
<title>demo</title>
<script src="jquery.js"></script>
<script src="demo.js"></script> //载入插件文件
... <div id="div1">
demo
<script>
$("#div1").demo({ //调用方式
color:'black' //如果用户不传递参数就使用默认参数
});
</script>
</div>
...
备注:官方推荐插件的命名标准写法是jquery.demo.v1.0.js或者jquery-demo-v1.0.js(jquery.插件名.版本号.js);
类级别的插件开发
1、直接给jQuery添加静态函数
jQuery.demo=function(){
//功能代码
} //调用方式:
$.demo();
2、使用extend()方法
jQuery.extend({
demo1:function(){
//功能代码
}
demo2:function(){
//功能代码
}
}); // 调用方式:
$.demo1();
$.demo2();
3、使用命名空间
jQuery.kongjian={
demo:function(){ }
} // 调用方式:
$.kongjian.demo();
jQuery插件开发小结的更多相关文章
- jQuery插件开发的五种形态小结(转)
关于jQuery插件的开发自己也做了少许研究,自己也写过多个插件,在自己的团队了也分享过一次关于插件的课.开始的时候整觉的很复杂的代码,现在再次看的时候就清晰了许多.这里我把我自己总结出来的东西分享出 ...
- jQuery插件开发的五种形态小结
关于jQuery插件的开发自己也做了少许研究,自己也写过多个插件,在自己的团队了也分享过一次关于插件的课.开始的时候整觉的很复杂的代码,现在再次看的时候就清晰了许多.这里我把我自己总结出来的东西分享出 ...
- jQuery插件开发的五种形态[转]
这篇文章主要介绍了jQuery插件开发的五种形态小结,具体的内容就是解决javascript插件的8种特征,非常的详细. 关于jQuery插件的开发自己也做了少许研究,自己也写过多个插件,在自己的团队 ...
- jQuery插件开发(转)
jQuery插件开发 - 其实很简单 [前言]jQuery已经被广泛使用,凭借其简洁的API,对DOM强大的操控性,易扩展性越来越受到web开发人员的喜爱,我在社区也发布了很多的jQuery插件,经常 ...
- jQuery插件开发 - 其实很简单
[前言] jQuery已经被广泛使用,凭借其简洁的API,对DOM强大的操控性,易扩展性越来越受到web开发人员的喜爱,我在社区也发布了很多的jQuery插件,经常有人询问一些技巧,因此干脆写这么一篇 ...
- JavaScript学习笔记(四)——jQuery插件开发与发布
jQuery插件就是以jQuery库为基础衍生出来的库,jQuery插件的好处是封装功能,提高了代码的复用性,加快了开发速度,现在网络上开源的jQuery插件非常多,随着版本的不停迭代越来越稳定好用, ...
- JavaScript学习总结(四)——jQuery插件开发与发布
jQuery插件就是以jQuery库为基础衍生出来的库,jQuery插件的好处是封装功能,提高了代码的复用性,加快了开发速度,现在网络上开源的jQuery插件非常多,随着版本的不停迭代越来越稳定好用, ...
- jQuery插件开发精品教程,让你的jQuery提升一个台阶
要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统.这好比大公司们争相做平台一样,得平台者得天下.苹果,微软,谷歌等巨头,都有各自的平台及生态圈 ...
- jquery插件开发
jQuery是一个封装的很好的类,比如我们用语句$("#btn1") 会生成一个 jQuery类的实例. 一.jQuery插件开发注意要点 1.使用闭包,避免全局依赖,避免第三方破 ...
随机推荐
- [极客大挑战 2019]EasySQL
万能密码直接登陆得到flag admin' or 1=1 #
- Java中包的基本管理与编译
在写程序的过程中,总会出现代码编译过关,但是项目偏偏报错的情况,遇到几种情况,都在此一一记录,希望以后少走弯路. 1.添加jsp文件的时候,会报错 Multiple annotations found ...
- JavaScript学习总结(八)
这一节结束,我们的JavaScript学习总结系列文章第一阶段就要结束了,今后会适当的补充一些高级的内容,敬请期待. 好了,废话不说进入这一节的学习. 联动框 联动框,实在是太常见了.比如淘宝,我们选 ...
- git 知识罗列
git pull is basically a shortcut for two operations: git fetch which downloads the history from the ...
- linux.linuxidc.com - /2011年资料/Android入门教程/
本文转自 http://itindex.net/detail/15843-linux.linuxidc.com-%E8%B5%84%E6%96%99-android Shared by Yuan 用户 ...
- matlab初级
命令 ======== 系统命令 命令 功能 例 date 显示当前日期 ans = 20-Jul-2019 what 当前文件夹下的matlab文件 type 文件中的内容 type CV.m ...
- vscode显示当前文件完整路径信息
Code->Preferences->Settings 搜索window.title 原本是activeEditorShort,修改 activeEditorShort => act ...
- 干货分享,FPGA硬件系统的设计技巧
PGA的硬件设计不同于DSP和ARM系统,比较灵活和自由.只要设计好专用管脚的电路,通用I/O的连接可以自己定义.因此,FPGA的电路设计中会有一些特殊的技巧可以参考. 1. FPGA管脚兼容性设计 ...
- java相关书籍及网站
原文链接:http://developer.51cto.com/art/201408/448609.htm 对于 Java™ 语言开发人员来说,信息过量是一个真正的问题.每个新入行的程序员都要面临一个 ...
- ZJNU 2206 - 染色
开纵横两个结构体数组,记录连续涂了一整行或者一整列的情况 再开一个map,记录涂点 #include<iostream> #include<algorithm> #includ ...