每日小结

发表于 分类于 ， 阅读次数： 本文字数： 884 阅读时长 ≈ 3 分钟

转换dos格式行尾为unix行尾

  • 工具: dos2unix

  • 单文件: dos2unix input output

  • 递归转换: find . -type f -print0 | xargs -0 dos2unix

Linux下 nodejs 环境配置

  • 安装node(不是最新版): sudo apt install nodejs

  • 使用n来切换node版本:

    • sudo npm install -g n

    • sudo n stable

  • 安装yarn: sudo npm install -g yarn

Nodejs版本切换

  • 使用n

    • 方法:

      • 安装: sudo npm install -g n

      • 切换版本: sudo n stable

    • 缺点: 据说会导致node modules混乱

  • 使用nvm

清理npm缓存

  • npm cache clean --force

  • The default cache direconstructory is ~/.npm on Posix (mac or linux), or %AppData%/npm-cache on Windows.

Javascript 复习

  • 数据类型

    • Number
    • String
    • Boolean
    • Symbol (new in ES2015)
    • Object
      • Function
      • Array
      • Date
      • RegExp
    • null
    • undefined

  • 关于变量

    • 用var定义的变量具有函数作用域

      • name hiding: (function () { ... })();

      • 允许递归版(IIFEs): (function foo() { ...foo()... })();

    • 尽量使用let和const

  • 关于Array:

    • 相当于一个下标是整数, 有一个length属性, 外表看起来像是数组的Object

    • 数组的length属性是数组中最大的下标+1

    • 当然作为Object, 也可以有非整数类型的下标

    • for…in…循环遍历实际存储的值, for…of…循环遍历下标

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      let a = []

      a[100] = 1

      a.length // 101

      for (let i in a) console.log(i) // 1

      for (let i of a) console.log(i) // undefined, undefined, ... , 1

  • 关于String

    • String + any = String

    • any + String = String

    • 注意结合性

      1
      2
      1 + 2 + '3' // '33'
      '1' + 2 + 3 // '123'

  • 关于Object:

    • 对象字面量{}等效于new Object()

      • 不过Object()可以被重载

      • 对象字面量不能被重载

    • new XXX(): 相当于创建了一个类实例(实际上是个Object), XXX()函数可以对其进行进一步修饰

  • 关于function:

    • 函数是对象

  • 关于new:

    • new的功能:

      • 创建一个空对象{}

      • 设置空对象的__proto__(与浏览器实现有关)为构造函数的prototype

      • 让this指向空对象

      • 执行构造函数, 传入参数this

      • 如果构造函数不返回一个对象, 则返回this

    • 模仿一个new:

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      function fake_new(ctor, ...args) {

          let x = Object.create(ctor.prototype); // ES5 创建新对象

          ///* before ES5 */
          // function F() {}
          // F.prototype = ctor.prototype;
          // let x = new F();

          let res = ctor.call(x, ...args); //借用外部传入的构造器给obj设置属性

          return typeof res === 'object' ? res : x; //确保构造器总是返回一个对象
      };

  • 关于this:

    • 如何正确绑定this

      1
      2
      3
      4
      5
      6
      {
          foo() { ... }, // bad, `this` is bound to the object
          foo = () => { ... }, // good, `this` is bound dynamically
      }


  • Javascript面向对象:

    • 不用new模拟对象, 利用闭包

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      function makePerson(first, last) {
          return {
              first: first,
              last: last,
              fullName: function() { // 每次创建对象时, 这个函数都会被拷贝
                  return this.first + ' ' + this.last;
              },
              fullNameReversed: function() { // 每次创建对象时, 这个函数都会被拷贝
                  return this.last + ', ' + this.first;
              }
          };
      }

      var s = makePerson('Simon', 'Willison');
      s.fullName(); // "Simon Willison"
      s.fullNameReversed(); // "Willison, Simon"

    • 使用new

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      function Person(first, last) {
          this.first = first;
          this.last = last;
          this.fullName = function() { // 每次创建对象时, 这个函数都会被拷贝
              return this.first + ' ' + this.last;
          };
          this.fullNameReversed = function() { // 每次创建对象时, 这个函数都会被拷贝
              return this.last + ', ' + this.first;
          };
      }
      var s = new Person('Simon', 'Willison');

    • 优化: 减少函数对象的拷贝, 利用原型链

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      function Person(first, last) {
          this.first = first;
          this.last = last;
      }
      Person.prototype.fullName = function() {
          return this.first + ' ' + this.last;
      };
      Person.prototype.fullNameReversed = function() {
          return this.last + ', ' + this.first;
      };

React 复习

  • JSX语法

    1
    2
    3
    4
    5
    const element = (
        <h1 className="greeting" onClick={this.handleClick}>
            Hello, world!
        </h1>
    );
    1
    2
    3
    4
    5
    const element = React.createElement(
        'h1', // label type
        {className: 'greeting', onClick: this.handleClick}, // attrs
        'Hello, world!' // children
    );

    • 遇到<开始解析HTML, 遇到{开始解析Javascript

    • 要比Vue的模板更加灵活

  • 数据流

    • 外层->内层组件: props, 只读

    • 组件自己的状态: state, 可以修改

      • 初始化: 在构造函数内直接赋值

      • 更新: 通过this.setState({})

      • state可以被传递给子组件作为子组件的props

  • 受控组件:

    • 不自己维护状态的组件

    • 状态变化全部交给外部来做: props.value, props.onValueChanged()