当前位置:首页 > 网站模板 > 正文内容

js模板引擎排行(js模板引擎排行榜)

网站模板2年前 (2023-01-05)1073

本篇文章给大家谈谈js模板引擎排行,以及js模板引擎排行榜对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。

本文目录一览:

JavaScript如何避免拼接html字符串?

使用模板引擎,最简的模板引擎大致是这样的:

function strrep(str,obj){

   return str.replace(/\$\w+\$/gi, function(matchs) {

       var returns = obj[matchs.replace(/\$/g, "")];

       return typeof returns === "undefined" ? "" : returns;

   });

strrep(

   'img src="$thesrc$" class="$theclass$"', {

       "thesrc":"" ,

       "theclass":"fl tc"

   }

)

单纯的模板引擎如:Mustache、Jade、artTemplate、tmpl、kissyTemplate、ejs等等;

前端的有 Model - View 对应的框架也包含模板引擎,如backbone、avalon、angular等

简单的说,基于MVC模式与理念去开发,就可以了

nodejs内置模块有哪些

一、Express框架

前面的章节已经介绍过了,可以使用npm来安装node.js模块。具体操作请参照以前写的nodejs概论。

Express是一个nodejs的web开源框架,用于快速的搭建web项目。其主要集成了web的http服务器的创建、静态文本管理、服务器URL地址请求处理、get和post请求处理分发、session处理等功能。

使用方法,在cmd中打开你所想创建web项目的路径。然后输入

Express appname

即可创建一个名为appname的web项目。控制台打印结果

在cmd中进入appname文件夹输入

node appname.js

返回结果如下图,表示安装成功!

在项目开发中经常会出现这样的问题

此错误表示没有安装相关模块,解决办法是在cmd上打开项目文件夹,输入

npm install express

安装成功后会在本文件路径下生成一个node_modules,里面包含了Express框架代码。

其他模块也可用类似的方法进行安装,安装后的路径同样是在node_modules下。

二、jade模块

jade是一款高性能、简洁易懂的模板引擎。可通过jade来编写html文件。

jade类似一个用于快速编写html的语言,其编写后的文件后缀为.jade。

以下为文件的内容

在cmd中输入,压缩的过的可以通过加-P来不压缩,如果每次更改模版都要打命令行一次很麻烦是不是,我们可以通过加上jade -P -w jade.jade  加上一个-w来开启监视模式,每次更改模版,html文件都会自动编译咯

生成后的html文件如下:

在jada文件中是可以使用for循环和if判断语句的,可以让你体会类似JSP的%%和php的php/php在网页上输出数据的快感。

三、forever模块

nodejs作为http服务器,需要确保服务顺利进行,要注意一下两点:

1.后台服务运行,监控运行日志,以及http运行日志;

2.确保项目的正常安全运行,Node.js的启动命令node,很大程度无法满足运行需求;

Node.js的forever模块在第二点就可以起到很大的作用,同时其拥有监控文件更改、自动重启等功能。

forever模块的使用方法有两种:1.在命令行中使用

forever -l forever.log -o out.log -e err.log app.js

-l forever.log -o out.log -e err.log分别指定了forever的运行日志,脚本流水日志,脚本运行错误日志,启动后将在本文件夹下产生out.log、err.log文件。

2.在编码中require forever模块使用。

四、Socket.IO模块

Socket.IO模块主要功能是将WebSocket协议应用到所有浏览器。主要用于实时的长连接多求情项目中。

例如:在线联网游戏,实时聊天、实时股票查看、二维码扫描登录等。

安装方法仍然是在cmd在中输入npm install socket.io

如何使用Socket.IO来创建一个项目。

需要分别实现服务端和客户端的逻辑:

先创建一个服务端的node.js脚本index_server.js

var app = require('http').createServer(handler)//创建服务器app

, io = require('socket.io').listen(app)//引用socket.io模块监听app

, fs = require('fs')//引用文件处理模块

app.listen(80);//指定app监听的端口,第二个参数127.0.0.1可省略

function handler (req, res) {

fs.readFile(__dirname + '/index.html',   function (err, data) {     if (err) {

res.writeHead(500);       return res.end('Error loading index.html');

}

res.writeHead(200);

res.end(data);

});

}

io.sockets.on('connection', function (socket) {

socket.emit('news', { hello: 'world' });

socket.on('my other event', function (data) {

console.log(data);

});

});

其中,socket.emit()为Socket发送消息的函数,第一个参数表示发送消息的key值,第二个参数为发送消息的内容,也就是发送的数据。

Socket。on()为Socket接收消息的函数,第一个参数为接收消息的可以值,第二个参数为回调函数,其中回调函数携带的参数为接收消息所发送的数据。

接下来web前端如何使用JavaScrit 来连接Socket服务器。

新建一个index_client.html

script type="text/javascript" src="socket.js"/script

script type="text/javascript"    var socket = io.connect('');//创建本地sock连接

socket.on('news',function (data) {//Socket接收news消息时执行回调函数        console.log(data);

socket.emit('my other event',{my:'data'});

});/script

script type="text/javascript" src="socket.js"/script加载已经安装好的Socket.io的本地JavaScrit文件。

var socket = io.connect('');因为端口为80,所有这里可以不端口号

socket.on('news',function (data){}//客户端接收news消息成功后,发送my other event消息到服务端,发送的消息内容为json对象{my:'data'}

接下来只需要运行服务端的index_server.js文件来启动socket服务

效果:在浏览器输入按F12调出浏览器的控制台console即可看见打印出了一个object对象。

执行完毕后可能会报错:catnot find module socket.io,说明你的socket.IO没有安装,或已经安装并配置为全局,但你的安装路径并没有配置到在path中,所有无法引用。

你可以选择配置path,或者安装到项目内。这里建议安装到你的项目目录下,而不是简单粗暴的配置为全局。先卸载npm uninstall socket.io 进入指定目录后安装node index_server.js

socket.io详细请参阅    

五、request模块

request模块为开发者提供了一种简单访问HTTP请求的方法。request还支持HTTPS的访问方法。

安装:

npm install requset

request模块基本上覆盖了所有的HTTP请求方式如GET,POST,HEAD,DEL等。但其最基本的两个方法是request.get()和request.post().

get和post的区别

get:

1.使用get向服务器发出和接收的请求会附在url之后。类似:?id=1221name=5555这个url中传递了两个参数,一个为id,一个为name。

2.get请求不能超过1024个字节。

post没有限制,也不会附在url上。

接下来做一个简单的实例

get实例:

首先新建一个服务器app_get.js

var http= require("http");

http.createServer(function(req,res){

res.writeHead(200,{'content-Type':'text/plain'});

res.end('Hello world\n'+req.method);

}).listen(1337,"127.0.0.1");

再建一个发送求情的request_get.js文件

var request=require('request');

request.get("",function(error,response,result){

console.log(result);

});

在CMD中运行app_get.js,运行成功后,再打开一个cmd(之前的cmd不要关闭),执行request_get.js文件。

执行后的结果如下

hello world

GET

可以看出,通过request.get方法访问

返回的结果就是res.end()的参数

post实例:

和上面一样,先新建服务器app_post.js

var http= require("http"),

querystring=require('querystring');

http.createServer(function(req,res){    var postData="";    //开始异步接收客户端post的数据

req.addListener("data",function (postDataChunk) {

postData += postDataChunk;

});    //异步post数据接收完毕后执行匿名回调函数

req.addListener("end",function(){        var postStr=JSON.stringify(querystring.parse(postData));

res.writeHead(200,{'content-Type':'text/plain'});

res.end(postStr+'\n'+req.method);

});

}).listen(1400,"127.0.0.1");

然后再新建一个request_post.js

var request=require("request");

request.post('',{form:{'name':'ermu','book':'node.js'}},function (error,response,result) {

console.log(result);

})

像上面一样在cmd中执行后显示的结果如下:

D:\nodejs\src\requestnode request_post.js

{"name":"ermu","book":"node.js"}

POST

request post提交了一个json对象{"name":"ermu","book":"node.js"}而服务器接通过获取该POST数据,然后返回客户端,同时将http请求方式也响应到客户端。

request post参数可以有两种传递方式。

其中,第一种是将url和form表单的数据作为json参数在request post传递。举例如下:

request.post('url':'',form:{'name':'ermu','book':'node.js'}},function (error,response,result) {

console.log(result);

})

另一种是将url和form作为两个参数,上面的实例就是使用这种方法。

六、  Formidable模块

该模块的目的是为了解决文件上传。

在原生的node.js模块中,提供了获取post数据的方法,但是并没有直接获取上传文件。

react和vue的区别及优缺点

VUE 与 React 区别:

React 的思路是 HTML in JavaScript 也可以说是 All in JavaScript,通过 JavaScript 来生成 HTML,所以设计了 JSX 语法,还有通过 JS 来操作 CSS,社区的styled-component、JSS等。

而Vue 是把 HTML,CSS,JavaScript 组合到一起,用各自的处理方式,Vue 有单文件组件,可以把 HTML、CSS、JS 写到一个文件中,HTML 提供了模板引擎来处理。

React的优缺点:

灵活性和响应性:它提供最大的灵活性和响应能力。

丰富的JavaScript库:来自世界各地的贡献者正在努力添加更多功能。

可扩展性:由于其灵活的结构和可扩展性,React已被证明对大型应用程序更好。

不断发展: React得到了Facebook专业开发人员的支持,他们不断寻找改进方法。

Web或移动平台: React提供React Native平台,可通过相同的React组件模型为iOS和Android开发本机呈现的应用程序。

Vue的优缺点:

易于使用: Vue.js包含基于HTML的标准模板,可以更轻松地使用和修改现有应用程序。

更顺畅的集成:无论是单页应用程序还是复杂的Web界面,Vue.js都可以更平滑地集成更小的部件,而不会对整个系统产生任何影响。

更好的性能,更小的尺寸:它占用更少的空间,并且往往比其他框架提供更好的性能。

精心编写的文档:通过详细的文档提供简单的学习曲线,无需额外的知识; HTML和JavaScript将完成工作。

适应性:整体声音设计和架构使其成为一种流行的JavaScript框架。它提供无障碍的迁移,简单有效的结构和可重用的模板。

js模板引擎事件怎么解决

前端

深入node.js 3 模板引擎原理 事件 文件操作 可读流的实现原

模板引擎是基于new Function + with 实现的。

ejs使用

实现:

思路:借助fs的readFile先读取文件内容,然后使用正则表达式替换掉即可。

打印的结果是一样的。

复杂的情况呢?拼接字符串,拼成想要的代码

主要难点就是在字符串的拼接,第二部分,将全文分为三部分,然后拼接对应的,如

let str = "";

with(obj){

str+= `!DOCTYPE html

html lang="en"

head

meta charset="UTF-8"

meta http-equiv="X-UA-Compatible" content="IE=edge"

meta name="viewport" content="width=device-width, initial-scale=1.0"

titleDocument/title

/head

body

`

arr.forEach(item={

str+=`

li

${item}

/li

`

})

str+=`

/body

/html`}

return str

登录后复制

这就是拼出来的字符串,然后再new Function,包裹一层函数,将with的obj传入,返回str。

大概长这样。

效果就是:

所以本质就是将获取到的内容,使用正则表达式匹配,拼接字符串成我们想要的内容,用with包裹,改变内部作用域,再通过new Function将str包装成一个函数,传入对应的值给obj。然后运行之后str就能正常通过作用域获取值赋值。

buffer

在服务端,需要一个东西来标识内存,但不能是字符串,因为字符串无法标识图片。node中使用buffer来标识内存的数据。他把内存转换成了16进制来显示(16进制比较短)buffer每个字节的取值范围就是0-0xff(十进制的255).

node中buffer可以和字符串任意的转换(可能出现乱码)

编码规范:ASCII - GB8030/GBK - unicode - UTF8

Buffer代表的是内存,内存是一段固定空间,产生的内存是固定大小,不能随意增加。

扩容:需要动态创建一个新的内存,把内容迁移过去。

创建一个长度为5的buffer,有点像数组,但是数组可以扩展,而buffer不可以扩展。

还有一种声明buffer。

Buffer.form。

一般使用alloc来声明一个buffer,或者把字符串转换成Buffer使用。文件操作也是采用Buffer形式。

buffer使用

无论是二进制还是16进制,表现得东西是一样的。

base64编码:

base64可以放在任何路劲的链接里,可以减少请求次数。但是文件大小会变大。比如webpack中的asset/type,把一些小的文件转换成了Base64编码内嵌到了文件当中,虽然可以减少请求次数,但也增大了文件的大小。

base64的来源就是将每个字节都转化为小于64的值。没有加密功能,因为规则很简单。如

第一步:将buffer中每个位置的值转为二进制。如上。

一个字节有八位,八位的最大值是255,有可能超过64。而base64编码是要将每个字节转化为小于64的值。所以就取每个字节的6位。6位的最大值就是2*6 - 1 = 63。也就是:

第二步:将38的形式转成64的,保证每个字节小于64。将其转为十进制。

第三步,通过特定的编码规则转换即完成。

将我们获取到的十进制传入,因为每个字节都是小于64的,所以不超过。

完成。

buffer的常用方法

除了form和alloc还有

slice

// slice

const a = Buffer.from([1,2,3,4,5])

const d = a.slice(0,2)

d[1] = 4

console.log(d);

console.log(a);

登录后复制

与数组的用法相同,但是他并不是浅复制,而是直接关联在一起。改变d也会改变a。而数组的slice是浅复制。改变原始数据的值不会改变。

copy

将Buffer的数据拷贝到另一个数据上。

const a = Buffer.from([1, 2, 3, 4, 5]);

const d = Buffer.alloc(5);

a.copy(d, 1, 2, 3); //四个参数,拷贝到哪里?从d的第一个开始拷贝 a的a[2]-a[3]

console.log(d);

登录后复制

copy四个参数,分别是拷贝的目标d。从d的第几个长度开始。拷贝a的第2到第3位。

所以应该是 Buffer 00 03 00 00 00

concat

用于拼接buffer

Buffer.concat(arr, index)

第二个参数是拼接出来的Buffer的长度,如果大于原本的长度,用00填写。

Buffer.myConcat = function (

bufferList,

length = bufferList.reduce((a, b) = a + b.length, 0)

) {

let bigBuffer = Buffer.alloc(length);

let offset = 0;

bufferList.forEach((item) = {

//使用copy每次拷贝一份然后offset向下走。

item.copy(bigBuffer, offset);

offset += item.length;

});

return bigBuffer

};

登录后复制

借助copy,逐个拷贝一份即可。

文件操作

fs模块有两种基本api,同步,异步。

io操作,input,output,输入输出。

读取时默认是buffer类型。

写入的时候,默认会将内容以utf8格式写入,如果文件不存在则创建。

读取的data是Buffer类型,写入的是utf8格式。

这种读写适合小文件

读取文件某段内容的办法

fs.open用于打开一个文件。fs.read用来读取内容并且写入到buffer中。

fs.write用于将内容写入某个文件之中。如上,打开了b.txt,然后用fs.wirte。五个参数,分别是fd,buffer,从buffer的第0个位置,到buffer的第0个位置,从b.txt的第0位开始写,回调函数。

写入成功。

这种写法也不太美观,每次都需要fs.open然后fs.read或者fs.wirte,容易造成回调地狱。

流 Stream的出现

源码的实现步骤:

fs的CreateReadStrem是new了一个ReadStream,他是基于Stream的Readable类的,然后自己实现了_read方法。供Stream.prototype.read调用。

1 内部会先open文件,然后直接直接继续读取操作,默认是调用了pause暂停。

2 监听用户是否绑定了data事件,resume,是的话开始读取事件

3 调用fs.read 将数据读取出来。

4 调用this.push去emit data事件,然后判断是否可以读取更多再去读取。

第一种: fs.readFile(需要将文件读取到磁盘中,占用内容)=fs.wirteFile

第二种: fs.open = fs.read = fs.write 回调地狱。

实现读取三个字节写入三个字节。采用fs.open fs.read fs.write的方法。

实现copy方法。

看实现:

首先创建一个三字节的Buffer。

然后使用fs.open打开要读取和要写入的文件。

因为我们是每三个每三个读取,所以需要采用递归方式,一直读取文件。

直到读取完毕,调用回调函数。fs.read和fs.write的参数都是类似的,即fd,buffer,buffer的start,buffer的end,读取文件/写入文件的start、回调函数(err,真正读取到的个数/真正写入的个数)

现在基本实现了读一部分,写一部分,但是读写的逻辑写在一起了,需要把他拆开。

流 Stream模块

可读流

不是一下子把文件都读取完毕,而是可以控制读取的个数和读取的速率。

流的概念跟fs没有关系,fs基于stream模块底层扩展了一个文件读写方法。

所以fs.open,fs.read等需要的参数,createReadStream也需要、

返回一个对象,获取需要监听data事件。

close事件在end事件之后触发。

由此可以看出:流的内部基于 fs.open fs.close fs.read fs.write以及事件机制。

暂停是不再触发data事件

rs.resume()是恢复。

实现readStream

从vscode调试源码得知

实现思路:

createReadStream内部new了一个ReadStream的实例,ReadStream是来自于Stream模块。

做一系列参数默认后, 调用this.open方法,这个方法会去调用fs.open去打开文件,打开之后触发事件,从回调的形式发布订阅模式,然后监听事件,当发现有用户注册了data事件之后,调用fs.read,j监听open事件,在open之后再去读取文件等等。

这样我们的读写逻辑就分离开了,从回调的形式变成了发布订阅模式,有利于解耦。

第一步:

第一步:参数初始化,并调用fs.open

open打开之后会触发open事件,注意,这里是异步的

第二步: 监听用户注册的data事件,当用户注册了data事件才去调用fs.read。调用this.read的时候open还没完成。

所以第一次read的时候需要判断,然后只监听一次open事件,重复打开read事件。

这个end和start配合,表示读取文件从哪到哪的位置,但是end是包后的,比如上面的end为4,实际上读取到的是5。

创建buffer存放读取的内容,再判断应该读取多少内容,以哪个小为准。

然后打开fs.read。将读取到的buffer发布出去。再次调用this.read去继续读取。

start=1,end=4,读取到2345的内容,正确。

不给end,每次3个3个的读取。

接着实现暂停,需要一个开关。

这样就基本完成了。

总结:

一开始实现的的copy方法,也是利用fs.open, fs.read, fs.write等,通过回调的形式完成的,这样虽能完成,但是内聚度较高,容易形成回调地狱。

而基于fs模块,和events模块,实现的可读流,可以有效的解耦刚才的代码,通过发布订阅模式,在一开始订阅事件,在每个时间点对应发布事件,然后代码执行,各司其职。

open和close是文件流独有的,

可读流具备:on (‘data’ | ‘end’ | ‘error’), resume, pause这些方法。

相关代码:

// copy

const fs = require("fs");

const path = require("path");

// let buf = Buffer.alloc(3);

// //open打开一个文件,第一个参数是路劲,第二个参数是打开文件用途,第三个是回调函数。

// fs.open(path.resolve(__dirname, "a.txt"), "r", function (err, fd) {

// // fd 是file descriptor文件描述

// console.log("fd", fd);

// //读取a.txt的内容,并且将内容写入buf中的第0个位置到3第三个位置,从a.txt的第六个位置开始

// fs.read(fd, buf, 0, 3, 3, function (err, data) {

// fs.open(path.resolve(__dirname, "./b.txt"), "w", function (err, fd2) {

// fs.write(fd2, buf, 0, 3, 0, function (err, data2) {

// console.log("buf", buf);

// console.log("data2", data2);

// });

// });

// });

// });

function copy(source, target, cb) {

const BUFFER_SIZE = 3;

const buffer = Buffer.alloc(BUFFER_SIZE);

//每次读入文件的位置

let r_offset = 0;

//每次写入新文件的位置

let w_offset = 0;

//读取一部分数据,写入一部分数据

//第三个参数可以是权限 权限有三个组合 rwx 可读可写可执行 r的权限是4,w的权限是2,x的权限是1 421 = 777 可写可读可执行

// 0o666表示最大的权限,默认不用写。

//读取的文件必须要存在。写入文件不存在会创建,如果文件有内容会清空。

fs.open(source, "r", function (err, fd1) {

//打开写的文件

fs.open(target, "w", function (err, fd2) {

//每次读取三个写入三个,回调的方式实现的功能,需要用递归

// 同步代码则可以采用while循环

function next() {

fs.read(

fd1,

buffer,

0,

BUFFER_SIZE,

r_offset,

function (err, bytesRed) {

// bytesRed真正读取到的个数

if (err) {

cb("读取失败");

return;

}

if (bytesRed) {

//将读取到的内容写入target目标

fs.write(

fd2,

buffer,

0,

bytesRed,

w_offset,

function (err, written) {

if (err) retrun;

// written 真正写入的个数

r_offset += bytesRed; //每次写入之后,下一次读取的内容就该往前进

w_offset += written;

next();

}

);

} else {

//读取内容为空,结束

fs.close(fd1, () = {});

fs.close(fd2, () = {});

cb();

}

}

);

}

next();

});

});

}

copy("./a.txt", "b.txt", (err, data) = {

console.log("copy success");

});

登录后复制

createStream的实现

const EventMitter = require("events");

const fs = require("fs");

class ReadStream extends EventMitter {

constructor(path, options = {}) {

super();

this.path = path;

//操作

this.flags = options.flags || "r";

this.encoding = options.encoding || null;

this.autoClose = options.autoClose || true;

this.start = options.start || 0;

this.end = options.end || Infinity; //读取的个数,包后的,如果是1 ,就可能读取到0,1,2

this.highWaterMark = options.highWaterMark || 64 * 1024;

this.emitClose = options.emitClose || false;

this.offset = this.start; // 每次读取文件的位移数

this.flowing = true; //暂停继续开关

this.open(); // 文件操作,注意这个方法是异步的。

// events可以监听newListener,可以获取注册的所有事件

this.on("newListener", function (type) {

if (type === "data") {

//用户订阅了data事件,才去读取。

this.read(); //这时候文件还没open,fd为undefined。

}

});

}

pause() {

//暂停

this.flowing = false;

}

resume() {

//继续

if (!this.flowing) {

this.flowing = true;

this.read();

}

}

destory(err) {

if (err) {

this.emit("error", err);

}

if (this.autoClose) {

fs.close(this.fd, () = {

this.emit("close");

});

}

}

read() {

//希望在open之后打开

if (typeof this.fd !== "number") {

this.once("open", (fd) = {

//之前实现的copy这段逻辑是写在了fs.open里面,换成发布订阅模式之后就可以分离出来。

this.read(); //第二次read的时候,fd有值了

});

} else {

//判断每次读取多少。因为this.end是包后的,比如start = 0, end = 1, 那么读取的就是 0 , 1, 2所以需要+1

const howMutchToRead = Math.min(

this.end - this.offset + 1,

this.highWaterMark

);

const buffer = Buffer.alloc(howMutchToRead);

fs.read(

this.fd,

buffer,

0,

howMutchToRead,

this.offset,

(err, byteRead) = {

if (err) {

this.destory(err);

} else {

if (byteRead) {

//读取到文件,发布data事件,发送真正读取到的内容

this.offset += byteRead;

this.emit("data", buffer.slice(0, byteRead));

this.flowing this.read();

} else {

this.emit("end");

if (this.autoClose) {

this.destory();

}

}

}

}

);

}

}

open() {

fs.open(this.path, this.flags, (err, fd) = {

if (err) {

//报错:

this.destory(err);

}

//从回调的形式变成了发布订阅模式

this.fd = fd;

this.emit("open", fd);

});

}

}

const rs = new ReadStream("./a.txt", {

flags: "r", //创建可读流。

encoding: null, //默认Buffer

autoClose: true, //自动关闭,相当于读取完毕调用fs.close

emitClose: true, //触发close事件

start: 0, //从文件哪里开始读取

highWaterMark: 3, //每次读取的数据个数,默认是64*1025字节。

//end: 4, // 比如这个就会读取 1到5的内容

});

rs.on("open", () = {

console.log("文件打开了");

});

// rs.on("data", (data) = {

// console.log("监听Data事件", data);

// });

// //底层还是 fs.open fs.read fs.close

// const rs = fs.createReadStream("./a.txt", {

// flags: "r", //创建可读流。

// encoding: null, //默认Buffer

// autoClose: true, //自动关闭,相当于读取完毕调用fs.close

// emitClose: true, //触发close事件

// start: 0, //从文件哪里开始读取

// highWaterMark: 3, //每次读取的数据个数,默认是64*1025字节。

// }); //返回一个对象

//没监听前,是非流动模式,监听后,是流动模式。

//监听data事件,并且不停触发

rs.on("data", function (chunk) {

console.log(chunk);

//暂停

rs.pause();

});

rs.on("end", function () {

console.log("读取完毕");

});

rs.on("close", function () {

console.log("文件关闭");

});

setInterval(() = {

console.log("一秒后");

rs.resume();

}, 1000)

bootstrap+vue.js做前端框架的特点

1、易于开发:bootstrap+vue.js提供了页面数据渲染模板引擎如v-ifv-for等、提供事件绑定@click等,代码清晰明了,逻辑简单,易于上手。

2、高性能:bootstrap+vue.js提出虚拟DOM概念,以及数据驱动DOM思想,减少页面渲染成本,大幅度提高性能。

3、生态完善:许多开发者提供了对bootstrap+vue.js支持的插件如ElementUI,完善bootstrap+vue.js的生态,故使用bootstrap+vue.js进行开发,遇到的难题会较少。

4、开源社区活跃:这提供bootstrap+vue.js未来更加强大的可能性。

JS引擎 {{chinese @index}}

Handlebars是一个绑定数据的模板引擎。这是它的语法结构

意思是在模板引擎Handlebars中注册一个方法,这个方法的名字叫做chinese,这个方法接受一个参数value,方法返回arr中第value个数。

js模板引擎排行的介绍就聊到这里吧,感谢你花时间阅读本站内容,更多关于js模板引擎排行榜、js模板引擎排行的信息别忘了在本站进行查找喔。

扫描二维码推送至手机访问。

版权声明:本文由我的模板布,如需转载请注明出处。


本文链接:http://sdjcht.com/post/40.html

分享给朋友:

“js模板引擎排行(js模板引擎排行榜)” 的相关文章

大学主题班会ppt模板免费下载(大学生主题班会ppt模板)

大学主题班会ppt模板免费下载(大学生主题班会ppt模板)

本篇文章给大家谈谈大学主题班会ppt模板免费下载,以及大学生主题班会ppt模板对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、哪个网站有免费的ppt下载 2、校园安全教...

Word文档怎样删除页眉(Word文档怎样删除页眉)

Word文档怎样删除页眉(Word文档怎样删除页眉)

本篇文章给大家谈谈Word文档怎样删除页眉,以及Word文档怎样删除页眉对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、word怎么删除页眉 word如何删除页眉 2、...

抗疫主题PPT模板免费下载(抗疫精神主题ppt模板)

抗疫主题PPT模板免费下载(抗疫精神主题ppt模板)

本篇文章给大家谈谈抗疫主题PPT模板免费下载,以及抗疫精神主题ppt模板对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、抗疫先锋主题事迹材料 2、新时代大学生如何弘扬伟...

word产品方案模板免费下载素材(产品设计方案ppt模板)

word产品方案模板免费下载素材(产品设计方案ppt模板)

今天给各位分享word产品方案模板免费下载素材的知识,其中也会对产品设计方案ppt模板进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!本文目录一览: 1、产品介绍怎么做 word...

抗击疫情网页制作(抗击疫情网页制作图片)

抗击疫情网页制作(抗击疫情网页制作图片)

今天给各位分享抗击疫情网页制作的知识,其中也会对抗击疫情网页制作图片进行解释,如果能碰巧解决你现在面临的问题,别忘了关注本站,现在开始吧!本文目录一览: 1、您已学会的一项最重要的技能是什么,您是如何...

ps剪贴模板快捷键(ps剪贴的快捷键)

ps剪贴模板快捷键(ps剪贴的快捷键)

本篇文章给大家谈谈ps剪贴模板快捷键,以及ps剪贴的快捷键对应的知识点,希望对各位有所帮助,不要忘了收藏本站喔。 本文目录一览: 1、ps剪切蒙版的快捷键是什么 2、ps剪切蒙版的快捷键怎么用...