发表于 | 分类于 |

① http://blog.csdn.net/u013510838/article/details/55669742
② https://purplebamboo.github.io/2015/09/15/reactjs_source_analyze_part_one/
③ https://zhuanlan.zhihu.com/p/20346379?columnSlug=purerender
首先贴出我阅读源码时参考的链接。很感谢作者。
React源码规模十分庞大，开始阅读的时候不能直接陷进去，研究一些细节，而是要先把握整体的流程，对流程有基本了解后再沉下心仔细品味。这里推荐先去阅读上面的链接②，再去参考链接①。参考链接③讲了react diff算法，可以参考react@0.14中对应的文件。

​ 建议看React@15的源码。我一开始阅读源码的时候，把React源码clone了下来，版本比较高在16.0.0-alpha.3以后，源码中没有使用相对路径，用的所谓的全局模块系统，都找不到北。后来就找教程，参考如何阅读。后来就找到了上面两个，也并没有提什么全局模块系统。后来根据参考链接①，将react版本切换到了React@16.0.0-alpha.3。然后就看是研究源代码了。只看代码并不直观，需要配合调试，才能更好地理解。使用官方提供的create-react-app脚手架，进行编码测试。后来发现默认使用的是React@15.5.4，不过16里面也有对应代码，并且我已经添加了好多注释，并不影响阅读，也就没有再切换版本，当看到ReactDOMComponent为元素注册事件的时候，就看不下去了，乖乖的直接看测试项目下的node_modules中的react和react-dom模块去了。

​ React@16这个版本，其实发生了很大的变化，React将要发布fiber特性。React fiber对以前React的核心算法做了全新的改版。不过React@16.0.0-alpha.3代码库中，以前的模块还都存在，可以阅读研究。

阅读全文 »

发表于 | 分类于 |

节流模式（Throttler）：对重复的业务逻辑进行节流控制，执行最后一次操作并取消其他操作，以提高性能。
用处：浏览器中的scroll、mouseover、mouseenter、mouseleave、resize等事件的处理函数被连续重复触发，很多情况下，只需要对最后一次触发做出反应，这时就要用到节流模式。

阅读全文 »

发表于 | 分类于 |

阅读感想：

  1. 阅读源码前，必须对项目对外暴露的API，有大致的了解。
  2. 有了上面的基础，开始从入口，进行阅读。
  3. 阅读常用的API实现。
  4. 阅读的时候，要猜。由功能猜实现，对源码进行理解。

本文是对react-redux@5.0.4的源码分析,阅读中添加了注释的代码react-redux-analysis

react-redux的API参考 链接

react-redux在5.0中做出了很大改动。 请参考

作者为了react-redux在实际项目中可定制化，重写了connect,分成了很多模块组件。
让connect作为了connectAdvanced的门面（外观模式）。

更新后的文件结构如下：
react-redux文件结构

阅读全文 »

发表于 | 分类于 |

TCP/IP层次模型中，每一层都会对上一层的数据加入包首部，包首部至少包含两个信息：一个是发送端和接收端的信息，另一个是上一层的协议类型。因为这些协议需要程序实现，要控制整个协议流程的运作，必定需要控制信息，因此就需要包的首部，其中包括了协议实现时用到的控制信息。

阅读全文 »

发表于 | 分类于 |

可以参考，以及《图解HTTP》,进行学习

绝对URI格式
http://user:pass@www.example.com:80/dir/index.html/uid=1#ch1
http:或https:等协议方案名获取访问资源是要指定协议类型。不区分字母大小写，最后附一个冒号(:)

http://:协议方案名
user:pass:登录信息（认证）（可选）
www.example.com：服务器地址
80:服务器端口号
/dir/index.html:带层次的文件路径
uid：查询字符串
ch1:片段标识符

RFC:Request for Comments 征求修正意见书
通常，应用程序会遵照RFC确定的标准实现。可以说，RFC是互联网的设计文档，要是不按照RFC标准执行，就有可能导致无法通信的状况。

请求报文的构成

1
2
3
4
5
6
7
8
9
10
11
POST(方法)  /form/entry(URI)  HTTP/1.1(协议版本) 

//请求首部字段
Host: example.com
Connection:keep-alive
Content-Type:appllication/x-www-form-urlencoded
Content-Length:16
//请求首部字段结束

//内容实体
name=sfqq&age=25

响应报文：

1
2
3
4
5
6
7
8
9
HTTP/1.1 200 OK(状态码的原因短语)

Date: Wed, 22 Mar 2017 07:42:52 GMT
Content-Length:455
Content-Type:text/html

//主体
<html>
....

HTTP是一种不保存状态的协议，HTTP协议自身不对请求和响应之间的通信状态进行保存。这是为了更快的处理大量事务，确保协议可伸缩性，而特意把HTTP协议设计成如此简单。但为了事项期望的保持状态的功能，于是引入了Cookie技术。有了Cookie再用HTTP协议通信，就可以管理状态了。

阅读全文 »

发表于 | 分类于 |

element

属性/方法 描述
element.clientHeight 返回元素可见高度
element.clientWidth 返回元素的可见宽度
element.offsetHeight 返回元素的高度
element.offsetWidth 返回元素宽度
element.offsetLeft 返回元素的水平偏移位置
element.offsetParent 返回元素的偏移容器
element.offsetTop 返回元素的垂直偏移位置
element.scrollHeight 返回元素的整体高度。
element.scrollLeft 返回元素左边缘与视图之间的距离。
element.scrollTop 返回元素上边缘与视图之间的距离。
element.scrollWidth 返回元素的整体宽度。
event.clientX 返回当事件被触发时，鼠标指针的水平坐标。（相对浏览器）
event.clientY 返回当事件被触发时，鼠标指针的垂直坐标。（相对浏览器）
event.pageX 返回当事件被触发时，鼠标指针的水平坐标。（相对文档，非标准但广泛支持，IE<9无）
event.pageY 返回当事件被触发时，鼠标指针的垂直坐标。（相对文档，非标准但广泛支持，IE<9无）
event.screenX 返回当某个事件被触发时，鼠标指针的水平坐标。(相对屏幕)
event.screenY 返回当某个事件被触发时，鼠标指针的垂直坐标。（相对屏幕）
event.offsetX 发生事件的地点在事件源元素的坐标系统中的 x 坐标(相对于鼠标点击的元素)
event.offsetY 发生事件的地点在事件源元素的坐标系统中的 y 坐标(相对于鼠标点击的元素)

