JavaScript 입력 이메일에 code_javascript 기술 예시가 자동으로 표시됩니다.

원래 artTemplate 소스코드 분석에 대한 이전 댓글을 공유하고 싶었는데 1년이 지나도 찾을 수 없어서 당시 템플릿 엔진의 원리를 분석한 후 직접 시도해 봤습니다

제가 적어놓은 템플릿 엔진을 기념품으로 공유하고 싶습니다. 당시 여러 템플릿 엔진을 비교했던 기억이 나네요.

여기에 언급된 js 템플릿 엔진은 기본 javascript 구문을 사용하므로 php의 기본 템플릿 엔진과 매우 유사합니다.

프론트엔드 템플릿 엔진의 역할은 무엇인가요?

1. DOM 구조를 생성하기 위해 연산자를 사용하여 문자열을 연결할 필요가 없습니다. 대신 하나의 요소(내부 HTML 템플릿) 또는 변수(데이터를 저장함)만 사용하면 됩니다. template) 또는 템플릿 파일

이 필요합니다.

2. 유지 관리가 쉽고 결합도가 줄어듭니다. DOM 구조가 변경되면 로직 코드를 변경할 필요가 없고 해당 템플릿(파일)만 변경하면 됩니다.

3. 템플릿이 .tpl과 유사한 파일인 경우 브라우저에서 로드하고 저장할 수 있습니다. .tpl 파일에 관해 말하자면, 캐시 이상의 작업을 수행할 수 있으며 모듈 로더를 통해서도 수행할 수 있습니다

.tpl을 모듈로 사용하면 요청 시 파일을 로드할 수 있습니다. 대역폭을 절약하고 페이지 속도를 높이지 않을까요?

4. 잠깐만요

프론트엔드 템플릿 엔진의 원리는 무엇인가요?

원리는 매우 간단합니다. 객체(데이터) + 템플릿(변수 포함) ->

프론트엔드 템플릿 엔진은 어떻게 구현하나요?

템플릿을 파싱하여 어휘에 따라 템플릿을 함수로 변환한 후 함수를 호출하고 객체(데이터)를 전달하여 문자열(html)을 출력합니다

(물론, 구체적인 내용은 코드에 따라 다릅니다)

이렇게:

코드 복사 코드는 다음과 같습니다.

var tpl = 'i am , 세'; // % 변수로 표시됨

var obj = {
name : 'lovesueee' ,
연령: 24
};
var fn = Engine.compile(tpl); // 함수로 컴파일

var str = fn(obj);

예:

