Yorke

## Serve Static file serving and directory listing. __Links:__ [github](https://github.com/zeit/serve) [npm](https://npmjs.com/serve) 通过学习serve的源码，我们可以了解到： 1. 如何编写一个Command-line tool（包括命令行设置，help文档，命令参数的读取，命令执行后的输出界面的编写）。 2. 如何用nodejs 来静态文件服务（包括spa的设置：所有的路由都跳到index.html，如何让浏览器缓存静态文件） 3. 如何使用nodejs 设置header;(例如CORS跨域header的设置) 5. 如何通过服务端开启gzip压缩静态文件。 ## 一、如何编写一个Command-line tool 1. help文档设置， [args](https://github.com/leo/args) 使用args来构建帮助文档，默认会有help和version两个选项，...

## CSS In React ### react css modules css模块化 ```js import React from 'react'; import CSSModules from 'react-css-modules'; import styles from './table.css'; class Table extends React.Component { render () {...

# redux and mobx comparision Redux依靠一个统一且不可变的数据存储来同步数据，并且更新那里的数据时会触发应用的更新渲染。 state的更新是以一种不可变的方式进行，它会发布一条明确的action消息，这个消息必须被reducer函数处理。 由于使用了这样明确的方式，很容易弄清楚一个action是如何影响程序的state。 MobX借助于函数式响应型模式，state被包装在了可观察对象里，并通过props传递。 通过将state标记为可观察的，即可在所有观察者之间保持state的同步性。 ### setState 1. 许多组件之间需要共享状态进行通信。 2. 一个组件需要改变另一个组件的状态。 ### state redux是不可变的，有严格的更新逻辑. mobx是可变的，可以直接更新。 redux拥有时间旅行，更加可预测，使用纯函数，debug更容易。 ### Store redux 是单一store,由reducer进行拆分逻辑。 mobx　可以是多store, 每个store掌管不同的逻辑，但组件间可以共享同一个store. ### 基本改变state的方法...

1. 确保传递给子组件的方法都正确的绑定了this指向，不要在render函数里面绑定this指向。 2. 确定组件卸载之前销毁所有的自定义事件绑定和定时器以及正在pending 的http请求。 3. 避免在`componentWillMount`中进行异步的state初始化，在componentDidMount中去发起http请求。 5. 使用key来帮助react进行身份一致的验证，确保子组件能够在更新中被保留而不是重新创建，使用index作为key是一种反模式。 5.　组件的划分， * 区分木偶组件和smart component, 木偶组件通常不含有自身的状态与展现有关，无状态组件尽量写成纯函数式组件，智能组件通常有 自己的状态，生命周期，这样划分的优点是它们封装逻辑和可以将数据注入不同的render. 6. 组件方法组织 * class definition * constructor * event handlers * 'component' lifecycle events...

## webpack 2.2.1 学习小记 ---------- ### Code Splitting 1. 第三方库资源的打包. 利用浏览器的缓存机制去缓存这些不会轻易改变的第三方库,提高应用的加载时间. CommonsChunkPlugin 可以用来分离第三方库split vendor/library code ```js entry: { main: './src/index.js', }, output: { filename: '[name].[chunkhash:5].js', path: path.resolve(__dirname, 'dist') }, plugins:...

### 内存的使用 #### 1. 作用域 在js中，能形成作用域的主要是函数调用、with、全局作用域。 如果变量是局部变量，由于全局作用域需要知道进程退出的时候才能释放，如果需要释放常驻内存的对象，可以通过delete或者将变量赋值为null和undefined，让旧的对象脱离引用关系。 > delete tips delete 不能删除显式（例如用var, let ,const声明的变量），不过可以删除未经var等关键字声明的变量； delete不能删除从原型继承而来的属性，不过你可以从原型上直接删除该属性。 当你删除一个数组元素时，数组的 length 属性并不会变小。例如，如果你删除了a[3], a[4]仍然是a[4], a[3]成为undefined. 即便你删除了最后一个元素也是如此 (delete a[a.length-1]). 当用 delete 操作符删除一个数组元素时，被删除的元素已经完全不属于该数组。下面的例子中， trees[3] 被使用delete彻底删除。 ### 2....

## linux ### 命令 #### [root@localhost ~]# - root:　当前登录用户 - localhost: 主机名 - ~: 当前所在目录 - #：超级用户的提示符（普通用户的提示符是＄） #### 命令模式： 命令 【选项】 【参数】 当有多个选项的时候，可以写在一起 简化选项和完整选项 - ls : 查询文件目录中的内容 选项：　...

## JS函数式编程指南 ### 一些通用的编程指南原则 - DRY（不要重复自己，don't repeat yourself）， - YAGNI （你不会用到它的，ya ain't gonna need it）， - Rule Of Three原则 （当重复的次数超过3次，就应该考虑抽象封装） - 高内聚低耦合（loose coupling high cohesion）， - 最小意外原则（Principle of least surprise），...

## 基于gulp和webpack搭建兼容es2015的ng1.x项目框架 ------- #### 一、目的 **基于现有的ng1.x的版本搭建一套es6编写的版本，并配套有基本的代码检查工具，单元测试和端到端测试环境搭建。** #### 二、基本工具 #### **babel** - 用于将es6编写的项目代码，测试代码，甚至配置文件代码转为es5 #### **webpack** - 将所有的静态资源,js文件，测试文件进行模块化处理后打包在一起 - less-loader, css-loader，style-loader打包less文件 - file-loader, url-loader打包图片，字体图标等文件 - raw-loader，打包所有的Html文件为字符串 - babel-loader用于打包es6代码, ng-annotate-loader用于处理ng中的依赖注入 - 其他：1. 将打包后的css文件插入dom中...

## airbnb和google推荐的JS代码风格对比和介绍 > 由于JavaScript 没有一个权威的编码风格指南，取而代之的是一些流行的编码风格。 通过采用一些合理的编码规范，一方面可以弥补js语言上的一些缺陷，另一方面可以降低每个组员介入项目的门槛成本，从而提高提高工作效率及协同开发的便捷性。 下面是一些比较流行的js代码风格规范： - [standard](https://github.com/feross/standard) - [google](http://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml) - [rwaldron](https://github.com/rwaldron/idiomatic.js) - [airbnb](https://github.com/airbnb/javascript) ### 下面主要对google和airbnb推荐的js风格做一些简单的介绍和对比： ### 命名 - 函数名，变量名，属性名，使用驼峰命名：functionNamesLikeThis, variableNamesLikeThis。 - 构造函数使用帕斯卡命名：FunctionNameLikeThis; - 命名应具有描述性。 ------- - airbnb不推荐使用下划线前/后缀 >...