web前端：layui 集成第三方和自定义组件到模块规范

作者:魏洋 更新于： 2020-03-13 22:05:09

　　layui提供了丰富的内置模块，他们皆可通过模块化的方式按需加载，其中包括:layer、layDate、layPage、laytpl、table、form、upload、element、tree、layeditor、rate、carousel、flow、util、code等。

　　1、新建一个layui.extend.js文件，页面调用时这个文件放到layui.js后面。

　　2、基础的配置卸载config中，扩展的组件写入extend，组件的路径是相对于config下base的路径。

　　例如：

　　layui.config({

　　version:false,//一般用于更新模块缓存，默认不开启。设为true即让浏览器不缓存。也可以设为一个固定的值，如：201610

　　debug:false,//用于开启调试模式，默认false，如果设为true，则JS模块的节点会保留在页面

　　base:'/Resource/layuiadmin/lib/'//设定扩展的Layui模块的所在目录，一般用于外部模块扩展

　　}).extend({

　　index:'index',//主入口模块,

　　treetable:'../modules/treetable',

　　eleTree:'extend/eleTree/eletree',//{/}的意思即代表采用自有路径，即不跟随base路径

　　treeSelect:'extend/treeSelect',

　　step:'step-lay/step',

　　tableSelect:'extend/tableSelect',

　　area:'extend/areaselect/areaselect',

　　autocomplete:'extend/autocomplete/autocomplete',

　　uploader:'extend/uploader/uploader'

　　});

　　3、模块调用

　　layui.use(['form','step','element','tableSelect','laytpl','laydate','area'],function(){

　　varform=layui.form;

　　varstep=layui.step;

　　......

　　varProject={}//内部方法

　　window.Operate={}//对外方法比如页面点击等

　　});

　　layui定义为"经典模块化"，并非是刻意强调"模块"理念本身，而是有意避开当下JS社区的主流方案，试图以尽可能简单的方式去诠释高效!它的所谓经典，是在于对返璞归真的执念，它以当前浏览器普通认可的方式去组织模块!layui认为这种轻量的组织方式，仍然可以填补WebPack以外的许多场景。