jquey插件学习

1：这种方式主要应用在不须要调用dom元素和没有链式结构：

        $.extend({
        			sayhello:function () {
				console.log('hello')
			},
			dosomething:function () {
				console.log('dosomething')
			}
		});
		$.sayhello()

2：链式结构，使用场景最多的方式

	$.fn.myPlugin = function() { // 非链式
        //在这里面,this指的是用jQuery选中的元素
        //example :$('a'),则this=$('a')
        this.css('color', 'red');
    }

 

    $.fn.myPlugin = function() {
      //在这里面,this指的是用jQuery选中的元素
      this.css('color', 'red');
      return this.each(function() { //用return 返回链式结构
          //对每一个元素进行操做
          $(this).append(' ' + $(this).attr('href'));
      }))
  }
  
		$.fn.myPlugin = function(options) { 
            var defaults = {
                'color': 'red',
                'fontSize': '12px'
            };
            var settings = $.extend(defaults, options); // 传参，可是这种状况改变了defaults的参数  var settings = $.extend({},defaults, options); // 是否该建立一个空对象？事实证实并不会影响defaults

            return this.css({
                'color': settings.color,
                'fontSize': settings.fontSize
            });
        }

3：面向对象的插件开发 参考文章

好的作法是咱们在代码开头加一个分号，这在任什么时候候都是一个好的习惯。

同时，将系统变量以参数形式传递到插件内部也是个不错的实践。

当咱们这样作以后，window等系统变量在插件内部就有了一个局部的引用，能够提升访问速度，会有些许性能的提高

最后咱们获得一个很是安全结构良好的代码：

;(function($,window,document,undefined){
    //咱们的代码。。
    //blah blah blah...
})(jQuery,window,document);

而至于这个undefined，稍微有意思一点，为了获得没有被修改的undefined，咱们并无传递这个参数，但却在接收时接收了它，由于实际并无传，因此‘undefined’那个位置接收到的就是真实的'undefined'了。是否是有点hack的味道，值得细细体会的技术，固然不是我发明的，都是从前人的经验中学习。

因此最后咱们的插件成了这样：

;(function($, window, document,undefined) {
    //定义Beautifier的构造函数
    var Beautifier = function(ele, opt) {
        this.$element = ele,
        this.defaults = {
            'color': 'red',
            'fontSize': '12px',
            'textDecoration': 'none'
        },
        this.options = $.extend({}, this.defaults, opt)
    }
    //定义Beautifier的方法
    Beautifier.prototype = {
        beautify: function() {
            return this.$element.css({
                'color': this.options.color,
                'fontSize': this.options.fontSize,
                'textDecoration': this.options.textDecoration
            });
        }
    }
    //在插件中使用Beautifier对象
    $.fn.myPlugin = function(options) {
        //建立Beautifier的实体
        var beautifier = new Beautifier(this, options);
        //调用其方法
        return beautifier.beautify();
    }
})(jQuery, window, document);

 

一个安全，结构良好，组织有序的插件编写完成。

关于变量定义及命名

如今谈谈关于变量及方法等的命名，没有硬性规定，但为了规范，遵循一些约定仍是颇有必要的。

变量定义：好的作法是把将要使用的变量名用一个var关键字一并定义在代码开头，变量名间用逗号隔开。缘由有二：

• 一是便于理解，知道下面的代码会用到哪些变量，同时代码显得整洁且有规律，也方便管理，变量定义与逻辑代码分开；
• 二是由于JavaScript中全部变量及函数名会自动提高，也称之为JavaScript的Hoist特性，即便你将变量的定义穿插在逻辑代码中，在代码解析运行期间，这些变量的声明仍是被提高到了当前做用域最顶端的，因此咱们将变量定义在一个做用域的开头是更符合逻辑的一种作法。固然，再次说明这只是一种约定，不是必需的。

变量及函数命名 通常使用驼峰命名法（CamelCase），即首个单词的首字母小写，后面单词首字母大写，好比resultArray，requestAnimationFrame。对于常量，全部字母采用大写，多个单词用下划线隔开，好比WIDTH=100，BRUSH_COLOR='#00ff00'。当变量是jQuery类型时，建议以$开头，开始会不习惯，但常常用了以后会感受很方便，由于能够很方便地将它与普通变量区别开来，一看到以$开头咱们就知道它是jQuery类型能够直接在其身上调用jQuery相关的方法，好比var $element=$('a'); 以后就能够在后面的代码中很方便地使用它，而且与其余变量容易区分开来。

引号的使用：既然都扯了这些与插件主题无关的了，这里再多说一句，通常HTML代码里面使用双引号，而在JavaScript中多用单引号，好比下面代码所示：

var name = 'Wayou';
document.getElementById(‘example’).innerHTML = '< a href="http: //wayouliu.duapp.com/">'+name+'</a>'; //href=".." HTML中保持双引号，JavaScript中保持单引号

 

一方面，HTML代码中原本就使用的是双引号，另外一方面，在JavaScript中引号中还须要引号的时候，要求咱们单双引号间隔着写才是合法的语句，除非你使用转意符那也是能够的。再者，坚持这样的统一能够保持代码风格的一致，不会出现这里字符串用双引号包着，另外的地方就在用单引号。

 

;(function ($,window,document,undefined

) { function Beauty(ele,opt) { this.$ele = ele; this.defaults = { 'color':'#fe473c' }, this.opt = opt; this.options = $.extend({},this.defaults,this.opt); };// 插件的方法 Beauty.prototype.setattr = function () { //return 出链式结构 return this.$ele.css({ 'color':this.options.color }) }; $.fn.myPlugin = function () { var buff = new Beauty(this,{'color':'green'}); //return 出链式结构 return buff.setattr() } })(jQuery,window,document)