自定义jquery插件

开发自定义jquery插件

这几年随着各种前端框架的出现，操作dom被更多的封装起来，有些项目你甚至可以完全抛开jquery进行开发，但不可否认的是，jquery多年来作为前端工程师的必备基本功夫有其不可替代的作用，即使你不用jquery，你也应该掌握他:

• 大多数项目依然在采用jquery，虽然不作为框架，但作为操作dom的库文件用；
• 编写小网站依然是不错的选择，尤其是数不清的优秀插件能为你所用，他能单独为你撑起一片天；
• jquery的编程思想，是理解javascript的很好的路子；

---

begin（三种方式）

1. 构建js闭包

;(function($,window,document,undefined){

    'use strict';

    $('#app').html('hello world');

})(jquery,window,document)

注意事项：

• 1.1' ; '的使用，放只前一个函数末尾没';',导致js解析错误；

    var func = function{}
  
    (function($,window,document){
  
        'use strict';
  
        $('#app').html('hello world');
  
    })(jquery,window,document)

控制台报错uncaught syntaxerror: unexpected token {

• 1.2 jquery,window,document放入局部作用域中，据说可以加快速度，未测试出来，聊胜于无嘛，加上得了，undefined是为了...还没弄清，应该是变量污染。

• 1.3 'use strict';采用严格模式，编写更规范化，将来向es6容易过渡。

2. jquery插件模式（方式一）

;(function($,window,document){

    'use strict';

    $.fn.myplugin = function(){
        return($(this).html('hello world'))
    }

})(jquery,window,document)

//html code

<div id="app"></div>

...

<script type="text/javascript">
    $('#app').myplugin();
</script>

执行后div中会加入'hello world'.

jquery.fn 即 jquery.prototype

3. 对选中的元素遍历，jquery选择器的牛逼之处

$.fn.myplugin = function(){

    return this.each(function(){
        var $this = $(this);
        $this.html('hello world');
    })

}

//html code

<div class="app"></div>
<div class="app"></div>

<script type="text/javascript">
    $('.app').myplugin();
</script>

4. 默认属性/方法保护

var defaults = {
    width:100,
    height:100
}

var defaultsfunc = {
    getvalue:function(ele,param){},
    setvalue:function(ele,param){}
}

var methods = {
    'init':function(option){
        option = $.extend({},defaults,option);
        return this.each(function(){
            var $this = $(this);
            $this.html('hello world');
        })
    },
    'destroy':function(){}
}

$.fn.myplugin = function(){
    return methods.init.apply(this);
}

通过apply隐藏内部结构，通过$.extend来合并默认配置和用户自定义配置，避免多个实例对默认属性造成变化

5.对用户输入进行判断

用户输入的可能为多种类型,其他输入默认为非法输入，抛出异常：

$(ele).myplugin(); //按照默认配置初始化
$(ele).myplugin(string); //调用方法
$(ele).myplugin(object); //按照自定义配置初始化


$.fn.myplugin = function(){
    var args = arguments[0];
    if(!args){
        return methods.init.apply(this,arguments);
    }else{
        if(typeof(args) === 'object'){
            return methods.init.apply(this,arguments);
        }else if(typeof(args) === 'string'){
            if(methods[args]){
                return methods[args].apply(this,arguments);
            }else{
                throw new error(args + 'is not a function of this plugin');
            }
        }else{
            throw new error('unvaliabled param');
        }
    }
}

至此，一个插件的基本功能就具备了，接下来看看插件的其他知识.

6. 对jquery的方法进行拓展

//公有方法，外部能进行修改，可用于对插件进行拓展

$.fn.sayhello = function(){
    return {self:'self'}
}

or

$.fn.extend({
    sayhello: function(){
        return {self:'self'};
    }
})

//私有方法，只有插件内部进行调用

function func(){...}

or

var func = function(){...}

7.定义插件的另一种方式（方式二）

//默认参数
var defaluts = {
    foreground: 'red',
    background: 'yellow'
};

$.fn.extend({
    "highlight": function (options) {
        //检测用户传进来的参数是否合法
        if (!isvalid(options))
            return this;
        var opts = $.extend({}, defaluts, options); 
        return this.each(function () {  
            var $this = $(this); 
        });

    }
});

8.还有一种类似方式（方式三）

//默认参数
var defaluts = {};

var highlight = function(ele,options){
    $(ele).html(options.value);
}

$.fn.selfhighlight = function(args){
    return this.each(function(){
        var hl = new highlight(this,args);
    })
}

9.通过$.widget()应用jquery ui部件工场方法创建（很少用到jquery ui,没有尝试过，日后用到再实验吧）