AJAX之模板引擎&&字符串模板x-template、微信小程序（小程序模型与宿主环境）、微信小程序（跳页之tabBar导航跳转）

【前言】2019.11.25
【内容】

小程序的运行环境分成渲染层和逻辑层， WXML 模板文件和 WXSS 样式文件工作在渲染层，JS 逻辑文件工作在逻辑层。

面试：小程序模型
渲染层（wxml、wxss）和逻辑层（js）的分离

模型的基本工作方式
1.数据驱动：渲染层和数据相关
2.脚本逻辑：逻辑层负责产生、处理数据
3.通信模型：逻辑层通过 Page 实例的 setData 方法传递数据到渲染层

线程：
小程序的渲染层和逻辑层分别由2个线程管理：渲染层的界面使用了WebView 进行渲染；逻辑层采用JsCore线程运行JS脚本。

Native微信客户端：
一个小程序存在多个界面，所以渲染层存在多个WebView线程，这两个线程的通信会经由微信客户端（常用Native代指微信客户端）做中转，逻辑层发送网络请求也经由Native转发

Web view含义：
WebView也就是我们熟悉的“网络视图”，能加载并显示网页，可以将其视为一个浏览器。主要用于展示网络请求后的内容，就是将网络地址请求的内容展示在里面。

使用场景：
比如你自己写个APP，想要访问网络（如百度页面），可以不使用手机自带的浏览器，只需APP内部展示百度页面，这时候就可以用webView。
即在其他APP内部浏览百度页面

本质：
JsCore全称为JavaScriptCore ，是一款 JavaScript 引擎，通常会被叫做虚拟机，专门设计来解释和执行 JavaScript 代码。

常用引擎：
目前 JavaScript 引擎还有 Google 的 V8 ，Mozilla 的 SpiderMonkey，这些主要涉及 JS 的解析和处理方式。
拓展：Mozilla（缩写MF或MoFo）全称Mozilla基金会，是为支持和领导开源的Mozilla项目而设立的一个非营利组织，Firefox便 由 Mozilla 打造。

线程管理：
小程序的渲染层和逻辑层分别由两个线程管理：渲染层的界面使用了WebView进行渲染；逻辑层采用JsCore线程运行JS脚本。

双向绑定：
在渲染层，宿主环境会把WXML转化成对应的JS对象，在逻辑层发生数据变更的时候，需要通过宿主环境提供的setData方法把数据从逻辑层传递到渲染层，，在经过对比前后差异，把差异应用到原来的DOM树上，渲染出正确的UI界面。

小程序是一个多tab标签应用（客户端窗口的底部或顶部有tab栏可以切换页面），可以通过Tabbar配置项指定tab栏的表现，以及tab切换时显示的对应页面。、

接下来挨个看下tabBar配置项下的属性：

tabBar配置项之list属性配置项—iconPath

下面介绍几款 JavaScript 模板引擎
1、Mustache
基于javascript 实现的模板引擎,类似于 Microsoft’s jQuery template plugin,但更简单易用
2、doT.js
doT.js 包含为浏览器和Node.js 准备的 JavaScript 模板引擎
3、jSmart
著名的 PHP 模板引擎 Smarty 的 JavaScript 移植版本
4、dom.js
一款可用在客户端和服务器端的 JavaScript 模板引擎
5、jade
受Haml的影响以JavaScript实现用于node的高性能模板引擎
6、Hogan.js
来自 Twitter 的 JavaScript 模板引擎

7、Handlebars
Handlebars 是一个 JavaScript 的页面模板库
8、artTemplate
artTemplate 是新一代 javascript 模板引擎，它在 v8 中的渲染效率可接近 javascript 性能极限，在 chrome 下渲染效率测试中分别是知名引擎 Mustache 与 micro tmpl 的 25 、 32 倍。引擎支持调试。若渲染中遇到错误，调试器可精确定位到产生异常的模板语句，解决前端模板难以调试的问题。
解决方案：