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对象--设置插件的一系列默认参数
![](https://images.cnblogs.com/OutliningIndicators/ContractedBlock.gif)
<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>