从前端到全栈：JavaScript逆袭之路

时间  2019-11-13
标签 前端 javascript 逆袭 之路 栏目 JavaScript 繁體版
原文   原文链接

JavaScript如何作到上天入地无所不能？JavaScript真的能一统江湖吗？javascript

背景

近年来，前端技术突飞猛进，前端已经不只仅是网页，更多的开始由狭义向广义发展。 前后涌现出了具有后端能力的node，具有移动开发能力的react native，具有游戏渲染能力的cocos2d-js，以及iOS上的热修复技术JSPatch等等新技术。 咋一看，几乎各个端都被JavaScript攻陷，大有一统江湖之势。 究竟，JavaScript如何作到上天入地无所不能？JavaScript真的能一统江湖吗？html

故事要从JavaScript的由来讲起。前端

乱世出英雄：JavaScript的诞生

高能瞎扯淡版，正经脸的同窗能够忽略

有人的地方就有江湖，有江湖的地方就有纷争。
故事要从当年的浏览器之战提及。
时间回到1994年，
（→ 那时候我仍是个宝宝~ #天真脸#）
景兄弟横空出世，并自带神器网景导航，战斗力爆表，势如劈竹，瞬时间威震天下。
一出世就武装到牙齿，武力值这么高还自带兵器，这个科学吗？
港真，我也以为不科学，也许跟熊孩子哪吒、女汉子雅典娜是一个品种吧？
这一切北方的老前辈微软大湿，都看在眼里，不甘天下尽归景兄弟这个初出茅庐的毛孩子，大湿积淀多年，潜心修炼一年，终于带着大杀器IE 1.0出关了，誓于景兄弟争个高低。
自此景兄弟的网景导航 VS 微软大湿的IE 的军备战争开始。
景兄弟仔细掂量，微软大湿财大气粗，内功深厚，臣妾实在是办不到啊啊啊啊啊啊。
景兄弟紧急召集门人商议对策，有一门人曰：”以咱们微薄之力硬磕，是万万使不得的。现在咱们，一是宜施行合纵之策，抱大腿，组成联盟！二是避其锋芒，出奇招致胜。“
因而景兄弟依照此策略，一方面找到了当时德高为重的另外一位前辈SUN，组成了开发者联盟。
（微软大湿：握草，联盟都粗来了，那我是否是得搞个部落？）
另外一方面，景兄弟找到了锻造大师布兰登，请布大师帮忙升级兵器网景导航，大师就是大师，不费吹灰之力就完成了强化升级，然而布大师突发奇想，原本这是近距离攻击兵器，要是有多一个远距离攻击的能力那岂不是更好？Just do it. 想罢大师就加了一个远距离攻击的feature。因而有了自带远距离攻击能力的网景导航2.0。景兄弟一看这么流弊内心甚是欢喜，不过远距离攻击的技能叫作LiveScript，感受不是特别Fashion。特然想到这不是跟SUN前辈联盟嘛，SUN家的Java正是独霸武林之时。不如把名字改为跟Java有关，蹭一把东风，蹭点光环。一拍脑壳，JavaScript！！！众门人一听：”好好好，JavaScript 流弊炫酷吊炸天！“
果真第一节下半场，景兄弟携强化过的网景导航2.0 战个痛快，那是杠杠的！人家一问，你咋还能远程攻击，你这个远程攻击用的是啥？答曰：JavaScript。“JavaScript，必定是跟SUN家Java是一个系列产品，必定很流弊！”#光环加成，各类膜拜脸#
微软大湿亏了一场，痛定思痛，也要搞远程攻击功能，果真不久，就祭出了一样带有远程攻击能力的IE 3.0，鉴于景兄弟的远程攻击叫作JavaScript，J开头的感受应该比较流弊，因此微软大湿的叫作JScript。
而后战争就从地面贴身肉搏战，开始逐步升级到了远距离核战争。
正所谓，城门失火，殃及池鱼。这么打下去苦逼的是搬砖的页面仔，就是我这种，处处都是雷区，无处下脚。
最后到了1997年，“联合国安理会秘书长”艾玛（ECMA）出来调停，多方签署了“核不扩散条约”，约束各类远程攻击武器的使用，这才走上了正轨。

背景：

1995年SUN开发了Java技术，这是第一个通用软件平台。Java拥有跨平台、面向对象、泛型编程的特性，普遍应用于企业级Web应用开发和移动应用开发。Java也伴随着互联网的迅猛发展而发展，逐渐成为重要的网络编程语言。名闻遐迩。 
1994年Netscape公司成立，并推出了本身的浏览器的免费版本 Netscape Navigator，很快就占有了浏览器市场。到了 1995 年，微软公司开始加入，并很快发布了本身的 Internet Explorer 1.0。 
1995年，当时在Netscape就任的Brendan Eich（布兰登·艾克），正为Netscape Navigator 2.0浏览器开发的一门名为LiveScript的脚本语言，后来Netscape与Sun Microsystems组成的开发联盟，为了让这门语言搭上Java这个编程语言“热词”，将其临时更名为“JavaScript”，往后这成为大众对这门语言有诸多误解的缘由之一。 
JavaScript最初受Java启发而开始设计的，目的之一就是“看上去像Java”，所以语法上有相似之处，一些名称和命名规范也借自Java。但JavaScript的主要设计原则源自Self和Scheme。JavaScript与Java名称上的近似，是当时Netscape为了营销考虑与SUN达成协议的结果。 
因此，JavaScript和Java其实没有半毛钱关系。html5

JavaScript推出后在浏览器上大获成功，微软在不久后就为Internet Explorer 3.0浏览器推出了JScript，以与处于市场领导地位的Netscape产品同台竞争。JScript也是一种JavaScript实现，这两个 
JavaScript语言版本在浏览器端共存意味着语言标准化的缺失，对这门语言进行标准化被提上了日程，在1997年，由Netscape、SUN、微软、宝蓝等公司组织及我的组成的技术委员会在ECMA（欧洲计算机制造商协会）肯定定义了一种名叫ECMAScript的新脚本语言标准，规范名为ECMA-262。JavaScript成为了ECMAScript的实现之一。ECMA-262 第五版，便是ES5。java

> ECMA-262，包括ES5, ES6等是一个标准，JavaScript是ECMAScript的一个实现。node

完整的JavaScript实现应该包含三个部分：react

在网景导航2.0和IE 3.0出现以后的几年间，网景和微软公司不停的发布新版本的浏览器，支持更多的新功能。自此拉开了浏览器之战的序幕。这场浏览器之战到如今还在继续，如下一张图看清楚过程。android

从浏览器之战能够看出，各家浏览器比拼的大体两个方面视觉体验（渲染排版）和速度（脚本运行）。ios

> 因此一个完整的浏览器组成，至少包含两个部分：git

补充一个市面常见浏览器的内核和JavaScript引擎搭配：

其余JavaScript引擎，Rhino，由Mozilla基金会管理，开放源代码，彻底以Java编写，能够看作SpiderMonkey的Java版。 注意：webkit不仅仅只是一个排版引擎，webkit = 排版引擎 + JavaScript引擎。 > 因此，JavaScript是动态语言，它的运行都是基于JavaScript引擎，引擎大都是由静态语言实现C++、Java、and so on。JavaScript的能力也是由引擎赋予。无论是浏览器环境中是window，亦或是node环境中的process，均是由引擎提供。 （番外：Mozilla的人不知道为啥特别喜欢猴子，常常以猴子命名技术，因此看到带Monkey的，十有八九估计是他们搞的。）

诺曼底登录：JavaScript Binding/Bridge 桥接技术

在浏览器环境中，DOM、BOM、window对象、setTimeout/setInterval，alert，console等方法均不是JavaScript自身具有的能力，而是浏览器native实现，而后经过JavaScript引擎注入到JS运行的全局上下文中，供JS使用。 鉴别方式，在调试器console中打出来，带有[native code]的便是：

讲道理：

  1. JavaScript运行 → 依赖于JavaScript引擎 ← 浏览器集成了JavaScript引擎，同时经过JavaScript引擎注入native代码工JS脚本使用
  2. 发散一下思惟，只要有JavaScript引擎，就能运行JS脚本，无论有没有浏览器！只是缺乏浏览器提供的alert，window等方法。
  3. 既然浏览器能够往JavaScript引擎中注入代码，赋予JS脚本在网页中特殊的能力，同理咱们能够本身集成JavaScript引擎，本身定义本身的方法往JavaScript引擎中注入，赋予JS更多更强的自定义能力！ 
    注入的关键是：值类型相互对应，Obj映射class的一个实例，function映射一个句柄或者引用

JavaScript数值型中的坑

