与浏览器的差异
考虑到更高的性能与更小的体积,Kraken 在使用层面与浏览器有一定的差异。
普通应用推荐入口使用 JS 而不是 HTML
Web 的入口文件是一个 .html
或 .htm
等为扩展名的 HTML 文档。
而 Kraken 更类似 React Native 和 Weex,它接受一个 .js
的 JSBundle,使用 DOM API 构建视图和样式。
这样的选择是出于性能的考虑,现代的前端框架通常使用 JS 逻辑操作 DOM 生成 UI,直接下载 JS 可以减少下载解析 HTML 文档所花费的时间。
Web 下的 HTML 文档:
<!DOCTYPE html>
<html>
<head></head>
<body>
<div>Hello World!</div>
</body>
</html>
使用 JS Bundle:
const root = document.createElement('div');
root.appendChild(document.createTextNode('Hello World!'));
document.body.appendChild(root);
相比 HTML,JS 具有更灵活的特性。由于实现了标准的 DOM API,你可以使用前端社区中大多数优秀的前端框架,如 Vue、Rax、React 等等,具体可以参考开发文档。
当然,对于一个 SSR 应用,还是推荐使用 HTML 作为入口,具体可以参考开发文档。
有限的 CSS 支持
到目前为止,Kraken 还不支持使用层叠样式表(CSS),也就是说你无法使用 .css
文件或者 <style>
标签。修改节点样式的方式是使用内联的 CSS 或者节点的 style
属性。
const div = document.createElement('div');
div.style.color = 'red'; // 使用 style 属性.
div.setAttribute('style', 'color: red; font-size: 16px;'); // 使用内联 CSS Text.
有限的 DOM & 全局 API 支持
在 Kraken 中,并不是所有的 DOM 和全局 API 被支持。抛开浏览器的历史包袱,我们实现了大部分现代的、高频使用的、用户友好的 W3C API。
更多详细的支持列表,可以参考站点的 API 文档。
样式能力差异
请参考与浏览器差异文档。
本地存储
在浏览器中,我们经常使用 LocalStorage
进行本地数据的存储,而在 Kraken 中则使用 AsyncStorage
实现本地存储,它提供了更高效的异步 API 以防止 I/O 阻塞 UI 线程,更多信息可以查看异步本地存储。