ホームページ > ウェブフロントエンド > jsチュートリアル > JavaScript テンプレート エンジンのアプリケーション シナリオと実装原則の詳細な紹介

JavaScript テンプレート エンジンのアプリケーション シナリオと実装原則の詳細な紹介

黄舟
リリース: 2017-03-16 14:58:28
オリジナル
1633 人が閲覧しました

一、应用场景

以下应用场景可以使用模板引擎
1、如果你有动态ajax请求数据并需要封装成视图展现给用户,想要提高自己的工作效率。
2、如果你是拼串族或者数组push族,迫切的希望改变现有的书写方式。
3、如果你在页面布局中,存在共性模块和布局,你可以提取出公共模板,减少维护的数量。

二、实现原理

不同模板间实现原理大同小异,各有优缺,请按需选择,以下示例以artTemplate模板引擎来分析。

2.1 模板存放

模板一般都是放置到textarea/input等表单控件,或者script[type="text/html"]等标签中,如下:

1

2

3

4

5

6

7

8

9

10

11

12

<script id="test" type="text/html">

    {{if isAdmin}}

 

    <h1>{{title}}</h1>

    <ul>

        {{each user as name i}}

            <li> {{i + 1}} :{{name}}</li>

        {{/each}}

    </ul>

 

    {{/if}}

</script>

ログイン後にコピー

//textarea或input则取value,其它情况取innerHTML

2.2 模板函数

一般都是templateFun(“id”, data);其中id为存放模板字符串的元素id,data为需要装载的数据。

2.3 模板获取

一般都是通过ID来获取,document.getElementById(“ID”):

1

2

//textarea或input则取value,其它情况取innerHTML

var html = /^(textarea|input)$/i.test(element.nodeName) ? element.value : element.innerHTML;

ログイン後にコピー

2.4 模板解析——处理html语句和逻辑语句及其他格式化处理

这步的主要操作其实多余的空格,解析出html元素和逻辑语句及关键字。例如:artTemplate.js中的代码实现:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

