Présentation du module Layui

Le cœur du module layUI est constitué des deux méthodes sous-jacentes de layui.js : une pour définir le module, layui.define(), et une pour charger le module, layui.use (). (Recommandé : Tutoriel d'utilisation de Layui)

1. Pré-chargement

Le chargement du module de Layui utilise la méthode principale layui.use(mods, callback) Lorsque votre JS Quand. vous devez utiliser le module Layui, nous vous recommandons d'utiliser le préchargement, car cela peut éviter d'avoir à écrire layui.use partout. Vous devez le définir comme ceci au niveau de la couche la plus externe :

+ View Code

2. Espace de noms du module

L'interface du module de layui sera liée sous l'objet layui et est complétée en interne par layui.define () méthode. Chaque module a un nom unique et ne peut pas être occupé. Vous n'avez donc pas à vous soucier de la pollution de l'espace du module à moins que vous ne supprimiez activement layui.{nom du module}. L'appel du module peut être réalisé via la méthode layui.use, puis l'interface du module est obtenue via l'objet layui. Tels que :

layui.use(['layer', 'laypage', 'laydate'], function(){
  var layer = layui.layer //获得layer模块
  ,laypage = layui.laypage //获得laypage模块
  ,laydate = layui.laydate; //获得laydate模块
   
  //使用模块
});

Remarque : En fait, si vous ne souhaitez pas utiliser layui.use, vous pouvez introduire layui.all.js pour remplacer layui.js, voir : Utilisation non modulaire

3. Développez un module layui

Méthode pour étendre un module Layui :

Étape 1 : Confirmez le nom du module, en supposant qu'il s'agit de : mymod, puis créez un nouveau fichier mymod.js. et mettez-le dans n'importe quel répertoire du projet (note : Pas besoin de le mettre dans le répertoire layui)

Étape 2 : Écrivez test.js comme suit :

/**
  扩展一个test模块
**/     
  
layui.define(function(exports){ //提示：模块也可以依赖其它模块，如：layui.define('layer', callback);
  var obj = {
    hello: function(str){
      alert('Hello '+ (str||'mymod'));
    }
  };
   
  //输出test接口
  exports('mymod', obj);
});

Étape 3 : Définissez le répertoire où se trouve le module d'extension, puis vous pouvez l'ajouter à d'autres fichiers JS Utilisé dans

//config的设置是全局的
layui.config({
  base: '/res/js/' //假设这是你存放拓展模块的根目录
}).extend({ //设定模块别名
  mymod: 'mymod' //如果 mymod.js 是在根目录，也可以不用设定别名
  ,mod1: 'admin/mod1' //相对于上述 base 目录的子目录
});
  
//你也可以忽略 base 设定的根目录，直接在 extend 指定路径（主要：该功能为 layui 2.2.0 新增）
layui.extend({
  mod2: '{/}http://cdn.xxx.com/lib/mod2' // {/}的意思即代表采用自有路径，即不跟随 base 路径
})
  
//使用拓展模块
layui.use(['mymod', 'mod1'], function(){
  var mymod = layui.mymod
  ,mod1 = layui.mod1
  ,mod2 = layui.mod2;
   
  mymod.hello('World!'); //弹出 Hello World!
});

Cas :

Chronologie :

<ul class="layui-timeline">
  <li class="layui-timeline-item">
    <i class="layui-icon layui-timeline-axis"></i>
    <div class="layui-timeline-content layui-text">
      <h3 class="layui-timeline-title">8月18日</h3>
      <p>
        layui 2.0 的一切准备工作似乎都已到位。发布之弦，一触即发。
        <br>不枉近百个日日夜夜与之为伴。因小而大，因弱而强。
        <br>无论它能走多远，抑或如何支撑？至少我曾倾注全心，无怨无悔 <i class="layui-icon"></i>
      </p>
    </div>
  </li>
  <li class="layui-timeline-item">
    <i class="layui-icon layui-timeline-axis"></i>
    <div class="layui-timeline-content layui-text">
      <h3 class="layui-timeline-title">8月16日</h3>
      <p>杜甫的思想核心是儒家的仁政思想，他有“<em>致君尧舜上，再使风俗淳</em>”的宏伟抱负。个人最爱的名篇有：</p>
      <ul>
        <li>《登高》</li>
        <li>《茅屋为秋风所破歌》</li>
      </ul>
    </div>
  </li>
  <li class="layui-timeline-item">
    <i class="layui-icon layui-timeline-axis"></i>
    <div class="layui-timeline-content layui-text">
      <h3 class="layui-timeline-title">8月15日</h3>
      <p>
        中国人民抗日战争胜利72周年
        <br>常常在想，尽管对这个国家有这样那样的抱怨，但我们的确生在了最好的时代
        <br>铭记、感恩
        <br>所有为中华民族浴血奋战的英雄将士
        <br>永垂不朽
      </p>
    </div>
  </li>
  <li class="layui-timeline-item">
    <i class="layui-icon layui-timeline-axis"></i>
    <div class="layui-timeline-content layui-text">
      <div class="layui-timeline-title">过去</div>
    </div>
  </li>
</ul>

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!