前端开发过程中也有很多重复的模块和内容,这时候公共的组件就发挥了关键作用了。
前端怎么进行模块化开发呢,要以什么为参考方向呢,找不到参考的,推荐看看人大佬完整的项目源码,了解分层分包的项目管理的便利之处。
下面我们看看原生JS+Layui框架下使用的模块化开发的基本逻辑。
var Const = (function() {
var constants = {//定义常量
MILLISEC: 400,
}
var tableCol = [ //表头
];
var DocumentHtml={};
// 定义了一个静态方法
DocumentHtml.getConstant=function(name){//获取常量的方法
return constants[name];
}
DocumentHtml.setTableCols = function(cols){
this.tableCol = cols;
}
DocumentHtml.getTableCols = function(){
return tableCol;
}
return DocumentHtml;
})();
创建js对象
引入js到业务文件里
<Script src="./common/const.js"></Script>
全局的api接口
var API = (function(){
var publicTables = function(event,ele,toolBar,api,cols){
//console.log(event);
//console.log(ele);
//console.log(toolBar);
//console.log(api);
//console.log(cols);
var table = event.table;
table.render({
elem: ele
, toolbar: '#toolbarTable'
, height: 684
, cellMinWidth : 80
, url: api //数据接口
, page: true //开启分页
, cols: [cols]
});
//触发事件
table.on('toolbar(PUBLICFILTER)', function (obj) {
var checkStatus = table.checkStatus(obj.config.id);
switch (obj.event) {
case 'add':
layer.msg('添加');
break;
case 'delete':
layer.msg('删除');
break;
case 'update':
layer.msg('编辑');
break;
};
});
};
var DocumentAPI={};
DocumentAPI.getPublicTables = publicTables;
return DocumentAPI;
})()
同上引用
API.[方法名]进行一个函数调用
其他通用函数也阔以写公共的方法