js模板引擎渐进--前言

 

 

 

前些日子加班的厉害，为了不让加班的这段时间那么乏味，决定给自己加点油烟，便想到了去学习react，看了网上官网的基本教程，然后便想要改进自己的小小项目，使用react来写前端。

按照官网的教程来操作，基本的正常用法很快就能上手了。期间，偶然在“极客时间”（非广告）看了一两个对react介绍的视频（其实视频是一套完整的教程，但是自己没有买，就随便看了前面两三个讲这个react的历史以及催生它的场景）。

此后自认为对react的理念有了一些认识，再回想起自己做过的前端经历，其实自己很多地方已经有react理念提及的样子：围绕数据，只要数据变了，那便重新渲染这个变化了的数据。这样就不会那么麻烦的去操作各种dom,还要各种判断，简单，暴力。

然后就突然有一种想要自己根据自己所理解的react 用通俗的方法模拟实现一个自己的“react”（有点自负了）。但是要自己模拟实现也不可能真的自己写一个 jsx 来解析自己的代码，所以，想到了使用模板引擎的思路，组件中的标签我写到一个模板去，然后解析不就好了。于是开启了自己的模板引擎之路，前后用了几天的时间，每天挤出一点时间一点点的改进。

说到模板引擎，估计现在的前端是不会用的了，都快 9102年了！ 在这个 react,vue,angular盛行的年头，凡是不需要兼容ie的系统基本不会在用jq了吧（笔者就比较惨了，还要兼容ie8）。好在自己曾经用过，曾经也尝试过自己写，但是曾经的自己还嫩了，看不懂别人的代码（现在也可能看不懂==、）。不管怎样，自己现在也能写出一个能用的东西。虽然如今js模板引擎基本没什么人会去用了，但笔者相信，这个将会是自己在模拟实现react过程必不可少的解析经验。

在开始放代码之前，搬运一下w3c 里关于js 几个知识点，这几个点是这个模板能够“变现”的关键！

1.

Function 对象

Function 对象（类）

ECMAScript 最令人感兴趣的可能莫过于函数实际上是功能完整的对象。

Function 类可以表示开发者定义的任何函数。

用 Function 类直接创建函数的语法如下：

var function_name = new function(arg1, arg2, ..., argN, function_body)

在上面的形式中，每个 arg 都是一个参数，最后一个参数是函数主体（要执行的代码）。这些参数必须是字符串。

ps:简单的说，Function对象可以将字符串形式的js代码转成真正可以执行的js代码。

 

2.

闭包

闭包，指的是词法表示包括不被计算的变量的函数，也就是说，函数可以使用函数之外定义的变量。

ps:框架开发必然会用到，简单的说，就是类似 c#/java 的作用域，闭包内的函数以及变量不受外部影响。

 

3

eval 函数

eval() 函数可计算某个字符串，并执行其中的的 JavaScript 代码。

 

最后，为了方便看到效果，自己每个页面都会将整个基本上以：模板--根据模板生成的js代码--填充的数据--代码执行返回的html--html显示的效果  这样一个过程展示（开始部分可能不会有）。同时想要说的是，该系列将会将自己写的过程基本按照原样展现出来，所以其中会有些“弯路”，是一个不断修正，改进的过程，希望通过这样一个过程将自己编写过程中遇到的各种问题一个改进的出发点。

 

目录：

js模板引擎渐进--前言

js模板引擎渐进--区别js代码和html字符串（1）

js模板引擎渐进--生成最简单的function（2）

js模板引擎渐进--区别js代码和html字符串2（3）

js模板引擎渐进--改进字符串拼接方式（4）

js模板引擎渐进--each/for（5）

js模板引擎渐进--each改进（6）

js模板引擎渐进--if/else（7）

js模板引擎渐进--处理需要输出 { 或者 } 的情况（8）

js模板引擎渐进--代码改进封装（9）

js模板引擎渐进--后记