blackLearning.github.io
blackLearning.github.io copied to clipboard
Fadingvision
博客和学习记录
# 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不推荐使用下划线前/后缀 >...
## js语言精髓与编程实践笔记 ---------- ### 一、语法 #### 1.1 基础语法 1. 当'\\'反斜杠字符出现在一行的末尾时，也用于连续的字符串声明，这在声明大段文本时很有用。 2. \\0表示NUL字符。虽然显示为空值，但是是真是存在的值。 3. （）既是语法分隔符也是运算符。 4. 变量声明语句与赋值表达式存在根本的不同：声明中的=是语句的语法分隔符，是可以省略的，而表达式中的=是不能省略的。 5. 函数调用： ```javascripts (function(){})(); // 1 (function(){}()); // 2 void function(){}(); // 3 ```...
### JS权威指南学习笔记 #### **一、类型、值和变量** 1. 一元+号会将其操作数变为数字，+运算符会将一个变为字符串，!!会将操作数变为布尔值。 2. toFixed可以根据小数点后面的指定位数将数字转换为字符串。 ```js parseFloat('123.456').toFixed(5) // 123.45600 ``` 3. 由于js没有块级作用域，所有一些程序员特意将变量声明放在函数体顶部，而不是将声明靠近放在使用变量的地方，这种做法使得他们的源代码非常清晰的反映了真实的变量作用域。 #### **二、表达式和运算符** 1. viod运算符可以将一个数返回undefined值。 2. in可以测试属性是否存在 3. 通过 x === x来判断是否为NAN. 4. instanceof左侧是实例，右侧是对象。 5. 区分对象和原始类型用typeof,区分对象用instanceof...