jQuery 플러그인 개발을 위한 표준 작성 방법
- jacklove원래의
- 2018-06-11 22:45:001570검색
머리말
요즘에는 웹 개발에 jquery가 거의 필수입니다. 심지어 VS 아티팩트도 2010 버전부터 Jquery와 UI를 웹 프로젝트에 구축하기 시작했습니다. jquery 사용의 이점에 대해서는 여기서 자세히 설명하지 않겠습니다. Jquery를 사용해 본 사람이라면 누구나 알고 있을 것입니다. 오늘 우리는 jquery의 플러그인 메커니즘에 대해 논의할 것입니다. jquery에는 수천 개의 타사 플러그인이 있습니다. 때로는 독립적인 함수를 jquery와 결합하려고 합니다. 이를 위해서는 jquery 확장이 필요합니다. 플러그인 형태로 작성되었습니다. 예를 들어 다음은 Jquery 객체를 단순히 확장하는 데모입니다.
//sample:扩展jquery对象的方法，bold()用于加粗字体。
(function ($) {
$.fn.extend({
"bold": function () { ///631fb227578dfffda61e1fa4d04b7d25
/// 加粗字体
///039f3e95db2a684c7b74365531eb6044
return this.css({ fontWeight: "bold" });
}
});
})(jQuery);
호출 방법:
이것은 매우 간단한 확장입니다. 다음으로 위의 코드를 단계별로 분석해 보겠습니다.
1. jquery의 플러그인 메커니즘
jquery는 사용자가 플러그인을 쉽게 만들 수 있도록 jQuery.extend() 및 jQuery.fn.extend() 메서드를 제공합니다.
1. jQuery.extend() 메서드에 오버로드가 있습니다.
jQuery.extend(객체), 하나의 매개변수는 jQuery 클래스 자체를 확장하는 데 사용되며, 이는 jQuery 클래스/네임스페이스 또는 정적 메소드에 새 기능을 추가하는 데 사용됩니다. 예를 들어 jQuery의 내장 ajax 메소드는 jQuery를 사용합니다. .ajax()는 이렇게 호출됩니다. "클래스 이름. 메서드 이름" 정적 메서드 호출 메서드와 약간 비슷합니다. jQuery.extend(object)의 예도 작성해 보겠습니다.
//扩展jQuery对象本身
jQuery.extend({
"minValue": function (a, b) { ///631fb227578dfffda61e1fa4d04b7d25
/// 比较两个值，返回最小值
///039f3e95db2a684c7b74365531eb6044
return a < b ? a : b;
},
"maxValue": function (a, b) { ///631fb227578dfffda61e1fa4d04b7d25
/// 比较两个值，返回最大值
///039f3e95db2a684c7b74365531eb6044
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
오버로드된 버전: jQuery.extend([deep], target, object1, [objectN])
하나 이상의 다른 객체로 객체를 확장하고 확장된 객체를 반환합니다.
대상을 지정하지 않으면 jQuery 네임스페이스 자체가 확장됩니다. 이는 플러그인 작성자가 jQuery에 새로운 메소드를 추가하는 데 도움이 됩니다.
첫 번째 매개변수가 true로 설정되면 jQuery는 발견된 모든 객체를 재귀적으로 복사하는 전체 복사본을 반환합니다. 그렇지 않으면 복사본이 원본 개체와 구조를 공유하게 됩니다.
정의되지 않은 속성은 복사되지 않지만 객체의 프로토타입에서 상속된 속성은 복사됩니다.
매개변수
deep: 선택 사항입니다. true로 설정하면 재귀적으로 병합됩니다.
target: 수정할 개체입니다.
object1: 첫 번째 개체에 병합할 개체입니다.
objectN: 선택 사항입니다. 첫 번째 개체에 병합할 개체입니다.
예 1:
설정 및 옵션을 병합하고 설정을 수정 및 반환합니다.
var settings = { validate: false, limit: 5, name: "foo" };
var options = { validate: true, name: "bar" };
jQuery.extend(settings, options);결과: <code>结果：<br>
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" }<br>这个重载的方法，我们一般用来在编写插件时用自定义插件参数去覆盖插件的默认参数。
//闭包限定命名空间(function ($) {
})(window.jQuery);
예 2:
기본값을 수정하지 않고 기본값과 옵션을 병합합니다.//闭包限定命名空间(function ($) {
$.fn.extend({
"highLight":function(options){ //do something
}
});
})(window.jQuery);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( 객체) 확장 메서드, jQuery 클래스의 인스턴스 이 "멤버 함수"를 사용할 수 있습니다. jQuery.fn.extend(object) 및 jQuery.extend(object) 메서드는 구별되어야 합니다. 🎜🎜2. 🎜자체 실행 익명 함수/클로저🎜🎜 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操作符，~操作符，!操作符……
例如：
bootstrap 框架中的插件写法：
!function($){
//do something;
}(jQuery);
和
(function($){
//do something;
})(jQuery); 是一回事。
匿名函数最大的用途是创建闭包（这是JavaScript语言的特性之一），并且还可以构建命名空间，以减少全局变量的使用。
例如：
var a=1;
(function()(){
var a=100;
})();
alert(a); //弹出 1
更多 闭包和匿名函数 可查看 Javascript的匿名函数与自执行 这篇文章。
三、一步一步封装JQuery插件
接下来我们一起来写个高亮的jqury插件
1.定一个闭包区域，防止插件"污染"
//闭包限定命名空间(function ($) {
})(window.jQuery);2.jQuery.fn.extend(object)扩展jquery 方法，制作插件
//闭包限定命名空间(function ($) {
$.fn.extend({
"highLight":function(options){ //do something
}
});
})(window.jQuery);//闭包限定命名空间(function ($) {
$.fn.extend({
"highLight": function (options) { var opts = $.extend({}, defaluts, options); //使用jQuery.extend 覆盖插件默认参数
this.each(function () { //这里的this 就是 jQuery对象
//遍历所有的要高亮的dom,当调用 highLight()插件的是一个集合的时候。
var $this = $(this); //获取当前dom 的 jQuery对象，这里的this是当前循环的dom
//根据参数来设置 dom的样式
$this.css({
backgroundColor: opts.background,
color: opts.foreground
});
});
}
}); //默认参数
var defaluts = {
foreground: 'red',
background: 'yellow'
};
})(window.jQuery);
到这一步，高亮插件基本功能已经具备了。调用代码如下：
$(function () {
$("p").highLight(); //调用自定义 高亮插件});这里只能 直接调用，不能链式调用。我们知道jQuey是可以链式调用的，就是可以在一个jQuery对象上调用多个方法，如：
$('#id').css({marginTop:'100px'}).addAttr("title","测试“);
但是我们上面的插件，就不能这样链式调用了。比如：$("p").highLight().css({marginTop:'100px'}); //将会报找不到css方法，原因在与我的自定义插件在完成功能后，没有将 jQuery对象给返回出来。接下来，return jQuery对象，让我们的插件也支持链式调用。（其实很简单，就是执行完我们插件代码的时候将jQuery对像return 出来，和上面的代码没啥区别）
1 //闭包限定命名空间 2 (function ($) { 3 $.fn.extend({ 4 "highLight": function (options) { 5 var opts = $.extend({}, defaluts, options); //使用jQuery.extend 覆盖插件默认参数 6 return this.each(function () { //这里的this 就是 jQuery对象。这里return 为了支持链式调用 7 //遍历所有的要高亮的dom,当调用 highLight()插件的是一个集合的时候。 8 var $this = $(this); //获取当前dom 的 jQuery对象，这里的this是当前循环的dom 9 //根据参数来设置 dom的样式10 $this.css({11 backgroundColor: opts.background,12 color: opts.foreground13 });14 });15 16 }17 });18 //默认参数19 var defaluts = {20 foreground: 'red',21 background: 'yellow'22 };23 })(window.jQuery);
View Code
4.暴露公共方法 给别人来扩展你的插件（如果有需求的话）
比如的高亮插件有一个format方法来格式话高亮文本，则我们可将它写成公共的，暴露给插件使用者，不同的使用着根据自己的需求来重写该format方法，从而是高亮文本可以呈现不同的格式。
//公共的格式化 方法. 默认是加粗，用户可以通过覆盖该方法达到不同的格式化效果。
$.fn.highLight.format = function (str) { return "<strong>" + str + "</strong>";
}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' }); //调用自定义 高亮插件
});
위 내용은 jQuery 플러그인 개발을 위한 표준 작성 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!