前两个是jQuery插件,后面2个是以对象的形式开发,都类似。

写法一

(function($, window){
// 初始态定义
var _oDialogCollections = {}; // 插件定义
$.fn.MNDialog = function (_aoConfig) {
// 默认参数,可被重写
var defaults = {
// string
sId : "",
// num
nWidth : 400,
// bollean
bDisplayHeader : true,
// object
oContentHtml : "",
// function
fCloseCallback : null
}; var _oSelf = this,
$this = $(this); // 插件配置
this.oConfig = $.extend(defaults, _aoConfig); // 初始化函数
var _init = function () {
if (_oDialogCollections) {
// 对于已初始化的处理
// 如果此时已经存在弹框,则remove掉再添加新的弹框
}
// 初始化弹出框数据
_initData();
// 事件绑定
_loadEvent();
// 加载内容
_loadContent();
}
// 私有函数
var _initData = function () {};
var _loadEvent = function () {};
var _loadContent = function () {
// 内容(分字符和函数两种,字符为静态模板,函数为异步请求后组装的模板,会延迟,所以特殊处理)
if($.isFunction(_oSelf.oConfig.oContentHtml)) {
_oSelf.oConfig.oContentHtml.call(_oSelf, function(oCallbackHtml) {
// 便于传带参函数进来并且执行
_oSelf.html(oCallbackHtml);
// 有回调函数则执行
_oSelf.oConfig.fLoadedCallback && _oSelf.oConfig.fLoadedCallback.call(_oSelf, _oSelf._oContainer$);
});
} else if ($.type(_oSelf.oConfig.oContentHtml) === "string") {
_oSelf.html(_oSelf.oConfig.oContentHtml);
_oSelf.oConfig.fLoadedCallback && _oSelf.oConfig.fLoadedCallback.call(_oSelf, _oSelf._oContainer$);
} else {
console.log("弹出框的内容格式不对,应为function或者string。");
}
}; // 内部使用参数
var _oEventAlias = {
click : 'D_ck',
dblclick : 'D_dbl'
}; // 提供外部函数
this.close = function () {
_close();
} // 启动插件
_init(); // 链式调用
return this;
};
// 插件结束
})(jQuery, window); //调用
var MNDialog = $("#header").MNDialog({
sId : "#footer", //覆盖默认值
fCloseCallback : dialog,//回调函数
oContentHtml : function(_aoCallback){
_aoCallback(_oEditGrpDlgView.el);
}
}
});
// 调用提供的函数
MNDialog.close;
function dialog(){ }

分析

1. 自调用匿名函数

(function($, window) {
// jquery code
})(jQuery, window);

  用处:通过定义一个匿名函数,创建了一个“私有”的命名空间,该命名空间的变量和方法,不会破坏全局的命名空间。这点非常有用也是一个JS框架必须支持的功能,jQuery被应用在成千上万的JavaScript程序中,必须确保jQuery创建的变量不能和导入他的程序所使用的变量发生冲突。

2. 匿名函数为什么要传入window

通过传入window变量,使得window由全局变量变为局部变量,当在jQuery代码块中访问window时,不需要将作用域链回退到顶层作用域,这样可以更快的访问window;这还不是关键所在,更重要的是,将window作为参数传入,可以在压缩代码时进行优化,看看jquery.min.js:

(function(a,b){})(jQuery, window); // jQuery被优化为a, window 被优化为 b

3. 全局变量this定义

var _oSelf = this,
$this = $(this);

  使得在插件的函数内可以使用指向插件的this

4. 插件配置

this.oConfig = $.extend(defaults, _aoConfig);

  设置默认参数,同时也可以再插件定义时传入参数覆盖默认值

5. 初始化函数

一般的插件会有init初始化函数并在插件的尾部初始化

6. 私有函数、公有函数

私有函数:插件内使用,函数名使用”_”作为前缀标识共有函数:可在插件外使用,函数名使用”this.”作为前缀标识,作为插件的一个方法供外部使用

7. return this

最后返回jQuery对象,便于jQuery的链式操

