您的位置：首页 > Web前端 > JQuery

自定义构建jquery插件实验（2）

2015-05-18 21:55 597 查看

//简单的

test.js

;(function($){

$.fn.getData=function(options){
return this.append(options);
}

})(jQuery);

test.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<script type='text/javascript' src='../js/test.js'></script>
<title>Insert title here</title>
<script type="text/javascript">
$(function(){
$("span").getData("这是我第一个自定义插件");
});
</script>
</head>
<body>
<span></span>
</body>
</html>

//来个复杂点的

test2.js

(function($) {
debugger;
// 在我们插件容器内，创造一个公共变量来构建一个私有方法
var privateFunction = function() {
// code here
}

// 通过字面量创造一个对象，存储我们需要的共有方法
var methods = {
// 在字面量对象中定义每个单独的方法
init: function() {

// 为了更好的灵活性，对来自主函数，并进入每个方法中的选择器其中的每个单独的元素都执行代码
return this.each(function() {
// 为每个独立的元素创建一个jQuery对象
var $this = $(this);

// 执行代码
// 例如： privateFunction();
});
},
destroy: function() {
// 对选择器每个元素都执行方法
return this.each(function() {
// 执行代码
});
}
};

$.fn.pluginName = function() {
// 获取我们的方法，遗憾的是，如果我们用function(method){}来实现，这样会毁掉一切的
var method = arguments[0];

// 检验方法是否存在
if(methods[method]) {

// 如果方法存在，存储起来以便使用
// 注意：我这样做是为了等下更方便地使用each（）
method = methods[method];

// 如果方法不存在，检验对象是否为一个对象（JSON对象）或者method方法没有被传入
} else if( typeof(method) == 'object' || !method ) {

// 如果我们传入的是一个对象参数，或者根本没有参数，init方法会被调用
method = methods.init;
} else {

// 如果方法不存在或者参数没传入，则报出错误。需要调用的方法没有被正确调用
$.error( 'Method ' +  method + ' does not exist on jQuery.pluginName' );
return this;
}

// 调用我们选中的方法
// 再一次注意我们是如何将each（）从这里转移到每个单独的方法上的
return method.call(this);

}

})(jQuery);

test2.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
<script type='text/javascript' src='../js/test2.js'></script>
<title>Insert title here</title>
<script type="text/javascript">
$(function(){
// $("span").getData("这是我第一个自定义插件");

/*
注意这些例子可以在目前的插件代码中正确运行，并不是所有的插件都使用同样的代码结构
*/
// 为每个类名为 ".className" 的元素执行init方法
// $('.className').pluginName();
$('.className').pluginName('init');
$('.className').pluginName('init', {}); // 向init方法传入“{}”对象作为函数参数
// $('.className').pluginName({}); // 向init方法传入“{}”对象作为函数参数

// 为每个类名为 “.className” 的元素执行destroy方法
// $('.className').pluginName('destroy');
// $('.className').pluginName('destroy', {}); // 向destroy方法传入“{}”对象作为函数参数

// 所有代码都可以正常运行
// $('.className').pluginName('init', 'argument1', 'argument2'); // 把 "argument 1" 和 "argument 2" 传入 "init"

// 不正确的使用
//$('.className').pluginName('nonexistantMethod');
// $('.className').pluginName('nonexistantMethod', {});
// $('.className').pluginName('argument 1'); // 会尝试调用 "argument 1" 方法
//  $('.className').pluginName('argument 1', 'argument 2'); // 会尝试调用 "argument 1" ，“argument 2”方法
// $('.className').pluginName('privateFunction'); // 'privateFunction' 不是一个方法
});
</script>
</head>
<body>
<span class="className"></span>
</body>
</html>

特别注意第二个案例，如果你看完我之前的原理还不清楚的话，请源码调试，一步一步的看清jquery源码的设计模式。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航