defaults.parser = function (code, options) {

    // var match = code.match(/([\w\$]*)(\b.*)/);

    // var key = match[1];

    // var args = match[2];

    // var split = args.split(&#39; &#39;);

    // split.shift();

 

    //if isAdmin

    code = code.replace(/^\s/, &#39;&#39;);

 

    //["if", "isAdmin"]

    var split = code.split(&#39; &#39;);

    //if

    var key = split.shift();

    //isAdmin

    var args = split.join(&#39; &#39;);

 

    switch (key) {

 

        case &#39;if&#39;:

            //if(isAdmin){

            code = &#39;if(&#39; + args + &#39;){&#39;;

            break;

 

        case &#39;else&#39;:

 

            if (split.shift() === &#39;if&#39;) {

                split = &#39; if(&#39; + split.join(&#39; &#39;) + &#39;)&#39;;

            } else {

                split = &#39;&#39;;

            }

 

            code = &#39;}else&#39; + split + &#39;{&#39;;

            break;

 

        case &#39;/if&#39;:

 

            code = &#39;}&#39;;

            break;

 

        case &#39;each&#39;:

 

            var object = split[0] || &#39;$data&#39;;

            var as     = split[1] || &#39;as&#39;;

            var value  = split[2] || &#39;$value&#39;;

            var index  = split[3] || &#39;$index&#39;;

 

            var param   = value + &#39;,&#39; + index;

 

            if (as !== &#39;as&#39;) {

                object = &#39;[]&#39;;

            }

 

            code =  &#39;$each(&#39; + object + &#39;,function(&#39; + param + &#39;){&#39;;

            break;

 

        case &#39;/each&#39;:

 

            code = &#39;});&#39;;

            break;

 

        case &#39;echo&#39;:

 

            code = &#39;print(&#39; + args + &#39;);&#39;;

            break;

 

        case &#39;print&#39;:

        case &#39;include&#39;:

 

            code = key + &#39;(&#39; + split.join(&#39;,&#39;) + &#39;);&#39;;

            break;

ログイン後にコピー

例如上例中:”{{if isAdmin}}”最终被解析成”if(isAdmin){”,”{{/if}}“被解析成“}”。

2.5 模板编译——字符串拼接成生成函数的过程

这步的主要操作就是字符串的拼接成生成函数,看看artTemplate的部分源码:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

function compiler (source, options) {

    /*

    openTag: &#39;<%&#39;,    // 逻辑语法开始标签

    closeTag: &#39;%>&#39;,   // 逻辑语法结束标签

    escape: true,     // 是否编码输出变量的 HTML 字符

    cache: true,      // 是否开启缓存(依赖 options 的 filename 字段)

    compress: false,  // 是否压缩输出

    parser: null      // 自定义语法格式器 @see: template-syntax.js

    */

    var debug = options.debug;

    var openTag = options.openTag;

    var closeTag = options.closeTag;

    var parser = options.parser;

    var compress = options.compress;

    var escape = options.escape;

 

    var line = 1;

    var uniq = {$data:1,$filename:1,$utils:1,$helpers:1,$out:1,$line:1};

 

    //isNewEngin在6-8返回undefined

    var isNewEngine = &#39;&#39;.trim;// &#39;proto&#39; in {}

    var replaces = isNewEngine

    ? ["$out=&#39;&#39;;", "$out+=", ";", "$out"]

    : ["$out=[];", "$out.push(", ");", "$out.join(&#39;&#39;)"];

 

    var concat = isNewEngine

        ? "$out+=text;return $out;"

        : "$out.push(text);";

 

    var print = "function(){"

    +      "var text=&#39;&#39;.concat.apply(&#39;&#39;,arguments);"

    +       concat

    "}";

 

    var include = "function(filename,data){"

    +      "data=data||$data;"

    +      "var text=$utils.$include(filename,data,$filename);"

    +       concat

    +   "}";

 

    var headerCode = "&#39;use strict&#39;;"

    + "var $utils=this,$helpers=$utils.$helpers,"

    + (debug ? "$line=0," : "");

 

    var mainCode = replaces[0];

 

    var footerCode = "return new String(" + replaces[3] + ");"

 

    // html与逻辑语法分离

    forEach(source.split(openTag), function (code) {

        code = code.split(closeTag);

 

        var $0 = code[0];

        var $1 = code[1];

 

        // code: [html]

        if (code.length === 1) {

 

            mainCode += html($0);

 

        // code: [logic, html]

        } else {

 

            mainCode += logic($0);

 

            if ($1) {

                mainCode += html($1);

            }

        }

 

    });

 

    var code = headerCode + mainCode + footerCode;

ログイン後にコピー

上例中模板中的模板字符串代码会被拼接成如下字符串:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

&#39;use strict&#39;;

var $utils   = this,

    $helpers = $utils.$helpers,

    isAdmin  = $data.isAdmin,

    $escape  = $utils.$escape,

    title    = $data.title,

    $each    = $utils.$each,

    user     = $data.user,

    name     = $data.name,

    i        = $data.i,

    $out     = &#39;&#39;;

 

if (isAdmin) {

    $out += &#39;\n\n   <h1>&#39;;

    $out += $escape(title);

    $out += &#39;</h1>\n  <ul>\n        &#39;;

    $each(user, function(name, i) {

        $out += &#39;\n         <li>&#39;;

        $out += $escape(i + 1);

        $out += &#39; :&#39;;

        $out += $escape(name);

        $out += &#39;</li>\n      &#39;;

    });

    $out += &#39;\n </ul>\n\n &#39;;

}

return new String($out);

ログイン後にコピー

然后会被生成如下函数:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

var Render = new Function("$data", "$filename", code);

 

/*Outputs:

function anonymous($data, $filename) {

    &#39;use strict&#39;;

    var $utils   = this,

        $helpers = $utils.$helpers,

        isAdmin  = $data.isAdmin,

        $escape  = $utils.$escape,

        title    = $data.title,

        $each    = $utils.$each,

        user     = $data.user,

        name     = $data.name,

        i        = $data.i,

        $out     = &#39;&#39;;

    if (isAdmin) {

        $out += &#39;\n\n   <h1>&#39;;

        $out += $escape(title);

        $out += &#39;</h1>\n  <ul>\n        &#39;;

        $each(user, function(name, i) {

            $out += &#39;\n         <li>&#39;;

            $out += $escape(i + 1);

            $out += &#39; :&#39;;

            $out += $escape(name);

            $out += &#39;</li>\n      &#39;;

        });

        $out += &#39;\n </ul>\n\n &#39;;

    }

    return new String($out);

}

 */

console.log(Render);

ログイン後にコピー

2.5 装载数据,视图呈现

1

2

3

4

5

6

7

8

9

10

11

12

13

14

/*Outputs:

<h1>User lists</h1>

<ul>

    <li>1 :zuojj</li>

    <li>2 :Benjamin</li>

    <li>3 :John</li>

    <li>4 :Rubby</li>

    <li>5 :Handy</li>

    <li>6 :CIMI</li>

</ul>

*/

console.log(new Render(data, filename) + &#39;&#39;);

//对象转换为字符串

return new Render(data, filename) + &#39;&#39;;

ログイン後にコピー

三、常见JavaScript模板引擎及测试对比

  • BaiduTemplate —— 最简单好用的JS模板引擎(百度)

  • artTemplate —— 高性能JavaScript模板引擎(腾讯CDC)

  • Velocity.js —— 来自淘宝的JS 模板引擎

  • JavaScript Templates —— 轻量、快速、强大、无依赖模板引擎

  • Juicer —— 高效、轻量的Javascript模板引擎

  • mustache.js —— Logic-less {{mustache}} templates with JavaScript

  • 各大Javascript模板引擎测试对比

以上がJavaScript テンプレート エンジンのアプリケーション シナリオと実装原則の詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート