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

創(chuàng)新互聯(lián)是一家集網(wǎng)站建設,奉節(jié)企業(yè)網(wǎng)站建設,奉節(jié)品牌網(wǎng)站建設,網(wǎng)站定制,奉節(jié)網(wǎng)站建設報價,網(wǎng)絡營銷,網(wǎng)絡優(yōu)化,奉節(jié)網(wǎng)站推廣為一體的創(chuàng)新建站企業(yè)，幫助傳統(tǒng)企業(yè)提升企業(yè)形象加強企業(yè)競爭力?？沙浞譂M足這一群體相比中小企業(yè)更為豐富、高端、多元的互聯(lián)網(wǎng)需求。同時我們時刻保持專業(yè)、時尚、前沿，時刻以成就客戶成長自我，堅持不斷學習、思考、沉淀、凈化自己，讓我們?yōu)楦嗟钠髽I(yè)打造出實用型網(wǎng)站。

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

一、目錄篇

先來一個目錄圖

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

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

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

這樣會導致 class 很長，一遍一遍的寫同樣的 class 豈不是很煩。這就是我為什么推薦用Scss的原因了。

三、封裝篇

我們原創(chuàng)的插件，或者第三方插件，會有三種情況：

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封裝寫法 - 高級插件

四、引入篇

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

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

使用 layui.use 引入加載器。然后再mods中引入官方模塊或是第三方插件，并且在加載器的回調(diào)中編寫業(yè)務代碼。具體請查看我寫的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();
    });
});

看完上述內(nèi)容，你們對LayUI使用插件的開發(fā)規(guī)范有進一步的了解嗎？如果還想了解更多知識或者相關內(nèi)容，請關注創(chuàng)新互聯(lián)成都網(wǎng)站設計公司行業(yè)資訊頻道，感謝大家的支持。

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

分享文章：LayUI使用插件的開發(fā)規(guī)范-創(chuàng)新互聯(lián)
文章源于：http://chinadenli.net/article18/cephdp.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)頁設計公司、搜索引擎優(yōu)化、全網(wǎng)營銷推廣、網(wǎng)站排名、電子商務、靜態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)