jQuery插件编写设计模式

jquery 插件编写规范

将window, document写在闭包中,形成了局部变量,这样可以加快解析过程

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

// 定义插件名字
var pluginName = 'bearDialog';

// 设置默认配置项
var defaults = {
    width: 200,
    height: 200,
    title: '提示'
}

// 真正的插件构造函数
function Dialog(el, opt) {

    // 获取调用插件的dom
    this.el = el; // 获取原生dom
    this.$el = $(el); // 获取jquery包装对象
    // 使用mixin模式扩展默认配置参数
    this.opt = $.extend({}, defaults, opt);
    this.pluginName = pluginName;

    this.init();

}

Dialog.prototype.init = function() {
    // 对话框初始化函数
    console.log(this.el);
    console.log(this.$el);
    console.log(this.opt);
}

// 初始化的时候,真正的扩展插件
$.fn[pluginName] = function(options) {

    // 针对一个dom的调用只生成一个实例
    $(this).each(function(idx, ele) {

        // $.data可以给任何对象绑定数据,并且该数据是存在内存中的,而不是单纯的dom上的data属性
        if (!$.data(ele, 'plugin_' + pluginName)) {

            $.data(ele, 'plugin_' + pluginName, pluginName);
            new Dialog(ele, options);

        }

    });
  }
})(jQuery, window, document);

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 161,644评论 24 692
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 957评论 0 2
  • 在线阅读 http://interview.poetries.top[http://interview.poetr...
    程序员小月阅读 100,829评论 23 444
  • 今天再次重读笑来老师第43期的专栏文章关于创业和投资的必须知道的概念-成长率,结合最近的工作、生活体验又有了全新的...
    肥羊并不肥阅读 151评论 0 0
  • 黄昏照两袖,霞落露沾身。 隐者今何在,梅花深处寻。 杭州孤山北麓深处,一片梅花盛开。杳杳殊不见人,悠然安静。此时忽...
    金陵子弟阅读 144评论 0 0
  • 有着举世闻名的世界最佳岛屿之一 ——巴厘岛 这个如同油画一样色彩斑斓的地方 这里的人们大都有着自己的信仰 不管外界...
    candy_小微阅读 268评论 5 4
  • 在关系映射文件中标签中加入dynamic-update=“true”,那么会在更新的时候,执行实际更新的字段的up...
    文先生_1357阅读 252评论 0 0
  • 文 / 海椒妞 咱都知道跑步有双好鞋不伤膝盖,打游戏搞块机械键盘更容易holy shit。我们玩理财也有相关装备,...
    海椒妞阅读 437评论 0 3