Yorke

## 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...

# 浅谈基于vue的web组件开发 (date: 2016-04-03 22:29:29 +0800) ### 一、什么是组件开发 #### 1. html的组件化： - HTML的组件化非常容易理解，那就是界面的片段化和模板化。 #### 2. JS的组件化： - 早期的共享文件，把公共功能的代码提出出来，多个页面共用 - 动态引用，消灭全局变量 - JavaScript组件化的目标是什么呢，是清晰的职责，松耦合，便于单元测试和重复利用。 #### 3. CSS的组件化 - 传统的CSS是一种扁平的文本结构，变更成本较高，比如说想要把结构从松散改紧凑，需要改动很多。如果把实际使用的CSS只当作输出结果，而另外有一种适合变更的方式当作中间过程，这就好多了。比如说，我们把一些东西定义成变量，每个细节元素使用这些变量，当需要整体变更的时候，只需修改这些变量然后重新生成一下就可以,比如LESS，SASS，Stylus等. ### 二、基于官方脚手架vue-cli快速搭建项目 ####...

## Component 1. 执行setState, forceUpdate => render函数 #### setState 和react的setState的机制不一样, setState这里是同步的，执行setState之后，state立即更新， 但是渲染的逻辑被加入到了js线程栈尾执行，并且当上一次setState之后的 component._dirty被置为true,此时如果继续执行setState将不会触发重新渲染，只有当组件重绘完毕之后，才能再次触发渲染． ```js setState(state, cb) { let s = this.state; if(!this.prevState) this.prevState = extend({}, s); extend (s, typeof state...

## Render (Diff) Render函数作为整个库的入口,这里将通过一个大的vnode对象来构建整个真实的dom树, 并管理相应的组件, 是viewModel的入口. 这里render() 接受第三个参数，这是会被替换的根节点，否则，如果没有这个参数，Preact 默认追加。 ```js export function render(vnode, parent, merge) { return diff(merge, vnode, {}, false, parent, false); } export function diff(dom, vnode, context, mountAll,...

## motion.js ### 能够学到什么？ 1. 要实现什么东西，解决什么问题，解决问题的思路，多看别人是怎么实现的，有哪些是值得借鉴和学习的地方。 2。 怎么从解决的问题入手，然后思考api怎么设计, 哪些是暴露出去的，哪些是内部实现的。思考整个代码的结构，用哪些方法来实现这个api,整个项目的代码的生命周期是怎样的。 3。 怎么把思路转化为实际的代码，代码的组织封装，设计模式，代码抽象模块化，具体的优化细节。 4。 优化。 ### 具体到这个项目 #### 1. 实现什么，解决什么问题？ #### 2. 思路： 怎么实现： dom 动画的本质是什么？ JS_DOM动画的实现原理？怎么让一个元素动起来。 学习和借鉴velocity.js , anime.js #### 3....

## about Promise --------- test: npm run test_promise #### Issues 1. 解决的问题，实现的原理 2. 不同promise的实现之间的交互（resolvePromise函数的实现和用法） 3. 原则上，promise.then(onResolved, onRejected)里的这两相函数需要异步调用,让then的参数异步执行 （setTimeout(fn, 0)的含义和用法） 4. promise链的错误处理 5. promise 的反模式 ---------------- #### 一、解决的问题，实现的原理 假设你正在编写一个函数，但是你不能马上返回值，最明显的方法就是将返回的值传入一个回调函数作为参数，而不是将其return回来。 ```javascript var...

## React　单元测试 ### React 单元测试要关注的点 1. 组件所要render的内容． 2. 组件所接受的props，拿到props之后我用它干了些什么， 3. 组件是否持有state, 什么时候更新了state. 4. 组件的行为当用户进行交互的时候，或者子组件调用了回调函数， 这时候发生了什么。 5. 组件加载和卸载的时候都发生了什么。 #### 其他一些影响组件的因素: - 组件的context - 组件的refs实例 - 组件的生命周期方法 #### 一些问题：　 1. 组件所渲染的内容...

# redux 源码学习小记 ### 单向数据流 ### 代码组织 整个项目很简单,被分为了几个小模块. - compose 提供一个辅助方法 - bindActionCreators - combineReducers - createStore - applyMiddleware ### compose 一个提供函数组合的方法,用于将多个函数运行的结果进行组合调用,是函数式编程中常用的方法之一, 用于将一个大的函数拆分成很多小的纯函数,从而减少函数的复杂度. ```js funcs.reduce((a, b) => (...args) => a(b(...args)))...