event

发表于 |

参考

offsetParent属性返回一个对象的引用，这个对象是距离调用offsetParent的元素最近的（在包含层次中最靠近的），并且是已进行过CSS定位的容器元素。 如果这个容器元素未进行CSS定位, 则offsetParent属性的取值为根元素(在标准兼容模式下为html元素；在怪异呈现模式下为body元素)的引用。 当容器元素的style.display 被设置为 “none”时（译注：IE和Opera除外），offsetParent属性 返回 null。
语法：
parentObj = element.offsetParent
变量：
parentObj 是一个元素的引用，当前元素的偏移量在其中计算。
主要结论：

  • 当某个元素及其DOM结构层次中元素都未进行CSS定位时(absolute或者relative)[或者某个元素进行CSS定位时而DOM结构层次中元素都未进行CSS定位时],则这个元素的offsetParent属性的取值为根元素。更确切地说，这个元素的各种偏移量计算（offsetTop、offsetLeft等）的参照物为Body元素。(其实无论时标准兼容模式还是怪异模式，根元素都为Body元素)

  • 当某个元素的父元素进行了CSS定位时（absolute或者relative），则这个元素的offsetParent属性的取值为其父元素。更确切地说，这个元素的各种偏移量计算（offsetTop、offsetLeft等）的参照物为其父元素

  • 当某个元素及其父元素都未进行CSS定位时（absolute或者relative），则这个元素的offsetParent属性的取值为在DOM结构层次中距离其最近，并且已进行了CSS定位的元素。

发表于 | 分类于 |

Redux

http://redux.js.org/?q=#
入门参考：
http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_one_basic_usages.html

设计思想：

  1. Web 应用是一个状态机，视图和状态是一一对应的。
  2. 所有的状态，保存在一个对象里面

基本概念和API

  1. Store
    Store就是保存数据的地方，可以把它看成一个容器。整个应用只能有一个Store。
    Redux提供createStore这个函数，用来生成Store。

    1
    2
    import {createStore} from 'redux';
    const store=createStore(fn);

    createStore函数接受另一函数作为参数，返回生成的Store对象

阅读全文 »

发表于 | 分类于 |

判断数据项是否是state

简单地对每一项数据提出三个问题：

  • 是否是从父级通过 props 传入的？如果是，可能不是 state 。
  • 是否会随着时间改变？如果不是，可能不是 state 。
  • 能根据组件中其它 state 数据或者 props 计算出来吗？如果是，就不是 state 。

记住： React 中数据是沿着组件树从上到下单向流动的。

可能不会立刻明白哪个组件应该拥有哪些 state 数据模型。
这对新手通常是最难理解和最具挑战的，因此跟随以下步骤来弄清楚这点：
对于应用中的每一个 state 数据：

  • 找出每一个基于那个 state 渲染界面的组件。
  • 找出共同的祖先组件（某个单个的组件，在组件树中位于需要这个 state 的所有组件的上面）。
  • 要么是共同的祖先组件，要么是另外一个在组件树中位于更高层级的组件应该拥有这个 state 。

  • 如果找不出拥有这个 state 数据模型的合适的组件，创建一个新的组件来维护这个 state ，然后添加到组件树中，层级位于所有共同拥有者组件的上面。

阅读全文 »

发表于 | 分类于 |

响应式网站设计

本文是在学习responsive-web-design时，做的笔记。

响应式网站设计的优点

  • 减少工作量
    网站、设计、代码、内容都只需要一份
    多出来的工作量只是js脚本、css样式做一些改动
  • 节省时间
  • 每个设备都能得到正确的设计
  • 搜索优化

响应式网站设计的缺点

  • 会加载更多的样式和脚本资源
  • 设计比较难精准定位和控制
  • 老版本浏览器兼容不好

CSS3 媒体属性简介 略

viewport视口

布局视口（layout viewport）: 虚拟的视口将页面呈现出来，布局视口的宽度是不变的。
可视视口（visual viewport）: 对布局视口呈现出来的页面进行放大或者缩小，在固定的设备显示器看到的网页的内容区域的内容范围或大或小。
比方说：320px宽的显示屏，网页宽度为960px，在显示屏中显示这个网页，渲染时会按照网页960px的宽度进行渲染，然后将整个页面缩放三分之一，
这样整个页面显示出来，此时可视视口为960px因为整个页面你都看到了，即布局视口宽度等于可视视口宽度。将页面放大，在320px的设备中，
只会看到页面的一部分，可视视口变小。可视视口尺寸不固定，随着用户缩放页面改变。 （默认宽度是屏幕的宽度）
像是拿着放大镜看书，书是布局视口，通过放大镜看到的是可视视口，随着放大镜离书的远近，可视视口改变，左右移动放大镜，可看到整个书的内容。
这样的话用户浏览网页时，需要不断的滑动、放大页面，很不方便。
理想视口（ideal viewport）：布局视口在一个设备上的最佳尺寸。理想视口下的页面便于浏览器浏览阅读。
理想视口就是为了构架手机浏览器优化的页面而添加的

阅读全文 »