Layui의 프로젝트 최적화 및 비침해적 최적화에 대한 상세한 분석-JS 튜토리얼-php.cn

이 기사는 Layui의 프로젝트 최적화 및 비침해적 최적화에 대한 자세한 분석을 제공합니다. 도움이 필요한 친구들이 참고할 수 있기를 바랍니다.

layui 기반의 실용적인 최적화, 비침습적 최적화 양식 날짜 open-iframe data-table upload verify-formlaytpllaypagelaytree tableTree

Layui의 프로젝트 최적화 및 비침해적 최적화에 대한 상세한 분석
#layui-update

#### 프로젝트 소개

#### # Layui 기반의 실용적인 최적화, 비침습적 최적화

###### [1. Form 요소 최적화](https://bable2000.gitee.io/layui-update/view-demo/imit-form.html )

1. 양식 요소는layui-form으로 래핑할 필요가 없습니다.
2. 동적으로 추가된 양식 요소는 form.render()를 사용하여 렌더링할 필요가 없습니다.
3. min max는 동적으로 설정되며 시작 및 종료 시간은 별도로 입력됩니다.
4. 입력 선택 날짜 라디오 체크박스 초점이 맞지 않음 확인
5. [독립적인 양식 확인(제출 트리거 필요 없음, 필터 설정 필요 없음) )] (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. 사용자 정의 양식 템플릿으로 인해 기본 확인란을 선택/비활성화할 수 있습니다
5. the table

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

#### ## 4. [laytpl 템플릿 작성 방식을 vue 모드로 수정] (https://bable2000.gitee.io/layui-update/view-demo/laytpl.html),laytpl 복합 템플릿은 작성하기가 너무 어렵습니다

### ### 5. 레이어 최적화(프로젝트 요구 사항에 따라) )

1. [레이어의 비동기 요청 추가](https://bable2000.gitee.io/layui-update/view-demo/layer-open.html), 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);
 }
})
```

로그인 후 복사

의 중첩을 줄입니다. 2. [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>
```

로그인 후 복사

### ### 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) =>비동기 파일 미리보기가 동기로 변경됩니다(동일 브라우저 지원)

* [ 코드 인용 스트리밍 후 '최적화'](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 + &#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 MY 라이센스 작성자: 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>
```

로그인 후 복사