Analyse détaillée de l'optimisation du projet layui et de l'optimisation non intrusive-js tutoriel-php.cn

Cet article vous apporte une analyse détaillée de l'optimisation du projet layui et de l'optimisation non intrusive. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Optimisation pratique basée sur layui, optimisation non invasive du formulaire de date open-iframe data-table upload verify-form laytpl laypage laytree tableTree

Analyse détaillée de loptimisation du projet layui et de loptimisation non intrusive
# layui-update

#### Introduction au projet

##### Optimisation pratique basée sur layui, optimisation non intrusive

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

1. Les éléments du formulaire n'ont pas besoin d'être enveloppés dans layui-form2. Les éléments de formulaire ajoutés dynamiquement n'ont pas besoin d'être rendus avec form.render()
3. Il n'y a pas de paramètre JS pour le contrôle du temps, min max est défini dynamiquement et les heures de début et de fin sont saisies séparément
4. Ajouter une case à cocher radio de sélection de date d'entrée pour défocaliser la vérification
5. [Vérification du formulaire indépendant (pas besoin de déclencher la soumission, pas besoin de définir des filtres)](https://bable2000.gitee.io/layui-update /view-demo/verify-form.html)
6, Ajouter un groupe de boutons déroulants, zone de sélection de recherche (type libre)
7. Ajouter un groupe de boutons de groupe de formulaire

####. ## 2. [Simplifier le tableau fixe](https://bable2000.gitee .io/layui-update/view-demo/fixed-table.html) (en-tête de tableau fixe, première colonne fixe, dernière colonne fixe, queue de tableau fixe )

###### 3. [Tableau de données](https://bable2000.gitee.io/layui-update/view-demo/data-table.html)

1. L'en-tête est fixe, la première colonne est fixe, la dernière colonne est fixe et le tableau La queue est fixe, mais la structure du formulaire ne change pas du tout
2 Personnalisez le modèle de formulaire (vous pouvez le modifier. vous-même)
3. La pagination et les tableaux sont séparés (pour faciliter le traitement après la demande de données et avant l'affichage)
4 Parce que personnalisez le modèle de formulaire, donc la case à cocher par défaut est autorisée
5. Ajout de la fonction de « total » manuel à la fin du tableau

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

###### 4. [Modifier l'écriture du modèle laytpl en mode vue](https://bable2000.gitee.io/layui-update/ view-demo/laytpl.html), le modèle complexe laytpl l'est également difficile à écrire

###### 5. Optimiser la couche (selon les exigences du projet)

1 [Ajouter une demande asynchrone de couche](https://bable2000. gitee.io/layui-update/view-demo/layer-open.html), réduisant l'imbrication de ajax->layer

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

Copier après la connexion

2. Fenêtre contextuelle iframe](https://bable2000.gitee.io/layui-update/)

```
var open1 = function() {
 layer.open({
 type: 2,
 goal: top, //顶层窗口top,父级窗口parent,父级的父级窗口parent.parent
 content: &#39;./view-demo/iframe-source-2.html&#39;,
 area: [&#39;50%&#39;, &#39;50%&#39;],
 success: function() {
 console.log(&#39;加载完&#39;)
 }
 })
};
parent.layer.close(layerIndex) //当前窗口信息
layerSource.parent.layer.close(layerSource.layerIndex) //关闭打开当前窗口的窗口
console.log(&#39;iframe弹窗发起方 layerSource:&#39;, layerSource.document);
console.log(&#39;iframe弹窗layer索引值 layerIndex:&#39;, 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>
```

Copier après la connexion

##### # 6. [Aperçu du téléchargement du fichier, barre de progression du téléchargement * et diverses gestions d'erreurs front-end et back-end, aperçu plein écran des fichiers, rotation](https://bable2000.gitee.io/layui-update/view-demo/upload.html)

[Téléchargement de fichier.png](http://oyh4crb8q.bkt.clouddn.com/file-1.png)

[Aperçu du fichier en plein écran.png]( http:// oyh4crb8q.bkt.clouddn.com/file-2.png)

1. reader.readAsDataURL(file)->window.URL.createObjectURL(file) =>asynchrone Aperçu du fichier modifié en synchronisation (le support du navigateur est le même)

* [Citer le code de Stream puis 'optimiser'](https://fly.layui.com/jie/31616/)

###### 7. Référence récursive à des fichiers externes

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

Copier après la connexion

###### 8. js introduit des fichiers externes

> requires方法内部用promise实现缓存,如需重复请求一个动态文件,请加时间戳
```
"请求js"
requires(jsBase + &#39;imit.js&#39;); //同步阻塞引入js
requires(jsBase + &#39;imit.js&#39;, true); //异步引入js
requires(jsBase + &#39;imit.js&#39;, function(){/*加载成功回调*/}); //异步引入js
var req1=requires(jsBase + "tpl.js", true);
req1.then(function(){/*promise式请求*/});
"请求css"
requires(&#39;css|style1.css&#39;) //异步请求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锚点内容*/})
```

Copier après la connexion

#### Architecture logicielle

Basé sur l'architecture layui/**layui-v2.2.6 MA licence par https://www.layui.com*/

#### Tutoriel d'installation

Basé sur l'architecture layui

layui La première version a été publiée à l'automne doré 2016. Elle est différente de ces interfaces utilisateur basées sur la couche inférieure de MVVM. Framework, cependant, ne va pas à contre-courant, mais croit en la voie du retour à la nature. Pour être précis, il est plus adapté aux programmeurs côté serveur. Vous n'avez pas besoin de vous impliquer dans la configuration complexe de divers outils frontaux, il vous suffit de faire face au navigateur lui-même, et tous les éléments et interactions dont vous avez besoin peuvent. être trouvé à portée de main.

Vous devez importer :

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

Copier après la connexion

Recommandations associées :

Résumé de l'optimisation du projet JavaScript

Comment utiliser gulp pour optimiser automatiquement les projets requireJS

Compétences en optimisation de projets WEB (à connaître)

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!