前段工做第一天新知識點---handlebars.js和Seajs

時間 2019-11-20

標籤前段第一天知識 handlebars.js handlebars seajs 欄目 JavaScript 简体版

原文原文鏈接

文／飢人谷_韓寶億（簡書做者）
原文連接：http://www.jianshu.com/p/0b3bbd52ad48
著做權歸做者全部，轉載請聯繫做者得到受權，並標註「簡書做者」。

今天第一天上班沒多少事情，公司用的是SVN代碼管理器，後端人員幫我把環境搭建好之後老大就讓我在網上找一下Handlebars.js和Seajs來看看，由於公司用的是這種模板庫和規範，大概瞭解一下這兩個東西明天就要開始寫頁面了。javascript

（一）handlebars.js
對於handlebars.js，在網上找到楊元的博客--《js模版引擎handlebars.js實用教程——爲何選擇Handlebars.js》
介紹
Handlebars 是 JavaScript一個語義模板庫，經過對view和data的分離來快速構建web模板。在加載時被預編譯，而不是到了客戶端執行到代碼時再去編譯，這樣能夠保證模板加載和運行的速度。css

基本語法
Handlebars expressions 是handlebars模板中最基本的單元，使用方法是加兩個花括號{{value}}, handlebars模板會自動匹配相應的數值，對象甚至是函數。html

QQ截圖20151123161352.png

handlebars會根據上下文來自動對錶達式進行匹配，若是匹配項是個變量，則會輸出變量的值，若是匹配項是個函數，則函數會被調用。handlebars會根據當前上下文輸出content變量的title屬性的值。 在JavaScript中，使用Handlebars.compile()方法來預編譯模板。

saa.png

---如何引入Handlebars.js？
由於Handlebars.js是Jquery的一個插件，第一步固然要引用Jquery啦，而後引用Handlebars.js便可，僅僅須要這兩個js文件。java

QQ截圖20151123162650.png

---each-基本循環使用方法
<!DOCTYPE html>jquery

<html>
<head>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<title>each-基本循環使用方法 - by 楊元</title>
</head>
<body>
web

each-基本循環使用方法

<table>
<thead>
<tr>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
</tr>
</thead>
<tbody id="tableList">

