深入学习jquery源码之继承框架的实现

深入学习jquery源码之继承框架的实现

继承框架的实现

/* Simple JavaScript Inheritance
 * By John Resig http://ejohn.org/
 * MIT Licensed.
 */
// Inspired by base2 and Prototype
(function(){
  //initializing是为了解决我们之前说的继承导致原型有多余参数的问题。当我们直接将父类的实例赋值给子类原型时。是会调用一次父类的构造函数的。所以这边会把真正的构造流程放到init函数里面，通过initializing来表示当前是不是处于构造原型阶段，为true的话就不会调用init。
  //fnTest用来匹配代码里面有没有使用super关键字。对于一些浏览器`function(){xyz;}`会生成个字符串，并且会把里面的代码弄出来，有的浏览器就不会。`/xyz/.test(function(){xyz;})`为true代表浏览器支持看到函数的内部代码，所以用`/\b_super\b/`来匹配。如果不行，就不管三七二十一。所有的函数都算有super关键字，于是就是个必定匹配的正则。
  var initializing = false, fnTest = /xyz/.test(function(){xyz;}) ? /\b_super\b/ : /.*/;
 
  // The base Class implementation (does nothing)
  // 超级父类
  this.Class = function(){};
 
  // Create a new Class that inherits from this class
  // 生成一个类，这个类会具有extend方法用于继续继承下去
  Class.extend = function(prop) {
    //保留当前类，一般是父类的原型
    //this指向父类。初次时指向Class超级父类
    var _super = this.prototype;
   
    // Instantiate a base class (but only create the instance,
    // don't run the init constructor)
    //开关 用来使原型赋值时不调用真正的构成流程
    initializing = true;
    var prototype = new this();
    initializing = false;
   
    // Copy the properties over onto the new prototype
    for (var name in prop) {
      // Check if we're overwriting an existing function
      //这边其实就是很简单的将prop的属性混入到子类的原型上。如果是函数我们就要做一些特殊处理
      prototype[name] = typeof prop[name] == "function" &&
        typeof _super[name] == "function" && fnTest.test(prop[name]) ?
        (function(name, fn){
          //通过闭包，返回一个新的操作函数.在外面包一层，这样我们可以做些额外的处理
          return function() {
            var tmp = this._super;
           
            // Add a new ._super() method that is the same method
            // but on the super-class
            // 调用一个函数时，会给this注入一个_super方法用来调用父类的同名方法
            this._super = _super[name];
           
            // The method only need to be bound temporarily, so we
            // remove it when we're done executing
            //因为上面的赋值，是的这边的fn里面可以通过_super调用到父类同名方法
            var ret = fn.apply(this, arguments);  
            //离开时 保存现场环境，恢复值。
            this._super = tmp;
           
            return ret;
          };
        })(name, prop[name]) :
        prop[name];
    }
   
    // 这边是返回的类，其实就是我们返回的子类
    function Class() {
      // All construction is actually done in the init method
      if ( !initializing && this.init )
        this.init.apply(this, arguments);
    }
   
    // 赋值原型链，完成继承
    Class.prototype = prototype;
   
    // 改变constructor引用
    Class.prototype.constructor = Class;
 
    // 为子类也添加extend方法
    Class.extend = arguments.callee;
   
    return Class;
  };
})();

初始化Class

