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阅读 173,285评论 25 708
  • 1.JQuery 基础 改变web开发人员创造搞交互性界面的方式。设计者无需花费时间纠缠JS复杂的高级特性。 1....
    LaBaby_阅读 1,367评论 0 2
  • 在线阅读 http://interview.poetries.top[http://interview.poetr...
    前端进阶之旅阅读 114,791评论 24 450
  • 今天再次重读笑来老师第43期的专栏文章关于创业和投资的必须知道的概念-成长率,结合最近的工作、生活体验又有了全新的...
    肥羊并不肥阅读 362评论 0 1
  • 黄昏照两袖,霞落露沾身。 隐者今何在,梅花深处寻。 杭州孤山北麓深处,一片梅花盛开。杳杳殊不见人,悠然安静。此时忽...
    金陵子弟阅读 310评论 0 0