jQuery插件写法总结以及面向对象方式写法总结
前两个是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插件写法总结以及面向对象方式写法总结的更多相关文章
- [转]jQuery插件写法总结以及面向对象方式写法
本文转自:http://www.xuanfengge.com/jquery-plug-in-written-summary-and-summary-of-writing-object-oriented ...
- jQuery插件实践之轮播练习(一)
所有文章搬运自我的个人主页:sheilasun.me 因为从来没写过jQuery插件,所以本文要通过一个轮播的例子,练习jQuery插件的写法. 新建插件文件 在讨论细节之前,先新建插件文件(当然也可 ...
- 第7章 jQuery插件的使用和写法
第7章 jQuery插件的使用和写法 插件又称扩展,是一种遵循一定规范的应用程序接口写出来的程序. 插件的编写思想基于面向对象. 获取最新的插件可以查看jquery官网:http://plugins. ...
- jQuery 插件写法2
转载:http://www.xuanfengge.com/jquery-plug-in-written-summary-and-summary-of-writing-object-oriented-m ...
- jquery插件的写法
jquery插件及zepto插件,写法上有些区别. 区别点: 1.自定义事件的命名空间 jq的时间命名空间是用点“.”,而zepto是用冒号“:” 如 //jquery $(this).trigger ...
- jQuery 插件写法
一.jQuery插件的类型 1. jQuery方法 很大一部分的jQuery插件都是这种类型,由于此类插件是将对象方法封装起来,在jQuery选择器获取jQuery对象过程中进行操作,从而发挥jQue ...
- JQuery插件的写法和规范
首先,在具体说明编写插件之前,我们先假定一个使用场景:有一个HTML页面(或.aspx页面),页面上放置了一个5行3列的表格,即:<table></table>标记,具体代码如 ...
- JQuery插件的写法 (转:太棒啦!)
JQuery插件写法的总结 最近Web应用程序中越来越多地用到了JQuery等Web前端技术.这些技术框架有效地改善了用户的操作体验,同时也提高了开发人员构造丰富客户 端UI的效率.JQuery本身提 ...
- Jquery插件写法及extentd函数
JQuery插件写法 JQuery插件又分为类扩展方法和对象扩展方法两种,类插件是定义在JQuery命令空间的全局函数,直接通过可调用,如可调用,如可调用,如.ajax():对象插件是扩展JQuery ...
随机推荐
- CSS基本知识3-CSS盒模型
box-sizing: content-box|border-box|inherit; 值 描述 content-box 这是由 CSS2.1 规定的宽度高度行为. 宽度和高度分别应用到元素的内容框. ...
- Wireshark基本介绍和学习TCP三次握手
wireshark介绍 wireshark的官方下载网站: http://www.wireshark.org/ wireshark是非常流行的网络封包分析软件,功能十分强大.可以截取各种网络封包,显示 ...
- android开发之存储数据
android数据存储之SharedPreferences 一:SharedPreferences SharedPreferences是Android平台上一个轻量级的存储类,用来保存应用的一些常用配 ...
- 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 ...
- UVa 11987 Almost Union-Find(支持删除操作的并查集)
传送门 Description I hope you know the beautiful Union-Find structure. In this problem, you’re to imple ...
- 常见linux命令释义(第九天)—— Bash Shell 的操作环境Shell 中的管道命令一些管道命令
最近好懒好懒.连写文章都写不好了.于是只能写读一点书,记一点读书笔记了.太懒了,没办法.慢慢恢复自己的状态吧. 管道命令仅会处理strandard output 的内容,对于strandard err ...
- 【Linux】使用update-alternatives命令进行版本的切换
引言 在Redhat中也有此功能,用于切换不同版本. 在Debian系统中,我们可能会同时安装有很多功能类似的程序和可选配置,可能会出现同一软件的多个版本并存的场景.比如像是一些编程语言工具,一些系统 ...
- URL Schemes
APP 被唤醒离不开对URL Schemes的认知. 苹果选择沙盒来保障用户的隐私和安全,但沙盒也阻碍了应用间合理的信息共享,于是有了 URL Schemes 这个解决办法. URL Schemes ...
- System.Properties和System.getenv区别
网上很多使用的是getProperties.说获得系统变量,但是其实不正确.getProperties中所谓的"system properties"其实是指"java s ...
- HP滤波原理浅学
今天偶然看到如果使用eviews做HP滤波,一时好奇,于是找了点资料看看~ 由于纯属自学,没有找到教材,大家姑且一看咯,也不知道对不对哈.