jQuery插件原理及封装
我们知道jQ插件,是通过$.fn来进行拓展的,但是为什么这样能拓展,可能就没多少人知道了。其实我们简单测试一下就明白了:
console.log($.fn);
输出的结果发现全是jQ的api,这就让人想到了对象的原型。jQ应该也有原型吧,$.fn跟原型究竟是什么关系?再接着测试:
console.log($.fn===$.prototype);
结果为:true
这就让人恍然大悟,所谓的插件原来就是给jq的原型添加功能函数。
比如现在我们有两个div,我们要想封装一个插件,实现在某个div里面插入几行ul li 并赋值:
<div id=”box1″ class=”box”></div>
<div id=”box2″ class=”box”></div>
首先给jQ对象添加addList方法:
$.fn.addList = function(data){
var $ul = $(“<ul></ul>”);
for(i =0 ;i<data.length;i++){
var $li = $(“<li>”+data[i]+”</li>”);
$li.appendTo($ul) ;
}
$ul.appendTo(this);
}
$(“#box1”).addList([“1″,”2″,”3″,”4”]);
这里我们实现了一个给代理对象添加ul和li以及内容的功能,然后我需要将这个功能封装成一个插件,当用户引入这个插件就能使用该方法。
封装插件时我们不能直接把这段代码直接复制过去,因为这里这些代码全是开放的,全是在window作用域,很有可能有其他跟插件同名的函数污染插件。
(function(root,factory,plug){
root[plug] = factory(root.jQuery,plug);
})(window,function($,plug){
$.fn[plug] = function(data){
var $ul = $(“<ul></ul>”);
for(i =0 ;i<data.length;i++){
var $li = $(“<li>”+data[i]+”</li>”);
$li.appendTo($ul) ;
}
$ul.appendTo(this);
}
},”addList”)
我们将这插件直接一调用就执行。函数后面加括号表示直接执行。(如果方法是动态的,就用[]访问,静态的就用点访问)
root代表环境,目前是window环境,别人用这插件,不一定是在window环境下。
factory表示你这个插件功能函数
plug表示插件名称
由于是JQ插件,所以要传入当前环境下引入的jQuery
不过到了这一步,并不代表这个插件完整。因为用户不一定只传data参数,可能还有其他参数,如果没有传参数,我们需要给一个默认值,不能让插件报错。
设置默认值:
var __def__ = {
data:0,
name:”Stella”,
age:18
}
设置要执行的功能:
var __prop__ = {
_init : function(){
var $ul = $(“<ul></ul>”);
for(var i=0;i<this.data.length;i++){
$ul.append($(“<li>”+this.data[i]+”</li>”));
}
this.append($ul);
}
};
紧接着我们还要实现,有传入值时用传入值,没有时用默认值,这里就要用到extend:
$.fn[plug] = function(options){
$.extend(this,__def__,options,__prop__);//将后面三个对象的方法属性以及值合并后赋给this对象。
this._init();//this对象拥有了_init方法,进行执行
}
调用插件有这两种方式:
$(“#box1”).dnList({
data : [“1″,”2″,”3″,”4″],
name:”abc”
});
new dnList({
dom:document.getElementById(“box1”),
data : [“a”,”w”,”d”,”e”,”f”],
age:19
});
为了做到第二种方式也能实现,不报错,达到两者兼容。这时还需要加一个输出函数
return function(options){
var dom = options.dom;
$(dom)[plug].call($(dom),options);执行插件功能函数,将this指向$(dom)这个代理对象,并传入参数。
}
最终的插件:
调用:
$(“#box1″).addList({
data:[1,2,3,4],
name:”Ivan”,
age:20
});
new addList({
dom:document.getElementById(“box2″),
data:[5,6,7,8],
name:”Stella”,
})
显示结果:
转载请注明:jQuery插件原理及封装 - 编程知识库
您可能还会对这些文章感兴趣
2016-12-20 1,786次只会用jQuery前端到底low不low?
如果你之前没有看过我的《前端工程师如何月薪过4万》这里建议大家仔细读读一下,因为里面有整个前端工程师成长的技术路线图和我的故事。同时很多小伙伴问我的学历后来没再考考么,我是考了成考的北京航空航天大学,也马上快毕业了。不过我觉得这件事不足为提,因为国...
2016-12-17 721次jquery的$().each,$.each的区别
在jquery中,遍历对象和数组,经常会用到$().each和$.each(),两个方法。两个方法是有区别的,从而这两个方法在针对不同的操作上,显示了各自的特点。 $().each,对于这个方法,在dom处理上面用的较多。如果页面有多个input标签类型为checkbox,对于这时用$().each来...
2016-12-15 1,853次jquery加载外部文件(.txt .html)显示在网页上
在web开发中常常需要用到jquery去动态的加载文件显示在网页上面,下面是实现的小方法,希望给大家一点提示,达到抛砖引玉的作用哦!!! 效果图: 要加载显示的文件: 网页加载效果: html代码截图: jquery代码截图: 转载请注明:jquery加载外部文件(.txt ....
2016-12-15 665次javascript实现网页倒计时
web开发中常常需要使用到网页倒计时功能,下面是实现方法: 效果图: 代码截图: 转载请注明:javascript实现网页倒计时 - 编程知识库
大家正在看
- linux 系统中Mysql 进程占用cpu过高的解决
- 二类电商是什么意思? 二类电商有哪些?暴利二类电商还好做吗?
- 【二类电商广点通投放指南】二类电商广点通投放值不值
- 密码保护:支付宝突破微信封锁唤起支付宝代码
- Host is not allowed to connect to this MySQL server解决方法
- 密码保护:移动端js自动复制代码
- linux数据库调优,WordPress MySQL占用cpu高数据库优化
- 2017 年十大网页设计趋势
- 网页端的VR实现离我们还远么?
- 最完整的Chrome浏览器客户端调试大全
- iPhone用户人均每天遭电话骚扰1次
- 3G电子化销售服务系统
- Java WeakReference的理解与使用
- 搞清楚 Python traceback