(function(scope){
	var ListPager = Class.extend({
		init: function(){},
		render: function(){
			var _self = this;
			//弹出卡片界面的大小[60%,80%]
			_self.cardSize = _self.cardSize || ['80%','80%'];
			//弹出卡片界面方式：页面层(这里content是一个普通的String):1;iframe层(content是一个URl):2
			_self.cardPopStyle = _self.cardPopStyle || LayuiPopStyle.LAYUI_IFRAME_LAYER;
			_self.tableId = _self.container + "." + _self.primaryKey;
			//plugins 这个可以不传，但是请不要传空数组过来
			var plugins = _self.plugins || ['table','form'];
			var p = _self.assemblyFormPrams();
			//利用layui 绘制列表  ( url : _self.url+"?decAjaxReq=yes", 给ajax请求加密)
			layui.use(plugins, function(){
				var option = $.extend({elem:  "#" + _self.container, 
									   url : _self.url, 
									   cols: _self.title,
									   method: RequestMethod.METHOD_POST,
									   id : _self.tableId,							
									   even: true,
									   page: true,									//是否显示分页
									   pageNum: 1,
									   limit: _self.pageSize, 						//每页默认显示的数量
									   limits:[5,10,15,20,30]}, _self.layOption);
				//展示已知数据
				layui.table.render(option);
				
				//渲染部分layui组件
				_self.initLayuiPlugin();
				
				//监听工具条
				layui.table.on('tool(' + _self.container + ')', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
					if(_self.hookMethod && $.isFunction(_self.hookMethod)){
						 _self.hookMethod(obj); 					//回调 子类中的 钩子方法
					}
				});
				//复选框事件选中以后回调
				layui.table.on('checkbox(' + _self.container + ')', function(obj){
					if(_self.tableAfterChecked && $.isFunction(_self.tableAfterChecked)){
						 _self.tableAfterChecked(obj); 					//回调 子类中的 钩子方法
					}
				});
			});
			//界面绘制完成， 初始化界面事件
			_self.initEvent();
		},
		initLayuiPlugin: function(){
			var _self = this;
		},
		initEvent: function(){
			var _self = this;
			//列表 增删改查
			$("div[name='listBtns'] button").unbind('click').bind('click', function(){
				var action = "_self." + $(this).attr("action");
				eval(action);
			});
			
			//列表查询、重置
			$("div button[type='button']",$("#" + _self.container + "-QueryForm"))
				.unbind('click')
				.bind('click', function(){
				var action = "_self." + $(this).attr("action");
				eval(action);
			});
		},
		assemblyFormPrams: function(){														//组装列表模糊查询表单数据
			var _self = this;
			var formParam = $("#" + _self.container + "-QueryForm").serializeArray(),
			reqParam = {};
			for(var o in formParam){
				if(formParam[o]["name"]){
					reqParam[formParam[o]["name"]] = formParam[o]["value"];
				}
			}
			return reqParam;
		},
		listQuery: function(){
			var _self = this;
			layui.table.reload(_self.tableId, {
                where: _self.assemblyFormPrams()
            });
		},
		/**
		 * 获取选中的数据
		 */
		getSelectRows: function(){
			var checkStatus = layui.table.checkStatus(this.tableId);
			return checkStatus.data;
		},
		getSelectIds: function(){
			var data = this.getSelectRows();
			var ids = [];
			if($.isEmptyArray(data))
				return ids;
			for(var i = 0; i < data.length; i++){
				ids.push(data[i][this.primaryKey]);
			}
			return ids;
		},
		view: function(curDom, event){
			var _self = this;
			var data = _self.getSelectRows();
			if (data.length != 1) {  
				layer.msg("请选中一条数据进行查看");
	            return;
	        }
			var url = $(curDom).attr("url") + "?act=" + WebConst.READ + "&entityId=" + data[0][_self.primaryKey];
			var title = $(curDom).attr("title");
			var layIndex = layer.open({
			      type: this.cardPopStyle,
			      title: title,
			      maxmin: true,
				  shadeClose: true, //开启遮罩关闭
				  area : this.cardSize,
			      content: this.cardPopStyle == LayuiPopStyle.LAYUI_CONTENT_LAYER ? $.loadHtml(url) : url,
			      success: function(layero){
			    	  	layero = _self.cardPopStyle == LayuiPopStyle.LAYUI_CONTENT_LAYER ? layero : layer.getChildFrame('body', layIndex);
		        		if(_self.cardPopStyle == LayuiPopStyle.LAYUI_CONTENT_LAYER){
		        			layero.setValues(data[0]);
		        		}
		        		layui.form.render();
			      }
			});
		},
		add: function(curDom, event){
			var _self = this;
			
			//新增之前回调函数
			if(_self.beforeAdd && $.isFunction(_self.beforeAdd)){
				_self.beforeAdd();
			}
			
			var url = $(curDom).attr("url") + "?act=" + WebConst.ADD;
			var title = $(curDom).attr("title");
			layer.open({
				type: this.cardPopStyle,
				title: title,
				area: this.cardSize,
				maxmin: true,
				shadeClose: false, //开启遮罩关闭
				content: this.cardPopStyle == LayuiPopStyle.LAYUI_CONTENT_LAYER ? $.loadHtml(url) : url,
				success : function(layero){
					layui.form.render();
				},
	        	end: function(){		//销毁列表回调方法
	        		layui.table.reload(_self.tableId)
	        		if(_self.closeCard && $.isFunction(_self.closeCard)){
	        			return _self.closeCard();
	    			}
	        		return false;
	        	},
	        	cancel: function(){
	        		
	        	}
			});
		},
		edit: function(curDom, event){
			var _self = this;
			var data = _self.getSelectRows();
			if (data.length != 1) {  
				layer.msg("请选中一条数据进行修改");
	            return;
	        }
			
			//修改之前回调函数
			if(_self.beforeUpd && $.isFunction(_self.beforeUpd)){
				_self.beforeUpd();
			}
			
			var url = $(curDom).attr("url") + "?act=" + WebConst.EDIT + "&entityId=" + data[0][_self.primaryKey];
			var title = $(curDom).attr("title");
	        var layIndex = layer.open({
	        	type: this.cardPopStyle,
	        	title: title,
	        	maxmin: true,
				shadeClose: false, //开启遮罩关闭
	        	area : this.cardSize,
	        	content: this.cardPopStyle == LayuiPopStyle.LAYUI_CONTENT_LAYER ? $.loadHtml(url) : url,
	        	success: function(layero){
	        		layero = _self.cardPopStyle == LayuiPopStyle.LAYUI_CONTENT_LAYER ? layero : layer.getChildFrame('body', layIndex);
	        		if(_self.cardPopStyle == LayuiPopStyle.LAYUI_CONTENT_LAYER){
	        			layero.setValues(data[0]);
	        			layui.form.render();
	        		}
	        	},
	        	end: function(){		//销毁列表回调方法
	        		layui.table.reload(_self.tableId)
	        		if(_self.closeCard && $.isFunction(_self.closeCard)){
	        			return _self.closeCard();
	    			}
	        		return false;
	        	},
	        	cancel: function(){ 	//点击左上角关闭按钮回调方法
	        		if(_self.cardPopStyle == LayuiPopStyle.LAYUI_IFRAME_LAYER){  					//从列表调用卡片页面数据
	        			var frameId = document.getElementById('layui-layer' + layIndex).getElementsByTagName("iframe")[0].id,
	        			closeCallback = $('#'+frameId)[0].contentWindow.beforeClose;
		        		if(closeCallback && $.isFunction(closeCallback)){
		        			 return closeCallback();
		        		}
	        		}
	        	}
	        	
	        });
		},
		del: function(curDom, event){
			var _self = this;
			var data = _self.getSelectIds();
			if(data.length == 0){
				layer.msg("请至少选择一条需要删除的数据");
				return;
			}
			var url = $(curDom).attr("url") + "?act=" + WebConst.DELETE;
			layer.confirm('确定删除吗', function(index){
				layer.close(index);
				$.ajaxReq(url,$.toJSON(data),function(){
					layui.table.reload(_self.tableId)
				});
			});
		}
	});
	scope.ListPager = ListPager;
})(window);

