分类「前端」(共 7 篇文章)

前言

最近想重拾编译原理,还记得编辑原理的基本流程:

词法分析 -> 语法分析 -> 语义分析 -> 中间代码生成 -> 代码优化 -> 目标代码生成

对于几乎没有学过编译原理的人来说,充分理解并掌握这么多流程的确不现实,但可以从实现一个最简单的 JSON Parser 入手。

对于 Parser 来说,主要负责的是词法分析、语法分析和语义分析。

其中,词法分析将代码中的关键字、变量名、字符串、直接量和大括号等等转换成标记(token)并归类,这一步叫 tokenize。

很荣幸能够在大三的暑假作为一名实习生进入阿里巴巴参与暑期实习,实习工作最大的收货就是学习掌握了 Rax 项目的开发,并在有了一些自己的感悟。

Rax 对我来说是一个全新的、入职前从未听说过的一个前端框架,相信对于大多数人来说也是如此。虽说其与 Weex 有非常紧密的联系,但相比之下网上的技术文章和博客对 Rax 的介绍非常之少,除官方文档外仅有几篇由官方提供的文章。所以我希望能够通过接下来的几篇文章,向大家介绍一下 Rax。

首先,让我们来回顾一下,JavaScript 中作用域的概念。作用域是一个变量及函数能够被正常访问的范围,在此范围之外就无法进行访问。

与其它一些语言不同, ES6 之前 JavaScript 的作用域只分为全局作用域和函数作用域两种,并不包含块级作用域。如下的代码会造成一些问题:

function loop() {for (var i = 0; i < 10; i++) {
        // Do some thing...
    }
    console.log(i);
    // 输出:10
}

loop();

这段代码中,我们的本意是让循环变量 i 仅在循环中可访问,但由于在 JavaScript 中不具有块状作用域,因此实际上在运行时变量 i 拥有函数作用域,在整个函数内都可访问。

然而,JavaScript 中与作用域相关的原理并没有那么简单, 下面让我们来深入了解一下。

JavaScript 是一门面向对象(Object-Oriented, OO)的语言,但是它的面向对象机制与其它的 OO 语言(如 C++、Java 等)有很大的区别,其中最大的不同点就是 JavaScript 不存在类的概念。在其它 OO 语言中,类是实现对象的基础,每一个对象都是通过类来创建的,可以说,如果没有类就没有对象。然而 JavaScript 底层就没有类的概念,那么它的面向对象机制是如何实现的呢?

原型模式是实现面向对象机制的一种方法,完全不需要使用到类的概念,每一个对象都是由另外一个对象作为其原型,并通过委托等方式来实现面向对象的那些核心概念。JavaScript 就是这样通过原型来实现面向对象机制的。

React 的好处很多,组件化简化了开发,虚拟 DOM 提升了页面性能,等等。当然,React 也有其缺点,其中影响最大的一点便是由于 React 是一个非常重型的框架,超过 2w 行的代码,即便是压缩后也超过 300k,导致了它的初始化加载非常费时。光是把这样的一个 JS 打包文件加载出来就要耗费一大笔时间,跟何况它的初始化执行过程也要达到百毫秒级,这样还是很影响用户体验的。

那么有没有什么方法能避免 React 这样的不足之处呢?

React 的渲染机制和其它类型的 MV * 框架有很大的区别。通过由数据构成的虚拟 DOM,React 便可在浏览器中一个根节点上渲染出一个完整的真实 DOM 树,从而完成整个页面的渲染。这是在浏览器客户端中完成的渲染操作。而在服务器(Node.js 环境)上,虽然没有 DOM,在客户端初次请求时,可以通过虚拟 DOM,将组件和数据渲染成真实 DOM 的 HTML 字符串,像其它后端语言如 PHP 那样把一个完整的 HTML 页面传输给浏览器,这就是服务端渲染。这同时也给了 React 一个很大的优势,让一个前端 View 层也有了 SEO 友好的展现方式。

Copyright © 2017 dremy.cn
皖ICP备16015002号