Explication détaillée des spécifications de développement de plug-ins tiers LayUI

Cette spécification comporte quatre éléments au total : 1. Spécifie l'utilisation du répertoire des plug-ins, 2. Spécifie le préfixe des styles CSS du plug-in, 3. Spécifie l'empaquetage unifié de plug-ins, 4. Spécifie l'introduction des plug-ins Way.

1. Répertoire

Prenons d'abord une photo du répertoire

Description de la structure du répertoire (comprendre avec l'image)
mod_name représente le plug-in Le nom, l'auteur représente l'auteur tiers

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 Ici je vous recommande d'utiliser Scss pour écrire Il est très important de maintenir. une bonne nidification. Il est recommandé de jeter un œil à la démo de umd3.scss. J'ai couvert toutes les fonctions couramment utilisées (voir le post-scriptum de la démo).

Afin d'éviter les conflits de style entre les différents auteurs de plug-ins, y compris les conflits avec d'autres frameworks front-end. Par conséquent, nous stipulons qu'il doit commencer par lay, suivi du nom de l'auteur. Essayez d'abréger le nom de l'auteur [lay-vlice], puis suivez le nom du module de style, par exemple btn [lay-vlice-btn]. pouvez écrire vos styles autant que vous le souhaitez. Si vous disposez de plusieurs plug-ins, il est recommandé d'ajouter le nom du plug-in afin d'éviter tout conflit entre eux. La classe finale est alors [lay-vlice-umd-btn].

Cela rendra le cours très long. Ne serait-il pas ennuyeux d'écrire le même cours encore et encore ? C'est pourquoi je recommande d'utiliser Scss.

3. Encapsulation

Nos plug-ins originaux, ou plug-ins tiers, auront trois situations :

1. (Vue.js, etc.)

2. Plug-ins JQ écrits sur la base de JQuery (Select2.js, etc.)

3. Plug-ins avancés écrits sur layui (FormSelects). .js, etc.).

Les emballages UMD peuvent supporter ces trois situations. Par conséquent, il est recommandé à tout le monde d'utiliser UMD pour écrire des plug-ins.

(1) Packaging UMD sans pré-classe - js natif

(2) Packaging UMD basé sur JQuery - Plug-in JQ

(3) Méthode d'écriture d'encapsulation UMD basée sur layui - plug-in avancé

4 Introduction

J'ai pris le temps d'écrire un chargeur de plug-in basé. sur cette spécification. Après les tests, les modules officiels et les plug-ins tiers peuvent être introduits avec succès, mais en fonction des performances de l'ordinateur et des conditions du réseau, il y aura un délai d'environ 100 à 400 millisecondes. Ce n'est pas un gros problème. Ici, je vais vous apprendre comment présenter le plug-in LayUI développé conformément à cette spécification.

Vous devez d'abord télécharger mon chargeur mods.js Le chargeur est placé dans [layui/mods/mods.js]. variable.

Utilisez layui.use pour présenter le chargeur. Introduisez ensuite des modules officiels ou des plug-ins tiers dans les mods et écrivez du code commercial dans le rappel du chargeur. Pour plus de détails, veuillez consulter la démo que j'ai écrite (télécharger dans le post-scriptum)

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

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

Pour plus de connaissances sur Layui, veuillez faire attention à la colonne Tutoriel d'utilisation de Layui.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!