JavaScript内部，全部数字都是以64位浮点数形式储存，即便整数也是如此。因此，1与1.0是相同的，是同一个数。 
这就是说，在JavaScript语言的底层，根本没有整数，全部数字都是小数（64位浮点数）。容易形成混淆的是，某些运算只有整数才能完成，此时JavaScript会自动把64位浮点数，转成32位整数，而后再进行运算。因为浮点数不是精确的值，因此涉及小数的比较和运算要特别当心。尽可能避免使用JavaScript作精准计算和密集计算。

根据国际标准IEEE 754，JavaScript浮点数的64个二进制位，从最左边开始，是这样组成的。

  • 第1位：符号位，0表示正数，1表示负数
  • 第2位到第12位：储存指数部分
  • 第13位到第64位：储存小数部分（即有效数字） 符号位决定了一个数的正负，指数部分决定了数值的大小，小数部分决定了数值的精度。 IEEE 754规定，有效数字第一位默认老是1，不保存在64位浮点数之中。也就是说，有效数字老是1.xx...xx的形式，其中xx..xx的部分保存在64位浮点数之中，最长可能为52位。所以，JavaScript提供的有效数字最长为53个二进制位（64位浮点的后52位+有效数字第一位的1）。

内部表现公式：(-1)^符号位 * 1.xx...xx * 2^指数位

精度最多只能到53个二进制位，这意味着，绝对值小于2的53次方的整数，即-(253-1)到253-1，均可以精确表示。 而大部分的后端语言，C++、Java、Python等的long型都是能够支持到64位，所以long型数据从后端语言传给JavaScript会发生低位截断。遇到这种状况通常使用String处理，如须要在JavaScript中作long型计算，须要自行实现计算器。

有了自行往JavaScript引擎中注入的想法，接下来就是分析可行性。 大部分是JavaScript引擎是使用C++编写，若是本身的程序使用的是C++能够很方便的进行注入，若是是OC，可使用OC和C++混编的形式。 其余语言怎么破？ 要在一门静态语言上与动态语言JavaScript相互调用，最便捷的方式是找到一个这门语言实现的JavaScript引擎（开源），直接进行集成，注入。若是没有，则须要使用多一层桥接，把这门语言的接口暴露给C++，再由C++实现的JavaScript引擎将接口注入供JavaScript使用。

服务端集成思路&实践：

nodeJS中的桥接

咱们都知道nodeJS，可是nodeJS的运行依赖于Google的V8 引擎，V8是C++实现，底层使用C++实现底层功能，好比网络，数据库IO，对外暴露一个构造器接口注入到上下文中，注意此处暴露的只是一个构造器接口而不是一个建立完的实例。而后实现了一个require的hook函数。当使用require加载一个JS模块时，跟网页中使用AMD 的require并没有异样，当使用require加载系统库，既是C++的模块时，会调用暴露出来的构造器接口，获得一个实例对象。无论是装载JS模块仍是装载C++模块，获得的均可以看作是一个Module Object，node会将装载完的模块缓存到bindingcache中，下次在别处的代码中使用require装载模块时，就会先去bindingcache中查找，若是找到了则返回该module object，若是没找到再执行上面的装载流程。 这就是node的基本原理：C++封装底层操做，经过V8注入，使得JS脚本有网络和IO能力

基于Spring的桥接

以上说到的几个都是C++层面的应用，那么经典的Java怎么玩？是否是Java就必须是静态语言的玩法，没有办法像C++之类的，可使用JS的动态特性？ 固然不是。这个时候，咱们须要提及前面介绍过的一个JS引擎 Rhino，Rhino是彻底由Java编写，可想而知，Rhino几乎就是为Java应用而生的。 用法是这样：

  1. 首先在咱们的Java应用中集成Rhino；
  2. 全部的IO操做，网络操做等，都封装成service，并提供增删改查，setter && getter等多种方法
  3. 经过spring，把这些service bean注入到Rhino中；
  4. 把业务逻辑写到JS代码中，JS代码调用多个已注入的Java service处理业务逻辑，拼装数据返回！

