Detailed explanation of LayUI third-party plug-in development specifications

This specification has four things in total: 1. Specifies the directory use of plug-ins, 2. Specifies the prefix of plug-in css style, 3. Specifies the unified packaging of plug-ins, 4. Specifies the introduction of plug-ins Way.

1. Directory

First let’s take a directory picture

Directory structure description (understand with the picture)
mod_name represents the plug-in The name, author represents the third-party 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

2. Style

Style I recommend that you use Scss to write. It is very important to maintain a good nesting. It is recommended to take a look at the demo of umd3.scss. I have covered all the commonly used functions (see the postscript for the demo).

In order to prevent style conflicts between different plug-in authors, including conflicts with other front-end frameworks. Therefore, we stipulate that it starts with lay, followed by the author's name. Try to abbreviate the author's name [lay-vlice], and then follow the style module name, such as btn [lay-vlice-btn]. Now you can write your styles as much as you like. . If you have many plug-ins, in order not to conflict with each other, it is recommended to add the plug-in name, then the final class is [lay-vlice-umd-btn].

This will cause the class to be very long. Wouldn’t it be annoying to write the same class over and over again? This is why I recommend using Scss.

3. Encapsulation

Our original plug-ins, or third-party plug-ins, will have three situations:

1. Basic plug-ins written in native js (Vue.js, etc. )

2. JQ plug-ins written based on JQuery (Select2.js, etc.)

3. Advanced plug-ins written based on layui (FormSelects.js, etc.).

UMD packaging can support these three situations. Therefore, it is recommended that everyone use UMD to write plug-ins.

(1) UMD encapsulation without pre-class - native js

(2) UMD encapsulation based on JQuery - JQ plug-in

(3) UMD encapsulation writing method based on layui - advanced plug-in

4. Introduction

I took the time to write a plug-in loader based on this specification. After testing, official modules and third-party plug-ins can be successfully introduced, but depending on computer performance and network conditions, there will be a delay of about 100-400 milliseconds. Not a big problem. Here I will teach you how to introduce the LayUI plug-in developed in accordance with this specification.

First you need to download my loader mods.js. The loader is placed in [layui/mods/mods.js]. The first step to get it is to modify the list in the loader. variable.

Use layui.use to introduce the loader. Then introduce official modules or third-party plug-ins into mods, and write business code in the callback of the loader. For details, please check the demo I wrote (download in the postscript)

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

Example https://cdn.vlice.cn/layui/layui-2.3.0.zip

For more layui knowledge, please pay attention to the layui usage tutorial column.

The above is the detailed content of Detailed explanation of LayUI third-party plug-in development specifications. For more information, please follow other related articles on the PHP Chinese website!