Deno v0.3.0 来啦！浏览器兼容更进一步了

Posted 2021-04-30 大海码

前言

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

在这个版本里，主要的API做了修改变更，原来import的方式引用原生API的方式  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代码未来可以多端兼容

注意：

1. 如果是用 JavaScript 写的代码，同时不依赖Deno的原生API，就可以兼容 Deno环境和浏览器环境使用

2. 如果 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}]: \r\n`);
console.log(`${apiList.join(',')} \r\n`);

会打印出一下信息，显示Deno支持的全局API

• 截至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 开发文档里查到。

• 常用的浏览器支持的 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: \r\n");  
  console.log(JSON.stringify(json)); } main();

• 浏览结果

• Deno 环境下结果

后记

    最后比较有意思的的是， Deno 在发布  v0.3.0 版本后，官方的介绍从 A new way to JavaScript 替换成   A browser-like command line runtime 。每次的Deno的每次较大的版本变更，介绍语都有一定的变更，代表着该次变更的影响，但万变不离其宗就是逐步朝着原有的浏览器全兼容的方向去发展。

上一篇文章：

想了解更多 Deno的学习资料

方法2：浏览器打开

            github.com/chenshenhai/deno_note