应用分为 app
和 page
两层。app
用来描述整个应用,page
用来描述各个页面。
app
由三个文件组成,必须放在项目的根目录。
文件 |
必填 |
作用 |
app.js |
是 |
应用逻辑 |
app.json |
是 |
应用全局设置 |
app.acss |
否 |
应用全局样式表 |
page
由四个文件组成,分别是:
文件类型 |
必填 |
作用 |
js |
是 |
页面逻辑 |
axml |
是 |
页面结构 |
acss |
否 |
页面样式表 |
json |
否 |
页面配置 |
注意: 为了方便开发者,我们规定这四个文件必须具有相同的路径与文件名。
开发者写的所有代码最终将会打包成一份 JavaScript 脚本,在应用启动的时候运行,在应用结束运行时销毁。
应用的核心是一个响应式的数据绑定系统,分为视图层和逻辑层。这两层始终保持同步,只要在逻辑层修改数据,视图层就会相应的更新。
请看下面这个简单的例子。
1 2 3 | <span class = "lake-preview-line" style= "color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" ><span class = "lake-preview-line-number lake-lm-pad-level-0" style= "color: rgb(191, 191, 191); margin: 0px 8px 0px 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" ></span><span class = "lake-preview-codeblock-content" style= "color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" ><span class = "cm-comment" style= "color: rgb(106, 115, 125); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" ><!-- 视图层 --></span> </span></span><span class = "lake-preview-line" style= "color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" ><span class = "lake-preview-line-number lake-lm-pad-level-0" style= "color: rgb(191, 191, 191); margin: 0px 8px 0px 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" ></span><span class = "lake-preview-codeblock-content" style= "color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" ><span class = "cm-tag cm-bracket" style= "color: rgb(34, 134, 58); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" ><</span><span class = "cm-tag" style= "color: rgb(34, 134, 58); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" >view</span><span class = "cm-tag cm-bracket" style= "color: rgb(34, 134, 58); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" >></span> Hello {{name}}! <span class = "cm-tag cm-bracket" style= "color: rgb(34, 134, 58); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" ></</span><span class = "cm-tag" style= "color: rgb(34, 134, 58); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" >view</span><span class = "cm-tag cm-bracket" style= "color: rgb(34, 134, 58); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" >></span> </span></span><span class = "lake-preview-line" style= "color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" ><span class = "lake-preview-line-number lake-lm-pad-level-0" style= "color: rgb(191, 191, 191); margin: 0px 8px 0px 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" ></span><span class = "lake-preview-codeblock-content" style= "color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" ><span class = "cm-tag cm-bracket" style= "color: rgb(34, 134, 58); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" ><</span><span class = "cm-tag" style= "color: rgb(34, 134, 58); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" >button</span> <span class = "cm-attribute" style= "color: rgb(111, 66, 193); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" >onTap</span>=<span class = "cm-string" style= "color: rgb(102, 153, 0); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" > "changeName" </span><span class = "cm-tag cm-bracket" style= "color: rgb(34, 134, 58); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" >></span> Click me! <span class = "cm-tag cm-bracket" style= "color: rgb(34, 134, 58); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" ></</span><span class = "cm-tag" style= "color: rgb(34, 134, 58); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" >button</span><span class = "cm-tag cm-bracket" style= "color: rgb(34, 134, 58); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" >></span></span></span> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | <span class = "lake-preview-line" style= "color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" ><span class = "lake-preview-line-number lake-lm-pad-level-1" style= "color: rgb(191, 191, 191); margin: 0px 8px 0px 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" ></span><span class = "lake-preview-codeblock-content" style= "color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" ><span class = "cm-comment" style= "color: rgb(106, 115, 125); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" > // 逻辑层 </span> </span></span><span class = "lake-preview-line" style= "color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" ><span class = "lake-preview-line-number lake-lm-pad-level-1" style= "color: rgb(191, 191, 191); margin: 0px 8px 0px 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" ></span><span class = "lake-preview-codeblock-content" style= "color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" ><span class = "cm-keyword" style= "color: rgb(215, 58, 73); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" >var</span> <span class = "cm-def" style= "color: rgb(0, 92, 197); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" >initialData</span> <span class = "cm-operator" style= "color: rgb(215, 58, 73); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" >=</span> { </span></span><span class = "lake-preview-line" style= "color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" ><span class = "lake-preview-line-number lake-lm-pad-level-1" style= "color: rgb(191, 191, 191); margin: 0px 8px 0px 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" ></span><span class = "lake-preview-codeblock-content" style= "color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" > <span class = "cm-property" style= "color: rgb(0, 92, 197); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" >name</span>: <span class = "cm-string" style= "color: rgb(102, 153, 0); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" > 'taobao' </span>, </span></span><span class = "lake-preview-line" style= "color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" ><span class = "lake-preview-line-number lake-lm-pad-level-1" style= "color: rgb(191, 191, 191); margin: 0px 8px 0px 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" ></span><span class = "lake-preview-codeblock-content" style= "color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" >}; </span></span><span class = "lake-preview-line" style= "color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" ><span class = "lake-preview-line-number lake-lm-pad-level-1" style= "color: rgb(191, 191, 191); margin: 0px 8px 0px 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" ></span><span class = "lake-preview-codeblock-content" style= "color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" ><span class = "cm-comment" style= "color: rgb(106, 115, 125); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" > // 注册一个页面</span> </span></span><span class = "lake-preview-line" style= "color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" ><span class = "lake-preview-line-number lake-lm-pad-level-1" style= "color: rgb(191, 191, 191); margin: 0px 8px 0px 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" ></span><span class = "lake-preview-codeblock-content" style= "color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" ><span class = "cm-variable" style= "color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" >Page</span>({ </span></span><span class = "lake-preview-line" style= "color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" ><span class = "lake-preview-line-number lake-lm-pad-level-1" style= "color: rgb(191, 191, 191); margin: 0px 8px 0px 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" ></span><span class = "lake-preview-codeblock-content" style= "color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" > <span class = "cm-property" style= "color: rgb(0, 92, 197); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" >data</span>: <span class = "cm-variable" style= "color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" >initialData</span>, </span></span><span class = "lake-preview-line" style= "color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" ><span class = "lake-preview-line-number lake-lm-pad-level-1" style= "color: rgb(191, 191, 191); margin: 0px 8px 0px 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" ></span><span class = "lake-preview-codeblock-content" style= "color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" > <span class = "cm-property" style= "color: rgb(0, 92, 197); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" >changeName</span>(<span class = "cm-def" style= "color: rgb(0, 92, 197); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" >e</span>) { </span></span><span class = "lake-preview-line" style= "color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" ><span class = "lake-preview-line-number lake-lm-pad-level-1" style= "color: rgb(191, 191, 191); margin: 0px 8px 0px 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" ></span><span class = "lake-preview-codeblock-content" style= "color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" > <span class = "cm-comment" style= "color: rgb(106, 115, 125); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" > // 改变数据</span> </span></span><span class = "lake-preview-line" style= "color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" ><span class = "lake-preview-line-number lake-lm-pad-level-0" style= "color: rgb(191, 191, 191); margin: 0px 8px 0px 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" ></span><span class = "lake-preview-codeblock-content" style= "color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" > <span class = "cm-keyword" style= "color: rgb(215, 58, 73); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" > this </span>.<span class = "cm-property" style= "color: rgb(0, 92, 197); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" >setData</span>({ </span></span><span class = "lake-preview-line" style= "color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" ><span class = "lake-preview-line-number lake-lm-pad-level-0" style= "color: rgb(191, 191, 191); margin: 0px 8px 0px 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" ></span><span class = "lake-preview-codeblock-content" style= "color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" > <span class = "cm-property" style= "color: rgb(0, 92, 197); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" >name</span>: <span class = "cm-string" style= "color: rgb(102, 153, 0); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" > 'ali' </span>, </span></span><span class = "lake-preview-line" style= "color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" ><span class = "lake-preview-line-number lake-lm-pad-level-0" style= "color: rgb(191, 191, 191); margin: 0px 8px 0px 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" ></span><span class = "lake-preview-codeblock-content" style= "color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" > }); </span></span><span class = "lake-preview-line" style= "color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" ><span class = "lake-preview-line-number lake-lm-pad-level-0" style= "color: rgb(191, 191, 191); margin: 0px 8px 0px 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" ></span><span class = "lake-preview-codeblock-content" style= "color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" > }, </span></span><span class = "lake-preview-line" style= "color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" ><span class = "lake-preview-line-number lake-lm-pad-level-0" style= "color: rgb(191, 191, 191); margin: 0px 8px 0px 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" ></span><span class = "lake-preview-codeblock-content" style= "color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" >});</span></span> |
上面代码中,框架自动将逻辑层数据中的 name
与视图层的 name
进行了绑定,所以在页面一打开的时候会显示 Hello taobao!
。
用户点击按钮的时候,视图层会发送 changeName
的事件给逻辑层,逻辑层找到对应的事件处理函数。逻辑层执行了 setData
的操作,将 name
从 taobao
变为 ali
,因为该数据和视图层已经绑定了,从而视图层会自动改变为 Hello ali!
。
注意: 由于框架并非运行在浏览器中,所以 JavaScript 在 web 中的一些能力都无法使用,如 document
、window
等对象。
逻辑层 js 可以用 es2015 模块化语法组织代码:
1 2 | <span class = "lake-preview-line" style= "color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" ><span class = "lake-preview-line-number lake-lm-pad-level-0" style= "color: rgb(191, 191, 191); margin: 0px 8px 0px 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" ></span><span class = "lake-preview-codeblock-content" style= "color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" ><span class = "cm-keyword" style= "color: rgb(215, 58, 73); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" > import </span> <span class = "cm-def" style= "color: rgb(0, 92, 197); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" >util</span> <span class = "cm-keyword" style= "color: rgb(215, 58, 73); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" >from</span> <span class = "cm-string" style= "color: rgb(102, 153, 0); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" > './util' </span>; <span class = "cm-comment" style= "color: rgb(106, 115, 125); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" > // 载入相对路径</span> </span></span><span class = "lake-preview-line" style= "color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" ><span class = "lake-preview-line-number lake-lm-pad-level-0" style= "color: rgb(191, 191, 191); margin: 0px 8px 0px 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" ></span><span class = "lake-preview-codeblock-content" style= "color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" ><span class = "cm-keyword" style= "color: rgb(215, 58, 73); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" > import </span> <span class = "cm-def" style= "color: rgb(0, 92, 197); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" >absolute</span> <span class = "cm-keyword" style= "color: rgb(215, 58, 73); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" >from</span> <span class = "cm-string" style= "color: rgb(102, 153, 0); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" > '/absolute' </span>; <span class = "cm-comment" style= "color: rgb(106, 115, 125); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" > // 载入项目根路径文件</span></span></span> |
应用中将浏览器部分内置对象名(如 window、document)作 保留字
使用,以应对未来的不时之需。
保留字有:globalThis、global、AlipayJSBridge、fetch、self、window、document、location、XMLHttpRequest。请不要使用这些保留字做模块名,否则会出现无法正常访问模块的现象。如:
1 2 | <span class = "lake-preview-line" style= "color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" ><span class = "lake-preview-line-number lake-lm-pad-level-0" style= "color: rgb(191, 191, 191); margin: 0px 8px 0px 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" ></span><span class = "lake-preview-codeblock-content" style= "color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" ><span class = "cm-keyword" style= "color: rgb(215, 58, 73); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" > import </span> { <span class = "cm-def" style= "color: rgb(0, 92, 197); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" >window</span> } <span class = "cm-keyword" style= "color: rgb(215, 58, 73); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" >from</span> <span class = "cm-string" style= "color: rgb(102, 153, 0); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" > './myWindow' </span> </span></span><span class = "lake-preview-line" style= "color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" ><span class = "lake-preview-line-number lake-lm-pad-level-0" style= "color: rgb(191, 191, 191); margin: 0px 8px 0px 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" ></span><span class = "lake-preview-codeblock-content" style= "color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" ><span class = "cm-variable" style= "color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" >console</span>.<span class = "cm-property" style= "color: rgb(0, 92, 197); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" >log</span>(<span class = "cm-variable" style= "color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" >window</span>) <span class = "cm-comment" style= "color: rgb(106, 115, 125); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" > // undefined</span></span></span> |
上述代码中,因为使用了保留字做模块名,使得引入的模块变成了 undefined 。正确的方法是不使用这些保留字命名模块,或者使用 as 关键字给模块重命名,例如:
1 2 | <span class = "lake-preview-line" style= "color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" ><span class = "lake-preview-line-number lake-lm-pad-level-0" style= "color: rgb(191, 191, 191); margin: 0px 8px 0px 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" ></span><span class = "lake-preview-codeblock-content" style= "color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" ><span class = "cm-keyword" style= "color: rgb(215, 58, 73); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" > import </span> { <span class = "cm-def" style= "color: rgb(0, 92, 197); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" >window</span> <span class = "cm-keyword" style= "color: rgb(215, 58, 73); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" >as</span> <span class = "cm-def" style= "color: rgb(0, 92, 197); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" >myWindow</span> } <span class = "cm-keyword" style= "color: rgb(215, 58, 73); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" >from</span> <span class = "cm-string" style= "color: rgb(102, 153, 0); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" > './myWindow' </span> </span></span><span class = "lake-preview-line" style= "color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" ><span class = "lake-preview-line-number lake-lm-pad-level-0" style= "color: rgb(191, 191, 191); margin: 0px 8px 0px 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" ></span><span class = "lake-preview-codeblock-content" style= "color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" ><span class = "cm-variable" style= "color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" >console</span>.<span class = "cm-property" style= "color: rgb(0, 92, 197); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" >log</span>(<span class = "cm-variable" style= "color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" >myWindow</span>)</span></span> |
应用支持引入第三方模块,需先在应用根目录下执行如下命令安装该模块:
1 | <span class = "lake-preview-line" style= "color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" ><span class = "lake-preview-line-number lake-lm-pad-level-0" style= "color: rgb(191, 191, 191); margin: 0px 8px 0px 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" ></span><span class = "lake-preview-codeblock-content" style= "color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" >$ npm install lodash --save</span></span> |
引入后即可在逻辑层中直接使用:
1 | <span class = "lake-preview-line" style= "color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" ><span class = "lake-preview-line-number lake-lm-pad-level-0" style= "color: rgb(191, 191, 191); margin: 0px 8px 0px 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" ></span><span class = "lake-preview-codeblock-content" style= "color: rgb(89, 89, 89); margin: 0px; padding: 0px; background: none 0% 0% / auto repeat scroll padding-box border-box rgba(0, 0, 0, 0);" > import lodash from 'lodash' ; // 载入第三方 npm 模块</span></span> |
注意:由于 node_modules 里第三方模块代码不会经过转换器,为了确保各个终端兼容,node_modules 下的代码需要转成 es5 格式再引用,模块格式推荐使用 es2015 的 import/export。同时,浏览器相关 web 能力同样无法使用。