So verwenden Sie Laui-Layui-Tutorial-php.cn

So verwenden Sie Laui

Wenn Sie mehr über Laui erfahren möchten, klicken Sie auf: Laui-Tutorial

So verwenden Sie Laui

Werfen wir zunächst einen Blick auf die Einführung von Layui:

Layui ist eine emotionale Front-End-Benutzeroberfläche, die mit it geschrieben wurde Eigene Modulspezifikationen. Das Framework folgt der Schreib- und Organisationsform von nativem HTML/CSS/JS. Der Schwellenwert ist äußerst niedrig und kann sofort verwendet werden. Von außen ist es minimalistisch, aber innen ist es leicht und reich an Komponenten. Jedes Detail, vom Kerncode bis zur API, ist sehr gut für die schnelle Schnittstellenentwicklung geeignet. Die erste Version von Laui wurde im goldenen Herbst 2016 veröffentlicht. Sie unterscheidet sich von den UI-Frameworks, die auf der unteren Schicht von MVVM basieren, geht aber nicht gegen den Strom, sondern glaubt an die Rückkehr zur Natur. Genauer gesagt ist es eher auf serverseitige Programmierer zugeschnitten. Sie müssen sich nicht mit der komplexen Konfiguration verschiedener Front-End-Tools befassen, sondern können sich nur mit dem Browser selbst befassen immer griffbereit gefunden werden. Laui ist mit allen derzeit von Menschen verwendeten Browsern kompatibel (außer IE6/7) und kann als schnelle Entwicklungslösung für PC-seitige Backend-Systeme und Front-End-Schnittstellen verwendet werden.

Layui herunterladen

Sie können die neueste Version von Layui von der offiziellen Website-Homepage herunterladen. Sie wurde automatisch erstellt und ist besser geeignet für Einsatz in Produktionsumgebungen. Die Verzeichnisstruktur ist wie folgt:

 ├─css //css目录
  │  │─modules //模块css目录（一般如果模块相对较大，我们会单独提取，比如下面三个：）
  │  │  ├─laydate
  │  │  ├─layer
  │  │  └─layim
  │  └─layui.css //核心样式文件
  ├─font  //字体图标目录
  ├─images //图片资源目录（目前只有layim和编辑器用到的GIF表情）
  │─lay //模块核心目录
  │  └─modules //各模块组件
  │─layui.js //基础核心库
  └─layui.all.js //包含layui.js和所有模块的合并文件

Nach dem Login kopieren

Schnell loslegen

Nachdem Sie Laui erhalten haben, stellen Sie es vollständig in Ihrem Projektverzeichnis (oder Ihrer statischen Ressource) bereit server ), müssen Sie nur die folgenden zwei Dateien importieren:

./layui/css/layui.css
./layui/layui.js //提示：如果是采用非模块化方式（最下面有讲解），此处可换成：./layui/layui.all.js

Nach dem Login kopieren

Sie müssen nur diese beiden Dateien laden und müssen sich nicht um andere Dateien kümmern. Weil sie (wie jedes Modul) automatisch geladen werden, wenn sie endgültig verwendet werden. Dies ist eine einfache Einstiegsseite;

Modularer Ansatz

Wir empfehlen Ihnen, die Modulspezifikation von Layui zu befolgen, um eine Eintragsdatei zu erstellen und Layui zu übergeben. Verwenden Sie die Methode(), um die Eintragsdatei zu laden, wie unten gezeigt:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>开始使用layui</title>
  <link rel="stylesheet" href="../layui/css/layui.css">
</head>
<body>
 
<!-- 你的HTML代码 -->
 
