Skip to content

原理

https://developers.weixin.qq.com/ebook?action=get_post_info&docid=000a8806958588cb00862bd5851c0a

在大部分开发者看来，ECMAScript和JavaScript表达的是同一种含义，但是严格的说，两者的意义是不同的。ECMAScript是一种由Ecma国际通过ECMA-262标准化的脚本程序设计语言， JavaScript 是 ECMAScript 的一种实现。理解 JavaScript 是 ECMAScript 一种实现后，可以帮助开发者理解小程序中的 JavaScript同浏览器中的 JavaScript 以及 NodeJS 中的 JavaScript 是不相同的。

  • 浏览器的JavaScript = ECMScript + BOM(browser object model) + DOM
  • NodeJS的JavaScript = ECMScript + NPM +Native(fs / http )
  • 小程序的JavaScript = ECMScript + 小程序框架 + 小程序API

小程序在不同平台的表现不同主要在于三大平台实现的 ECMAScript 的标准有所不同，比如 iOS9和iOS10 所使用的运行环境并没有完全的兼容到 ECMAScript 6 标准。

结构

wxml > 渲染层 > webview | 多个webview线程

js >逻辑层 > jsCore | 单线程，整个APP实例都是单例的（得益于客户端系统有JavaScript 的解释引擎。ios javascriptCore框架 安卓下腾讯x5提供）

note:

  • 可以把wxml想成jsx 同样只是语法糖而已 本质是js。需要渲染到DOM上才是真的html
  • setData: 把数据从逻辑层传到渲染层，再经过对比前后差异，把差异应用在原来的Dom树上
  • 每个页面都有一个webview线程控制渲染
  • onReady触发时，表示逻辑层已经可以和渲染层交互了
  • setData的原则：设置需要改变的最小单位数据
  • currentTarget为当前事件所绑定的组件，而target则是触发该事件的源头组件。

重点：双线程模型

Q：为什么不选择网页形式？

A：技术上而言 ui渲染和js脚本都在一个线程里执行 可能会被抢占资源。安全而言，为了防止自由跳转，DOM操作的开放性，必须提供一个沙箱环境来运行开发者的JavaScript 代码。这个沙箱环境不能有任何浏览器相关接口，只提供纯JavaScript 的解释执行环境。

双线程模型带来的：天生异步

因为通信都变成了不同线程间的通信，包括渲染层与js逻辑层之间的顺序需要保证，js逻辑层与微信主线程的通信也有时延，所以大部分接口都是异步的。

组件

小程序的Exparser框架有参考DOM的shadow dom 原来如此！怪不得组件内的css不会影响到外面~

https://developer.mozilla.org/zh-CN/docs/Web/Web_Components/%E5%BD%B1%E5%AD%90_DOM

https://aotu.io/notes/2016/06/24/Shadow-DOM/index.html

微信开发者工具 很有用 值得复看！

https://developers.weixin.qq.com/ebook?action=get_post_info&docid=000e22a89849d81b0086384a25b40a

逻辑层模拟

渲染层模拟

客户端模拟

通信模拟(websocket)

Q: 如何避免用户在开发者工具中不使用本可以使用的BOM?

A: 将开发者的代码包裹在define里时 使之局部变量化

https://developers.weixin.qq.com/ebook?action=get_post_info&docid=000a80769707d86b008602a955b80a