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)