jQuery扩展
* jQuery.fn.extend()与jQuery.extend()
jQuery.fn如何扩展。
jQuery插件 $.fn(object)与$.extend(object)
jQuery提供了两个方法帮助开发插件
- $.extend(object);扩展jQuery类本身；
- $.fn.extend(object);扩展jQuery对象；
1、扩展jQuery对象
$.fn 等于 $.prototype；这样就好理解了，就好比对String.porotype增加一个函数，然后所有的字符串对象都能够直接调用，jQuery也是如此,扩展原型方法，相当给对象添加“成员方法”，类的成员方法要对象才可以调用。给jQuery增加一个函数，然后所有的jQuery对象都能够调用。jQuery对象就是$("#id")，调用$("#id").modify();
写法：$.fn或$.fn.extend({})
//扩展jQuery对象；$.fn.extend({}) $.fn.modify = function () { $(this).val('********').css('color', 'yellow'); } $.fn.extend({ clear: function () { $(this).val(''); } }); //调用， $('input').clear(); 对象.成员方法
2、扩展jQuery类
2.1 $.extend()方法重载
- $.extend(obj)一个参数用于扩展jQuery类本身，相当于jQuery类的静态方法，使用“类名.方法名()”调用。
$.extend其实就是扩展"jQuery"这个类本身的静态函数。
//扩展jQuery对象本身 jQuery.extend({ "minValue": function (a, b) { return a < b ? a : b; }, "maxValue": function (a, b) { return a > b ? a : b; } }); //调用 var i = 100; j = 101; var min_v = $.minValue(i, j); // min_v 等于 100 var max_v = $.maxValue(i, j); // max_v 等于 101
3、 $.extend([deep], target, object1, [objectN])
- 用一个或多个对象来扩展一个对象，返回被扩展的对象；
- 如果不指定target，则给$命名空间本身进行扩展，为插件新增方法；
- deep: true。 可选，weitrue，则递归合并
- target：待修改的对象
- object1： 待合并到第一个对象的对象
- objectN: 可选，待合并到一个对象的对象
示例1： 合并 settings 和 options，修改并返回 settings。 var settings = { validate: false, limit: 5, name: "foo" }; var options = { validate: true, name: "bar" }; jQuery.extend(settings, options); 结果： settings == { validate: true, limit: 5, name: "bar" } 示例2： 合并 defaults 和 options, 不修改 defaults。 var empty = {}; var defaults = { validate: false, limit: 5, name: "foo" }; var options = { validate: true, name: "bar" }; var settings = jQuery.extend(empty, defaults, options); 结果： settings == { validate: true, limit: 5, name: "bar" } empty == { validate: true, limit: 5, name: "bar" }
4、 demo
var menu = (function (window, undefined) { var id = "tab_menu"; var This; var $menu = $("#" + id); var Menu = function () { This = this; this.Init.apply(this, arguments); } Menu.prototype.BindMenu = function () { /*为选项卡绑定右键*/ $(".tabs li").on('contextmenu', function (e) { /*选中当前触发事件的选项卡 */ var subtitle = $(this).text(); $('#mainTab').tabs('select', subtitle); //显示快捷菜单 $('#tab_menu').menu('show', { left: e.pageX, top: e.pageY }); return false; }); }; Menu.prototype.Init = function () { $menu.menu({ onClick: function (item) { var currTab = tab.GetCurrTab(); if (item.id === "tab_menu-tabrefresh") { //刷新 tab.Refresh(); } else if (item.id === "tab_menu-openFrame") { //在新窗口打开该标签 window.open(currTab.ref); } else if (item.id === "tab_menu-openFrame2") { //在新Tab打开该标签 tab.Add({ id: currTab.id, title: currTab.id, ref: currTab.ref.replace('/', '%') }); } else if (item.id === "tab_menu-tabcloseall") { //全部关闭 tab.RemoveAll(); } else if (item.id === "tab_menu-tabcloseother") { //关闭除当前之外的TAB tab.RemoveOthers(); } else if (item.id === "tab_menu-tabcloseleft") { //关闭当前左侧的TAB var prevall = $('.tabs-selected').prevAll(); if (prevall.length === 0) { return false; } prevall.each(function (i, n) { if ($('a.tabs-close', $(n)).length > 0) { //var t = $('a:eq(0) span', $(n)).text(); var t = $(n).index(); $('#mainTab').tabs('close', t); } }); return false; } else if (item.id === "tab_menu-tabcloseright") { //关闭当前右侧的TAB var nextall = $('.tabs-selected').nextAll(); if (nextall.length === 0) { return false; } nextall.each(function (i, n) { if ($('a.tabs-close', $(n)).length > 0) { var t = $(n).index(); // var t = $('a:eq(0) span', $(n)).text(); $('#mainTab').tabs('close', t); } }); return false; } else if (item.id === "tab_menu-tabclose") { //关闭当前 tab.Remove(currTab.id); } } }); }; return new Menu(); })(window);
调用：
//右击菜单绑定 menu.BindMenu();
5、简单应用
1、$.extend(object)
类似于.Net的扩展方法，用于扩展jQuery。然后就可以用$.的方式调用。
$(function(){ $.extend({ fun1: function () { alert("为jQuery扩展一个fun1函数!"); } }); $.fun1(); })
2、$.fn.extend(object)
扩展jQuery的对象。
$.fn.extend({ fun2: function () { alert("执行方法2"); } });
$("#id1").fun2();
可以用google来看看：
上面的写法等同于:
$.fn.fun2 = function () { alert("执行方法2"); } $(this).fun2();
3、私有域
其定义方式如下：
(function ($) { })(jQuery); //相当于 var fn = function (xxoo) { }; fn(jQuery);
以下代码弹出123。
$(function(){ var fn = function (xxoo) { }; fn(alert(123)); })
* 插件开发
1、定义作用域
开发一个jQuery插件，首先要把插件的代码与外界隔离开来，外部的代码不允许直接访问插件内部的代码，插件内部的代码也不影响外部。
//步骤1 定义插件私有作用域 (function ($) { })(jQuery);
这样就能保证插件内部的代码与外界隔离了。
2、扩展jQuery
定义了作用域之后，为了能够让外部调用，就需要将插件扩展到jQuery。
//步骤1 定义私有作用域 (function ($) { //步骤2 插件的扩展方法名称 $.fn.MyFrame = function (options) { } })(jQuery);
3、默认值
定义了jQuery插件之后，如果希望某些参数具有默认值，那么可以以这种方式来指定。
//步骤1 定义私有作用域 (function ($) { //步骤3 插件的默认值属性 var defaults = { Id: '#id1', }; //步骤2 插件的扩展方法名称 $.fn.MyFrame = function (options) { //步骤3 合并用户自定义属性，默认属性(如果options为空，则使用defaults) var options = $.extend(defaults, options); } })(jQuery);
4、支持jQuery选择器
//步骤1 定义私有作用域 (function ($) { //步骤3 插件的默认值属性 var defaults = { Id: '#id1', }; //步骤2 插件的扩展方法名称 $.fn.MyFrame = function (options) { //步骤3 合并用户自定义属性，默认属性(如果options为空，则使用defaults) var options = $.extend(defaults, options); } //步骤4 支持jQuery选择器 this.each(function () { }); })(jQuery);
5、支持jQuery的链式调用
//步骤1 定义私有作用域 (function ($) { //步骤3 插件的默认值属性 var defaults = { Id: '#id1', }; //步骤2 插件的扩展方法名称 $.fn.MyFrame = function (options) { //步骤3 合并用户自定义属性，默认属性(如果options为空，则使用defaults) var options = $.extend(defaults, options); } //步骤4 支持jQuery选择器 //步骤5 支持链式调用(将步骤4返回) return this.each(function () { }); })(jQuery);
6、插件内部方法
//步骤1 定义私有作用域 (function ($) { //步骤3 插件的默认值属性 var defaults = { Id: '#id1', }; //步骤6 在插件里定义函数 var MyFun = function (obj) { alert(obj); } //步骤2 插件的扩展方法名称 $.fn.MyFrame = function (options) { //步骤3 合并用户自定义属性，默认属性(如果options为空，则使用defaults) var options = $.extend(defaults, options); } //步骤4 支持jQuery选择器 //步骤5 支持链式调用(将步骤4返回) return this.each(function () { //步骤6 在插件里定义函数 MyFun(this); }); })(jQuery);
由于作用域关系，步骤6的私有函数目前允许的插件内部使用。
本文乃笔记，原文来自：http://www.cnblogs.com/xcj26/p/3345556.html
* 自执行的匿名函数闭包
1. 什么是自执行的匿名函数?
它是指形如这样的函数: (function {// code})();
2. 疑问 为什么(function {// code})();可以被执行, 而function {// code}();却会报错?
3. 分析
(1). 首先, 要清楚两者的区别:
(function {// code})是表达式, function {// code}是函数声明.
(2). 其次, js"预编译"的特点:
js在"预编译"阶段, 会解释函数声明, 但却会忽略表式.
(3). 当js执行到function() {//code}();时, 由于function() {//code}在"预编译"阶段已经被解释过, js会跳过function(){//code}, 试图去执行();, 故会报错;
当js执行到(function {// code})();时, 由于(function {// code})是表达式, js会去对它求解得到返回值, 由于返回值是一 个函数, 故而遇到();时, 便会被执行.
另外， 函数转换为表达式的方法并不一定要靠分组操作符()，我们还可以用void操作符，~操作符，!操作符……
1.插件demo
/*1、闭包区域，防止插件“污染”*/ (function($){ /*定义默认参数*/ var defaults = {foreground:'red', background:'yellow'}; /*2、扩展jQuery方法，制作插件, extend(obj) , obj => {"":"", "":""}*/ $.fn.extend({ "highLight":function (options) { var opts = $.extend({}, defaults, options); //这里需要返回jQuery的链式调用 return this.each(function () { //this指的jQuery对象 var $this = $(this); //根据参数来设置dom的样式 $this.css({backgroundColor:opts.background, color:opts.foreground}); }) } }); })(window.jQuery);
调用：
$(function() { $("p").highLight(); });
2. fn扩展demo
//去掉前后的逗号： 1,2,3，str不可以为'' String.prototype.TrimStr = function (str) { var value = this; if (this.startsWith(str)) { value = value.substring(str.length); } if (this.endsWith(str)) { value = value.substring(0, value.length - str.length); } return value; } var str1 = " ,123434, "; var ss1 = str1.TrimStr(', '); var ss2 = str1.TrimStr('4,');