好处：修改业务逻辑不须要修改Java代码，也就是不须要从新编译和部署，只须要刷新下跑在Rhino中的JS代码便可。以往Java应用的一个痛点是部署，须要从新编译，打包，部署重启服务器，如今以这种形式开发，能够达到服务端的热更新和热部署。既能够享有Java服务的稳定性和可靠性，又能够享有JS的灵活性。 这种技术和用法在差很少十年前就有过，前EMC的工程师基于EMC著名的商业产品Documentum，设计了一套Java开源的中小企业CMS系统Alfresco，在该系统中实现了这种技术，这种技术基于spring，叫作spring-surf，作了一个胶水层。能够看作小十年前的node吧。

Demo，使用spring-surf框架的系统中一个webscript模块

  1. categorynode.get.xml定义URL拦截器和权限控制；

  2. .get指明是处理GET请求，RESTful；

  3. 在categorynode.get.js中调用已注入的Java Bean处理业务逻辑；

  4. 若为网页请求返回.html.ftl，若为Ajax，返回.json.ftl；

（此处配套使用的是FreeMarker模板引擎）

> categorynode.get.desc.xml

<webscript>  
  <shortname>category node</shortname>
  <description>Document List Component - category node data webscript</description>
  <url>/slingshot/doclib/categorynode/node/{store_type}/{store_id}/{id}/{path}</url>
  <url>/slingshot/doclib/categorynode/node/{store_type}/{store_id}/{id}</url>
  <format default="json">argument</format>
  <authentication>user</authentication>
  <transaction allow="readonly">required</transaction>
  <lifecycle>internal</lifecycle>
</webscript>

> categorynode.get.js

model.categorynode = getCategoryNode();