코드 복사 코드는 다음과 같습니다.

   

   
   
   
                    tr = this.trs[i];
            if (tr.sex === "女") {
        %>
       
       
       
       
   
   
   
   

   
   
   
                    tr = this.trs[i];
            if (tr.sex === "男") {
        %>
       
       
       
       
   
   

<script><BR>    var trs = [<BR>        {이름:"隐shape杀手",age:29,sex:"男"},<BR>        {이름: "索拉",age:22,sex:"男"},<BR>        {name:"fesyo",age:23,sex:"女"},<BR>        {name:"恋妖壶",age :18,sex:"男"},<BR>        {이름:"竜崎",age:25,sex:"男"},<BR>        {name:"你不懂的",age:30,sex: "여자"}<BR>    ]</script>

    // var html = ice("tpl",{
    //     trs: trs,
    //     href: "http://images.jb51.net/type4.jpg"
    / / },{
    //     제목: function(){
    //         return "

这是使用视图helper输 代码文断

"
    //     }
// });
    var elem = document.getElementById('tpl');
    var tpl = elem.innerHTML;

    var html = ice(tpl,{
        trs: trs,
        href: "http://images.jb51.net/type4.jpg"
    },{
        제목: 기능 (){
            return "

这是使用视图helper输出的代码文断

"
        }
    });
    console.log(html);
$("#content").html(html);

简单的实现：

复主代码 代码如下:

(function (win) {

    // 模板引擎路由函数
    var ice = function (id, content) {
        return ice[
            typeof content === 'object' ? 'render' : 'compile'
        ].apply(ice, arguments);
    };

    ice.version = '1.0.0';

    // 模板配置
    var iConfig = {
        openTag  : '        closeTag : '%>'
    };

    var isNewEngine = !!String.prototype.trim;

    // 模板缓存
    var iCache = ice.cache = {};

    // 辅助函数
    var iHelper = {
        include : function (id, data) {
            return iRender(id, data);
        },
        print : function (str) {
            return str;
        }
    };

    // 原型继承
    var iExtend = Object.create || function (object) {
        function Fn () {};
        Fn.prototype = object;
        return new Fn;
    };

    // 模板编译
    var iCompile = ice.compile = function (id, tpl, options) {

        var cache = null;

        id && (cache = iCache[id]);

        if (cache) {
            return cache;
        }

        // [id | tpl]
        if (typeof tpl !== 'string') {

            var elem = document.getElementById(id);

            options = tpl;

            if (elem) {
                // [id, options]
                options = tpl;
                tpl = elem.value || elem.innerHTML;

            } else {
                //[tpl, options]
                tpl = id;
                id = null;
            }
        }

        options = options || {};
        var render  = iParse(tpl, options);

        id && (iCache[id] = render);

        return render;
    };

    // 模板渲染
    var iRender = ice.render = function (id, data, options) {

        return iCompile(id, options)(data);
    };

    var iForEach = Array.prototype.forEach ?
        function(arr, fn) {
            arr.forEach(fn)
        } :
        function(arr, fn) {
            for (var i = 0; i                 fn(arr[i], i, arr)
            }
        };

    // 模板解析
    var iParse = function (tpl, options) {

        var html = [];

        var js = [];

        var openTag = options.openTag || iConfig['openTag'];

        var closeTag = options.closeTag || iConfig['closeTag'];

        // 根据浏览器采取不同的拼接字符串策略
        var replaces = isNewEngine
            ?["var out='',line=1;", "out+=", ";", "out+=html[", "];", "this.result=out;"]
            : ["var out=[],line=1;",  "out.push(", ");", "out.push(html[", "]);", "this.result=out.join('');"];

        // 函数体
        var body = replaces[0];

        iForEach(tpl.split(openTag), function(val, i) {

            if (!val) {
                return;
            }

            var parts = val.split(closeTag);

            var head = parts[0];

            var foot = parts[1];

            var len = parts.length;
            // html
            if (len === 1) {
                body += replaces[3] + html.length + replaces[4];
                html.push(head);

            } else {

                if (head ) {
                    // code
                    // 去除空格
                    head = head
                        .replace(/^\s+|\s+$/g, '')
                        .replace(/[\n\r]+\s*/, '')

                    // 输出语句
                    if (head.indexOf('=') === 0) {
                        head = head.substring(1).replace(/^[\s]+|[\s;]+$/g, '');

                        body += replaces[1] + head + replaces[2];
                    } else {
                        body += head;
                    }

                   body = 'line =1;';
                  js.push(head);
              }
               // html
                if (발) {
                   _foot = foot.replace(/ ^[nr] s*/g, '');
                   if (!_foot) {
                     return;
                 }
                    본문 = 대체[3] html.length 대체[4];
                   html.push(foot);
               }
            }
        });

        body = "var Render=function(data){ice.mix(this, data);try{"
            body
            대체[5]
           "}catch(e){ice.log ('rend 오류: ', line, 'line');ice.log('잘못된 문: ', js[line-1]);throw e;}};"
            "var proto=Render.prototype= iExtend(iHelper);"
            "ice.mix(proto, options);"
            "return function(data){return new Render(data).result;};";

        var render = new Function('html', 'js', 'iExtend', 'iHelper', 'options', body);

        return render(html, js, iExtend, iHelper, options);
    };

    ice.log = function () {
        if (typeof console === 'undefine') {
            return;
        }

        var args = Array.prototype.slice.call(인수);

        console.log.apply && console.log.apply(console, args);

    };

[ 키] = 소스[키];

            }
        }
    };

    // 注册函数
    ice.on = 함수(이름, fn) {
        iHelper[name] = fn;
    };

    // 清除缓存
    ice.clearCache = function () {
        iCache = {};
    };

    // 更改配置
    ice.set = 함수(이름, 값) {
        iConfig[name] = value;
    };

    // 暴露接口
    if (typeof module !== 'undefine' && module.exports) {
        module.exports = template;
    } else {

        win.ice = ice;

    }

})(창);