目錄
2.1、回顧表單
2.1.1 組成
2.1.2 form標簽屬性
2.1.3 表單的同步提交及缺點
2.1.4 阻止表單默認提交行為
2.2、模板引擎
2.2.1 簡單的模板引擎
2.2.2 art-template模板引擎
2.2.3 標準語法
2.2.4 過濾器
2.1、回顧表單
表單在網頁中主要負責資料采集功能，并通過from標簽的提交操作，把采集的資訊提交到服務器端處理
2.1.1 組成
| 表單域 | <form></form>內的區域 |
| 表單標簽 | 包含了文本框，密碼框，隱藏域，都行文本框，復選框，單選框，下拉選擇框和檔案上傳框等等 |
| 表單按鈕 | 通過設定type屬性為submit來觸發form表單的提交 |
form標簽用來采集資料，form標簽的屬性則是用來規定如何把采集到的資料發送到服務器
2.1.2 form標簽屬性
| 屬性 | 值 | 描述 |
|---|---|---|
| action | URL地址 | 規定當提交表單時，向何處發送表單資料 |
| method | get或post | 規定以何種方式把表單資料提交到action URL，默認為get |
| enctype | application/x-www-form-urlencoded multipart/form-data text/plain | 規定發送表單資料之前如何對其進行編碼 |
| target | _blank 在新視窗中打開被鏈接檔案， _self 默認，在相同的框架中打開被鏈接檔案， _parent 在父框架集中打開被鏈接檔案， _top 在整個視窗中打開被鏈接檔案， framename 在指定的框架中打開被鏈接檔案， | 規定在何處打開action URL |
注意：
action：當提交表單后，頁面會立即跳轉到action屬性指定的URL地址沒有指定action會提交到當前頁面
method：
- get提交表示通過以URL地址提交資料（適合用來提交少量的簡單的資料）
- post提交不會在URL地址中顯示出來（適合用來提交大量的、復雜的或包含檔案上傳的資料）
enctype：
- application/x-www-form-urlencoded：在發送前編碼所有字符（默認）
- multipart/form-data：不對字符編碼，在使用包含檔案上傳控制元件的表單時，必須使用該值，
- text/plain：空格轉換為 "+" 加號，但不對特殊字符編碼，
2.1.3 表單的同步提交及缺點
通過點擊 submit 按鈕，觸發表單提交的操作，從而使頁面跳轉到 action URL 的行為，叫做表單的同步提交
缺點：
- from表單同步提交后，整個頁面會發生跳轉，跳轉到action URL所指的地址，用戶體驗差
- from表單同步提交后，頁面之前的狀態和資料會丟失
2.1.4 阻止表單默認提交行為
當監聽到表單的提交事件以后，可以呼叫事件物件的event.preventDefault()函式，來阻止表單的提交和頁面的跳轉
<script src="./js/jquery.js"></script>
<script>
$("#form").submit(function(e){
e.preventDefault();
});
$("#form").on('submit',function(e){
e.preventDefault();
})
</script>2.2、模板引擎
之前在渲染UI結構的時候，拼接字串是比較麻煩的，而且很容易會出現問題，模板引擎它可以根據程式員的指定的模板結構和資料，自動生成一個完整的HTML頁面
好處：
- 減少了字串的拼接操作
- 使代碼結構更清晰
- 使代碼更易于閱讀與維護
2.2.1 簡單的模板引擎
<!DOCTYPE html>
<html lang="zh-ch">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="content"></div>
</body>
<script>
const str = '我叫{{name}},今年{{age}}';
const obj = {
name:"張三",
age:22
}
let reg = /{{(\w+)}}/g;
// let reg = /(\w+)/g
var res = str.replace(reg,(a,b)=>obj[b]);
console.log(res);
</script>
</html>2.2.2 art-template模板引擎
步驟：
- 通過<script>標簽匯入art-template
- 定義資料
- 定義模板
注意：
- 模板的HTML結構，必須定義到script標簽中，需要把type屬性改成text/html
- 給模板添加一個id
- 模板里面如果需要使用到傳入的資料，利用{{}}來實作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>隔行變色</title>
<style>
div {
font-size: 14px;
color: white;
line-height: 30px;
margin-bottom: 5px;
}
.odd {
background-color: lightblue;
padding-left: 5px;
}
.even {
background-color: lightpink;
padding-left: 5px;
}
</style>
</head>
<body>
<h1>名言大全</h1>
<!-- 容器 -->
<div id="container"></div>
<script src="./lib/jquery.js"></script>
<!-- 1. 引入模板引擎 -->
<script src="lib/template-web.js"></script>
<!-- 3. 定義模板 -->
<script type="text/html" id="my">
<h4>
{{each array}} {{if $index % 2 ===0}}
<div class="even">{{$value}}</div>
{{else if $index % 2 !==0}}
<div class="odd">{{$value}}</div>
{{/if}} {{/each}}
</h4>
</script>
<script>
// 2. 定義好資料
let data = {
array: [
"知人者智，自知者明，勝人者有力，自勝者強",
"一個人即使已登上頂峰，也仍要自強不息",
"要掌握書，莫被書掌握；要為生而讀，莫為讀而生",
"業精于勤，荒于嬉；行成于思，毀于隨",
"只要持續地努力，不懈地奮斗，就沒有征服不了的東西",
"既然我已經踏上這條道路，那么，任何東西都不應妨礙我沿著這條路走下去",
"滴 滴滴~",
],
};
// 4. 呼叫 template() 函式，獲取到模板引擎拼接好的HTML字串，渲染到 container 容器里面
var date = template("my", data);
console.log(date);
$("#container").html(date);
</script>
</body>
</html>2.2.3 標準語法
| 輸出型別 | 語法 | 說明 |
|---|---|---|
| 普通輸出 | {{ value }} {{ obj.key }} {{ obj['key'] }} {{ a ? b : c}} {{ a || b }} {{ a + b }} | 在 {{}} 語法中，可以進行 變數 的輸出，物件屬性的輸出，三元運算式輸出，邏輯或輸出，加減乘除等運算式輸出 |
| 原文輸出 | {{ @ value }} | 如果輸出的 value 值中，包含了 HTML 標簽結構，則需要使用原文輸出語法，才能保證HTML標簽被正常渲染 |
| 條件輸出 | {{ if value }} 按需輸出的內容 {{/if}} {{ if v1 }} 按需輸出的內容 {{ else if v2 }} 按需輸出的內容 {{/if}} | 如果要實作條件輸出，則可以在 {{}} 中使用 if...else if.../if 的方式，進行按需輸出 |
| 回圈輸出 | {{each arr}} {{$index}} {{$value}} {{/each}} | 如果要實作回圈輸出，則可以在{{}} 內，通過 each 語法回圈陣列，當前回圈的索引使用 $index 進行訪問，當前回圈項使用 $value 進行訪問 |
2.2.4 過濾器
過濾器本質就是一個function函式
注冊過濾器：
template.defaults.imports.函式名 = function（value）{return 回傳的值}標準語法：{{date | 函式名 | dateFormat ''}}
<!DOCTYPE html> <html lang="zh-ch"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="up"></div> <script type="text/html" id="dx"> {{ name | fifter }} //過濾器語法類似管道運算子，它的上一個輸出作為下一個輸入 </script> <script src="lib/jquery.js"></script> <script src="lib/template-web.js"></script> <script> const obj = { name : "pink" } template.defaults.imports.fifter = function(value){ return value[0].toUpperCase() + value.slice(1); } const str = template("dx",obj); $("#up").html(str) </script> </body> </html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/333554.html
標籤：其他