</tbody> </table> <!--插件引用--> <script type="text/javascript" src="script/jquery.js"></script> <script type="text/javascript" src="script/handlebars-1.0.0.beta.6.js"></script> <!--Handlebars.js模版--> <!--Handlebars.js模版放在script標籤中，保留了html原有層次結構,模版中要寫一些操做語句--> <!--id能夠用來惟一肯定一個模版,type是模版固定的寫法--> <script id="table-template" type="text/x-handlebars-template"> {{#each student}} <tr> <td>{{name}}</td> <td>{{sex}}</td> <td>{{age}}</td> </tr> {{/each}} </script> <!--進行數據處理、html構造--> <script type="text/javascript"> $(document).ready(function() { //模擬的json對象 var data = { "student": [ { "name": "張三", "sex": "0", "age": 18 }, { "name": "李四", "sex": "0", "age": 22 }, { "name": "妞妞", "sex": "1", "age": 18 } ] }; //註冊一個Handlebars模版，經過id找到某一個模版，獲取模版的html框架 //$("#table-template").html()是jquery的語法，不懂的童鞋請惡補。。。 var myTemplate = Handlebars.compile($("#table-template").html()); //將json對象用剛剛註冊的Handlebars模版封裝，獲得最終的html，插入到基礎table中。 $('#tableList').html(myTemplate(data)); }); </script>

</body>
</html>
Handlebars.js一個重要特性：循環。#each能夠理解成循環命令，循環的是json對象中的student屬性。對於每次循環，均可以讀出裏邊的name、sex、age屬性。
---each-循環中使用this
<!DOCTYPE html>算法

<html>
<head>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<title>each-循環中使用this - by 楊元</title>
</head>
<body>
express

each-循環中使用this

<table>
<thead>
<tr>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
</tr>
</thead>
<tbody id="tableList">

</tbody> </table> <!--插件引用--> <script type="text/javascript" src="script/jquery.js"></script> <script type="text/javascript" src="script/handlebars-1.0.0.beta.6.js"></script> <!--Handlebars.js模版--> <!--Handlebars.js模版放在script標籤中，保留了html原有層次結構,模版中要寫一些操做語句--> <!--id能夠用來惟一肯定一個模版,type是模版固定的寫法--> <script id="table-template" type="text/x-handlebars-template"> {{#each this}} <tr> <td>{{name}}</td> <td>{{sex}}</td> <td>{{age}}</td> </tr> {{/each}} </script> <!--進行數據處理、html構造--> <script type="text/javascript"> $(document).ready(function() { //模擬的json對象 var data = [ { "name": "張三", "sex": "0", "age": 18 }, { "name": "李四", "sex": "0", "age": 22 }, { "name": "妞妞", "sex": "1", "age": 18 } ]; //註冊一個Handlebars模版，經過id找到某一個模版，獲取模版的html框架 //$("#table-template").html()是jquery的語法，不懂的童鞋請惡補。。。 var myTemplate = Handlebars.compile($("#table-template").html()); //將json對象用剛剛註冊的Handlebars模版封裝，獲得最終的html，插入到基礎table中。 $('#tableList').html(myTemplate(data)); }); </script>

</body>
</html>
不少時候，咱們拿到的json對象，自己就是一個list，並非map，直接就能夠遍歷，不須要#each student這樣指定遍歷某個屬性。此時能夠用#each this，表示遍歷當前對象。this表示當前上下文，很是靈活。
（二）SeaJs
--SeaJs是什麼？
SeaJS是一個遵循CommonJS規範的JavaScript模塊加載框架，能夠實現JavaScript的模塊化開發及加載機制。可是它與jQuery等JavaScript框架不一樣的是，SeaJS沒有擴展封裝語言特性，而只是實現JavaScript的模塊化及按模塊加載。
--SeaJs有什麼好處？
使用SeaJS能夠提升JavaScript代碼的可讀性和清晰度，解決目前JavaScript編程中廣泛存在的依賴關係混亂和代碼糾纏等問題，方便代碼的編寫和維護。
--SeaJS的特性：
一是html頁面不用再維護冗長的script標籤列表，只要引入一個sea.js便可。
二是js代碼以模塊進行組織，各個模塊經過require引入本身依賴的模塊，代碼清晰明瞭。
--模塊的定義及編寫：
模塊定義函數define：SeaJS中使用「define」函數定義一個模塊，define能夠接收三個參數：編程

QQ截圖20151123180753.png

若是隻有一個參數，則賦值給factory。若是有兩個參數，第二個賦值給factory；第一個若是是array則賦值給deps，不然賦值給id。若是有三個參數，則分別賦值給id，deps和factory。可是，包括SeaJS的官方示例在內幾乎全部用到define的地方都只傳遞一個工廠函數進去，相似與以下代碼：

QQ截圖20151123181338.png

我的建議遵循SeaJS官方示例的標準，用一個參數的define定義模塊。那麼id和deps會怎麼處理呢？
id是一個模塊的標識字符串，define只有一個參數時，id會被默認賦值爲此js文件的絕對路徑。如example.com下的a.js文件中使用define定義模塊，則這個模塊的ID會賦值爲「http://example.com/a.js」，沒有特別的必要建議不要傳入id。deps通常也不須要傳入，須要用到的模塊用require加載便可。json

工廠函數factory解析
工廠函數是模塊的主體和重點。在只傳遞一個參數給define時（推薦寫法），這個參數就是工廠函數，此時工廠函數的三個參數分別是：
require——模塊加載函數，用於記載依賴模塊。
exports——接口點，將數據或方法定義在其上則將其暴露給外部調用。
module——模塊的元數據。
這三個參數能夠根據須要選擇是否須要顯示指定。
下面說一下module。module是一個對象，存儲了模塊的元信息，具體以下：
module.id——模塊的ID。
module.dependencies——一個數組，存儲了此模塊依賴的全部模塊的ID列表。
module.exports——與exports指向同一個對象。

模塊的載入和引用
上文說過一個模塊對應一個js文件，而載入模塊時通常都是提供一個字符串參數告訴載入函數須要的模塊，因此就須要有一套從字符串標識到實際模塊所在文件路徑的解析算法。SeaJS支持以下標識：

QQ截圖20151123182715.png

根據應用場景的不一樣，SeaJS提供了三個載入模塊的API，分別是seajs.use，require和require.async，下面分別介紹。

seajs.use： seajs.use主要用於載入入口模塊。入口模塊至關於C程序的main函數，同時也是整個模塊依賴樹的根。上面在TinyApp小例子中，init就是入口模塊。require： require是SeaJS主要的模塊加載方法，當在一個模塊中須要用到其它模塊時通常用require加載。require.async： SeaJS會在html頁面打開時經過靜態分析一次性記載全部須要的js文件，若是想要某個js文件在用到時才下載，可使用require.async。這樣只有在用到這個模塊時，對應的js文件纔會被下載，也就實現了JavaScript代碼的按需加載。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。