一篇关于react历史的流水账

react 目前已经更新到 V16.3,其一路走来,日臻完善,笔者接触 react 两年有余,在这里做一个阶段性的整理,也对 react 的发展和我对 react 的学习做一个整体记录。

笔者是在 16 年初开始关注 react,而实际上那个时候 react 已经发布快三年了, 16 年初的我写页面还是主要使用 backbone.js、Jquery,并且认为,相比于纯粹使用 Jquery 的“刀耕火种”的时代,使用 backbone.js 已经足够方便并且不需要替代品了。

这篇文章会从 react 开源之初进行讲起,直到 2018 年六月。

阅读更多

浅谈前端中的二进制数据类型

目前在一个项目中,WebSocket部分由于后端使用了gzip压缩,前端处理起来废了一点时间,从而发现自己在二进制数据类型这个知识点还存在一定的盲区,因此这里进行总结。

阅读更多

Linux服务器初始化

当我们开始使用一个新的服务器的时候,首先一定要对服务器的登陆等做一些修改工作,笔者曾经就因为对服务器登陆安全没有重视,导致服务器数据全部丢失。接下来我们按照步骤,罗列出应该做的一些事情。

阅读更多

dva源码解读

声明

本文章用于个人学习研究,并不代表 dva 团队的任何观点。

原文以及包含一定注释的代码见这里,若有问题也可以在这里进行讨论

阅读更多

Proxy和Reflect双向数据绑定的微框架

写在前面:这篇文章讲述了如何利用Proxy和Reflect实现双向数据绑定,个人系Vue早期玩家,写这个小框架的时候也没有参考Vue等源代码,之前了解过其他实现,但没有直接参考其他代码,如有雷同,纯属巧合。

代码下载地址:这里下载

综述

关于Proxy和Reflect的资料推荐阮老师的教程:http://es6.ruanyifeng.com/ 这里不做过多介绍。

实现双向数据绑定的方法有很多,也可以参考本专栏之前的其他实现,我之所以选择用Proxy和Reflect,一方面是因为可以大量节约代码,并且简化逻辑,可以让我把更多的经历放在其他内容的构建上面,另外一方面本项目直接基于ES6,用这些内容也符合面向未来的JS编程规范,第三点最后说。

由于这个小框架是自己在PolarBear这个咖啡馆在一个安静的午后开始写成,暂且起名Polar,日后希望我能继续完善这个小框架,给添加上更多有趣的功能。

阅读更多

深入浏览器web渲染与优化

本文主要分析和总结web内核渲染的相关内容,以及在这方面前端可以做的性能优化工作。

文章主要分为以下几个部分:

  • blink内核的渲染机制
  • chrome内核架构变迁
  • 分层渲染
  • 动画 & canvas & WebGl

这里的前两部分可能会有些枯燥,如果是前端工程师并且想立即获得实际项目的建议的,可以直接阅读第三部分和第四部分

阅读更多

JS的静态作用域

静态作用域

我们先来看下面这个小程序:

 //JS版本:
 function sub1() {
        var x;
        function sub2() { alert(x); }
        function sub3() { var x; x=3; sub4(sub2); }
        function sub4(subx) { var x; x=4; subx(); }
        x = 1;
        sub3();
    }

    sub1();
    
 #Python版本
def sub1():
    def sub2():
        print x
    def sub3():
        x=3
        sub4(sub2)
    def sub4(subx):
        x=4
        subx()
    x = 1
    sub3()

sub1()   

不用亲自运行,实际上输出结果都是1,这可能不难猜到,但是需要解释一番,鉴于Python和JS在这一点上表现的类似,我就以JS来分析。

我们知道,JS是静态作用域的,所谓静态作用域就是作用域在编译时确定,所以sub2中引用的x,实际上和x=3以及x=4的x没有任何关系,指向第二行的var x;

子程序的引用环境

实际上这里面还有一个子程序(注:子程序和函数不是很一样,但我们可以认为子程序包括函数,也约等于函数)的概念,sub2、sub3、sub4都是子程序,对于允许嵌套子程序的语言,应该如何使用执行传递的子程序的引用环境?

  • 浅绑定:如果这样的话,应该输出4,这对动态作用域的语言来说比较自然。
  • 深绑定:也就是输出1的情况,这对静态作用域的语言来说比较自然。
  • Ad hoc binding: 这是第三种,将子程序作为实际参数传递到调用语句的环境。

参数传递类型

参数传递类型我们普遍认为有按值传递和按引用传递两种,实际上不止。

下面是一张图:

这张图对应的第一种传递方式,叫做Pass-by-Value(In mode),第二种是Pass-by-Result(Out mode),第三种是Pass-by-Value-Result(Inout mode),图上说的比较明白,实际上如果有result就是说明最后把结果再赋值给参数。

第二种和第三种编程语言用的少,原因如下:

Potential problem: sub(p1, p1)
With the two corresponding formal parameters having different names, whichever formal parameter is copied back last will represent current value of p1