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

luozhonghua2014

浏览: 62334 次

最近访客更多访客>>

cargoo

sunshine2000

phsyf

tanjian_

博主相关

博客

微博

相册

留言

关于我

文章分类

全部博客 (227)

社区版块

存档分类

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

//简单的

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源码的设计模式。

分享到：