jq-插件制作
1 插件基本要点
1.1 jQuery 插件命名 jquery.[插件名].js 如jquery.color.js
1.2 所有对象方法都应当附加到jQuery.fn对象上，而所有的全局函数都应当附加到jQuery对象上
1.3 插件内部 this指向jQuery对象
1.4 可以通过 this.each()遍历所有元素
1.5 前面加；避免别人的坑
1.6 插件应该返回一个jQuery对象，除非返回的是一些需要获取的量，如字符串或数组
1.7 避免在插件内部使用$作为jQuery对象的别名 ,应该使用jQuery，可以通过使用闭包来这么做
2 jQuery提供了两种用来扩展对象的方法 : 都接收一个键值对的对象
jQuery.fn.extend()
jQuery.extend() 除了可以扩展jquery对象,还可以用来扩展已有的Object对象--设置插件的一系列默认参数
<script>
//$.extend();
/*$.extend({
'log': function(message){
var nowDate = new Date(),
y = nowDate.getFullYear(),//获取年
m = nowDate.getMonth()+1, //获取月
d = nowDate.getDate(), //获取日
w = nowDate.getDay(), //获取星期
h = nowDate.getHours(), //获取小时
min = nowDate.getMinutes(), //获取分
s = nowDate.getSeconds(); //获取秒
//数字转换为汉字简体数字
switch(w){
case 1:
w = '一';
break;
case 2:
w = '二';
break;
case 3:
w = '三';
break;
case 4:
w = '四';
break;
case 5:
w = '五';
break;
case 6:
w = '六';
break;
default:
w = '日';
};
time = y +'/'+ m +'/'+ d +'/星期'+ w +' '+ h +':'+ min +':'+ s;
console.log(time +' My App: '+message);
}
});
$.log('正常运行'); //调用*/
//$.fn.plugName = function(){}格式
/*$.fn.myPlugn1 = function(){
this.css('color', 'red'); //这里this指调用插件时的jquery对象
this.each(function(){
//each里面的this指dom对象
$(this).append(' '+ $(this).attr('href')); //$(this) 变成为jquery对象
});
};*/
//让插件支持链式调用
/*$.fn.myPlugn1 = function(){
this.css('color', 'red'); //这里this指调用插件时的jquery对象--jquery的对象集合
return this.each(function(){ //让插件支持链式调用
//each里面的this指dom对象 $(this)将这个this变成jquery对象
$(this).append(' '+ $(this).attr('href')); //$(this) 变成为jquery对象
});
};
$('a').myPlugn1(); //使用插件*/
//让插件接受参数
/*$.fn.myPlugn2 = function(options){
var defaults = { //defaults 是指定变量
'color': 'red',
'fontSize': '12px'
};
var settings = $.extend(defaults, options);
return this.css({
'color': settings.color,
'fontSize': settings.fontSize
})
};
//$('a').myPlugn2({'color': '#2c9929'});
//调用未指定字体大小的时候，会运用插件里的默认值12px
//$('a').myPlugn2({'color': '#2c9929', 'fontSize': '20px'});
//保护好参数
$.fn.myPlugn2 = function(options){
var defaults = { //defaults 是指定变量名称
'color': 'red',
'fontSize': '12px'
};
var settings = $.extend({},defaults, options);
debugger;
return this.css({
'color': settings.color,
'fontSize': settings.fontSize
})
};*/
//保护参数做法1
/*$.fn.myPlugn2 = function(options){
var defaults = { //defaults 是指定变量名称
'color': 'red',
'fontSize': '12px'
};
var settings = $.extend({}, defaults, options); //将一个空对象作为第一个参数
debugger;
return this.css({
'color': settings.color,
'fontSize': settings.fontSize
})
};
;(function($, window, document, undefined){
$.fn.myPlugn2 = function(options){
var defaults = { //defaults 是指定变量名称
'color': 'red',
'fontSize': '12px'
};
var settings = $.extend({}, defaults, options); //将一个空对象作为第一个参数
//debugger;
return this.css({
'color': settings.color,
'fontSize': settings.fontSize
})
};
})(jQuery, window, document);
$('a').myPlugn2({'color': '#2c9929', 'fontSize': '20px'}); */
//面向对象的插件开发
// 为什么要使用面向对象方式：如果不这样，你可能需要一个方法的时候就去定义一个function，当需要另外一个方法的时候，再去随便定义一个function，
// 同样，需要一个变量的时候，毫无规则地定义一些散落在代码各处的变量。
// 还是老问题，不方便维护，也不够清晰。当然，这些问题在代码规模较小时是体现不出来的。
// 如果将需要的重要变量定义到对象的属性上，函数变成对象的方法，当我们需要的时候通过对象来获取，一来方便管理，
// 二来不会影响外部命名空间，因为所有这些变量名还有方法名都是在对象内部。
/*var MyFun = function(ele, opt){ //定义一构造函数
this.$element = ele,
this.defaults = {
'color': 'red',
'fontSize': '12px',
'textDecoration': 'none'
},
this.options = $.extend({}, this.defaults, opt);
};
MyFun.prototype = {
beautify : function(){
return this.$element.css({
'color': this.options.color,
'fontSize': this.options.fontSize,
'textDecoration': this.options.textDecoration
})
}
};
//在插件中使用 MyFun
$.fn.myPlugin = function(options){
var myfun = new MyFun(this, options);
return myfun.beautify();
};*/
//$('a').myPlugin({'color': '#2c9929', 'fontSize': '20px'}); //调用
//$('a').myPlugin({'color': '#2c9929', 'fontSize': '20px', 'textDecoration': 'line-through'});
//再考虑到其他一些因素，比如我们将这段代码放到页面后，前面别人写的代码没有用分号结尾，
//或者前面的代码将window, undefined等这些系统变量或者关键字修改掉了，正好我们又在自己的代码里面进行了使用，那结果也是不可预测的
//为了得到没有被修改的undefined，我们并没有传递这个参数，但却在接收时接收了它，因为实际并没有传，所以‘undefined’那个位置接收到的就是真实的'undefined'了*/
;(function($, window, document, undefined){
'use strict';
var MyFun = function(ele, opt){ //定义一构造函数
this.$element = ele; //保存调用这个方法的jquery对象--dom组成的数组
this.defaults = {
'color': 'red',
'fontSize': '12px',
'textDecoration': 'none'
};
this.options = $.extend({}, this.defaults, opt);
};
MyFun.prototype = {
beautify: function(){
return this.$element.css({
'color': this.options.color,
'fontSize': this.options.fontSize,
'textDecoration': this.options.textDecoration
})
},
addlink: function(){
//return this.$element.append(' '+ this.$element.attr('href'));
//this.$element; //jquery对象 --dom对象组成的数组
return this.$element.each(function(){
$(this).append(' '+ $(this).attr('href'));
})
}
};
//在插件中使用 MyFun
$.fn.myPlugin = function(options){
var myfun = new MyFun(this, options);
return myfun.beautify();
};
$.fn.myPlugin2 = function(options){
var myfun = new MyFun(this, options);
return myfun.addlink();
}
})(jQuery, window, document);
//$('a').myPlugin({'color': '#2c9929', 'fontSize': '20px'}); //调用
$('a').myPlugin({'color': '#2c9929', 'fontSize': '20px', 'textDecoration': 'underline'}).myPlugin2();
$('p').append('<span>你好</span>').css('color', 'red');
</script>