<script src="../layui/layui.js"></script>
<script>
//一般直接写在一个js文件中
layui.use([&#39;layer&#39;, &#39;form&#39;], function(){
  var layer = layui.layer
  ,form = layui.form;
  
  layer.msg(&#39;Hello World&#39;);
});
</script> 
</body>
</html>

Nach dem Login kopieren

Nicht-modulare Methode (d. h. alle Module werden auf einmal geladen)

Wenn Ihnen die modulare Organisation von Laui nicht gefällt, können Sie definitiv die Methode des „einmaligen Ladens“ übernehmen. Wir packen und führen Laui.js und alle Module separat in einer vollständigen JS-Datei zusammen direkt. Wenn Sie diese Methode übernehmen, müssen Sie das Modul nicht mehr über die Methodelayui.use () laden, sondern können es direkt verwenden, z. B.:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>非模块化方式使用layui</title>
  <link rel="stylesheet" href="../layui/css/layui.css">
</head>
<body>
 
<!-- 你的HTML代码 -->
 
<script src="../layui/layui.all.js"></script>
<script>
//由于模块都一次性加载，因此不用执行 layui.use() 来加载对应模块，直接使用即可：
;!function(){
  var layer = layui.layer
  ,form = layui.form;
  
  layer.msg(&#39;Hello World&#39;);
}();
</script> 
</body>
</html>

Nach dem Login kopieren

Modular und nicht modular

Ich bevorzuge immer noch das Konzept der Modularität und lade es bei Bedarf, denn wenn es nicht modular ist, werden alle JS-Dateien am Anfang geladen, aber tatsächlich können einige Seiten es verwenden Bei sehr wenigen Modulen ist das Laden einer so großen JS-Datei nicht erforderlich. Daher wird empfohlen, den modularen Ansatz zu verwenden. Obwohl die Nichtmodularität praktisch ist, ist sie nicht sehr benutzerfreundlich.

Modulspezifikation

Das Modul von Layui basiert auf der inlayui.js intern implementierten asynchronen Modullademethode, die nicht AMD folgt (Nr Warum das schließlich willkürlich ist!), definierte aber eine Reihe einfacherer Modulspezifikationen. Und nach viel Übung hat sich diese Methode zum Kernmodul-Lademotor von Laui entwickelt.

Vorinstalliert

Kommen wir gleich zum Punkt, es ist angemessener, nur zu sagen, wie man es benutzt. Das Laden des Layui-Moduls verwendet die Kernmethode „layui.use“ (Mods, Callback). Wenn Ihr JS das Layui-Modul verwenden muss, empfehlen wir Ihnen, das Vorladen zu verwenden, da dadurch die Mühe vermieden werden kann, „layui.use“ überall zu schreiben. Sie sollten es in der äußersten Ebene so definieren:

/*
  Demo1.js
  使用Layui的form和upload模块
*/
layui.use([&#39;form&#39;, &#39;upload&#39;], function(){  //如果只加载一个模块，可以不填数组。如：layui.use(&#39;form&#39;)
  var form = layui.form //获取form模块
  ,upload = layui.upload; //获取upload模块
  
  //监听提交按钮
  form.on(&#39;submit(test)&#39;, function(data){
    console.log(data);
  });
  
  //实例化一个上传控件
  upload({
    url: &#39;上传接口url&#39;
    ,success: function(data){
      console.log(data);
    }
  })
});

Nach dem Login kopieren

Load on Demand (nicht empfohlen)

Wenn Sie an einer Zwangsstörung leiden Sie haben kein Interesse daran, dass die Website extreme Leistungsanforderungen hat. Sie möchten die erforderlichen Module nicht im Voraus laden, sondern die Module nur dann laden, wenn eine Aktion ausgelöst wird. Sie müssen kein großes „layui.use“ in die äußerste Schicht Ihres JS einbinden, Sie benötigen nur:

/*
  Demo2.js
  按需加载一个Layui模块
*/
 
//……
//你的各种JS代码什么的
//……
 
//下面是在一个事件回调里去加载一个Layui模块
button.addEventListener(&#39;click&#39;, function(){
  layui.use(&#39;laytpl&#39;, function(laytpl){ //温馨提示：多次调用use并不会重复加载laytpl.js，Layui内部有做模块cache处理。
    var html = laytpl(&#39;&#39;).render({});
    console.log(html);
  });
});

Nach dem Login kopieren

Hinweis: Wenn Sie viele Module in Ihrem verwenden müssen JS, das werden wir nicht tun Es wird nicht empfohlen, diese Lademethode zu verwenden, da dies bedeutet, dass Sie viel Laui.use () schreiben müssen und die Wartbarkeit des Codes nicht hoch ist.
Es wird empfohlen, Folgendes zu verwenden: Vorladen. Das heißt, in eine JS-Datei schreiben Sie einfach eine Verwendung.

Modul-Namespace

　　Layui的全部模块绑定在 layui对象下，内部由layui.define()方法来完成。每一个模块都会一个特有的名字，并且无法被占用。所以你无需担心模块的空间被污染，除非是你 delete layui.mod; 调用一个模块也必须借助layui对象的赋值。如：

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

Nach dem Login kopieren

　　一个模块一旦加载后，就会注册在layui对象下，所以你无法直接用模块名来获得，而同样借助layui对象。譬如有时你可能会直接在元素的事件属性上去调用一个模块，如：

<input onclick="layui.laydate()">

Nach dem Login kopieren

扩展一个Layui模块

　　layui 官方提供的模块有时可能还无法满足你，或者你试图按照layer的模块规范来扩展一个模块。那么你有必要认识layui.define()方法，相信你在文档左侧的“底层方法”中已有所阅读。下面就就让我们一起扩展一个Layui模块吧：

　　第一步：确认模块名，假设为：test，然后新建一个test.js 文件放入项目任意目录下（注意：不用放入layui目录）

　　第二步：编写test.js 如下：

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

Nach dem Login kopieren

　　第三步：设定扩展模块所在的目录，然后就可以在别的JS文件中使用了

//config的设置是全局的
layui.config({
  base: &#39;/res/js/&#39; //假设这是test.js所在的目录
}).extend({ //设定模块别名
  test: &#39;test&#39; //如果test.js是在根目录，也可以不用设定别名
  ,test1: &#39;admin/test1&#39; //相对于上述base目录的子目录
});
 
//使用test
layui.use(&#39;test&#39;, function(){
  var test = layui.test;
  
  test.hello(&#39;World!&#39;); //弹出Hello World!
});
//使用test1
layui.use(&#39;test1&#39;, function(){
  var test = layui.test1;
  
  //……
});

Nach dem Login kopieren

大体上来说，Layui的模块定义很类似Require.js和Sea.js，但跟他们又有着明显的不同，譬如在接口输出等地方。

Das obige ist der detaillierte Inhalt vonSo verwenden Sie Laui. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!