跨端轻量JavaScript引擎的实现与探索

、JavaScript

1.JavaScript语言

JavaScript是ECMAScript的实现,由ECMA 39(欧洲计算机制造商协会39号技术委员会)负责制定ECMAScript标准。

ECMAScript发展史:

时间	版本	说明
1997年7月	ES1.0 发布	当年7月，ECMA262 标准出台
1998年6月	ES2.0 发布	该版本修改完全符合ISO/IEC 16262国际标准。
1999年12月	ES3.0 发布	成为 JavaScript 的通行标准，得到了广泛支持
2007年10月	ES4.0草案发布	各大厂商意见分歧，该方案未通过
2008年7月	发布ES3.1，并改名为ECMAScript 5	废除ECMAScript 4.0，所以4.0版本不存在
2009年12月	ESt 5.0 正式发布
2011年6月	ES5.1 发布	该版本成为了 ISO 国际标准（ISO/IEC 16262:2011）
2013年12月	ES6 草案发布
2015年6月	ES6 正式发布，并且更名为“ECMAScript 2015”	TC39委员会决定每年发布一个ECMAScript 的版本

2.JavaScript引擎

JavaScript引擎是指用于处理以及执行JavaScript脚本的虚拟机。

常见的JavaScript引擎:

喽，大家好，我是雷工。

JavaScript的运算符可以根据所需表达式的个数，分为一元运算符、二元运算符、三元运算符。

一、一元运算符

1、一元运算符：只需要一个表达式就可以运算的运算符。

示例：正负号

一元运算符有两种，++，--

2、自增：

符号：++

用途：让变量值+1

前置自增和后置自增单独舒勇没有区别（如上图所示↑）

前置自增和后置自增如果参与运算就有区别（如下图所示↓）

关于自增（++）实际开发中，一般都是单独使用，后置++应用更多。

3、自减

符号：--

用途：让变量值-1

4、应用场景：

常常用于计数使用，在循环语句中使用一元运算。

5、注意事项：

一元运算符连写，中间不能有任何的空格。

6、一元运算符总结

6.1、一元运算符每次只能固定的加1或者减1；

6.2、如何解决让变量每次累加任何大小的值？可以使用赋值运算符+=实现。

示例：

let x = 1;
x += 9;//想实现每次累加多少就+=多少；

6.3、一元运算符只有赋值给新的变量，新的变量值有区别的。

示例：

let x = 1;
let y = x++;
let z = ++x;
console.log(x); //结果为：2 ；

console.log(y); //结果为：1 ；原因：++在变量x的后面，计算机先将变量x原来的值赋值给变量y,赋值完成后，变量x自己再加1；

console.log(z); //结果为：2 ；原因：++在变量x的前面，计算机先将变量x加1，然后将加1后的值给变量y，

7、一元运算符面试题

示例1：

let a=1;
let sum=a++ + ++a + a;
//第一步：1 + ++a + a
//第二步：1 + ++2 + a
//第三步：1 + 3 + 3
//第四步：结果为7

示例2：

let x =1;
let sum =++x + x++;
console.log(sum);//结果为4

示例3：

let y = 1;
let sum =y++ + y++;
console.log(sum);//结果为3

二、二元运算符：

示例：

let n =30+40

用WebAssembly的导入导出功能可以灵活地实现宿主JavaScript程序与加载的单个wasm模块之间的交互，那么如何在宿主程序与多个wasm之间传递和共享数据呢？这就需要使用到Global这个重要的对象了。

一、数值类型全局变量
二、将JavaScript函数设置为全局变量
三、利用全局变量处理字符串

一、数值类型全局变量

Global全局变量支持多种值类型，包括数组（i32/i64和f32/f64）、向量和引用类型（externref和funcref）。下面的实例利用Global提供了全局计数的功能。在WebAssembly Text Format (WAT)文件app.wat中，我们从宿主JavaScript应用中导入了一个i32类型的可读写（mut表示可以修改）的全局变量，导入路径为“imports.counter”，我们将其命名为$counter。在用于自增的导出函数increment中，我们通过执行global.get指令读取全局变量的值，并将其加1之后，执行global.set指令对全局变量重新赋值。

(module
 (global $counter (import "imports" "counter") (mut i32))
 (func (export "increment")
 (i32.add (global.get $counter) (i32.const 1))
 (global.set $counter)
 )
)

在index.html文件中，我们在页面中添加了一个“Increment”按钮，并利用一个<span>显式计算器当前的值。JavaScript脚本通过调用WebAssembly.Global构造函数将代表全局变量的Global对象创建出来后，调用WebAssembly.instantiateStreaming加载app.wat编译生成的app.wasm模块文件，并将此Global对象包含在导入对象中。

<html>
<head></head>
<body>
<span id="counter">0</span>
<button id="btnInc">Increment</button>
<script>
const globalCounter = new WebAssembly.Global({ value: "i32", mutable: true }, 0);
 WebAssembly
 .instantiateStreaming(fetch("app.wasm"), {"imports":{"counter":globalCounter}})
 .then(results => {
document.getElementById("btnInc").onclick = ()=>{
 results.instance.exports.increment();
document.getElementById("counter").innerText = globalCounter.value;
 };
 });
</script>
</body>
</html>

wasm模块成功导入后，我们注册了按钮的click事件，使之在调用导出的increment函数后，重新刷新计数器的值。如下图所示，针对“Increment”的每次点击都将计数器加1（源代码）。

在线咨询

上一篇：HTML标签以及各个标签属性大全（网页制作必备）
下一篇：用CSS让DIV上下左右居中的方法

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商