做网站哪个服务器好,手表网站欧米茄官网,asp.net网站建设论文,网络推广引流是什么意思本文是参考了Joey的博客后整理的。 先从一个简单扩展jQuery对象的demo开始说起#xff1a; //sample:扩展jquery对象的方法#xff0c;redTextColor()用于改变字体颜色。(function ($) {$.fn.extend({redTextColor: function () {// 默认字体颜色为红色return th… 本文是参考了Joey的博客后整理的。 先从一个简单扩展jQuery对象的demo开始说起 //sample:扩展jquery对象的方法redTextColor()用于改变字体颜色。(function ($) {$.fn.extend({redTextColor: function () {// 默认字体颜色为红色return this.css({ color: red });}});})(window.jQuery); 调用方式 $(function(){$(p).redTextColor();
}) 这是一个简单的扩展下面我们开始详细分析一下上面的代码。 一、jQuery的插件机制 为了方便用户创建插件jQuery提供了jQuery.extend()和jQuery.fn.extend()两种方法。 1.jQuery.extend()方法有一个重载 jQuery.extend(object) ,一个参数的用于扩展jQuery类本身也就是用来在jQuery类/命名空间上增加新函数或者叫静态方法例如jQuery内置的 ajax方法都是用jQuery.ajax()这样调用的有点像 “类名.方法名” 静态方法的调用方式。下面我们也来写个jQuery.extend(object)的例子 //扩展jQuery对象本身jQuery.extend({minValue: function (a, b) {///summary/// 比较两个值返回最小值////summaryreturn a b ? a : b;},maxValue: function (a, b) {///summary/// 比较两个值返回最大值////summaryreturn a b ? a : b;}});//调用var i 100; j 101;var min_v $.minValue(i, j); // min_v 等于 100var max_v $.maxValue(i, j); // max_v 等于 101 重载版本jQuery.extend([deep], target, object1, [objectN]) 用一个或多个其他对象来扩展一个对象返回被扩展的对象。 如果不指定target则给jQuery命名空间本身进行扩展。这有助于插件作者为jQuery增加新方法。 如果第一个参数设置为true则jQuery返回一个深层次的副本递归地复制找到的任何对象。否则的话副本会与原对象共享结构。 未定义的属性将不会被复制然而从对象的原型继承的属性将会被复制。参数 deep: 可选。如果设为true则递归合并。 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 } 这个重载的方法我们一般用来在编写插件时用自定义插件参数去覆盖插件的默认参数。 jQuery.fn.extend(object)扩展 jQuery 元素集来提供新的方法通常用来制作插件。 首先我们来看fn 是什么东西呢。查看jQuery代码就不难发现。 jQuery.fn jQuery.prototype { init: function( selector, context ) {.....};}; 原来 jQuery.fn jQuery.prototype也就是jQuery对象的原型。那jQuery.fn.extend()方法就是扩展jQuery对象的原型方法。我们知道扩展原型上的方法就相当于为对象添加”成员方法“类的”成员方法“要类的对象才能调用所以使用jQuery.fn.extend(object)扩展的方法 jQuery类的实例可以使用这个“成员函数”。jQuery.fn.extend(object)和jQuery.extend(object)方法一定要区分开来。 二、自执行的匿名函数/闭包 什么是自执行的匿名函数? 形式上是指(function{code})()这样的函数 疑问 为什么(function {// code})();可以被执行, 而function {// code}();却会报错? (1). 首先, 要清楚两者的区别: (function {// code})是表达式, function {// code}是函数声明. (2). 其次, js预编译的特点: js在预编译阶段, 会解释函数声明, 但却会忽略表式. (3). 当js执行到function() {//code}();时, 由于function() {//code}在预编译阶段已经被解释过, js会跳过function(){//code}, 试图去执行();, 故会报错; 当js执行到(function {// code})();时, 由于(function {// code})是表达式, js会去对它求解得到返回值, 由于返回值是一 个函数, 故而遇到();时, 便会被执行. 另外 函数转换为表达式的方法并不一定要靠分组操作符()我们还可以用void操作符~操作符!操作符…… 例如 bootstrap 框架中的插件写法!function($){//do something;}(jQuery);和 (function($){//do something;})(jQuery); 是一回事。 匿名函数最大的用途是创建闭包这是JavaScript语言的特性之一并且还可以构建命名空间以减少全局变量的使用。例如 var a1; (function()(){ var a100; })(); alert(a); //弹出 1更多 闭包和匿名函数 可查看 Javascript的匿名函数与自执行 这篇文章。 三.一步一步封装jQuery插件 接下来我们写一个高亮的插件 1.定义一个闭包区域防止插件污染 //这样闭包可以限制命名空间(function($){...code...
})(window.jQuery); 2.使用jQuery.fn.extend()的方式制作插件 (function ($) {$.fn.extend({highlight: function (op) {........}});
})(window.jQuery); 3.设置默认参数实现插件功能 (function ($) {$.fn.extend({highlight: function (op) {var opt $.extend({},defaults,op);this.each(function () {$(this).css({backgroundColor: opt.background,color: opt.foreground});})}}); //默认参数var defaults {background: red,foreground: yellow}
})(window.jQuery); 至此高亮插件已基本实现了调用代码如下 $(p).highlight({ background: yellow,foreground: gray
}); 这里只能 直接调用不能链式调用。我们知道jQuey是可以链式调用的就是可以在一个jQuery对象上调用多个方法如$(p).css({marginTop:100px}).addAttr(title,测试“); 但是我们上面的插件就不能这样链式调用了。比如$(p).highLight().css({marginTop:100px}); //将会报找不到css方法原因在与我的自定义插件在完成功能后没有将 jQuery对象给返回出来。接下来return jQuery对象让我们的插件也支持链式调用。其实很简单就是执行完我们插件代码的时候将jQuery对像return 出来和上面的代码没啥区别 (function ($) {$.fn.extend({highlight: function (op) {//使用jQuery.extend 覆盖插件默认参数var opt $.extend({},defaults,op);//这里的this 就是 jQuery对象。这里return 为了支持链式调用return this.each(function () {//根据参数来设置 dom的样式$(this).css({backgroundColor: opt.background,color: opt.foreground});})}});//默认参数var defaults {background: red,foreground: yellow};
})(window.jQuery); 4.暴露公共方法 给别人来扩展你的插件如果有需求的话比如的高亮插件有一个format方法来格式话高亮文本则我们可将它写成公共的暴露给插件使用者不同的使用着根据自己的需求来重写该format方法从而是高亮文本可以呈现不同的格式。 //公共的格式化 方法. 默认是加粗用户可以通过覆盖该方法达到不同的格式化效果。$.fn.highLight.format function (str) {return h3 str /h3; } 5.插件私有方法 有些时候我们的插件需要一些私有方法不能被外界访问。例如 我们插件里面需要有个方法 来检测用户调用插件时传入的参数是否符合规范。 6.其他的一些设置如为你的插件加入元数据插件的支持将使其变得更强大。 完整的高亮插件代码如下 //闭包限定命名空间
(function ($) {$.fn.extend({highLight: function (options) {//检测用户传进来的参数是否合法if (!isValid(options))return this;var opts $.extend({}, defaluts, options); //使用jQuery.extend 覆盖插件默认参数return this.each(function () { //这里的this 就是 jQuery对象。这里return 为了支持链式调用//遍历所有的要高亮的dom,当调用 highLight()插件的是一个集合的时候。var $this $(this); //获取当前dom 的 jQuery对象这里的this是当前循环的dom//根据参数来设置 dom的样式$this.css({backgroundColor: opts.background,color: opts.foreground});//格式化高亮文本var markup $this.html();markup $.fn.highLight.format(markup);$this.html(markup);});}});//默认参数var defaluts {foreground: red,background: yellow};//公共的格式化 方法. 默认是加粗用户可以通过覆盖该方法达到不同的格式化效果。$.fn.highLight.format function (str) {return strong str /strong;}//私有方法检测参数是否合法function isValid(options) {return !options || (options typeof options object) ? true : false;}
})(window.jQuery); 调用 //调用者覆盖 插件暴露的共公方法
$.fn.highLight.format function (txt) {return em txt /em}
$(function () {$(p).highLight({ foreground: orange, background: #ccc }); //调用自定义 高亮插件
}); 转载于:https://www.cnblogs.com/it-q/p/9294432.html
