Lauiui のプロジェクト最適化と非侵入的最適化の詳細な分析-jsチュートリアル-php.cn

Lauiui のプロジェクト最適化と非侵入的最適化の詳細な分析

不言

リリース： 2018-08-25 09:51:13

オリジナル

1757 人が閲覧しました

この記事は、layui のプロジェクトの最適化と非侵入的最適化についての詳細な分析を提供します。必要な友人が参考になれば幸いです。

layuiに基づく実践的な最適化、非侵襲的な最適化フォーム日付オープンiframeデータテーブルアップロード検証フォームlaytplレイページレイツリーテーブルTree

Lauiui のプロジェクト最適化と非侵入的最適化の詳細な分析
#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. 入力選択ラジオチェックボックスのフォーカス外の検証を追加します
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 私のライセンス 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>
```

ログイン後にコピー