js自定義組件封裝，JS之模板技術（aui / artTemplate）-技術動態-匯編語言學習筆記

js自定義組件封裝，JS之模板技術（aui / artTemplate）

2023-10-15 阅读 22 评论 0

摘要：artTemplate是個好東西啊，一個開源的js前端模板引擎，使用簡單，渲染效率特別的高。 js自定義組件封裝，我經常使用這個技術來在前端動態生成新聞列表，排行榜，歷史記錄等需要在前端列表顯示的信息。下面是artTemplate的下載鏈接： h

artTemplate是個好東西啊，一個開源的js前端模板引擎，使用簡單，渲染效率特別的高。

js自定義組件封裝，我經常使用這個技術來在前端動態生成新聞列表，排行榜，歷史記錄等需要在前端列表顯示的信息。

下面是artTemplate的下載鏈接：

https://github.com/aui/artTemplate

因為artTemplate比較簡單，容易上手，項目的例子，文檔又比較齊全，大家有需要可以直接參考官方文檔，例子進行深入了解，

我這里就這是用簡單常用的，用于快速上手的一個例子吧！

先說明，我是下載artTemplate工程項目src目錄下的template.js的

內容大概為:

artTemplate 是新一代 javascript 模板引擎，它采用預編譯方式讓性能有了質的飛躍，并且充分利用 javascript 引擎特性，使得其性能無論在前端還是后端都有極其出色的表現。在 chrome 下渲染效率測試中分別是知名引擎 Mustache 與 micro tmpl 的 25 、 32 倍。

　　除了性能優勢外，調試功能也值得一提。模板調試器可以精確定位到引發渲染錯誤的模板語句，解決了編寫模板過程中無法調試的痛苦，讓開發變得高效，也避免了因為單個模板出錯導致整個應用崩潰的情況發生。

　　使用的方法很簡單，第一步：編寫模板，第二部，渲染模板。

　　編寫模板的方法就是很常用的拼接，與Velocity的模板編寫也挺相似。

var source ='<ul>'
+ ? ?'<% for (var i = 0; i < list.length; i ++) { %>'
+ ? ? ? ?'<li>索引 <%= i + 1 %> ：<%= list[i] %></li>'
+ ? ?'<% } %>'
+ '</ul>';

值得注意的是list是json數據的key，并不是數據的變量名，如果需要循環，可以這樣寫

	var data={"list":datasource;};

渲染的方法

var render = template.compile(source);
var html = render(data);

其中data是從后臺獲取的json格式的數據，最后就可以將html變量插入到dom里。

　　另外，渲染的方法還有兩種：

template.compile([id], source);//id可選
template.render(id, data);//也可以直接渲染

id是script中定義的屬性，data的格式是{key: value}的形式。這里的key就是模板的id，數據放在value部分。

更加詳細的內容可參考官方文檔。

...略

var template = function (id, content) {
? ? return template[
? ? ? ? typeof content === 'object' ? 'render' : 'compile'
? ? ].apply(template, arguments);
};

...略

其中主要也就是使用到這個函數。

前端的頁面內容主要為

<body>
? <center><h1><font color="#f00">這是template模板技術使用示例</font></h1></center>
? <script id="personListId" type="text/html">
<font color="#f00" size="24">
<$for (var i = 0; i < personList.length; i++) {$>
客戶姓名：<$=personList[i].name$>   客戶年齡：<$=personList[i].age$><br/>
<$}$>
</font>
</script>
? <div id="templateContent"></div>
? ? <script type="text/javascript" src="js/jquery-1.8.2.js"></script>
? ? <script type="text/javascript" src="js/template.js"></script>
? ? <script type="text/javascript" src="js/page/index.js"></script>
? </body>

其中我使用了jquery，template，這兩個都可以上網下載，放置到對應目錄就ok。

下面這段代碼使用模板技術進行for循環，格式為：

<$$>對內可寫js代碼，<$=val$>是輸出js的變量val的值，

看著這個for循環，需要注意三點：

1）<script></script>必須標上唯一id，如<script id="personListId"></script>

2）<script></script>的type的值是text/html，而不是text/javascript

3）personList這個js變量從哪里來的，這里先留個疑問吧

4）對于這個列表要怎么顯示，你就對應怎么寫就好，這里是最簡單的顯示客戶姓名和客戶年齡，也沒帶什么圖片，樣式之類的

? ? ??客戶姓名：<$=personList[i].name$>   客戶年齡：<$=personList[i].age$><br/>。

接下來就是寫自己的js代碼，使用template模板技術，動態渲染以上前端代碼

代碼寫在js/page/index.js這個文件中，內容為：

$(function(){
var persons= [
{
name : "11111111111",
age : 1111111111111111
},
{
name : "2222222222",
age : 2222222222
},
{
name : "33333333333",
age : 333333333333
}
];//自定義的json格式數據，實際應用中一般都是使用ajax請求服務器獲取json格式的數據，不知道從js的哪個版本起，js已經內置支持json格式的數據

var html = template('personListId',{personList : persons});//看著這行代碼，是否注意到之前提到的personListId和personList 已經在這里使用上和定義好了

$('#templateContent').html('').html(html);//jquery的用法，目的就是將動態生成的內容（html）填充到id為templateContent的div

});

write less，do more，i like

轉載于:https://www.cnblogs.com/gyjWEB/p/3899760.html

原文链接：https://hbdhgg.com/4/139240.html

发表评论: