《JavaScript框架设计》这本书

虽然这本书的名字中有“框架”两个字,但是这本书更多的是对 JS 工具类函数的介绍。

为什么工具类函数可以花费400多页的篇幅进行介绍,这都要怪各个浏览器在实现上的差异,各种奇行种,以及 JS 这门语言的先天不足。

非常佩服作者司徒正美,应该是读过许多框架的源码,而且对各个浏览器之间的差异了然于胸。

还记得司徒正美在博客里说过的一句话,“如果你现在不去搞懂它,那么以后就更搞不懂了”。这句话说的是 React virtual dom 的源码,让我深受启发。

不要畏难,不要怕麻烦,认真阅读优秀的代码,博采众长,收为己用。

使用Jenkins自动编译部署前端项目

起因

之前,我们公司的前端项目的部署都是我手动敲命令,用 webpack 编译打包,然后用 FileZilla 或者 scp 到远端的服务器上。
正式上线的时候倒还好,不是特别麻烦,只是偶尔也会手忙脚乱出现小问题。
可是到后来系统变得越来越复杂了,团队的人慢慢变多的时候,这项工作就变得相当耗时和麻烦了。每改完一些bug,我就要重复相同的工作,不胜其烦。

Read More...

后台类系统组件——通知

需求

一个后台系统经常需要提示用户个各种信息,有后端返回的错误,也有前端验证的提示,还有操作成功后的提示。不同的提示应该有不同的颜色或外形来区别,同时这些提示不应该打断用户的操作。

对于前端开发者而言,这种小组件应该尽量的轻量,无依赖(不随系统框架变化而影响),方便业务中调用(良好的api设计)。

下面我分享一下我在工作中写的一个通知组件(非常简单,还有许多可以改进的地方)。

预览图

Read More...

CSS 级联

样式表有三种来源:作者、用户、用户代理(浏览器默认)。

  • 作者 :作者在源文件中规定样式,可以通过内联或者外部资源这两种方式。
  • 用户 :用户可以用某种方式给特定的网站规定样式。
  • 用户代理 :用户代理默认样式代表了文档元素约定俗成的样式。(比如,对于多数浏览器来说 EM 元素代表斜体。)

    Read More...

浏览器的渲染过程

基本流程

浏览器在接收到网络资源后,会进行如下所示的基本流程:

解析 HTML 和 CSS 构建 DOM 和 CSSOM -> 构建渲染树 -> 布局 -> 绘制

浏览器首先开始解析 HTML 文档,将每个 HTML 标签解析成 DOM 节点,同时解析样式文件和内联样式,生成 CSSOM。然后将 DOM 和 CSSOM 合成为渲染树。再利用渲染树计算每个节点的几何信息,确定其在屏幕上的具体位置。最后,浏览器遍历渲染树,绘制每个节点。

Read More...

继承与原型链

原型链

js中没有类(class),在oop方面只有对象这一种数据结构。每个对象都有个属性指向其原型,而其原型又指向它的原型,一直指向null为止,这便是原型链。

当访问一个对象的属性时,不止会访问这个对象,还会顺着原型链一层一层往上寻找同名的属性,直到找到该属性或者到达原型链的末端为止。

Read More...

英语从句语法

从句是相对于主句而言的,即它是从属于某一个主句,而不能单独作一个句子。

在英语中,主要有三大从句,即名词性从句(包括主语从句,宾语从句,表语从句,同位语从句)、形容词性从句(即定语从句)、副词性从句(即状语从句,包括时间、条件、结果、目的、原因、让步、地点、方式等)。

Read More...

React的setState

WHAT

setState(nextState, callback)

Performs a shallow merge of nextState into current state. This is the primary method you use to trigger UI updates from event handlers and server request callbacks.

将当前state和新的state执行浅合并。触发视图更新的主要方法(另一个方法:forceUpdate())。

Read More...