深入学习jquery源码之继承框架的实现
继承框架的实现
实现自己的extend方法
/* 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的extend方法来初始化ListPager
(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);通过extend实现继承，获取ListPager的中方法，并调用
ShowPipeList = ListPager.extend({
init : function(container, primaryKey, url){
//列表容器
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();
})继承实现的过程
标签：jquery,function,框架,url,layui,self,源码,var,data From： https://blog.51cto.com/u_11837698/6081928