LayUI使用插件的開發(fā)規(guī)范

今天就跟大家聊聊有關(guān)LayUI使用插件的開發(fā)規(guī)范，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

本規(guī)范一共四件事：1、規(guī)定插件的目錄使用，2、規(guī)定插件css樣式的前綴，3、規(guī)定插件的統(tǒng)一封裝，4、規(guī)定插件的引入方式。

一、目錄篇

先來(lái)一個(gè)目錄圖

目錄結(jié)構(gòu)說(shuō)明（結(jié)合圖片理解）
mod_name代表插件名，author代表第三方作者

layui                       layui框架目錄
├─ css                      layui官方樣式目錄
├─ font                     layui官方字體目錄
├─ images                   layui官方表情目錄
├─ lay                      layui官方模塊目錄
│
├─ mods                     layui插件目錄
│  ├─ extend                項(xiàng)目開發(fā)者目錄
│  │  ├─ mod_name           項(xiàng)目開發(fā)者mod_name插件的目錄
│  │  │  ├─ mod_name.js     項(xiàng)目開發(fā)者mod_name插件本體
│  │  │  ├─ mod_name.css    項(xiàng)目開發(fā)者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來(lái)寫，保持一個(gè)良好的嵌套是非常重要的。推薦看一下demo的umd3.scss常用的功能我都有涉及（demo見后記）。

為了防止不同的插件作者產(chǎn)生樣式?jīng)_突，包括別的前端框架沖突。所以我們規(guī)定統(tǒng)一使用lay開頭，后面接作者名,盡可能簡(jiǎn)寫作者名[lay-vlice]，然后再接樣式模塊名，比如btn [lay-vlice-btn]，現(xiàn)在你可以盡情的書寫你的樣式。如果你有很多插件，為了相互之間不沖突，推薦加上插件名，那么最終的 class 就是[lay-vlice-umd-btn]。

這樣會(huì)導(dǎo)致 class 很長(zhǎng)，一遍一遍的寫同樣的 class 豈不是很煩。這就是我為什么推薦用Scss的原因了。

三、封裝篇

我們?cè)瓌?chuàng)的插件，或者第三方插件，會(huì)有三種情況：

1、原生js編寫的基礎(chǔ)插件（Vue.js等）

2、基于JQuery編寫的JQ插件（Select2.js等）

3、基于layui編寫的高級(jí)插件（FormSelects.js等）。

這三種情況，UMD封裝都能支持。所以推薦大家都用UMD去寫插件。

(1) 無(wú)前置類UMD封裝寫法 - 原生js

(2) 基于JQuery的UMD封裝寫法 - JQ插件

(3) 基于layui的UMD封裝寫法 - 高級(jí)插件

四、引入篇

我抽時(shí)間寫了個(gè)基于本規(guī)范的插件加載器，經(jīng)過(guò)測(cè)試可以成功引入官方模塊和第三方插件，但是根據(jù)電腦性能和網(wǎng)絡(luò)情況，會(huì)存在100-400毫秒左右的延遲。問(wèn)題不大。在這里我來(lái)教大家如何引入按照本規(guī)范開發(fā)的 LayUI 插件。

首先你需要下載我的加載器 mods.js ，加載器放置在 [layui/mods/mods.js] ，拿到手第一步，修改加載器里面的list變量。

使用 layui.use 引入加載器。然后再mods中引入官方模塊或是第三方插件，并且在加載器的回調(diào)中編寫業(yè)務(wù)代碼。具體請(qǐng)查看我寫的demo（在后記那里下載）

layui.use('mods',function(mods){
    // umd2和umd3都是擴(kuò)展插件，所以放到最后。
    mods(['layer','form','umd1','umd2','umd3'],function(layer,form,umd1){
        var $ = layui.$;

        layer.msg();
        form.render();
        umd1.func();
        $.umd2();
        $('body').umd2();

        // umd3擴(kuò)展
        layer.maxopen();
    });
});

看完上述內(nèi)容，你們對(duì)LayUI使用插件的開發(fā)規(guī)范有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。