Detaillierte Analyse der Projektoptimierung und nicht-intrusiven Optimierung von Laui

Dieser Artikel bietet Ihnen eine detaillierte Analyse der Projektoptimierung und nicht-intrusiven Optimierung. Ich hoffe, dass er für Freunde in Not hilfreich ist.

Praktische Optimierung basierend auf Laui, nicht-invasive Optimierung Formulardatum Open-Iframe Datentabelle hochladen Verifizierungsform Laytpl Laypage Laytree TableTree


# Laui-Update

#### Projekteinführung

##### Praktische Optimierung basierend auf Laui, nicht-intrusive Optimierung

###### [1. Formelementoptimierung] (https ://bable2000.gitee.io/layui-update/view-demo/imit-form.html)

1. Formularelemente müssen nicht in Laui-Form eingeschlossen werden
2. Dynamisch hinzugefügte Formularelemente müssen nicht mit form.render() gerendert werden
3. Es gibt keine JS-Einstellung für die Zeitsteuerung, Min. Max wird dynamisch festgelegt und die Start- und Endzeiten werden separat eingegeben
4. Defokussierungsüberprüfung des Kontrollkästchens „Eingabe auswählen, Datum auswählen“ hinzufügen
5. [Überprüfung des unabhängigen Formulars (keine Notwendigkeit, die Übermittlung auszulösen, keine Notwendigkeit, Filter zu setzen)](https://bable2000.gitee.io/layui-update /view-demo/verify-form.html)
6, Dropdown-Schaltflächengruppe hinzufügen, Suchauswahlfeld (freier Typ)
7. Schaltflächengruppe für Formulargruppe hinzufügen

#### ## 2. [Feste Tabelle vereinfachen](https://bable2000.gitee.io/layui-update/view-demo/fixed-table.html) (fester Tabellenkopf, feste erste Spalte, feste letzte Spalte, festes Tabellenende )

###### 3. [Datentabelle](https://bable2000.gitee.io/layui-update/view-demo/data-table.html)
1. Der Kopf ist fixiert, die erste Spalte ist fixiert, die letzte Spalte ist fixiert und das Ende der Tabelle ist fixiert, aber die Formularstruktur ändert sich überhaupt nicht
2 Passen Sie die Formularvorlage an (Sie können sie ändern). Sie selbst)
3. Paginierung und Tabellen sind getrennt (um die Verarbeitung nach der Datenanforderung und vor der Anzeige zu erleichtern)
4. Da die Formularvorlage angepasst werden muss, ist die standardmäßige Aktivierung/Deaktivierung des Kontrollkästchens zulässig
5. Die manuelle „Gesamt“-Funktion wurde am Ende der Tabelle hinzugefügt

