Weekly Tech Report #2

[rainyear]

每周技术汇报 - 2015/07/19

TODO

• react-webpack-cookbook
• The Nature of Lisp | Lisp的本质
• 理解JavaScript的原型链和继承

---

1. Webpack X React

之前一个项目用Gulp作为React开发环境（React + Reflux + React-router Dev env starter），Webpack试过一下但是感觉文档并不充足，最近看到这本翻译的react-webpack-cookbook，按照介绍试了一下，开发环境下终于没有那么多问题了，配置文件如下：

// package.json

...
"scripts": {
    "dev": "webpack-dev-server --devtool eval --progress --colors --hot --content-base build",
    "prod": "NODE_ENV=production webpack -p --config webpack.production.config.js"
  },
...

// webpack.config.js
var path         = require('path');
var node_modules = path.resolve(__dirname, 'node_modules');
var pathToReact  = path.resolve(node_modules, 'react/dist/react.min.js');

module.exports = {
  entry: ['webpack/hot/dev-server', path.resolve(__dirname, 'app/app.js')],
  resolve: {
    alias: {
      // 'react': pathToReact
    }
  },
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: 'bundle.js',
  },
  module: {
    loaders: [{
      test: /\.jsx?$/,
      loader: 'babel'
    }],
    // noParse: [pathToReact]
  },
};

其实Webpack最吸引人的地方是可以对JS分开打包。虽然npm install安装各种包用起来很方便，但是等到要打包到线上环境时就会发现即使经过压缩，最后打包出来的bundle.js也有可能接近或超过1M。Webpack提供几种分离的方案（见书中4. 部署策略），可以对第三方包与应用进行分离：

plugins: [
    new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js')
  ]

不同路径下的页面分开加载，分开打包：

entry: {
    app: path.resolve(__dirname, 'app/main.js'),
    mobile: path.resolve(__dirname, 'app/mobile.js'),
    vendors: ['react'] // 其他库
  },
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: '[name].js' // 注意我们使用了变量
  },

对于单页应用（SPA），还可以对不同功能模块进行lazy load，这部分还没有实践，新项目部署时可以尝试使用，如果真的好用，那SPA就真的没有什么顾虑了！

2. The Nature of Lisp

以前读过这篇文章，最早接触Lisp可能是认知心理学里面用Lisp开发的ACT-R模型，后来也有尝试学习Lisp的语法，基本上与这篇文章的作者提到的问题相似，一方面“被无数的括号搞蒙了”，另一方面由于无法感受到其众多优点而感到懊恼，再加上缺少实践应用的场景，最终也没有深入学习下去。但是最近随着函数式编程的再度热门，我也试图重新学习SICP，所以又把这篇文章翻了出来。

这篇文章中作者用XML、Ant作为类比，慢慢推导出Lisp的“本质”，实际上就是为了说明一个核心问题：Lisp中的数据和程序（过程）并没有本质区别。这一点在SICP一书的开始就做了简单的介绍：

“In programming, we deal with two kinds of elements: procedures and data. (Later we will discover that they are really not so distinct.)”

摘录来自: Harold Abelson, Gerald Jay Sussman, Julie Sussman. “Structure and Interpretation of Computer Programs, Second Edition”。 iBooks.

虽然我暂时还不能用更简介、精确的描述来解读这一特质，但是Lisp确实是很值得学习的一门语言。或者说，学习它已经脱离了学习一门语言的语法细节的范畴，可以给以C作为编程入门语言的人带来很多不一样的观念和思维方式，让我们跳出以指针、内存等物理层面计算机工作原理的认知作为编程的思维背景，而以计算过程的数学抽象作为程序推演的理论基础。

关于学习SICP的这个项目（A Sketch of SICP，基于ipython notebook + calysto scheme），我最初的想法主要是摘录书中重要的概念作为一个阅读笔记和习题解答的练习，但是由于机械工业出版社的那本翻译版槽点太多，我直接读原版笔记几乎变成了全本翻译。

等全书学完之后我会尝试重新总结Lisp的本质。

3. JavaScript的原型链和继承

好吧，原文这排版这行文…看得好累。选择这篇文章单纯是因为前段时间整理过Js的上下文与作用域（图解Javascript上下文与作用域），原计划是将原型链包括在内的，后来发现太长，于是打算另起一篇，见图解Javascript原型链。

MEMO

• airbnb/javascript - ES5 only
• Flex 布局教程：语法篇 | Flex 布局教程：实例篇

---

1. airbnb JavaScript/ES5 Style Guide

一些新注意到的点：

• 数组复制使用slice

itemsCopy = items.slice();

• Module 定义应该以!开头，防止结尾漏掉分号导致报错

!function(global) {
}(this);

原本关注的项目是Airbnb JavaScript Style Guide，基于ES6，发现原来ES6新添加的特性还挺多的，可能需要展开详细学习一下。

2. Flex 布局

React Native 采用 Flex 布局，阮老师的这两篇教程非常详尽、实用！

Flex 布局中氛围容器和项目部分，容器的属性包括：

flex-direction/*: flex-direction属性决定主轴的方向（即项目的排列方向）。*/
flex-wrap/*: 默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行。*/
flex-flow/*: flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。*/
justify-content/*: justify-content属性定义了项目在主轴上的对齐方式。*/
align-items/*: align-items属性定义项目在交叉轴上如何对齐。*/
align-content/*: align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。*/

项目的属性包括：

order/*: order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。*/
flex-grow/*: flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。*/
flex-shrink/*: flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。*/
flex-basis/*: flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。*/
flex/*: flex属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。*/
align-self/*: align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。*/