[前端神器]handlebars+requirejs基本使用方法

svtter 發布于2019-08-20 13:45 / 904人閱讀

摘要：其實是定義了一個入口文件，這個就不細說了，參考官方文檔這個是英文的，大家可以自行百度其他文檔。

最近在某網站看到了handlebars.js，出于好奇就百度了下這是神馬玩意，結果讓我很是歡喜，于是就開始自學下，handlebars就幾個方法，蠻簡單，言歸正傳！

以下是基本教學邏輯演示，會附完整代碼

測試案例就分為3大塊，頭、主體、尾：

先來講講id="contact"主體有些什么內容，html代碼就不貼了，直接看下圖：

handlebars的模版代碼如下：

圖片中的‘2016通訊錄’用到了handlebars.registerHelper，代碼如下：

Handlebars.registerHelper("transformat", function(value) {
 if(value == "通訊錄") {
                    return new Handlebars.SafeString("2016通訊錄")
                } else {
                    return "old通訊錄";
                }
            });

注冊一個helper，value是模版傳進來的值，相當于jq的function()，new Handlebars.SafeString是為了防止把html標簽輸出為文本形式，就是jq下html()和text()的區別。

最后通過渲染將模版輸出到網頁，代碼如下：

$("#contact").html(Handlebars.compile($("#contact-template").html())(data));

如果有通用模版，就是一個模版要調用多次，上面的代碼也可以這樣寫，方便調用：

var contact=Handlebars.compile($("#contact-template").html());
$("#contact").html(contact(data));

其中的data就是json數據，為了方便就自定義了：

var data = {
                "info": "通訊錄",
                "tit": ["序號", "姓名", "性別", "年齡", "身高"],
                "student": [{
                    "name": "張三",
                    "sex": "男",
                    "age": 18,
                    "sheight": "175"
                }, {
                    "name": "李四",
                    "sex": "男",
                    "age": 22,
                    "sheight": "180"
                }, {
                    "name": "妞妞",
                    "sex": "女",
                    "age": 18,
                    "sheight": "165"
                }, {
                    "name": "袁帥",
                    "sex": "男",
                    "age": 17,
                    "sheight": "173"
                }]
            };

最后效果圖如下，其實和剛剛那個主體一樣，就是有頭有尾而已：

到這里其實handlebars的基礎知識就講解完了，已經能滿足日常網站的需求，當然handlebars還有其他的一些功能，可以參考中文手冊：

http://keenwon.com/992.html

未完待續，然后文件的頭和尾怎么能拆分出來放在多帶帶的頁面中來引用呢？不然不可能每個頁面都寫一遍，以后要改就麻煩了（當然如果你前端用的是php、asp之類的動態語言，那么一下部分可以忽略不看，因為我用的是html+ajax來調用api接口的）然后只能百度新的東西，最終找到了require text.js，又一神器出現，天將降大任于斯人也，那么簡單再來說說，看招：

text.js是require.js下的一個插件，我代碼里都有。

我把頭和尾拆分為兩個多帶帶的html文件，如下：

header.html

footer.html

其實放在一個文件中也行，到時候自己體會。

兩個文件拆分了，接下來就是引用的，那么require text.js就要出馬了，先調用下。

data-main其實是定義了一個入口文件，這個就不細說了，參考官方文檔：

http://www.bootcdn.cn/require-text/readme/

這個是英文的，大家可以自行百度其他文檔。
main.js的代碼是自己寫的，寫入口，其他的不多說了，就說和引用有關的，看代碼：

define(["text!../header.html", "text!../footer.html"], function(header, footer) {
    $("#header").html(header);
    $("#header").html(Handlebars.compile($("#header-template").html()));
    $("#footer").html(footer);
    $("#footer").html(Handlebars.compile($("#footer-template").html()));
});

text!../header.html中的text!表示把header.html文件引用進來以文本的形式，反正就是類似于php的include、require，把header.html和footer.html引用到index.html中。

這樣一來，Handlebars.compile渲染模版就要放在main.js的define回調中去。

這樣就能在任何頁面引用Handlebars模版文件了，說到這，大家應該會明白我剛說的頭和尾能放一個文件中吧，調用模版也是根據模版的ID調用，如果模版不多，放一個公用html文件就好。

好了，廢話就說到這了，放上大家心心念念的完整代碼了！拜~

http://files.cnblogs.com/files/yuanxiaojian/handlebars_require.rar

今天過來更新下代碼，關于requirejs的，模塊化了js的管理和一些公用文件，改動較大，不明白可以參考官方文檔，這里就不再介紹了，直接上代碼了！2017-01-11

http://files.cnblogs.com/files/yuanxiaojian/handlebars_requirejs.rar

注意：要搭建本地環境后瀏覽，直接打開沒內容，json之類的讀取不到，這種最后用的時候肯定是服務器環境，小白不會搭建的話直接百度下載個phpstudy安裝就好。

GPU云服務器云服務器 requirejs使用 requirejs使用教程前端基本 python基本使用

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/81227.html

Handlebars—semantic template engine

摘要：維護起來將是我們開發的噩夢。的都是這種的閉合結構的判斷只能判斷和，沒辦法進行這種的邏輯判斷。它的設定就是如此，它認為邏輯判斷的內容不應該出現在模板中。因為的輸出默認轉義，幾乎所有的模板引擎輸出默認都是轉義的，避免攻擊。概述剛接觸前端的時候，師傅就給我推薦了Handlebars，自己也蠻喜歡它的語法。到現在，Handlebars都已經更新到3.0.3了，是時候重新過一遍文檔了。 ...

cyrils 2019-08-14 12:14 評論0 收藏0
requirejs的插件介紹與制作

摘要：一句化即它是插件的插件，作者事后才發現有這么一個插件繞了不少彎路。這里的主要是為了保存這段內容用于打包使用。免費領取驗證碼內容安全短信發送直播點播體驗包及云服務器等套餐更多網易技術產品運營經驗分享請訪問網易云社區。文章來源網易云社區本文由作者鄭海波授權網易云社區發布。前言我這里就不介紹requirejs了，簡而言之： requirejs是支持AMD規范的模塊加載器，事實上它也是...

shinezejian 2019-06-28 11:09 評論0 收藏0
作為一名前端開發工程師，你必須掌握的WEB模板引擎：Handlebars

摘要：簡單來說，模板最本質的作用是變靜為動，一切利于這方面的都是優勢，不利于的都是劣勢。二選擇的原因全球最受歡迎的模板引擎是全球使用率最高的模板引擎，所以當之無愧是全球最受歡迎的模板引擎。創建更為復雜一些，當時功能更加強大。 showImg(https://segmentfault.com/img/bVbb3kg?w=775&h=216); 為什么需要使用模板引擎？關于為什么要使用模板引擎...

yuanzhanghu 2019-08-26 12:02 評論0 收藏0
常用的前端插件V1

摘要：輕量級，功能強大的日期選擇器，兼容和不依賴于其他庫，少，使用作為界面的圖標兼容在配置參數中，所有的類型為或的參數都可以通過屬性在標簽中進行設置例如月份可以滾動，年份可以手動輸入是否啟用日期選擇是否啟用秒選擇器設置日期顯示格 some jquery plugins are used for labelMangerSystem,some things may not be complete...

xiao7cn 2019-08-20 16:16 評論0 收藏0