自定义插件

js原生

创建一个自定义 js 插件
》》》》》强列推荐（转的被人的）：如何定义一个高逼格的原生JS插件

第一次知道js还有一个with关键字

利用jQuery

jQuery为开发插件提拱了两个方法，分别是：
1、jquery.fn.extend(object); 给jquery对象添加方法。
2、jquery.extend(object); 为扩展jquery类本身.为类添加新的方法，可以理解为添加静态方法。
这两个方法都接受一个参数，类型为Object，Object对应的"名/值对"分别代表"函数或方法体/函数主体"。

创建一个自定义 jQuery 插件

// 定义
;(function($){
    $.alert = function(opts){
        // 默认设置
        var defaultOpts = {
                title: '',//标题
                content: '',//内容  文字 || html
                height: 50,//默认屏幕（父级）的50%
                width: 80,//默认屏幕（父级）的80%
                type: 'alert-default',//弹框类型
                effect: 'fadeIn',//出现效果，默认下跌落
                delayTime: 500,//效果延时时间，默认.5s
                autoClose: false,//自动关闭
                autoTime: 2000, //自动关闭时间默认2s
                autoEffect: 'default',//关闭效果
                ok: '确定',
                okCallback: function(){},//确定回调
                cancel: '取消',
                cancelCallback: function(){},//取消回调
                before : function() {
                    console.log('before')
                }, 
                close: function() {
                    console.log('close')
                },
                blankclose: false//空白处点击关闭
            }

        // 当没有自定义时
        for (i in defaultOpts) {
            if (opts[i] === undefined) {
                opts[i] = defaultOpts[i]
            }
        }

        // 处理事件和定义函数，运行函数
        opts.before && opts.before()

        var alertHtml = [
                '<section class="alert-main" id="alertMain">',
                    '<div class="alert-mask li-opacity" id="alertMask"></div>',
                    '<div class="alert-content '+ opts.type +'" id="alertContent">',
                    opts.content +'</div>',
                '</section>'
            ]

        $('body').append(alertHtml.join(''))

        console.log('alertHtml',alertHtml.join(''))
    }
})(jQuery)

// 使用
$.alert({
  title: '',//标题
  content: '',//内容  文字 || html
  height: 50,//默认屏幕（父级）的50%
  width: 80,//默认屏幕（父级）的80%
})