Home > Article > Web Front-end > 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
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!