[Data table.png](http://oyh4crb8q.bkt.clouddn .com/data-table.png)

###### 4. [Ändern Sie das Schreiben der Laytpl-Vorlage in den Vue-Modus](https://bable2000.gitee.io/layui-update/ view-demo/laytpl.html), auch die komplexe Laytpl-Vorlage schwer zu schreiben

###### 5. Ebene optimieren (gemäß Projektanforderungen)

1 [Asynchrone Anforderung der Ebene hinzufügen](https://bable2000. gitee.io/layui-update/view-demo/layer-open.html), Reduzierung der Verschachtelung von Ajax->layer

```
layer.open({
 type: 1,
 async: true, //异步请求,content为请求地址
 content: '../template/xx.tpl',
 data: { 
 /*静态tpl文件搭配动态数据,生成动态提示框.*/
 /*(好处:不用后端生成动态文件,不用前端拼接字符串,不用一次性把当前页面可能涉及的弹窗内容全部都提前加载完)*/
 v1: '李先生,你好!',
 v2: '没有开通权限/已开通权限'
 },
 btn: ['按钮一', '按钮二', '按钮三'],
 success: function(layero, index) {
 console.log(layero, index);
 }
})
```

2. [Fügen Sie die Öffnungsposition und die Rückverfolgbarkeit von iframe pop hinzu -up Windows](https://bable2000.gitee.io/layui-update/)

```
var open1 = function() {
 layer.open({
 type: 2,
 goal: top, //顶层窗口top,父级窗口parent,父级的父级窗口parent.parent
 content: './view-demo/iframe-source-2.html',
 area: ['50%', '50%'],
 success: function() {
 console.log('加载完')
 }
 })
};
parent.layer.close(layerIndex) //当前窗口信息
layerSource.parent.layer.close(layerSource.layerIndex) //关闭打开当前窗口的窗口
console.log('iframe弹窗发起方 layerSource:', layerSource.document);
console.log('iframe弹窗layer索引值 layerIndex:', layerIndex)
```
######
 6. 
[数据变化监控](https://bable2000.gitee.io/layui-update/view-demo/watchData.html)
 , 
[指定节点变化监控](https://bable2000.gitee.io/layui-update/view-demo/watchDom.html)
```
<div id="d1" class="box" attr-1=""></div>
<button type="button" onclick="$(&#39;.box&#39;).addClass(&#39;box-1&#39;)">改变1</button>
<button type="button" onclick="document.getElementById(&#39;d1&#39;).setAttribute(&#39;attr-1&#39;,&#39;x1&#39;)">改变2</button>
<button type="button" onclick="document.getElementById(&#39;d1&#39;).innerHTML=&#39;HTML&#39;">改变3</button>
<script type="text/javascript">
var data = {
 a: 200,
 b: [1, 2, 3],
 c: {
 c1: 1,
 c2: 2
 }
};
$.watchData(data, function(x, y, z) {
 var c = &#39;data发生了改变↓&#39; + &#39;</br>&#39; +
 &#39;新值:&#39; + JSON.stringify(x) + &#39;</br>&#39; +
 &#39;旧值:&#39; + JSON.stringify(y) + &#39;</br>&#39; +
 &#39;key:&#39; + JSON.stringify(z);
 layer.alert(c);
});
$.watchDom(document.getElementById(&#39;d1&#39;), function() {
 layer.alert(&#39;box改变&#39;);
});
</script>
```

###### 6. [ Datei-Upload-Vorschau, Upload-Fortschrittsbalken* und verschiedene Vorderseiten -End- und Back-End-Fehlerbehandlung, Datei-Vollbildvorschau, Rotation](https://bable2000.gitee.io/layui-update/view-demo/upload.html)

[ Datei-Upload.png](http://oyh4crb8q.bkt.clouddn.com/file-1.png)

[Datei-Vollbildvorschau.png](http://oyh4crb8q.bkt. clouddn.com/file-2.png)

1. reader.readAsDataURL(file)->window.URL.createObjectURL(file) =>Asynchrone Dateivorschau geändert in Synchronisierung (Browserunterstützung). ist das Gleiche)

* [Zitieren Sie den Code von Stream und dann „optimieren“](https://fly.layui.com/jie/31616/)

## #### 7. Rekursive Referenz auf externe Dateien

```
<imports href="../template/imports-1.tpl">同步引入失败替换内容(引入片段中允许有script)</imports>
<imports href="../template/imports-1.tpl" async>异步引入失败替换内容</imports>
```

###### 8. js führt externe Dateien ein

> requires方法内部用promise实现缓存,如需重复请求一个动态文件,请加时间戳
```
"请求js"
requires(jsBase + 'imit.js'); //同步阻塞引入js
requires(jsBase + 'imit.js', true); //异步引入js
requires(jsBase + 'imit.js', function(){/*加载成功回调*/}); //异步引入js
var req1=requires(jsBase + "tpl.js", true);
req1.then(function(){/*promise式请求*/});
"请求css"
requires('css|style1.css') //异步请求style1.css
"请求html,html#,tpl,ftl"
requires(&#39;text|file.tpl&#39;, function(html) {/*以文本形式引入file.tpl,剔除了<html><head><body>标签,*/})
requires(&#39;text|file.tpl#x1&#39;, function(x1) {/*引入file.tpl,并获取x1锚点内容*/})
requires(&#39;text|file.tpl#y1&#39;, function(y1) {/*不再发起重复请求,直接从file.tpl文件缓存中,并获取y1锚点内容*/})
```

#### Softwarearchitektur

Basierend auf Laui-Architektur/**layui-v2.2.6 MEINE Lizenz von https://www.layui.com*/

#### Installationsanleitung

Basierend auf Laui-Architektur

layui Die erste Version wurde im goldenen Herbst 2016 veröffentlicht. Sie unterscheidet sich von den UIs, die auf der untersten Ebene von MVVM basieren. Framework geht jedoch nicht gegen den Strom, sondern glaubt an den Weg der 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 müssen sich nur mit dem Browser selbst und allen Elementen und Interaktionen auseinandersetzen Bedarf ist immer griffbereit.

Sie müssen Folgendes vorstellen:

```
<link rel="stylesheet" type="text/css" href="../js/layui/css/layui.css" />
<link rel="stylesheet" type="text/css" href="../css/common.css" />
<script src="../js/jquery.min.js"></script>
<script src="../js/layui/layui.js"></script>
<script src="../js/common.js"></script>
```

Verwandte Empfehlungen:

Zusammenfassung der JavaScript-Projektoptimierung

Wie man Gulp verwendet, um RequireJS-Projekte automatisch zu optimieren

WEB-Projektoptimierungsfähigkeiten (muss bekannt sein)

Das obige ist der detaillierte Inhalt vonDetaillierte Analyse der Projektoptimierung und nicht-intrusiven Optimierung von Laui. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!