LayUI 第三方插件开发规范

分享 未结 精帖
23 5311
Violet_Ice紫冰
悬赏:20飞吻
LayUI 第三方插件开发规范 2018.06.26
说在前面,由于本人只会layui模块化开发,所以本规范适用于layui模块化插件,layui.all可能会出现问题。
图片是2k屏截的,如果觉得字小可以新窗口打开放大看。
前言
  从学校出来也有7个月了,工作半年了,使用layui五个月了。这五个月里入手了layuiAdmin,整合了一些不错的第三方插件:MD5头像裁剪Select2等,也见证了很多优秀原创插件的诞生:MapleMei的FormSelects番茄的selectrevoke的Markdown编辑器等,还有一些很实用的分享:select拼音搜索解决select搜索后上下键的bug等,实用分享非常多,就不一一列举了。

  现在插件不多,就我所知的不超过10个。现在还好说,有问题有冲突手动微调一下就行,但是以后呢。。。市面上有100+插件,一个项目用了20+插件,这时候如果目录冲突,或者css样式冲突,你都会崩溃的。所以我们需要管理插件,node有npm,python有pip,php有composer。从现在开始layui有mods(当然不可能像前面三个那么高大上)。

  还是希望大家能看完本文哦,对你以后进行团队开发可能会有那么点帮助。。。
  本规范一共四件事: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();
form.render();
umd1.func();
$.umd2();
$('body').umd2();

// umd3扩展
layer.maxopen();
});
});


后记
  写到这里也没有别的什么可写了。但还是要说一句,layui的发展离不开大伙的支持,也感谢各大插件的作者的开源精神。最后希望大家能了解一下本规范,并且按照本规范进行插件的开发。
  这是我写的范例 https://cdn.vlice.cn/layui/layui-2.3.0.zip,望大家能看一下 [layui/mods/vlice] 里面的文件。

Gitee:https://gitee.com/layui_mod/mods
Demo:https://layui_mod.gitee.io/mods/


日志
2018-06-24 编写了umd1、umd2、umd3三个模块案例,以及mods.js插件加载器。
2018-06-25 规范编写完毕。我服务器删错个文件ssh登不上了,苦逼的重装中。。。
2018-06-26 凌晨一点,简单的重装完。我的CDN库没了。准备发布规范。
      发现目录结构lay写成了layui,已修改;后记添加gitee的demo;头部加入截图说明。
回帖