Einführung in das Layui-Modul

Der Kern des Moduls „layUI“ sind die beiden zugrunde liegenden Methoden von „layui.js“: eine zum Definieren des Moduls, „layui.define()“, und eine zum Laden des Moduls, „layui.use“. (). (Empfohlen: Tutorial zur Verwendung von Layui)

Vorabladen

Das Laden von Layui-Modulen verwendet die Kernmethode „Layui.use“ (Mods, Callback). Wenn Sie das Layui-Modul verwenden müssen, empfehlen wir die Verwendung des Vorladens, da dadurch die Mühe vermieden werden kann, überall laui.use zu schreiben. Sie sollten es auf der äußersten Ebene wie folgt definieren:

+ View Code

2. Modul-Namespace

Die Modulschnittstelle von Laui wird unter dem Laui-Objekt gebunden und intern durch die Laui.define vervollständigt ()-Methode. Jedes Modul hat einen eindeutigen Namen und kann nicht belegt werden. Sie müssen sich also keine Sorgen machen, dass der Speicherplatz des Moduls verschmutzt wird, es sei denn, Sie löschen aktiv „layui.{module name}“. Der Aufruf des Moduls kann über die Methode „layui.use“ erfolgen, und dann wird die Modulschnittstelle über das Objekt „layui“ abgerufen. Zum Beispiel:

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

Hinweis: Wenn Sie „layui.use“ nicht verwenden möchten, können Sie „layui.all.js“ einführen, um „layui.js“ zu ersetzen, siehe: Nicht modulare Verwendung

3. Erweitern eines Layui-Moduls

Methode zum Erweitern eines Layui-Moduls:

Schritt 1: Bestätigen Sie den Modulnamen, vorausgesetzt, er lautet: mymod, und erstellen Sie dann eine neue mymod.js-Datei und legen Sie es in einem beliebigen Verzeichnis des Projekts ab (Hinweis: Es ist nicht erforderlich, es im Laui-Verzeichnis abzulegen)

Schritt 2: Schreiben Sie test.js wie folgt:

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

Schritt 3: Legen Sie fest Verzeichnis, in dem sich das Erweiterungsmodul befindet, und dann können Sie es zu anderen JS-Dateien hinzufügen. Verwendet in

//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!
});

Fall:

Zeitleiste:

<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>

Das obige ist der detaillierte Inhalt vonEinführung in das Layui-Modul. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!