Detailed analysis of layui's project optimization and non-intrusive optimization

This article brings you a detailed analysis of layui's project optimization and non-intrusive optimization. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Practical optimization based on layui, non-invasive optimization form date open-iframe data-table upload verify-form laytpl laypage laytree tableTree


# layui-update

# Project introduction

## Practical optimization based on layui, non-intrusive optimization

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


1. Form elements do not need to be wrapped in layui-form
2. Dynamically added Form elements do not need to be rendered with form.render()
3. There is no JS setting for the time control, min max is dynamically set, and the start and end times are input separately

4. Add input select date radio checkbox defocus verification

5. [Verification of independent form (no need to trigger submission, no need to set filters)](https://bable2000.gitee.io/layui-update/view-demo/verify-form.html)
6 , Add drop-down button group, search selection box (free type)

7, Add form group button group

2. [Simplified fixed form](https://bable2000.gitee .io/layui-update/view-demo/fixed-table.html) (fixed table header, fixed first column, fixed last column, fixed table tail)

3. [Data table](https://bable2000.gitee.io/layui-update/view-demo/data-table.html)

1. The header is fixed, the first column is fixed, the last column is fixed, and the table The tail is fixed, but the form structure does not change at all

2. Customize the form template (you can modify it yourself)
3. Pagination and tables are separated (to facilitate processing after data request and before display)

4. Because Customize the form template, so the default checked/disabled of the checkbox is allowed

5. Added the function of manual 'total' at the end of the table

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

## 4. [Modify laytpl template writing into vue mode](https://bable2000.gitee.io/layui-update/ view-demo/laytpl.html), laytpl complex template is too difficult to write

5. Optimize layer (according to project requirements)

1. [Add Asynchronous request of layer](https://bable2000.gitee.io/layui-update/view-demo/layer-open.html), reducing the nesting of 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. [Add the opening position and traceability of iframe pop-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. [ File upload preview, upload progress bar* and various front-end and back-end error handling, file full-screen preview, rotation](https://bable2000.gitee.io/layui-update/view-demo/upload.html)

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

[File full screen preview.png](http:// oyh4crb8q.bkt.clouddn.com/file-2.png)

1. reader.readAsDataURL(file)->window.URL.createObjectURL(file) =>Asynchronous file preview changed to Synchronization (same browser support)

\* [Quote the code of Stream and then 'optimize'](https://fly.layui.com/jie/31616/)

7. Recursive reference to external files

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

8. js introduces external files

> 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锚点内容*/})
```

# Software architecture

Based on layui architecture/**layui-v2.2.6 MIT License By https://www.layui.com*/
# Installation tutorial

Based on layui architecturelayui The first version was released in the golden autumn of 2016. It is different from those UIs based on the bottom layer of MVVM. Framework, however, does not go against the grain, but believes in the way of returning to nature. To be precise, it is more tailor-made for server-side programmers. You do not need to get involved in the complex configuration of various front-end tools. You only need to face the browser itself, and all the elements and interactions you need can be found at your fingertips.

###You need to introduce:######

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

###Related recommendations:#########JavaScript Project Optimization Summary############## #How to use gulp to automatically optimize requireJS projects###############WEB project optimization skills (must know)######

The above is the detailed content of Detailed analysis of layui's project optimization and non-intrusive optimization. For more information, please follow other related articles on the PHP Chinese website!