jQuery和Zepto插件写法例子

// ;(function($) {
    //一个插件的写法
//     $.fn.color = function(option) {

//         var options = $.extend({
//             col: 'blue',
//             fs: '20px'
//         }, option)

//         this.css({
//             color: options.col,
//             fontSize: options.fs
//         })

//         return this;
//     }

// })(Zepto);

;(function($) { //前面加分号是为了防止前面的代码没有写分号结尾影响程序。这里采用自执行函数，防止全局被污染
    //一组插件的写法
    $.extend($.fn, {   //$.extend等于$.fn.extend等于jQuery.prototype.extend。该方法会把后面的参数覆盖前面的参数，相同参数替换，不存在的参数则添加。
        color: function(option) {

            var options = $.extend({   //这里设置变量是为了设置默认值。
                col: 'blue',
                fs: '20px'
            }, option);

            this.css({  
                color: options.col,
                fontSize: options.fs
            })

            return this;  //链式调用
        },

        background: function(option) {
            var options = $.extend({
                bg: 'white'
            }, option);

            this.css('background', options.bg);

            return this;

        }
    });

})(Zepto);

 

转载于:https://www.cnblogs.com/zhonghonglin1997/p/10249206.html