layui 第三方插件开发规范-变化吧

二叶草

1214
文章

0
评论

2020年3月9日22:31:11前端框架评论1阅读模式

此文由社区活跃会员“紫冰”分享，以下是正文：

说在前面，由于本人只会 layui 模块化开发，所以本规范适用于layui模块化插件，layui.all可能会出现问题。图片是2k屏截的，如果觉得字小可以新窗口打开放大看。

前言

　　从学校出来也有7个月了，工作半年了，使用layui五个月了。这五个月里入手了layuiAdmin，整合了一些不错的第三方插件：MD5、头像裁剪、Select2等，也见证了很多优秀原创插件的诞生：MapleMei的FormSelects、番茄的select、revoke的Markdown编辑器等，还有一些很实用的分享：select拼音搜索、解决select搜索后上下键的bug等，实用分享非常多，就不一一列举了。

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

　　还是希望大家能看完本文哦，对你以后进行团队开发可能会有那么点帮助。。。
　　本规范一共四件事：1、规定插件的目录使用，2、规定插件css样式的前缀，3、规定插件的统一封装，4、规定插件的引入方式。

一、目录篇

先来一个目录图
layui 第三方插件开发规范

目录结构说明（结合图片理解）
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

二、样式篇

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
layui 第三方插件开发规范

(2) 基于JQuery的UMD封装写法 - JQ插件

(3) 基于layui的UMD封装写法 - 高级插件

四、引入篇

　　我抽时间写了个基于本规范的插件加载器，经过测试可以成功引入官方模块和第三方插件，但是根据电脑性能和网络情况，会存在100-400毫秒左右的延迟。问题不大。在这里我来教大家如何引入按照本规范开发的 LayUI 插件。

　　首先你需要下载我的加载器 mods.js ，加载器放置在 [layui/mods/mods.js] ，拿到手第一步，修改加载器里面的list变量。
layui 第三方插件开发规范

　　使用 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();
    });
});