继承的实现

ShowPipeList = ListPager.extend({
	
	init : function(container, primaryKey, url){
		debugger;
		//列表容器
		this.container = container;
		//主键字段
		this.primaryKey = primaryKey;
		//数据请求地址
		this.url = url;
		//界面需要引用的插件
		this.plugins = ['table', 'element', 'form', 'laydate', 'layer','carousel'];
//		//弹出卡片界面的大小[60%,80%]
//		this.cardSize = ['100%','100%'];
//		//弹出卡片界面方式：页面层(这里content是一个普通的String):1;iframe层(content是一个URl):2
		this.cardPopStyle = 2;
		//每页大小 
		this.pageSize = 5;
		//列表头
		this.title = [[
			
			{field: 'startTime', title: '开始时间', width: 160},
			
			{field: 'endTime', title: '结束时间', width: 160},
			
			
	     ]]; 
		//插件是基于layui封装的， layOption是对layui的参数扩展（具体api参照layui属性）
		this.layOption = {
				
		};
	},
	initLayuiPlugin: function(){
		this._super();
		
		  var table = layui.table;
		  var laydate = layui.laydate;
		    //时间选择器
		  laydate.render({
		    elem: '#test5'
		    ,type: 'time'
		    ,theme: '#050a3c'
		  });
		  
		  laydate.render({
			    elem: '#test6'
			    ,type: 'time'
			    ,theme: '#050a3c'
		});
	},
	initEvent: function(){
		this._super();
		//TODO 父类仅仅绑定了工具条通用按钮事件， 如有其他事件请在这里定义
	},
	hookMethod:function(obj){
		
	 	var data = obj.data,
	 	url = CONTEXT_PATH + '/cusviews/pipe/listPipePoint';
		var param = {
				cobwebId : data.cobwebId
		}
		var retData = $.getData(url,param);
	}
});
$(function(){
	var url = CONTEXT_PATH + '/cusviews/pipe/listPipe';
	var showPipeList = new ShowPipeList("pipeList", "cobwebId", url);
	showPipeList.render();
	$(".tc_box .cbar").scrollBar();
})

继承实现的过程