antdesign 所兼容的浏览器_Deno v0.3.0 来啦！浏览器兼容更进一步了

前言

2019年2月18日，发布了Deno@v0.3.0版本。

在这个版本里，主要的API做了修改变更，原来import的方式引用核心模块import deno from "deno" 现在被全局变量Deno代替。同时，仍然允许代码里的Deno特性可以在浏览器中运行。目前新版本会兼容以前import deno的方式使用其核心方法，但在以后的版本会删除这方面的兼容，请更新现有的deno代码。

此次版本官方的变更主要有：

添加Deno全局变量对象
添加window.location
添加Deno.version对象，对象包括所支持的TypeScript版本号
添加Deno.execPath
在File类里，添加seek和实现对应的Seeker
修复使用文件时候无扩展名的处理
添加Deno.run使用时候的环境传参
打开了v8_postmortem_support
升级V8 至7.4.158版本
可以使用适当目录的缓存文件
REPL支持多行recoverable errors。
遵守TypeScript的NO_COLOR输出
支持范围变量，解锁了REPL异步操作和报错颜色浏览器

Deno使用全局化带来期待

用JavaScript写的Deno代码未来可以多端兼容

注：
如果是用 JavaScript 写的代码，同时不依赖Deno的原生API，就可以兼容 Deno环境和浏览器环境使用。
如果 JavaScript 代码里包含了 Deno原生API的依赖，如果依赖的API只是能以浏览器的方式兼容，就需要实现一个window.Deno的兼容对应的原生API就能保证代码的兼容。

例如以下代码在Deno环境下执行

async function main() {console.log(Deno.platform);
}
main();

在浏览器，如果要兼容 Deno.platform 的使用，就可以模拟 Deno 的全局变量的对应 API

window.Deno = {};
Deno.platform = (function(w) {const userAgent = w.navigator.userAgent;let arch = "x64";let os = "Unknown";if (/win32|wow32/i.test(userAgent)) {arch = "x32";}if (/mac os/i.test(userAgent)) {os = "Mac";} else if (/linux/i.test(userAgent)) {os = "Linux";} else if (/windows|win32/i.test(userAgent)) {os = "Window";} return {arch,os,}
})(window)async function main() {console.log(Deno.platform);
}
main();

关于兼容浏览器的Deno的原生API
- 大部分API可能无法实现，例如readFile,readDir之类的。但是如果将readFile利用input[type="file"]的方式实现也未尝不是一个方向，即利用浏览器的能力伪实现系统依赖功能。
- 可以实现部分非系统功能依赖的API例如Deno.env()、Deno.platform之类的

浏览器API的兼容化

本次Deno升级到v0.3.0版本，新增了window.location属性，意味着对浏览器Web API的兼容更也更进一步了。

浏览器的Web API通常是挂载在全局的window变量上。在Deno的环境里，也有个全局挂载对象window，挂载在window上的属性都可以直接使用。

例如在Deno@v0.3.0环境里，执行一下代码:

const apiList = Object.keys(window)console.log(`Supported global API [count: ${apiList.length}]: rn`);
console.log(`${apiList.join(',')} rn`);

会打印出一下信息

截至Deno@v0.3.0 版本里，挂载在window的Web API有一下20个
- window
- atob
- btoa
- fetch
- clearTimeout
- clearInterval
- setTimeout
- setInterval
- location
- Blob
- CustomEvent
- Event
- EventTarget
- URL
- URLSearchParams
- Headers
- FormData
- TextEncoder
- TextDecoder
- performance
上述 Web API 的使用方式，和浏览器的使用一致，使用方法，都可以在 MDN web 开发文档里查到。
常用的浏览器支持的API在Deno环境下都可以使用
- 例如location、fetch

用JavaScript写的代码（无Deno引用）可以多端兼容

例如一下JavaScript代码在Deno环境和浏览器环境执行，结果都一样的。

async function main() {const res = await fetch("https://cnodejs.org/api/v1/topic/5433d5e4e737cbe96dcef312");const json = await res.json();console.log("Fetch result: rn");console.log(JSON.stringify(json));
}
main();

浏览结果

Deno 环境下结果

后记

最后比较有意思的是，Deno在发布v0.3.0版本后，官方的介绍从原来的

A new way to JavaScript

替换成

A browser-like command line runtime

每次的Deno的每次较大的版本变更，介绍语都有一定的变更，代表着该次变更的影响，但万变不离其宗就是逐步朝着原有的浏览器全兼容的方向去发展。

如果想更加方便进行技术交流，可以关注我公众号 “大海码”。