深入浅出react&redux笔记

| 字数 1918

深入浅出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存在的目的就是让组件来改变的 。

三方接入踩坑集合

| 字数 2166

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

worldpay俩方

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

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

Javascript继承

| 字数 1839

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

星级评分

原本的需求有俩个:

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

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

具体效果如下:
star

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

前端代码编写注意事项

| 字数 778

变量

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

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

  3. 特定变量:

    1
    2
    3
    4
    5
    const MAX_INPUT_LENGTH = 8;
    if (value.length < MAX_INPUT_LENGTH) {
    // 一目了然,不能超过最大输入长度
    ....
    }
  4. 使用说明性的变量(即有意义的变量名)

Vue 的响应式/模版解析/渲染

| 字数 883

        对于使用 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

| 字数 2498

本文为译文,原文地址:

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”。尽管