layui扩展第三⽅模块_LayUI第三⽅插件开发规范详解
本规范⼀共四件事:1、规定插件的⽬录使⽤,2、规定插件css样式的前缀,3、规定插件的统⼀封装,4、规定插件的引⼊⽅式。
⼀、⽬录篇
先来⼀个⽬录图
⽬录结构说明(结合图⽚理解)
mod_name代表插件名,author代表第三⽅作者layui layui框架⽬录
├─ css layui官⽅样式⽬录
├─ font layui官⽅字体⽬录
├─ images layui官⽅表情⽬录
├─ lay layui官⽅模块⽬录
│
├─ mods layui插件⽬录
│ ├─ extend 项⽬开发者⽬录
│ │ ├─ mod_name 项⽬开发者mod_name插件的⽬录
│ │ │ ├─ mod_name.js 项⽬开发者mod_name插件本体
│ │ │ ├─ mod_name.css 项⽬开发者mod_name插件样式
│ │ │ └─ ...
│ │ └─ ...
│ │
│ ├─ author 第三⽅作者⽬录
│ │ ├─ mod_name 第三⽅mod_name插件的⽬录
│ │ │ ├─ mod_name.js 第三⽅mod_name插件本体
│ │ │ ├─ mod_name.css 第三⽅mod_name插件样式
│ │ │ └─ ...
│ │ └─ ...
│ └─ ...
│
├─ layui.all.js ⼀次性载⼊layui
└─ layui.js 模块化载⼊layui
⼆、样式篇
样式这⾥我推荐⼤家⽤Scss来写,保持⼀个良好的嵌套是⾮常重要的。推荐看⼀下demo的umd3.scss常⽤的功能我都有涉及(demo见后
记)。
为了防⽌不同的插件作者产⽣样式冲突,包括别的前端框架冲突。所以我们规定统⼀使⽤lay开头,后⾯接作者名,尽可能简写作者名[lay-vlice],然后再接样式模块名,⽐如btn [lay-vlice-btn],现在你可以尽情的书写你的样式。如果你有很多插件,为了相互之间不冲突,推荐加上插件名,那么最终的 class 就是[lay-vlice-umd-btn]。
这样会导致 class 很长,⼀遍⼀遍的写同样的 class 岂不是很烦。这就是我为什么推荐⽤Scss的原因了。
三、封装篇
我们原创的插件,或者第三⽅插件,会有三种情况:
1、原⽣js编写的基础插件(Vue.js等)
2、基于JQuery编写的JQ插件(Select2.js等)
3、基于layui编写的⾼级插件(FormSelects.js等)。
这三种情况,UMD封装都能⽀持。所以推荐⼤家都⽤UMD去写插件。
(1) ⽆前置类UMD封装写法 - 原⽣js
(2) 基于JQuery的UMD封装写法 - JQ插件
(3) 基于layui的UMD封装写法 - ⾼级插件
四、引⼊篇
我抽时间写了个基于本规范的插件加载器,经过测试可以成功引⼊官⽅模块和第三⽅插件,但是根据电脑性能和⽹络情况,会存在100-400毫秒左右的延迟。问题不⼤。在这⾥我来教⼤家如何引⼊按照本规范开发的 LayUI 插件。
⾸先你需要下载我的加载器 mods.js ,加载器放置在 [layui/mods/mods.js] ,拿到⼿第⼀步,修改加载器⾥⾯的list变量。
使⽤ layui.use 引⼊加载器。然后再mods中引⼊官⽅模块或是第三⽅插件,并且在加载器的回调中编写业务代码。具体请查看我写的demo(在后记那⾥下载)layui.use('mods',function(mods){
// umd2和umd3都是扩展插件,所以放到最后。
mods(['layer','form','umd1','umd2','umd3'],function(layer,form,umd1){
var $ = layui.$;
layer.msg();
umd1.func();
$.umd2();
$('body').umd2();
// umd3扩展
layer.maxopen();
});
});
layui下载范例 cdn.vlice/layui/layui-2.3.0.zip
更多layui知识请关注layui使⽤教程栏⽬。
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论