当我们画出了UI之后就可以正式编写jQuery插件代码了,不过在着之前我们还需要对jQuery插件开发的一些规范性有一些了解。
1. 使用闭包:
(function($){ //Code goes here })(jQuery);
这是来自jQuery官方的插件开发规范要求,使用这种编写方式有什么好处呢?
a) 避免全局依赖。
b) 避免第三方破坏。
c) 兼容jQuery操作符'$'和'jQuery'
我们知道这段代码在被解析时会形同如下代码:
var fun = function($) { //Code goes here }; fun(jQuery);
这样效果就一目了然了。
2. 扩展
jQuery提供了2个供用户扩展的‘基类’ - $.extend和$.fn.extend.
$.extend 用于扩展自身方法,如$.ajax, $.getJSON等,$.fn.extend则是用于扩展jQuery类,包括方法和对jQuery对象的操作。为了保持jQuery的完整性,我比较 趋向于使用$.fn.extend进行插件开发而尽量少使用$.extend.
3. 选择器
jQuery提供了功能强大,并兼容多种css版本的选择器,不过发现很多同学在使用选择器时并未注重效率的问题。
a) 尽量使用Id选择器,jQuery的选择器使用的API都是基于getElementById或getElementsByTagName,因此可以知道 效率最高的是Id选择器,因为jQuery会直接调用getElementById去获取dom,而通过样式选择器获取jQuery对象时往往会使用 getElementsByTagName去获取然后筛选。
b) 样式选择器应该尽量明确指定tagName, 如果开发人员使用样式选择器来获取dom,且这些dom属于同一类型,例如获取所有className为jquery的div,那么我们应该使用的写法 是$('div.jquery')而不是$('.jquery'),这样写的好处非常明显,在获取dom时jQuery会获取div然后进行筛选,而不是 获取所有dom再筛选。
c) 避免迭代,很多同学在使用jQuery获取指定上下文中的dom时喜欢使用迭代方式,如$('.jquery .child'),获取className为jquery的dom下的所有className为child的节点,其实这样编写代码付出的代价是非常大 的,jQuery会不断的进行深层遍历来获取需要的元素,即使确实需要,我们也应该使用诸如$(selector,context), $('selector1>selector2'), $(selector1).children(selector2), $(selctor1).find(selector2)之类的方式。
js插件开发的一种方法:
js代码:
<html> <script language="javascript" src="jquery.js"></script> <script type="text/javascript"> (function ($) { //默认参数(放在插件外面, 避免每次调用插件都调用一次, 节省内存) var defaults = { color: '红色' }; //扩展 $.fn.extend({ //插件名称 height: function(options) { //覆盖默认参数 var opts = $.extend(defaults, options); //主函数 return this.each(function(){ //激活事件 var obj = $(this); obj.click(function(){ alert(opts.color); }); }); } }); })(jQuery); $(function(){ $("p").height({color: 'black'}); }); </script> <body> <p> click here </p> </body> <html>
参考:http://www.360doc.com/content/14/0307/09/15605563_358431277.shtml
相关推荐
这一版能够支持对效果的更灵活定制,而且借助新增的命名空间事件,也使插件开发变得更容易。 jQuery UI(2007年9月):这个新的插件套件是作为曾经流行但已过时的Interface插件的替代项目而发布的。jQuery UI中包含...
jQuery插件解析RSS(2.0规范),它是基于jFeed
7.9.2 插件开发要点/225 7.9.3 开发插件示例/226 7.10 综合案例分析—使用uploadify插件实现文件上传功能 /232 7.10.1 需求分析/232 7.10.2 效果界面/233 7.10.3 功能实现/234 7.10.4 代码分析/236 7.11 本章...
时间选择器jQuery插件基于HTML5规范。只是一个简单的下拉显示时间。具有输入验证和纠正。
6.5 综合案例分析—用ajax实现新闻点评即时更新 6.5.1 需求分析 6.5.2 效果界面 6.5.3 功能实现 6.5.4 代码分析 6.6 本章小结 第7章 jquery常用插件 7.1 jquery插件概述 7.2 验证插件validate 7.3...
开始开发这个插件的主要原因是我一直在开发的网站需要一组特定的规范和自定义,以上都没有提供。 所以这里是这个插件提供的这些规范和功能 - 以及其他一些(我有点参与其中): 幻灯片无需 javascript 即可调整...
复制 'src/lib/jquery.perspectives.js' 文件,网络服务器可以为它提供服务。 在您的页面上包含插件: < script src =" /path/to/jquery.perspectives.js " > </ script > 用法 告诉控件小部件在哪里...
输入jQuery.Hive 简化客户端/主页工作程序设置API 用jQuery开发人员熟悉的语法包装Worker构造函数和函数规范交叉实现的不一致; 消息序列化/反序列化员工对员工直接消息传递工人记忆饲料工人与花粉提供轻巧,可重用...
10-26 4 jquery对象集合遍历的四种形式及练习题讲解 jquery的dom操作 10-27 1课程回顾 10-27 2 jquery的dom操作 内部插入 外部插入 10-27 3 jquery节点操作 10-27 4 练习题讲解 10-27 5 jquery属性操作 获取子元素和...
服务网关,对外暴露统一规范的接口和包装响应结果,包括各个子系统的交互接口、对外开放接口、开发加密接口、接口文档等服务,可在该模块支持验签、鉴权、路由、限流、监控、容错、日志等功能。示例图: ![API网关]...
例如 jquery/underscore/backbone 插件 FE 工具规范:grunt+mocha+chai+sinon+browserify+testem 截屏 设置 npm install grunt build 用于开发目的: 编写插件: grunt dev实时观察您的代码, grunt build编译您...
jQuery是一款不可多得的非常优秀的javascript脚本开发库,而基于其上的很多插件也是非常规范和卓越的,如果错过这番美景真是太可惜了,比如datepicker这个插件。 一般MIS系统的前端,尤其是用户注册页面,都会有诸如...
jQuery是一款不可多得的非常优秀的javascript脚本开发库,而基于其上的很多插件也是非常规范和卓越的,如果错过这番美景真是太可惜了,比如datepicker这个插件。
jQuery 和Dom关系及jQuery版本 jQuery选择器 实例多选反选取消 删选器以及Tab菜单示例 示例:模态编程框 jQuery 样式以及属性操作 示例:TAB切换菜单 jQuery内容操作 点赞以及jQuery css操作 JQuery高度以及位置操作...
Grails茉莉花资源插件 此不再需要维护,因为插件... 如果安装了Grails jQuery插件,那么脚本将自动包含在规范运行器中。 用法 将插件添加到BuildConfig.groovy的plugins块中: compile " :jasmine-resources:0.1.2
摘要:脚本资源,jQuery,弹出窗口 一个使用jQuery的弹出层窗口插件,YBOX,第一次写的jquery插件,本插件仅仅在百度上搜索了几篇文章稍微看了下插件开发基本格式,然后再按照自己理解写的,效果是达到了,更多功能...
虽然各类插件规范可能不一致,FIS-Components帮你统一规范,简单化使用方式!像开发 node.js 一样开发网页应用fis install 类似与 npm install,把现有的组件安装到当前项目。$ fis install jquery ...
基于SSM的超市订单管理系统-开发第四天 运行环境:该系统需要...今日效果:在前几天完成的基础之上,今天完善了用户管理页面的、新增用户、查看用户、删除用户、修改用户、处理json对象,引入日期插件WdatePicker.js
一些常用的javascript效果和工具类其中包含了瀑布流,skitter幻灯片,多动排序,还有一些...—— pubuliu 简单的瀑布流布局及其实现方式|—— threejsball 基于webgl的3d效果|—— 前端规范 一些js的开发规范|—— 缓
jQuery-csv是更简单的时间(即2012年)的产物,当时JS库生态系统仍处于欠发达状态。 这是第一个,现在仍然是最快的符合规范的CSV解析器之一。 这是一个完整的,可定制的,经过战斗测试,性能优化的CSV分析器,它...