function getCategoryNode(){  
   try{
      var items = new Array(), hasSubfolders = true,
         evalChildFolders = args["children"] !== "false";
      var catAspect = (args["aspect"] != null) ? args["aspect"] : "cm:generalclassifiable",
         nodeRef = url.templateArgs.store_type + "://"
                    + url.templateArgs.store_id + "/"
                    + url.templateArgs.id,
         path = url.templateArgs.path,
         rootCategories = classification.getRootCategories(catAspect),
         rootNode, parent, categoryResults;
      if (rootCategories != null && rootCategories.length > 0) {
         rootNode = rootCategories[0].parent;
         if (path == null) {
            categoryResults = classification.getRootCategories(catAspect);
         } else {//...}

         for each (item in categoryResults) {
            if (evalChildFolders) {
               hasSubfolders = item.children.length > 0;
            }

            items.push( {
               node: item,
               hasSubfolders: hasSubfolders,
               aspect: catAspect
            });
         }
      }
      return ({ items: items });
   }
   catch(e) { return; }
}

> categorynode.get.html.ftl

<#include "categorynode.get.json.ftl">

==> categorynode.get.json.ftl

<#escape x as jsonUtils.encodeJSONString(x)>  
{
   "totalResults": ${categorynode.items?size?c},
   "items":
   [
   <#list categorynode.items as item>
      <#assign c = item.node>
      {
         "nodeRef": "${c.nodeRef}",
         "name": "${c.name}",
         "index": "${c.properties["lem:index"]!"0"}",
         "description": "${(c.properties.description!"")}",
         "hasChildren": ${item.hasSubfolders?string},
         "aspect": "${item.aspect!""}",
         "userAccess":
         {
            "create": ${c.hasPermission("CreateChildren")?string},
            "edit": ${c.hasPermission("Write")?string},
            "delete": ${c.hasPermission("Delete")?string}
         }
      }<#if item_has_next>,</#if>
   </#list>
   ]
}
</#escape>

移动端集成思路&实践：

React Native中的桥接

React Native目前也是异常火爆，RN程序的运行依赖于Facebook的RN框架。在iOS、Android的模拟器或是真机上，React Native使用的是JavaScriptCore引擎，也就是Safari所使用的JavaScript引擎。可是在iOS上JavaScriptCore并无使用即时编译技术（JIT），由于在iOS中应用无权拥有可写可执行的内存页（于是没法动态生成代码），在安卓上，理论上是可使用的。JavaScriptCore引擎也是使用C++编写，在iOS和安卓中，JavaScriptCore都作了一层封装，能够无须关心引擎和系统桥接的那一层。iOS/Android系统经过JavaScriptCore引擎将定制好的各类原生组件注入，如：listview，text等。

Cocos2d-JS中的桥接

cocos2dx是游戏开发中很是经常使用的游戏渲染引擎，有一系列的产品，如：cocos2dx(C++)，cocos2d-lua（lua）, cocos2d-js(JavaScript)等多个产品。其中最新退出的是cocos2dx的JS版本的cocos2d-js，编写游戏渲染特效代码相比于C++和lua很是方便。对于作须要常常更新的渲染场景，C++是静态语言，每次修改都须要从新编译才能运行，显然是不合适的。天然也就想到了脚本语言，lua和js，二者有些相似，都是动态语言，只须要集成一个运行引擎，提供一个运行的容器便可运行，同时经过引擎注入底层方法供脚本调用便可。lua好处是精简，语法精简，引擎页很小很精简，因此不可避免的代码量会比js多，同时学习成本比较高。js的好处是有ECMAScrtpt的核心，语法比较丰富，同时有支持一些高级属性。在cocos2d-js中，cocos2dx(C++)集成了SpiderMonkey（C++）做为JS运行引擎，中间作了一个胶水层既是JS Binding，经过引擎注入了一个cc的全局对象，映射的是底层C++的一个单例C++实例。表面上写的是JS代码，实际上操做的是底层的C++。cocos2d-js是代码能够运行在多种环境中，当运行的网页环境中时，使用的是cocos2d-html5引擎，底层操做的是canvas；当运行在客户端上时，使用的是cocos2dx引擎，底层操做的是C++，再由C++去操控openGL作绘制和渲染。提供相同的API，对开发者几乎是透明无差别的，开发者只须要关注实现效果便可。达到一套代码，多端运行（网页端，客户端）。

JSPatch技术中的桥接

JSPatch是目前比较流行的iOS上的热修复技术，JSPatch 能作到经过 JS 调用和改写 OC 方法最根本的缘由是 Objective-C 是动态语言，OC 上全部方法的调用/类的生成都经过 Objective-C Runtime 在运行时进行，咱们能够经过类名/方法名反射获得相应的类和方法。JSPatch 的基本原理就是：JS 传递字符串给 OC，OC 经过 Runtime 接口调用和替换 OC 方法。 
关键技术之一是 JS 和 OC 之间的消息互传。JSPatch里包含了，一个JS引擎JavaScriptCore（Safari，React Native用的同款）。用到了 JavaScriptCore 的接口，OC 端在启动 JSPatch 引擎时会建立一个 JSContext 实例，JSContext 是 JS 代码的执行环境，能够给 JSContext 添加方法，JS 就能够直接调用这个方法。本质上就是经过JavaScriptCore引擎注入，暴露OC的方法供JS调用来实现动态修改OC的反射。

Demo，iOS热更新，热修复：

  1. 集成JavaScriptCore引擎；
  2. 经过引擎，桥接JS和OC；
  3. 经过JS修改OC反射。
require('UIView');  
//1,在全局查找 UIView变量，查到则返回，
//  查不到则生成 UIView = { __clsName: "UIView" }
//2,将类名经过桥接层，传给OC
//3,OC经过runtime方法找出这个类全部方法，返回给桥接层
//4,桥接层为JS生成对应的JS 属性/方法
var demoView = UIView.alloc().init();  
demoView.setBackgroundColor(require('UIColor').grayColor());  
demoView.setAlpha(0.2)

详细的JSPatch技术介绍请移步：https://github.com/bang590/JSPatch/wiki

关于JavaScript引擎： 
在iOS 或 android 上可以运行的JavaScript 引擎有4个：JavaScriptCore，SpiderMonkey，V8，Rhino。下面这个表格展现各个引擎在iOS 和 Android 的兼容性。

由于iOS平台不支持JIT即时编译，而V8只有JIT模式，因此V8没法在iOS平台使用（越狱设备除外，想体验iOS JIT的同窗能够自行越狱）。 因此，目前能够作到横跨iOS和Android双平台的JS引擎，只有两款，便是SpiderMonkey和JavaScriptCore。 JavaScript引擎会受不少东西影响，好比交叉编译器的版本、引擎的版本和操做系统的种类等。 
至于如何选择，能够参考:《Part I: How to Choose a JavaScript Engine for iOS and Android Development》

至此，JavaScript从立足于前端，到征战全端的逆袭之路，能够总结为“携引擎以令天下”。 不足之处，还请各位看官轻拍~

参考文章：

bang590/JSPatch中问参考文档
Cocos2d-JS | Cocos2d-x官方参考文档
Alfresco官方参考文档
《Browser Wars: The End or Just the Beginning?》
《Part I: How to Choose a JavaScript Engine for iOS and Android Development》
《React Native 从入门到源码》

相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程