深入浅出react&redux笔记

1. 高内聚（js、jsx、css） 低耦合（弱化不同组件间的关系）

2. react组件数据

   1. propTypes 建议在开发环境可加，生产环境通过babel-react-optimize去掉

   2. 初始化state：

      1. 1 2 3 4 5 6 7 8 9 10

         this.state = { count: props.initValue || 0 } // => this.state = { count: props.initValue } xxx.defaultProps = { count: 0 }

   3. prop&state的对比：

      1. prop 用于定义外部接口， state 用于记录内部状态;
      2. prop 的赋值在外部世界使用组件时， state 的赋值在组件内部;

      3. 组件绝不应该改变 prop 的值（要严格遵守单向数据流原则，保证 ui=render(data) 这个函数无任何副作用），而 state存在的目的就是让组件来改变的 。

        在做跨境电商网站的时候避免不了接入三方的支付、统计等代码来进行一系列的数据统计、分析、引流等。这里记录一下自己踩过的坑。

worldpay俩方

        之前不论是 paypal 还是 worldpay 接支付都是跳转到三方页面，因为中间跳转的这一步会导致部分用户弃单，转化率下降。根据我们自己的统计和与海外客户沟通来看得到的结论时尽量不要跳转，所以要把之前的三方改为俩方，即页面中嵌套 iframe 的方式。

1. 引入资源css/js/helper.html
2. 创建目标div
3. 执行setup

      Javascript的继承是基于原型的，之前理解的比较简单，直到最近在用 es5 写星级评分组件的时候遇到了些问题，解决之后理解深了一些。总结归纳，以便后用。

星级评分

原本的需求有俩个：

1. 根据后台返回的评价分数单纯进行5颗星的展示
2. 用户可以在5颗星上为商品进行打分，单击后上传

开始用最笨的方法，从业务出发很快速的把俩个需求都实现了。最后想着能不能利用继承来优化，方便后期扩展可以进行半星或者四分之一星评分。

具体效果如下：

利用原型分别实现满星与半星

变量

1. 声明不用，数据只使用一次或不使用就无需装到变量中

2. 变量命名，驼峰、简洁、易懂

3. 特定变量：

   1 2 3 4 5

   const MAX_INPUT_LENGTH = 8; if (value.length < MAX_INPUT_LENGTH) { // 一目了然，不能超过最大输入长度 .... }

4. 使用说明性的变量(即有意义的变量名)

        对于使用 vue 的同学来说，响应式、模版解析/渲染应该都很熟悉，vue 开发离不开这些特性。用了 vue 挺长时间了，写写总结。

响应式

创建一个普通的对象：

1
2
3
4
5

let t = {
    name: 't1'
    age: 19
}
console.log(t.age) // 19 那么如何监听age属性的访问与设置呢？

在es5中加入了一个api叫 Object.defineProperty,该api允许

本文为译文，原文地址：

Understanding the Virtual DOM

        我最近在写一些如何正确区分 dom 与 shadow dom 的文章。总的来说，dom 是HTML文档的基于对象的表示，以及操作该对象的接口。shadow dom 可以被认为是轻量级版本的 dom。它同样是以原生对象为基础的 html document，但是它并不是完整的。可能有些难懂，换一种说法来看，shadow dom 允许我们去将我们的 dom 划分的更小，更轻，可以跨文档使用。（这里作者想表达的意思是我们可以根据需要截取部分 dom 生成 vdom，而不用每次从 html 标签开始写 vdom 直到 html 标签闭合）

        另一个你可能遇到过的相似说法称 “shadow dom” 为 “virtual DOM”。尽管

之前也有 event loop 的概念，但一直都是琐碎的。直到阅读以下三篇文章后，琐碎的点串在了一起。

从浏览器多进程到JS单线程，JS运行机制最全面的一次梳理

这一次，彻底弄懂 JavaScript 执行机制

Event Loop的规范和实现

为了印象深刻，还是决定自己写一写。总结如下：

1、进程与线程的区别

1、什么是进程？

在计算机操作系统中，只有进程才能在系统中运行。所以要使程序运行就必须为其创建进程。当我们打开浏览器时就已经创建了进程。创建进程之后，系统会为其分配资源(内存等)供其使用。

进程是程序（指令和数据）的真正运行实例。若干进程有可能 …

        
跨域、缓存这些都是开发中常常遇到的，做些笔记供日后查阅。

CORS（Cross-Origin Resource Sharing）跨源资源分享

同源策略

同源策略（same-origin policy）是浏览器保障安全的一种方法。
主要指的是在同协议，同域名，同端口下才能访问资源。为什么要这样限制？假设某用户登陆了自己的网上网上银行，接着去访问了其他网站，如果没有同源策略的限制，那么其他网站就可以访问银行网站的cookie，而cookie一般存放着与用户相关的某些信息，这样用户的信息就会被泄漏或者被冒名顶替去访问网上银行。

HTTP 基础

网络间通信的大体流程

osi 模型较为复杂，一般常说的是五层模型：

物理层 -> 数据链路层 -> 网络层 -> 传输层 -> 应用层

        回顾了一下之前的代码，发现一个css中的坑即层叠顺序。什么叫层叠顺序？简单来说就是在屏幕上某一个位置堆积了很多 div 这些块哪个在上哪个在下的关系就是层叠顺序。（下面代码演示了三层堆叠）