js插件的经典写法与总结

最新推荐文章于 2025-06-29 15:27:07 发布

原创最新推荐文章于 2025-06-29 15:27:07 发布 · 1.9w 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#js #插件 #call #apply

js前端专栏收录该内容

32 篇文章

订阅专栏

之前写了一篇关于js插件的方法，可以传入参数，当时不能够拓展方法，而且模式也不是很好，虽然能够满足一定的业务要求。下面是对js插件的完善，可以实现参数传入，方法拓展，链式操作，设计模式更加清晰。

<!DOCTYPE html>
<html>
<head>
	<title>js插件测试</title>
	<script type="text/javascript" src="./jquery.js"></script>
</head>
<body>
<div style="width:200px;height:200px;border:1px solid;background:red" class="mydiv">测试</div>
<script type="text/javascript">
(function($){
	//定义在闭包函数中的全局变量，用来初始化参数，其他的所有函数可以调用
	var config;

	//一些私有函数，相当于php类中private的私有方法，被主函数调用
    var privateFunction = function(){
        
		// 执行代码

		console.log(arguments[0]);
    }


 	//主函数包含在method中，对外暴露，可以被jquery的实例对象执行
    var methods = {
    	//初始化的函数，传入参数对象
        init: function(options){     
			// 在每个元素上执行方法，同时返回该jqueryded的实例对象
			// console.log(options);
            return this.each(function() {
                var $this = $(this);
 				// console.log($this);
            	// 尝试去获取settings，如果不存在，则返回“undefined”
                var settings = $this.data('pluginName');
 				// console.log(settings);
           		 // 如果获取settings失败，则根据options和default创建它
                if(typeof(settings) == 'undefined'){
 
                    var defaults = {
                        name:'zengbing',
                        sex:'nan',
                        onSomeEvent: function() {}
                    };
 
                    settings = $.extend({}, defaults, options);
            	// 保存我们新创建的settings
                    $this.data('pluginName',settings);
                }else{
                    // 如果我们获取了settings，则将它和options进行合并（这不是必须的，你可以选择不这样做）
                    settings = $.extend({}, settings, options);
 
                // 如果你想每次都保存options，可以添加下面代码：
                	$this.data('pluginName', settings);

                	
                }

                //将该配置参数赋值全局变量，方便其他函数调用
                config=settings;
 
                // 执行私有的方法，完成相关逻辑任务
                // privateFunction(config.name);
 
            });
        },
        //销毁缓存的变量
        destroy: function(options) {
            // 在每个元素中执行代码
            return $(this).each(function() {
                var $this = $(this);
 
            // 执行代码
 
            // 删除元素对应的数据
                $this.removeData('pluginName');
            });
        },

        //其他的主题函数。可以完成对象的其他操作
        val: function(options1,options2,options3) {
        // 这里的代码通过.eq(0)来获取选择器中的第一个元素的，我们或获取它的HTML内容作为我们的返回值
            var someValue = this.eq(0).html();
        	// 返回值
        	console.log(arguments);
            return someValue;
        },

        getContent: function(){
        	return this.each(function(){
        		var content=$(this).text();
        		console.log(content);
        		//获取全局变量的初始化的值
        		console.log(config.sex)
        	});
        }
    };
 
    $.fn.pluginName = function(){
        var method = arguments[0];
        if(methods[method]) {
            method = methods[method];
            //将含有length属性的数组获取从第下标为1的之后的数组元素，并返回数组
            arguments = Array.prototype.slice.call(arguments,1);
        }else if( typeof(method) == 'object' || !method ){
            method = methods.init;
        }else{
            $.error( 'Method ' +  method + ' does not exist on jQuery.pluginName' );
            return this;
        }
 		
 		//jquery的实例对象将拥有执行method的能力，method的this是指jquery的实例对象
        return method.apply(this,arguments);
 
    }
 
})(jQuery);

//用法实例
var config={
	name:'huang',
	sex:'nv'
};
//先初始化参数配置，在执行各个主体函数，函数中可以调用config的变量，其实就是jquery的链式操作
$('div.mydiv').pluginName(config).pluginName('getContent').pluginName('val','bing');

</script>

</body>
</html>