jQuery插件代码基本框架

前言

老项目需要实现一个新需求，加一个输入控件。由于用的还是jquery那套技术，所以就回顾了一下jQuery的相关知识，开发一个插件。我翻阅了一下zui的上传控件的源码然后又结合easyUi的api，记录一下一个jQuery插件的基本框架。

    
(function($){
    // 定义一些常量
	var DEFAULT_OPTION = {.......};
	var PLUGIN_NAME = 'MyPlugin';
	..........
	//构造函数 element当前的dom元素， options初始化参数
	var MyPlugin = function(element, options) {	
		var vm = this;// 这里主要是为了绑定this。vue用多了，就起了这个变量名。
		vm.$el = $(element);
		
		//初始化options
		vm.options = $.extend({},DEFAULT_OPTION,options);
		........
		//初始化dom元素
		vm.$input = $('<input type="text"/>');
		vm.$el.append(vm.$input);
		........
		//初始化事件处理
		vm.$input.change(function () {
		  console.log('value changed')
		})
		........
	};
	
	//控件方法
	MultiSelect.prototype.getValue = function() {
		return vm.$input.val()
	};
	
	// 暴露到jquery上,规定一下插件Api的调用模式
	$.fn.myplugin= function(option, param, callback) {
		return this.each(function() {// 遍历集合
			var $this = $(this);
			var vm = $this.data(PLUGIN_NAME);// 从dom的绑定数据上找一下组件对象
			
            //创建组件对象，并绑定到dom元素上
			if(typeof(option) == 'object' || typeof(option) == 'undefined') {
			  if(!vm) {// 没有组件对象，则进行初始化，并将创建的组件对象绑定到dom元素上
                $this.data(PLUGIN_NAME, new MultiSelect(this, option));
              } else {
                throw new Error('duplicate create');
              }
              return;
			}
			
            // 调用插件的methods
			if(typeof option == 'string') {
			  if (!vm) {
			     throw new Error('plugin has not been inited');
			  }
			  
			  var ret = vm[option](param);
			  if (callback) {
			    callback(ret)
			  }
			  return;
			}
		});
	};
	
})(jQuery);

api模式

<div id="test"></div>

//初始化
// $('#test').myplugin({.....});
$('#test').myplugin();
//调用getValue方法
$('#test').myplugin('getValue',null, function(value) {
	console.log(value);
});

结语

时间比较仓促，如果这段代码有问题，欢迎指正。我项目上倒是没啥事，嘿嘿。最后推荐大家看一下jquery的源码，虽然jquery已经快被淘汰了，但源码里的小逻辑还是很适合入门的。