下载安卓APP箭头
箭头给我发消息

客服QQ:3315713922

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

作者:魏洋     来源: https://www.cnblogs.com/wyge/p/11937197.html点击数:3363发布时间: 2020-03-15 09:13:43

标签: layui.jslayuiweb

Web开发

  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以外的许多场景。

赞(12)
踩(0)
分享到:
华为认证网络工程师 HCIE直播课视频教程