宝丁

React Summary ## React 的简介 React把用户界面抽象成一个个组件，开发者通过组合这些组件，最终得到功能丰富、可交互的页面。通过引入JSX语法，复用组件变得容易，同时也能保证组件结构清晰，JSX最大的好处就是对Virtual DOM的集合。 React不仅专注于View层的问题，也是一个包括view和controller的库，对于复杂的场景可以自己选择业务层框架。 DOM操作十分昂贵，性能消耗最大的就是DOM操作，而且这部分代码不好维护，React把真实DOM树转换成JavaScript对象树(virtual dom)，每次数据更新后，重新计算Virtual DOM 并和上一次的做比较，对发生变化的部分进行批量更新。React 提供了shouldComponentUpdate生命周期回调函数，来减少不必要的对比过程达到优化。有人说因为虚拟DOM 大大的提升了 React 性能。其实不然，我觉得虚拟DOM的渲染方式，跟传统DOM操作也许会好一点，但是好的并不会非常明显，因为对比DOM节点也是需要计算资源的。 虚拟DOM最大好处在于方便的跟其他平台的集成，比如 react-native 就是基于虚拟DOM，然后渲染出了原生控件，因为react组件可以映射为对应的原生控件。在输出的时候，是输出html DOM，还是安卓控件，还是IOS控件，这是由平台决定了。 React在设计的时候带有函数式编程的基因，因为React组件本身就是纯函数，React的createElemet方法保证了组件是纯净的，即传入指定props得到一定的Virtual DOM,整个过程都是可预测的。 ## React 组件 React组件基本上由三个部分组成---属性(props)、状态(state)以及生命周期方法。React组件即为组件元素。组件元素被描述为纯粹的JSON对象，意味着可以使用方法或是类来创建。 React 组件的构建方法 ``` //...

## JSON > JSON是一种数据格式，JSON是JavaScript的一个严格的子集，利用了JavaScript中的一些模式来表示结构化数据 **JSON的语法可以表示一下三种类型的值** * 简单值，但是不支持JavaScript中的特殊值undefined * 对象 > JSON中的对象要求给属性加引号。 * 数组 **解析与序列化** * stringify > 把JavaScript对象序列化为JSON字符串, 有三个参数，第一个参数是要序列化的对象，第二个参数是过滤器，可以是数组，可以是函数，第三个参数是一个选项，表示是否在JSON字符串中保留锁紧 * parse > 把JSON字符串解析为原生JavaScript值，接收两个参数，第一是序列化后的JSON字符串，第二个参数是一个函数，将在每个键值对上调用 ## 脚本 **延迟脚本** 在script标签定义了defer属性，这个属性的用途是表明脚本在执行时不会影响页面的构造。也就是说，脚本会延迟到页面都解析完毕后再运行，HTML5严格要求脚本按照它们出现的先后顺序执行，而且这两个脚本会先于DOMConentLoad事件执行 **异步脚本** 标记为async的脚本并不保证按照指定它们的先后顺序执行 ##...

Scope是一个简单的JavaScript对象，我们可以像其他对象一样添加属性 监控对象属性：`$watch`和`$digest` \$watch \$digest 相辅相成，两者在一起，构成了Angular作用域的核心：数据变化的响应 使用`$watch`，可以在scope上添加一个监听器，当scope上发生了变更时，监听器会收到提示，给`$watch`指定两个函数，就可以创建一个监听器： * 一个监控函数，用于指定所关注的那部分数据 * 一个监听函数，用于在数据变更的时候接受提示 另一方面就是`$digest`函数 它执行了所有在作用域上注册过的监听器，遍历所有监听器，调用它们的监听函数 这些本身没什么大用，我们要的是能检测由监控函数指定的值是否确实变更了，然后调用监听函数 **脏值检测** `$digest`函数的作用是调用这个监控函数，并且比较它返回的值和上一次返回的值的差异，如果不相同，监听器就是脏的，它的监听函数就应当被调用 当数据脏的时候持续Digest时，需要让它持续的遍历所有监听器，知道监控的值停止变更 可以使用一个外层循环来运行，而Angular的实现是通过内循环执行的，因为可能会两个监听器互相监控了对方的变更，那么就会状态始终不稳定，那么这个时候我们可以设置一个TTL,超过了TTL则停止迭代 `$eval` 在作用的上下文上执行代码，它使用一个函数作参数，所做的事情就是立即执行这个传入的函数，并把作用域自身当作参数传递给它，返回的是这个函数的返回值 ``` Scope.prototype.$eval = function(expr, locals) { return expr(this, locals); } ```...

## 一些概念 ### 物理像素(physical pixel) 一个物理像素是显示器(手机屏幕)上最小的物理显示单元，早操作系统的调度下，每个设备像素都有自己的颜色值和亮度值 ### 设备独立像素(density-independent pixel) 设备独立像素（也叫做密度无关像素），可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用的虚拟像素(比如：css像素),然后由相关系统转换为物理像素 ### 设备像素比(device pixel ratio) 设备像素比(简称dpi),定义了物理像素和设备独立像素的对应关系，它的值可以按如下的公式得到： `设备像素比 = 物理像素／设备独立像素` 在JavaScript中，可以通过window.devicePixelRatio 获取当前设备的dpr --------------- 在不同的屏幕上，css像素所呈现的大小是一致的，不同的是1个css像素所对应的物理像素个数是不一致的 在普通屏幕下 1个css像素对应1个物理像素 在retina屏素霞，1个css像素对应4个物理像素 ### 位图像素 一个位图像素是栅格图像(png、jpg、gif等)最小的数据单元，每个位图像素都包含着一些自身的显示信息(显示位置、颜色值、透明度等) --------------- ###...

一般来说，消息队列有两种场景：一种是发布者订阅者模式；一种是生产者消费者模式。利用redis这两种场景的消息队列都能够实现。定义： * 生产者消费者模式：生产者生产消息放到队列里，多个消费者同时监听队列，谁先抢到消息谁就会从队列中取走消息；即对于每个消息只能被最多一个消费者拥有。（常用于处理高并发写操作） * 发布者订阅者模式：发布者生产消息放到队列里，多个监听队列的消费者都会收到同一份消息；即正常情况下每个消费者收到的消息应该都是一样的。（常用来作为日志收集中一份原始数据对多个应用场景）