jQuery插件写法总结以及面向对象方式写法总结的更多相关文章

  1. [转]jQuery插件写法总结以及面向对象方式写法

    本文转自:http://www.xuanfengge.com/jquery-plug-in-written-summary-and-summary-of-writing-object-oriented ...

  2. jQuery插件实践之轮播练习(一)

    所有文章搬运自我的个人主页:sheilasun.me 因为从来没写过jQuery插件,所以本文要通过一个轮播的例子,练习jQuery插件的写法. 新建插件文件 在讨论细节之前,先新建插件文件(当然也可 ...

  3. 第7章 jQuery插件的使用和写法

    第7章 jQuery插件的使用和写法 插件又称扩展,是一种遵循一定规范的应用程序接口写出来的程序. 插件的编写思想基于面向对象. 获取最新的插件可以查看jquery官网:http://plugins. ...

  4. jQuery 插件写法2

    转载:http://www.xuanfengge.com/jquery-plug-in-written-summary-and-summary-of-writing-object-oriented-m ...

  5. jquery插件的写法

    jquery插件及zepto插件,写法上有些区别. 区别点: 1.自定义事件的命名空间 jq的时间命名空间是用点“.”,而zepto是用冒号“:” 如 //jquery $(this).trigger ...

  6. jQuery 插件写法

    一.jQuery插件的类型 1. jQuery方法 很大一部分的jQuery插件都是这种类型,由于此类插件是将对象方法封装起来,在jQuery选择器获取jQuery对象过程中进行操作,从而发挥jQue ...

  7. JQuery插件的写法和规范

    首先,在具体说明编写插件之前,我们先假定一个使用场景:有一个HTML页面(或.aspx页面),页面上放置了一个5行3列的表格,即:<table></table>标记,具体代码如 ...

  8. JQuery插件的写法 (转:太棒啦!)

    JQuery插件写法的总结 最近Web应用程序中越来越多地用到了JQuery等Web前端技术.这些技术框架有效地改善了用户的操作体验,同时也提高了开发人员构造丰富客户 端UI的效率.JQuery本身提 ...

  9. Jquery插件写法及extentd函数

    JQuery插件写法 JQuery插件又分为类扩展方法和对象扩展方法两种,类插件是定义在JQuery命令空间的全局函数,直接通过可调用,如可调用,如可调用,如.ajax():对象插件是扩展JQuery ...

随机推荐

  1. CSS基本知识3-CSS盒模型

    box-sizing: content-box|border-box|inherit; 值 描述 content-box 这是由 CSS2.1 规定的宽度高度行为. 宽度和高度分别应用到元素的内容框. ...

  2. Wireshark基本介绍和学习TCP三次握手

    wireshark介绍 wireshark的官方下载网站: http://www.wireshark.org/ wireshark是非常流行的网络封包分析软件,功能十分强大.可以截取各种网络封包,显示 ...

  3. android开发之存储数据

    android数据存储之SharedPreferences 一:SharedPreferences SharedPreferences是Android平台上一个轻量级的存储类,用来保存应用的一些常用配 ...

  4. AOJ DSL_2_C Range Search (kD Tree)

    Range Search (kD Tree) The range search problem consists of a set of attributed records S to determi ...

  5. UVa 11987 Almost Union-Find(支持删除操作的并查集)

    传送门 Description I hope you know the beautiful Union-Find structure. In this problem, you’re to imple ...

  6. 常见linux命令释义(第九天)—— Bash Shell 的操作环境Shell 中的管道命令一些管道命令

    最近好懒好懒.连写文章都写不好了.于是只能写读一点书,记一点读书笔记了.太懒了,没办法.慢慢恢复自己的状态吧. 管道命令仅会处理strandard output 的内容,对于strandard err ...

  7. 【Linux】使用update-alternatives命令进行版本的切换

    引言 在Redhat中也有此功能,用于切换不同版本. 在Debian系统中,我们可能会同时安装有很多功能类似的程序和可选配置,可能会出现同一软件的多个版本并存的场景.比如像是一些编程语言工具,一些系统 ...

  8. URL Schemes

    APP 被唤醒离不开对URL Schemes的认知. 苹果选择沙盒来保障用户的隐私和安全,但沙盒也阻碍了应用间合理的信息共享,于是有了 URL Schemes 这个解决办法. URL Schemes ...

  9. System.Properties和System.getenv区别

    网上很多使用的是getProperties.说获得系统变量,但是其实不正确.getProperties中所谓的"system properties"其实是指"java s ...

  10. HP滤波原理浅学

    今天偶然看到如果使用eviews做HP滤波,一时好奇,于是找了点资料看看~ 由于纯属自学,没有找到教材,大家姑且一看咯,也不知道对不对哈.