首頁 web前端 js教程 layui的專案最佳化以及無侵入最佳化的詳細解析

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

Aug 25, 2018 am 09:51 AM
layui 專案最佳化

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

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

layui的專案最佳化以及無侵入最佳化的詳細解析
# 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的嵌套

#

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

```

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/)

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

```

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. 外部檔案遞迴參考

1

2

3

4

```

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

<imports href="../template/imports-1.tpl" async>异步引入失败替换内容</imports>

```

登入後複製

# 8. js引入外部檔案

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

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

```

登入後複製

##軟體架構

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

# 安裝教學

基於layui架構

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

1

2

3

4

5

6

7

```

<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中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱門文章

<🎜>:泡泡膠模擬器無窮大 - 如何獲取和使用皇家鑰匙
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
北端:融合系統,解釋
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1664
14
CakePHP 教程
1423
52
Laravel 教程
1318
25
PHP教程
1269
29
C# 教程
1248
24
layui登陸頁怎麼設定跳轉 layui登陸頁怎麼設定跳轉 Apr 04, 2024 am 03:12 AM

layui 登入頁面跳轉設定步驟:新增跳轉代碼:在登入表單提交按鈕點選事件中新增判斷,成功登入後透過 window.location.href 跳到指定頁面。修改 form 配置:在 lay-filter="login" 的 form 元素中新增 hidden 輸入字段,name 為 "redirect",value 為目標頁面位址。

layui怎麼取得表單數據 layui怎麼取得表單數據 Apr 04, 2024 am 03:39 AM

layui 提供了多種取得表單資料的方法,包括直接取得表單所有欄位資料、取得單一表單元素值、使用formAPI.getVal() 方法取得指定欄位值、將表單資料序列化並作為AJAX 請求參數,以及監聽表單提交事件獲取資料。

如何優化Java開發工作專案經驗 如何優化Java開發工作專案經驗 Nov 02, 2023 am 09:47 AM

Java開發是當今世界上最受歡迎的程式語言之一,隨著越來越多的公司和組織使用Java進行應用程式開發,Java開發人員的數量也在增加。然而,Java開發者可能會面臨一些常見問題,例如重複程式碼、缺乏文件、低效的開發流程等。在這篇文章中,我們將探討一些優化Java開發工作專案經驗的方法。使用設計模式使用設計模式可以避免程式碼的重複和不必要的複雜性,同時提高程式碼的

layui跟vue有啥差別 layui跟vue有啥差別 Apr 04, 2024 am 03:54 AM

layui與Vue的差異主要體現在功能和關注點上。 layui專注於快速開發UI元素,提供預製元件簡化頁面建置;而Vue則是全端框架,注重資料綁定、元件化開發和狀態管理,更適合建構複雜應用程式。 layui學習簡單,適合快速建立頁面;Vue學習曲線陡峭,但有助於建立可擴展且易於維護的應用程式。根據專案需求和開發者技能水平,可以選擇合適的框架。

layui如何實現自適應 layui如何實現自適應 Apr 26, 2024 am 03:00 AM

透過使用layui框架的響應式佈局功能,可以實現自適應佈局。步驟包括:引用layui框架。定義自適應佈局容器,設定layui-container類別。使用響應式斷點(xs/sm/md/lg)隱藏特定斷點下的元素。利用網格系統(layui-col-)指定元素寬度。透過偏移量(layui-offset-)建立間距。使用響應式實用工具(layui-invisible/show/block/inline)控制元素的可見性和顯示方式。

layui框架是什麼語言 layui框架是什麼語言 Apr 04, 2024 am 04:39 AM

layui框架是一款基於JavaScript的前端框架,提供了一套易用的UI元件和工具,幫助開發者快速建立響應式網路應用程式。其特點包括:模組化、輕量級、響應式,並擁有完善的文件和社群支援。 layui廣泛應用於管理後台系統、電商網站和行動裝置應用程式等開發。優點在於上手快、提升效率、維護方便,缺點是客製化較差、技術更新較慢。

layui怎麼傳數據 layui怎麼傳數據 Apr 26, 2024 am 03:39 AM

使用 layui 傳輸資料的方法如下:使用 Ajax:建立請求對象,設定請求參數(URL、方法、資料),處理回應。使用內建方法:使用 $.post、$.get、$.postJSON 或 $.getJSON 等內建方法簡化資料傳輸。

layui是什麼意思啊 layui是什麼意思啊 Apr 04, 2024 am 04:33 AM

layui是一個前端UI框架,它提供了豐富的UI元件、工具和功能,幫助開發人員快速建立現代化、響應式和互動式Web應用程序,特點包括:靈活輕量、模組化設計、豐富的元件、強大的工具和易於自訂。它廣泛應用於各種Web應用程式的開發中,包括管理系統、電商平台、內容管理系統、社交網路和行動裝置應用程式。

See all articles