如何用jQuery封装插件
引子
现在网上关于js和jquery封装的插件很多,我刚刚接触前端的时候,就很敬佩那些自己写插件的大牛们!因为是他们给网站开发更多的便利,很多网页效果,网上很多现成的插件!那么这些插件是如何写的呢?首先是有扎实的js和jquery技术基础,其次还有一些写插件的方法和技巧。关于js和jquery的技术基础,那是一个慢慢积累的过程。但是关于写插件的一些注意和技巧,本文可以略微介绍一下,方便以后写插件的时候用得到。
要说jQuery 最成功的地方,我认为是它的可扩展性吸引了众多开发者为其开发插件,从而建立起了一个生态系统。这好比大公司们争相做平台一样,得平台者得天下。苹果,微软,谷歌等巨头,都有各自的平台及生态圈。
学会使用jQuery并不难,因为它简单易学,并且相信你接触jQuery后肯定也使用或熟悉了不少其插件。如果要将能力上升一个台阶,编写一个属于自己的插件是个不错的选择。
jquery插件开发模式
软件开发过程中是需要一定的设计模式来指导开发的,有了模式,我们就能更好地组织我们的代码,并且从这些前人总结出来的模式中学到很多好的实践。
根据《jQuery高级编程》的描述,jquery插件一般有三种开发方式:
通过$.extend()来扩展jQuery
通过$.fn 向jQuery添加新的方法
通过$.widget()应用jQuery UI的部件工厂方式创建
通常我们使用第二种方法来进行简单插件开发,说简单是相对于第三种方式。第三种方式是用来开发更高级jQuery部件的,该模式开发出来的部件带有很多jQuery内建的特性,比如插件的状态信息自动保存,各种关于插件的常用方法等,非常贴心,这里不细说。
而第一种方式又太简单,仅仅是在jQuery命名空间或者理解成jQuery身上添加了一个静态方法而以。所以我们调用通过$.extend()添加的函数时直接通过$符号调用($.myfunction())而不需要选中DOM元素($('#example').myfunction())。
$.extend({
sayHello: function(name) {
console.log('Hello,' + (name ? name : 'Dude') + '!');
}
})
$.sayHello(); //调用
$.sayHello('test'); //带参调用
但这种方式无法利用jQuery强大的选择器带来的便利,要处理DOM元素以及将插件更好地运用于所选择的元素身上,还是需要使用第二种开发方式。你所见到或使用的插件也大多是通过此种方式开发。
插件开发
第二种插件开发方式一般是如下定义
$.fn.pluginName = function() {
//your code here
}
插件开发,我们一般运用面向对象的思维方式
例如定义一个对象
var testObj= function(el, opt) {
this.$element = el,
this.defaults = {
'color': 'red',
'fontSize': '12px',
'textDecoration':'none'
},
this.options = $.extend({}, this.defaults, opt)
}
//定义testObj的方法
testObj.prototype = {
changecss: function() {
return this.$element.css({
'color': this.options.color,
'fontSize': this.options.fontSize,
'textDecoration': this.options.textDecoration
});
}
}
$.extend({}, this.defaults, opt)有{}主要是为了创建一个新对象,保留对象的默认值。
$.fn.myPlugin = function(options) {
//创建haorooms的实体
var testIndividual= new testObj(this, options);
//调用其方法
return testIndividual.changecss();
}
调用这个插件直接如下就可以
$(function() {
$('a').myPlugin({
'color': '#2C9929',
'fontSize': '20px'
});
})
上述开发方法的问题
上面的开发方法存在一个严重的问题,就是定义了一个全局的testObj,这样对于插件的兼容等等各个方面都不好。万一别的地方用到了testObj,那么你的代码就悲催了!现在我们把上面的代码包装起来,用一个自调用匿名函数(有时又叫块级作用域或者私有作用域)包裹,就不会出现这个问题了!包括js插件的开发,也是一样的,我们用一个自调用匿名函数把自己写的代码包裹起来,就可以了!包裹方法如下:
(function(){ })()
用上面的这个包裹起来,就可以了。
但是还有一个问题,当我们研究大牛的代码的时候,前面经常看到有“;”,那是为了避免代码合并等不必要的错误。
例如,我们随便定义一个函数:
var testFunction=function(){ }
(function(){ })()
由于testFunction()这个函数后面没有加分号,导致代码出错,为了避免这类情况的发生,通常这么写!
;(function(){ })()
基本上可以说是完美了。但是为了让你开发的插件应用更加广泛,兼容性更加好,还要考虑到用插件的人的一些特殊的做法,例如,有些朋友为了避免jquery和zeptojs冲突,将jquery的前缀“$”,修改为“jQuery”,还有些朋友将默认的document等方法修改。为了让你的插件在这些东西修了了的情况下照常运行,那么我们的做法是,把代码包裹在如下里面:
;(function($,window,document,undefined){
//我们的代码。。
})(jQuery,window,document);
就可以避免上面的一些情况了!
至此,你开发的插件就算完美了!
补充
JQ插件标准的封装---闭包
<script type="text/javascript">
(function ($) {
//这里放入插件代码
})(jQuery);
</script>
这是jQuery官方的插件开发规范,这样写是作用是:
1. 避免全局依赖。
2. 避免第三方破坏。
3. 兼容jQuery操作符’$’和’jQuery’
这段代码在被解析时会形同如下代码:
var jq = function($) {
// Code goes here
};
jq(jQuery);
================更新于2016年2月4日=============
编写插件
$(function () {
$.fn.插件名称 = function (options) {
var defaults = {
Event : "click", //触发响应事件
msg : "Holle word!" //显示内容
};
var options = $.extend(defaults, options);
var $this = $(this); //当然响应事件对象
//功能代码部分
//绑定事件
$this.live(options.Event, function (e) {
alert(options.msg);
});
}
});
调用插件
$(function () {
//绑定元素事件
$("#test").插件名称({
Event : "click", //触发响应事件
msg : "插件原来就是这么简单!" //显示内容
});
});
布局
<input type = "button" id = "test" value = "这是一个简单的插件调用" / >
文章来源:
http://www.haorooms.com/post/js_jquery_chajian
http://www.cnblogs.com/Wayou/p/jquery_plugin_tutorial.html
如何用jQuery封装插件的更多相关文章
- jquery 封装插件
如今做web开发,jquery 几乎是必不可少的,就连vs神器在2010版本开始将Jquery 及ui 内置web项目里了.至于使用jquery好处这里就不再赘述了,用过的都知道.今天我们来讨论下jq ...
- 黄聪:如何用Jquery或者插件解除网页禁用右键复制的限制(转)
1.随便打开一个网址,放到收藏夹中. 2.复制下面的代码,替换原来网址的URL 选中复制以下代码 javascript:(function(){var doc=document;var bd=doc. ...
- jQuery对象插件封装步骤
jQuery是js的一个非常优秀的库,它大大简化了js的很多操作,并且解决了js的大部分兼容性问题.甚至很多css兼容性问题,用jQuery写都能解决. 这里是对象插件的封装.当然,封装插件很多,这里 ...
- ***使用jQuery去封装插件(组件化、模块化的思想),即扩展方法
如何使用jQuery去封装插件,区分扩展全局方法与扩展一个普通的jQuery实例对象的方法 1.给全局对象扩展方法:①$.方法 = function(参数可加可不加){} ②使用:$.方法(有参数的 ...
- jQuary总结11:jQuery插件封装---jQuery封装 手风琴 动画插件
完整代码下载点击我的GitHub: https://github.com/XingJYGo/jquery-accordion 1 手风琴的效果展示如下: 2 封装插件目录结构如下: 主要包括:HTML ...
- 深入学习jQuery自定义插件
原文地址:jQuery自定义插件学习 1.定义插件的方法 对象级别的插件扩展,即为jQuery类的实例增加方法, 调用:$(选择器).函数名(参数); $(‘#id’).myPlugin(o ...
- [jQuery]jQuery DataTables插件自定义Ajax分页实现
前言 昨天在博客园的博问上帮一位园友解决了一个问题,我觉得有必要记录一下,万一有人也遇上了呢. 问题描述 园友是做前端的,产品经理要求他使用jQuery DataTables插件显示一个列表,要实现分 ...
- 使用jQuery.form插件,实现完美的表单异步提交
传送门:异步编程系列目录…… 时间真快,转眼一个月快结束了,一个月没写博客了!手开始生了,怎么开始呢…… 示例下载:使用jQuery.form插件,实现完美的表单异步提交.rar 月份的尾巴,今天的主 ...
- 为jQuery写插件
很多场合,我们都会调用jQuery的插件去完成某个功能,比如slider. 如下图,做一个div,通过“$( "#slider" ).slider();”的方式直接将div变成sl ...
随机推荐
- Android源码项目目录结构
src: 存放java代码 gen: 存放自动生成文件的. R.java 存放res文件夹下对应资源的id project.properties: 指定当前工程采用的开发工具包的版本 libs: 当前 ...
- HDU 5433 Xiao Ming climbing 动态规划
题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5433 Xiao Ming climbing Time Limit: 2000/1000 MS (Ja ...
- Alpha-9
前言 失心疯病源9 团队代码管理github 站立会议 队名:PMS 530雨勤(组长) 今天完成了那些任务 熬夜肝代码 代码签入github 明天的计划 最好能够完成对接环节 准备展示内容 还剩下哪 ...
- Markdown语法实践
Markdown语法实践 Markdown基本语法 1.标题 # 一级标题 ## 二级标题 ### 三级标题 eg: 一级标题 二级标题 三级标题 2.链接 标准: [Title](URL) 实例: ...
- 【第一周】第一周工作统计(psp)
项目:词频统计 项目类型:个人项目 项目完成情况:已完成 项目改进:未变更 项目日期:2016.9.3-2016.9.4 3号 类别c 内容c 开始时间s 结束e 中断I 净时间T 项目实践 构思 ...
- linux之JDK安装
1.JDK安装 a.卸载JDK (1)卸载默认的JDK 用root用户登陆到系统,打开一个终端输入 # rpm -qa|grep gcj 显示内容其中包含下面两行信息 # java-1.4.2-gcj ...
- webgl 初识2
之前的文章介绍了webgl. 这里进一步精简. WebGL的全部内容就是创建不同的着色器, 向着色器提供数据然后调用gl.drawArrays 或 gl.drawElements 让WebGL调用当前 ...
- 【计算机网络】NAT:网络地址转换
NAT(Network Address Translation,网络地址转换)是1994年提出的.当在专用网内部的一些主机本来已经分配到了本地IP地址(即仅在本专用网内使用的专用地址),但现在又想和因 ...
- 【笔记】sublime 一些常用功能和快捷键
Ctrl+D 选词 (反复按快捷键,即可继续向下同时选中下一个相同的文本进行同时编辑)Ctrl+G 跳转到相应的行Ctrl+J 合并行(已选择需要合并的多行时)Ctrl+L 选择整行(按住-继续选择下 ...
- Android 分Dex (MultiDex)
需要分Dex的理由想必大家都知道了.正是在ART以前的Android系统中,Dex文件对于方法索引是用一个short类型的数据来存放的.而short的最大值是65535,因此当项目足够大包含方法数目足 ...