layui的專案最佳化以及無侵入最佳化的詳細解析

這篇文章帶給大家的內容是關於layui的專案優化以及無侵入優化的詳細解析，有一定的參考價值，有需要的朋友可以參考一下，希望對你有所幫助。

基於layui的實戰最佳化,無侵入性最佳化 form date open-iframe data-table upload verify-form laytpl laypage laytree tableTree


# layui-update

## 專案介紹

## 基於layui的實戰最佳化,無侵入性最佳化

[1. 表單元素最佳化](https ://bable2000.gitee.io/layui-update/view-demo/imit-form.html)


1、表單元素不用包裹在layui-form中
2、動態添加表單元素不用form.render()渲染
3、時間控制項無JS設定,min max動態設定,開始結束時間分開輸入

4、新增input select date radio checkbox失焦校驗

5、 [獨立form表單的校驗(不必要觸發提交,也不需要設定過濾器)](https://bable2000.gitee.io/layui-update/view-demo/verify-form.html)
6 、追加下拉按鈕群組、搜尋選擇框(自由型)

7、追加表單組按鈕組

2. [簡化固定表格](https://bable2000.gitee .io/layui-update/view-demo/fixed-table.html)（表頭固定、第一列固定、最後一列固定、表尾固定）

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

1. 表頭固定、第一列固定、最後一列固定、表尾固定，但表單結構一點不變化

2. 自訂表單範本(可以自己修改)
3. 分頁與表格獨立開(便於資料請求後展示前的處理)

4. 因為自訂表單範本,所以允許checkbox的預設checked/disabled

5. 新增了錶尾手動'合計'的功能

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

4. [修改laytpl範本寫法成vue模式](https://bable2000.gitee.io/layui-update/ view-demo/laytpl.html)，laytpl複雜模板太難寫了

# 5. 最佳化layer(根據專案需求)

1. [添加layer的非同步請求](https://bable2000.gitee.io/layui-update/view-demo/layer-open.html)，減少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. [新增iframe彈跳視窗的開啟位置與溯原性](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. [檔案上傳預覽,上傳進程列* 及各種前後端錯誤處理,檔案全螢幕預覽,旋轉](https://bable2000.gitee.io/layui-update/view-demo/upload.html)

[檔案上傳.png](http://oyh4crb8q.bkt.clouddn.com/file-1.png)

[檔案全螢幕預覽.png](http:// oyh4crb8q.bkt.clouddn.com/file-2.png)

1、reader.readAsDataURL(file)->window.URL.createObjectURL(file) =>非同步檔案預覽改為同步(瀏覽器支援相同)

\* [引用Stream的程式碼,再'最佳化'](https://fly.layui.com/jie/31616/)

7. 外部檔案遞迴參考

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

# 8. js引入外部檔案

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

##軟體架構

基於layui架構/**layui-v2.2.6 MIT 許可證 https://www.layui.com*/

# 安裝教學

基於layui架構

#layui 首個版本發佈於2016年金秋，她有別於那些基於 MVVM 底層的 UI 框架，卻並非逆道而行，而是信奉返璞歸真之道。確切地說，她更多是為服務端程式設計師量身定做，你無需涉足各種前端工具的複雜配置，只需面對瀏覽器本身，讓一切你所需要的元素與交互，從這裡信手拈來。 ######你需要介紹：######

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

###相關推薦：##########JavaScript 專案最佳化總結############## #怎麼使用gulp自動最佳化requireJS的專案###############WEB專案最佳化技巧（必會）######

以上是layui的專案最佳化以及無侵入最佳化的詳細解析的詳細內容。更多資訊請關注PHP中文網其他相關文章！