5月1日 呆在实验室 接着学习的脚步 记录学习的脚步 还有2个月 学生生涯即将结束 十分珍惜此时的宁静 看书、听歌、打球、喝酒 时间只受自己支配 真想爆一句粗口 太XX爽了 呵呵
好吧 还是回到记录的脚步上来
按照jquery官方所说
jquery插件机制是一种用于扩展jquery原型对象方法的简单方式，通过扩展原型对象，可以让jquery的所有对象都继承你自定义的方法。
在自定义插件之前 有几个知识点 我们是必须要搞清楚的
1.iife--立即执行函数表达式
看看官网解释
简单地说 就是定义一个表达式 不过这个表达式中包含一个函数
我们知道在script的范围里 只要不是定义在函数中的表达式 在script第一次加载的时候都会从上至下的执行
所以这个IIFE的表达式也会立即执行
看个例子
<!DOCTYPE html>
<html><head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head><body> <div id="log"></div>
<script>
(function(a){
$("#log").text("使用立即调用函数表达式"+a);
})(5);
</script>
</body></html>界面输出
通过输出可以看到 IIFE执行了 上面的例子中 看到IIFE的写法如下
(function(形参){需要处理的代码})(实参);
2.$.与$.fn,的区别
$.相当于jquery的Object类的静态部分,此部分中的方法与属性都无需jquery对象即可直接使用 例如 $.extend()
$.fn.相当于jquery的Object类的实例部分,此类中的方法 都需要先有jquery对象之后 才能使用$.fn.的方法 例如 $("a").attr()
还有一点需要注意 jquery的所有对象都继承了 Object类
所以 前面所说的 通过扩展愿意模型 可以让jquery的所有对象都继承你自定义的方法 即是往Object的静态部分和实例部分添加方法和属性即可
有了上面的知识 自定义插件就比较简单了
不过 有些准则可能需要注意一下
a:在你自定义的插件中,最好只留一个对外的方法接口 这样可以避免过多的方法名与其他插件的方法重复 通过传递的参数 决定执行自定义插件中的哪一块代码
b:在自定义的插件方法中 最好把jquery对象返回 这样能够保持jquery的链式操作
c:在自定义的插件中 提供一些默认属性 同时也可让用户自定义属性的值 让你的插件更具扩展性
好吧 啰嗦了那么多 看看实例吧
在此插件中 封装一个遍历多层json对象的方法 将json对象转换为特定的文本格式显示
1.新建一个iteratorJson.js文件 封装的代码如下
//建立一个立即调用函数表达式 封装自定义的方法
//这样可以使封装的方法内部的变量、表达式与外部的变量、表达式互补干扰
//下面的jQuery为实参 $为形参 这样做的目的是保持代码的一致性 与
(function($){
//往jquery的Object的实例部分添加方法
$.fn.iteratorJson=function(choice,data){
//choice用于判断是否深层迭代json对象
if(choice===true){ //进行深层迭代 即将json对象中的json对象都转换为文本
return iteratorDeep(data);
}else{
return iteratorNonDeep(data);
}
};
//下面定义的函数不对外调用
//深度迭代
function iteratorDeep(data){
//定义数组
var content=[];
$.each(data,function(key,val){
var next=key+":";
next+=$.isPlainObject(val)?iteratorDeep(val):val;
//向数组中添加内容
content.push("["+next+"]");
});
//转换数组为文本
return "{"+content.join(",")+"}";
}
//不进行深度迭代
function iteratorNonDeep(data){
var content=[];
$.each(data,function(key,val){
var next=key+":"+val;
content.push("["+next+"]");
});
return "{"+content.join(",")+"}";
}
//默认设置
var defaults={
"background-color":"red",
"font-size":"20"
};
$.fn.chainCss = function(options){
//将default和options的设置值合并到settings里面
var settings=$.extend({},defaults,options);
//this指的是jquery对象 因为新添加的方法chainCss也属于jquery对象的方法
return this.css(settings);
};
})(jQuery);2.测试界面 iteratorJsonTest.html
<html>
<head>
<script type="text/javascript" src="jquery-1.9.1.js"></script>
<!-- 引入自定义的插件 -->
<script type="text/javascript" src="iteratorJson.js"></script>
<script type="text/javascript">
$(function(){
//创建数组
var testJson={name:"刘德华",age:54,loveFemale:{name:"朱丽倩",age:50}};
//测试添加的方法
$("#disJson").text($(document).iteratorJson(true,testJson));
$("#disJson2").text($(document).iteratorJson(false,testJson));
//测试新添加的方法
console.log($("#disJson").chainCss({"background-color":"purple"}).width());
});
</script>
</head>
<body>
<div id="disJson"></div>
<div id="disJson2"></div>
</body>
</html>3.效果如下
