精华内容
下载资源
问答
  • 通过预编译技术,将重复使用的模板预先编译,避免了实时编译转换,以达到提升性能的目的。下文将介绍 预编译技术 的相关知识:内部原理简单实现相关实践内部原理预编译的结果,得到的是对模板进行词法分析而得到的一...

    介绍

    预编译 的使用场景在于,一些文本转换或格式化,通常模板固定,数据动态变化的情况。通过预编译技术,将重复使用的模板预先编译,避免了实时编译转换,以达到提升性能的目的。

    下文将介绍 预编译技术 的相关知识:

    内部原理

    简单实现

    相关实践

    内部原理

    预编译的结果,得到的是对模板进行词法分析而得到的一系列标记 (tokens)。对数据进行渲染 (执行 render 函数)时,其实是通过遍历 tokens 再组合数据,生成结果。

    即:

    Compile: template => tokens

    Render: tokens + data => result string

    简单实现

    function parse(templ) {

    var tokens = [];

    var maxTime = Date.now() + 10;

    while (templ) {

    if (templ.indexOf("{") === 0) {

    var index = templ.indexOf("}");

    tokens.push({

    type: "variable",

    name: templ.slice(1, index)

    });

    templ = templ.substring(index + 1);

    continue;

    }

    var index = templ.indexOf("{");

    var text = index < 0 ? templ : templ.substring(0, index);

    templ = index < 0 ? "" : templ.substring(index);

    tokens.push({

    type: "text",

    value: text

    });

    if (Date.now() >= maxTime) break;

    }

    return tokens;

    }

    function compile(tokens, data) {

    var str = '';

    for (var i = 0; i < tokens.length; i++) {

    var token = tokens[i];

    switch (token.type) {

    case "text":

    str += token.value;

    break;

    case "variable":

    str += data[token.name];

    break;

    default:

    break;

    }

    }

    return str;

    }

    var preCompile = function (template) {

    var tokens = parse(template);

    return {

    render: function (data) {

    return compile(tokens, data);

    }

    };

    };

    var template = preCompile("I am {name} i'm {age} years old!");

    console.log(template.render({ name: "Sam", age: 22 }));

    console.log(template.render({ name: "Jack", age: 23 }));

    相关实践

    模板引擎

    时间格式化 tiny-time (https://github.com/aweary/tinytime)

    Css Selector css-what (https://github.com/fb55/css-select)

    展开全文
  • 模板预编译技术

    2017-05-05 18:40:32
    通过预编译技术,将重复使用的模板预先编译,避免了实时编译转换,以达到提升性能的目的。 下文将介绍 预编译技术 的相关知识: 内部原理 简单实现 相关实践 内部原理 预编译的结果,得到的是对模板进行词法分析而...
        

    介绍

    预编译 的使用场景在于,一些文本转换或格式化,通常模板固定,数据动态变化的情况。通过预编译技术,将重复使用的模板预先编译,避免了实时编译转换,以达到提升性能的目的。

    下文将介绍 预编译技术 的相关知识:

    • 内部原理

    • 简单实现

    • 相关实践

    内部原理

    预编译的结果,得到的是对模板进行词法分析而得到的一系列标记 (tokens)。对数据进行渲染 (执行 render 函数)时,其实是通过遍历 tokens 再组合数据,生成结果。
    即:

    • Compile: template => tokens

    • Render: tokens + data => result string

    简单实现

    function parse(templ) {
      var tokens = [];
      var maxTime = Date.now() + 10;
      while (templ) {
        if (templ.indexOf("{") === 0) {
          var index = templ.indexOf("}");
          tokens.push({
            type: "variable",
            name: templ.slice(1, index)
          });
          templ = templ.substring(index + 1);
          continue;
        }
        var index = templ.indexOf("{");
        var text = index < 0 ? templ : templ.substring(0, index);
        templ = index < 0 ? "" : templ.substring(index);
        tokens.push({
          type: "text",
          value: text
        });
        if (Date.now() >= maxTime) break;
      }
      return tokens;
    }
    function compile(tokens, data) {
      var str = '';
      for (var i = 0; i < tokens.length; i++) {
        var token = tokens[i];
        switch (token.type) {
          case "text":
            str += token.value;
            break;
          case "variable":
            str += data[token.name];
            break;
          default:
            break;
        }
      }
      return str;
    }
    var preCompile = function (template) {
      var tokens = parse(template);
      return {
        render: function (data) {
          return compile(tokens, data);
        }
      };
    };
    
    var template = preCompile("I am {name} i'm {age} years old!");
    console.log(template.render({ name: "Sam", age: 22 }));
    console.log(template.render({ name: "Jack", age: 23 }));

    相关实践

    展开全文
  • C++预编译技术详解

    2013-10-14 20:08:01
    C++预编译技术详解,真心不错,贡献。高级必会。
  • css预编译技术

    2019-03-16 15:30:38
    常用的css预编译技术有sass、less、Stylus,三者各有特点。 sass:出现最早,需要依赖ruby,推荐使用scss的语法编写; less:可使用sass的语法,又兼容css的语法,相比简单易上手; Stylus:来自node社区,主要...

    常用的css预编译技术有sass、less、Stylus,三者各有特点。

    • sass:出现最早,需要依赖ruby,推荐使用scss的语法编写;
    • less:可使用sass的语法,又兼容css的语法,相比简单易上手;
    • Stylus:来自node社区,主要给node项目做预编译。
      有关less

    一、变量
    可以定义通用的样式,需要时可以调用;全局样式调整可能仅需要改几行代码;

    @color: #4D926F;
    #header {
      color: @color;
    }
    h2 {
      color: @color;
    }
    

    编译成css如下:

    #header {
      color: #4D926F;
    }
    h2 {
      color: #4D926F;
    }
    

    二、嵌套
    我们可以在一个选择器中嵌套另一个选择器来实现继承,不仅减少了代码量,而且代码结构很清晰

    // LESS
    
    #header {
      h1 {
        font-size: 26px;
        font-weight: bold;
      }
      p { font-size: 12px;
        a { text-decoration: none;
          &:hover { border-width: 1px }
        }
      }
    }
    
    #header h1 {
      font-size: 26px;
      font-weight: bold;
    }
    #header p {
      font-size: 12px;
    }
    #header p a {
      text-decoration: none;
    }
    #header p a:hover {
      border-width: 1px;
    }
    
    展开全文
  • 前端模板预编译技术

    2016-12-16 10:47:00
    前端模板预编译通过预编译技术让前端模板突破浏览器限制,实现后端模板一样的同步“文件”加载能力。它采用目录来组织维护前端模板,从而让前端模板实现工程化管理,最终保证前端模板在复杂单页 web 应用下的可维护...

    什么是前端模板预编译

    前端模板预编译通过预编译技术让前端模板突破浏览器限制,实现后端模板一样的同步“文件”加载能力。它采用目录来组织维护前端模板,从而让前端模板实现工程化管理,最终保证前端模板在复杂单页 web 应用下的可维护性。同时预编译输出的代码经过多层优化,能够在最大程度节省客户端资源消耗。

    按文件与目录组织模板

    template('tpl/home/main', data)

    模板支持引入子模板

    {{include '../public/header'}}
    

      

    TmodJS 一经启动,就无需人工干预,每次模板创建与更新都会自动编译,引入一个 js 即可使用template(path)接口调用本地模板文件,直到正式上线都无需对代码进行任何修改,整个过程简单自然。

    强大之处

    1. 编译模板为不依赖引擎的 js 文件
    2. 前端模板按文件与目录组织
    3. 模板之间支持引入外部模板
    4. 使用同步模板加载接口
    5. 可选多种规范的模块输出:AMD、CMD、CommonJS
    6. 支持作为 GruntJS 的插件构建项目
    7. 模板目录可被前后端共享
    8. 支持检测修改即时编译
    9. 支持模板运行时调试
    10. 配置文件支持多人共享

    使用tmodJS

    全局安装

    npm install -g tmodjs

    编写模板

    TmodJS 的前端模板不再耦合在业务页面中,而是和后端模板一样有专门的目录管理。目录名称只支持英文、数字、下划线的组合,一个模板对应一个.html文件。

    模板语法

    和artTemplate一脉相承,建议协同使用。

    表达式

    {{ 与 }} 符号包裹起来的语句则为模板的逻辑表达式。

    输出表达式

    对内容编码输出:

    {{content}}

    不编码输出(编码可以防止数据中含有 HTML 字符串,避免引起 XSS 攻击)

    {{#content}}

    条件表达式

    {{if admin}}
        <p>admin</p>
    {{else if code > 0}}
        <p>master</p>
    {{else}}
        <p>error!</p>
    {{/if}}

    遍历表达式

    无论数组或者对象都可以用 each 进行遍历。

    {{each list as value index}}
        <li>{{index}} - {{value.user}}</li>
    {{/each}}

    亦可以被简写:

    {{each list}}
        <li>{{$index}} - {{$value.user}}</li>
    {{/each}}

    模板包含表达式

    用于嵌入子模板:

    {{include 'template_name'}}

    子模板默认共享当前数据,亦可以指定数据:

    {{include 'template_name' news_list}}

    include 路径规范约定

    1. 路径不能带后缀名
    2. 路径不能够进行字符串运算
    3. 路径不能使用变量代替
    4. 必须使用以.开头的相对路径

    辅助方法

    {{time | dateFormat:'yyyy-MM-dd hh:mm:ss'}}

    支持传入参数与嵌套使用:

    {{time | say:'cd' | ubb | link}}

    为了模板可维护,模板本身是不能随意访问外部数据的,它所有的语句都将运行在一个沙箱中。如果需要访问外部对象可以注册辅助方法,这样所有的模板都能访问它们。

    新建一个辅助方法文件配置 
    在模板目录新建一个 config/template-helper.js 文件,然后编辑 package.json 设置”helpers”: “./config/template-helper.js”。

    编写辅助方法 
    在 config/template-helper.js 中声明辅助方法。

    以日期格式化为例:

    template.helper('dateFormat', function (date, format) {
    
        date = new Date(date);
    
        var map = {
            "M": date.getMonth() + 1, //月份 
            "d": date.getDate(), //日 
            "h": date.getHours(), //小时 
            "m": date.getMinutes(), //分 
            "s": date.getSeconds(), //秒 
            "q": Math.floor((date.getMonth() + 3) / 3), //季度 
            "S": date.getMilliseconds() //毫秒 
        };
        format = format.replace(/([yMdhmsqS])+/g, function(all, t){
            var v = map[t];
            if(v !== undefined){
                if(all.length > 1){
                    v = '0' + v;
                    v = v.substr(v.length-2);
                }
                return v;
            }
            else if(t === 'y'){
                return (date.getFullYear() + '').substr(4 - all.length);
            }
            return all;
        });
        return format;
    });

    调用:

    {{time | dateFormat:'yyyy-MM-dd hh:mm:ss'}}

    编译模板

    只需要运行tmod这个命令即可,默认配置参数可以满足绝大多数项目。

    tmod [模板目录] [配置参数]

    注意:模板目录必须是模板的根目录,若无参数则为默认使用当前工作目录,tmodjs 会监控模板目录修改,每次模板修改都会增量编译。

    配置参数

    • --debug 输出调试版本
    • --charset value 定义模板编码,默认utf-8
    • --output value 定义输出目录,默认./build
    • --type value 定义输出模块格式,默认default,可选cmdamdcommonjs
    • --no-watch 关闭模板目录监控
    • --version 显示版本号
    • --help 显示帮助信息

    注意:配置参数将会保存在模板目录配置文件中,下次运行无需输入配置参数(–no-watch 与 –debug 除外)。

    举个例子

    tmod ./tpl --output ./build

    使用模板

    根据编译的 type 的配置不同,会有两种不同使用方式:

    使用默认的格式

    TmodJS 默认将整个目录的模板压缩打包到一个名为 template.js 的脚本中,可直接在页面中使用它:

    <script src="tpl/build/template.js"></script>
    <script>
        var html = template('news/list', _list);
        document.getElementById('list').innerHTML = html;
    </script>

    RequireJS、SeaJS、NodeJS 加载 在线实例 http://aui.github.io/tmodjs/test/index.html

    指定格式(amd / cmd / commonjs)

    此时每个模板就是一个单独的模块,无需引用 template.js:

    var render = require('./tpl/build/news/list');
    var html = render(_list);

    注意:模板路径不能包含模板后缀名

    演示

    TmodJS 源码包中test/tpl是一个演示项目的前端模板目录,基于默认配置。切换到源码目录后,编译:

    tmod test/tpl

    编译完毕后你可以在浏览器中打开 test/index.html 查看如何使用编译后的模板。

    配置

    TmodJS 的项目配置文件保存在模板目录的 package.json 文件中:

    {
        "name": "template",
        "version": "1.0.0",
        "dependencies": {
            "tmodjs": "1.0.0"
        },
        "tmodjs-config": {
            "output": "./build",
            "charset": "utf-8",
            "syntax": "simple",
            "helpers": null,
            "escape": true,
            "compress": true,
            "type": "default",
            "runtime": "template.js",
            "combo": true,
            "minify": true,
            "cache": false
        }
    }

    这里写图片描述

    gulp配置

    让 TmodJS 作为 Gulp 的一个插件使用:

    npm install gulp-tmod --save-dev

    由@lichunqiang开发,项目主页:https://github.com/lichunqiang/gulp-tmod

    常见Q&A

    问:TmodJS 需要部署到服务器中吗?

    不需要,这是本地工具,基于 NodeJS 编写是为了实现跨平台。

    问:如何将每个模板都编译成单独的 amd/cmd 模块输出?

    指定 type 参数即可,如–type cmd则可以让每个模板都支持 RequireJS/SeaJS 调用。

    问:如何将模板编译成 NodeJS 的模块?

    指定 type 参数即可,如–type commonjs。

    问:线上运行的模板报错了如何调试?

    开启 debug 模式编译,如–debug,这样会输出调试版本,可以让你快速找到模板运行错误的语句以及数据。

    问:如何不压缩输出 js?

    编辑配置文件,设置”minify”: false。

    问:如何修改默认的输出目录?

    指定 output 参数即可,如–output ../../build

    如何让模板访问全局变量?

    具体参考上面的 辅助方法

    问:可以使用使用类似 tmpl 那种的 js 原生语法作为模板语法吗?

    可以。编辑配置文件,设置”syntax”: “native”即可,目前 TmodJS 默认使用的是 simple 语法。

    问:如何兼容旧版本 atc 的项目?

    编辑配置文件,分别设置”type”: “cmd”、”syntax”: “native”、”output”: “./”

    问:如何迁移原来写在页面中的 artTemplate 模板,改为 TmodJS 这种按按文件存放的方式?

    参考 《页面中的模板迁移指南》

    问:我需要手动合并模板,如何让 tmodjs 不合并输出?

    编辑配置文件,设置combo:false。

    转载于:https://www.cnblogs.com/jiaxinjie/p/6185985.html

    展开全文
  • 基础1:预编译技术 既JIT技术( just in time) 首先,导入numba和numpy import numba as nb import numpy as np 定义两个相同功能的函数 def a(): return sum(list(range(100000))) # 用numba给b函数进行编译 @nb...
  • 非常详细系统地阐述了C++的预编译技术 预编译命令,结合VC6.0编译器进行了讲解
  • 我参加工作以来经历过几个别人已经写成型的C++项目,包括Windows的、Linux的以及跨Windows与Linux的,这些项目无一例外的都没有使用预编译技术来加快编译,导致整个项目的编译时间很长,有十几二十分钟的,更有三四...
  • 什么是前端模板预编译前端模板预编译通过预编译技术让前端模板突破浏览器限制,实现后端模板一样的同步“文件”加载能力。它采用目录来组织维护前端模板,从而让前端模板实现工程化管理,最终保证前端模板在复杂单页...
  • [FungLeo原创]CSS预编译技术之SASS学习经验小结前言接触CSS是05年.使用xhtml+css开发是06年.但真正全面采用xhtml+css开发却是08年开始的.因为居于三线城市,比一线程序的前驱者还是晚了一些.虽然现在已经发展到了...
  • 预编译执行dml语句 <?php //预编译演示 //创建mysqli对象 $mysqli=new MYSQLi("localhost","root","hsp123","test"); //2.创建预编译对象 $sql="insert into user1 (name,password,email,age)values(?,?,?...
  • 1、预编译:就是编译器首先编译某个文件(称为预编译头文件),然后将这个编译结果保存起来,之后如果有其他源文件include了这个“预编译头文件”的时候,则自动从这个编译结果提取需要的信息进行编译。 2、预编译...
  • 1、预编译:就是编译器首先编译某个文件(称为预编译头文件),然后将这个编译结果保存起来,之后如果有其他源文件include了这个“预编译头文件”的时候,则自动从这个编译结果提取需要的信息进行编译。 2、...
  •  更好的防止SQL注入,是因为预编译时,不需要用户的数据参与。编译时,结构固定,导致用户数据不能影响到SQL的结构 普通的执行方法:  $pdo->query();  $pdo->exec() 如果需要 防止SQL注入 ,需要人为的...
  • 为了优化启动时间,分层编译先对代码进行解释,然后把它们快速移动到第1层,第2层和第3层,在这些层里使用客户端编译级别对它们进行编译(使用不同的剖析信息),最后把它们移动到服务端编译级别的层(更多信息可以...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 3,292
精华内容 1,316
关键字:

预编译技术