art-template

优点：模板引擎可以让将数据和HTML模板更加友好的结合，省去繁琐的字符串拼接，使代码更加易于维护。 先使用npm install art-template命令下载。 调用模板引擎提供的template函数，告知模板引擎将特定模板和特定数据进行拼接，最终返回拼接结果。 // 模板引擎导入 const template = require ( 'art-template' ) ; // 模板编译 // 1.模板位置 // 2.向模板中传递要拼接的数据，对象类型，对象属性可以直接在模板中使用。 // result 拼接结果 const result = template ( './views/index.html' , { msg : 'Hello, art-template' } ) ; 模板语法 通过模板引擎提供的特殊语法，告知模板引擎数据和模板具体的拼接细节。 插值表达式 即{{}}，用来显式数据，将数据变量放入双大括号之中即可。 标准语法： {{ 数据 }} 原始语法：<%=数据 %> 插值表达式中可以进行运算，最终显式运算的结果 < ! -- 标准语法 -- > < h2 > { { value } } < / h2 > < h2 > { { a ? b : c } } < / h2 > < h2 > { { a + b } } < / h2 > < ! -- 原始语法 --

art-template模板继承 include block extent footer.html < div > < h1 > 公共的底部 < / h1 > < / div > layout.html < ! DOCTYPE html > < html lang = "en" > < head > < meta charset = "UTF-8" > < title > Document < / title > < link rel = "stylesheet" href = "/node_modules/bootstrap/dist/css/bootstrap.css" > { { block 'head' } } { { / block } } < / head > < body > { { include './header.html' } } { { block 'content' } } < h1 > 默认内容 < / h1 > { { / block } } { { include './footer.html' } } < script src = "/node_modules/jquery/dist/jquery.js" > < / script > < script src = "/node_modules/bootstrap/dist/js/bootstrap

1. 浏览器端的 AMD 和 CMD 模块化规范 (了解) 浏览器端，不能使用 Common.js 规范，因为 Common.js 是同步加载的； AMD/CMD 可以理解为，common.js 在浏览器端，的解决方案，是异步加载的； AMD模块化规范代表：RequireJS框架 对于依赖的模块，AMD 是提前执行； 推崇依赖前置，先定义模块，再使用； CMD模块化规范代表：SeaJS框架 对于依赖的模块，CMD 是延迟执行； CMD 推崇，尽可能晚的，执行这个模块，类似懒加载；推崇依赖就近； ES6模块化 (大趋势)：ES6 在语言标准层面上(语法上)，实现了模块化功能，而且实现得相当简单；完全可以取代 CommonJS 和 AMD 规范，成为浏览器和服务器，通用的模块化解决方案；(vue Reat 前端框架会使用) 2. 模块成员的分类 Node.js 由三部分组成：ECMAScript 核心 + 全局成员 + 模块成员 模块成员，分三类： 核心模块、第三方模块、用户自定义模块 核心模块 随着Node.js的安装包，一同安装到，本地的模块；如：fs，path 等； 核心模块使用：require(‘核心模块标识符’) 第三方模块 非官方提供的模块；必须去 NPM 网站上下载，才能使用； 先从 npm 官网上，下载指定的，第三方模块； require(‘第三方模块标识符’)

