


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!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Article

Hot Tools

Dreamweaver CS6
Visual web development tools

EditPlus Chinese cracked version
Small size, syntax highlighting, does not support code prompt function

SAP NetWeaver Server Adapter for Eclipse
Integrate Eclipse with SAP NetWeaver application server.

ZendStudio 13.5.1 Mac
Powerful PHP integrated development environment

Zend Studio 13.0.1
Powerful PHP integrated development environment