关于art-template模板，收藏了两篇文章，讲的比较系统，简单来说就是一个数据和页面的拼接渲染模板。 具体跟 Vue、React 这些前端主流框架比较的性能，官方并未给出数据，但是我认为只比较页面渲染能力的话，应该相差不多， Vue、React 是一整套的前端解决方案，而 art-template 只是一个 js模板引擎，二者定位和功能不同，不做详细比较，猜测 art-template 同样是使用虚拟 DOM 的方式进行页面渲染，否则能达到这样的性能，着实不容易。就学习而言，如果学习过 Vue、React，学这个非常简单，反过来学会 art-template 对学习 Vue、React也有一定帮助。 简单使用： 1.写模板 < script id = "art-template" type = "text/html" > < table > /******/ < tbody > { { each classInfoList } } < tr > < td > { { $index + 1 } } < / td > < td > { { $value . Id } } < / td > < td > { { $value . Name } } < / td > < td > { { $value . Teacher } } < / td > < td > { { $value

高性能JavaScript模板引擎原理解析：http://cdc.tencent.com/2012/06/15/%E9%AB%98%E6%80%A7%E8%83%BDjavascript%E6%A8%A1%E6%9D%BF%E5%BC%95%E6%93%8E%E5%8E%9F%E7%90%86%E8%A7%A3%E6%9E%90/ javascript 模板引擎，官网： https://github.com/aui/art-template 分为原生语法和简洁语法，本文主要是讲简洁语法 基础数据渲染 输出HTML 流程控制 遍历 调用自定义函数方法 子模板引入 基础数据渲染 一、引入art-template.js文件 <script src="template-debug.js"></script> 二、编写HTML模板 <script id="test" type="text/html"> <h1>{{title}}</h1> </script> 三、向模板插入数据，并输出到页面 var data = { title:"hello world" }; var html = template("test",data); document.getElementById('content').innerHTML = html; 输出HTML <script id="test" type

Node 原生 http 在某些方面不足以应对开发需求，所以就需要使用框架来加快开发效率 Express 是轻快简洁的 Web开发框架，其实就是封装的 http。使用教程可查看 官网教程 ，使用前先下载这个第三方包 npm install express --save 创建入口文件 app.js var express = require('express') //引包 var app = express() //创建服务器应用程序,相当于原来的http.createServer() //当服务器收到get请求 / 时侯,执行回调处理函数 app.get('/',function (req,res) { res.send('Hello Express') //原来Node的write()、end()等api依旧可使用 }) app.listen(3000,function () { console.log('app is running at port 3000.') }) 命令行执行 app.js，然后在浏览器发起请求，得到响应结果 Hello Express。这便是最简单的 express应用 基本路由 指一种映射关系，或者说是导航，如 get 请求 / 时执行对应函数，post请求 /login 时执行其对应函数，每个请求都有对应的处理函数 请求方式、请求路径和请求处理函数

目录 学习源 art-Template art-Template特点 art-Template与其他模板引擎运行速度对比 art-Template文档 安装 安装方法 在浏览器中编译 语法 输出 原文输出 条件输出 循环输出 定义变量 模板继承 子模板 调试 模板变量 学习源 https://www.jianshu.com/p/d8d8e19157e0 https://www.jianshu.com/p/955ff311d670 art-Template art-template 是一个简约、超快的模板引擎。它采用作用域预声明的技术来优化模板渲染速度，从而获得接近 JavaScript 极限的运行性能，并且同时支持 NodeJS 和浏览器。使用art-template也便于维护代码，以前我们渲染数据是以模板字符串的形式在js文件中写入的html内容，如果html内容需要修改，我们需要在js中修改。而用了模板引擎以后，我们只需要html文件中修改html内容。还有使用了模板引擎以后DOM操作的效率也会更高一点。 art-Template特点 拥有接近 JavaScript 渲染极限的的性能 调试友好：语法、运行时错误日志精确到模板所在行；支持在模板文件上打断点(Webpack Loader) 支持 Express、Koa、Webpack 支持模板继承与子模板 浏览器版本仅 6KB

模板语法概述 art-template 支持两种模板语法：标准语法和原始语法；标准语法可以让模板易读写，而原始语法拥有强大的逻辑表达能力。 标准语法使用 {{ 数据 }} 表示，也称之为小胡子语法；原始语法使用 <%= 数据 %> 表示；在模板语法中不仅可以显示数据，也可以书写合理的 js 表达式最终会显示处理后的结果。 渲染模板 template(filename, content) ：根据模板名渲染模板；返回值为渲染后的 html 字符串（具体情况可以看官方文档） 参数： filename 需要渲染的 HTML 模板文件路径，或 HTML 代码段的 id content 需要渲染的数据，其值为一个对象，用于给模板中的插值表达式传递数据；如果没有需要渲染的数据可以设置为一个空对象 {} 举个例子： template.html 根据 id 渲染模板 <!DOCTYPE html> < html lang = " en " > < head > < meta charset = " UTF-8 " /> < meta name = " viewport " content = " width=device-width, initial-scale=1.0 " /> < meta http-equiv = " X-UA-Compatible " content = " ie=edge

art-template官方文档 安装 npm i art-template express art-template express-art-template -S 配置 配置art-template 模版引擎 第一个参数，表示当以 .art 结尾的文件的时候，使用 art-template 模版引擎 第一个参数不能写路径，默认会去项目中的 views 目录查找该模版文件 也就是说 express 有一个约定：开发人员把所有的视图文件都放到 views 目录当中 express-art-template 是专门把 art-template 整合到 express 中的 虽然外面 没有导入 art-template 但也必须安装 原因在于 express-art-template 依赖了 art-template // art 代表读取 .art 文件 可以改成 html app . engine ( "art" , require ( "express-art-template" ) ) ; 使用 // express 为 response 响应对象提供了一个方法：render // render 方法默认是不可以使用的，但是如果配置了 express-art-template就可以使用了 // res.render("模版文件名称",{模版数据}) // 第一个参数不能写路径

第一步：下载安装art-template 安装命令： npm install art-template 该命令在哪执行就会把包下载到哪里。默认会下载到 node_modules 目录中 node_modules 不能修改。 第二步使用： 模板引起最早就是诞生于服务器领域，后来才发展到了前端。 在需要使用的文件模块中加载 art-template var tem = require('art-template'); 加载进来了 就可以使用art-template的API方法了 案例：art-template和 fs的结合使用。 模板引擎不关心结构 var tem = require('art-template'); var fs = require('fs'); fs.readFile('./http.html', function (error, data) { if (error) { return console.log('文件读取失败！'); } //fs读取的文件是属于二进制文件，需要把他转化字符串 var res = tem.render(data.toString(), { name: 'asdfasdfas', age: 18, title: '谢小新' }) console.log(res) }) 来源： CSDN 作者： 邪小新 链接： https://blog