py-tofee / notes Goto Github PK

function log(x, y = 0) {
  console.log(x, y);
}
// undefined才能触发函数默认值
log(1) // 1, 0
log(1, undefined) // 1, 0
log(1, 2) // 1, 2
log(1, null) // 1, null

function foo({x, y = 5}) {
  console.log(x, y);
}
foo({}) // undefined 5
foo({x: 1}) // 1 5
foo({x: 1, y: 2}) // 1 2
foo() // TypeError: Cannot read property 'x' of undefined

(function (a) {}).length // 1
(function (a = 5) {}).length // 0
(function (a, b, c = 5) {}).length // 2
// 函数的length属性，不包括 rest 参数
(function(...args) {}).length // 0 
// 如果设置了默认值的参数不是尾参数，那么length属性也不再计入后面的参数了
(function (a = 0, b, c) {}).length // 0
(function (a, b = 1, c) {}).length // 1

var x = 1;

function f(x, y = x) {
  console.log(y);
}

f(2) // 2

function throwIfMissing() {
  throw new Error('Missing parameter');
}

function foo(mustBeProvided = throwIfMissing()) {
  return mustBeProvided;
}

foo()
// Error: Missing parameter

function foo(optional = undefined) { ··· }

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules,
  getters
})

// 根实例
new Vue({
  el: '#app',
  store,
  render: h => h(App)
})

'use strict';

var utils = require('./utils');
var bind = require('./helpers/bind');
var Axios = require('./core/Axios');
var defaults = require('./defaults'); // 默认配置

/**
 * Create an instance of Axios
 *
 * @param {Object} defaultConfig The default config for the instance
 * @return {Axios} A new instance of Axios
 */
function createInstance(defaultConfig) {
  // 创建一个Axios的实例context
  var context = new Axios(defaultConfig); 
  // bind返回一个新函数，函数内的this指向context
  // instance就是request函数，可以用于发送请求
  var instance = bind(Axios.prototype.request, context); 

  // Copy axios.prototype to instance 将Axios原型上的方法和属性都拷贝到instance上
  utils.extend(instance, Axios.prototype, context);

  // Copy context to instance 将Axios实例context上的属性和方法都拷贝到instance上
  utils.extend(instance, context);

  return instance;
}

// Create the default instance to be exported
var axios = createInstance(defaults); // 使用默认配置创建的实例

// Expose Axios class to allow class inheritance
axios.Axios = Axios; // axios的Axios属性指向Axios

// Factory for creating new instances
// axios的工厂函数，用于创建自定义配置的axios
axios.create = function create(instanceConfig) {
  return createInstance(utils.merge(defaults, instanceConfig));
};
// ====================================
// axios.create([config])创建的新的axios没有下面的功能
// ====================================
// Expose Cancel & CancelToken
axios.Cancel = require('./cancel/Cancel');
axios.CancelToken = require('./cancel/CancelToken');
axios.isCancel = require('./cancel/isCancel');

// Expose all/spread 用于批量执行多个异步请求
axios.all = function all(promises) {
  return Promise.all(promises);
};
// axios.spread用来指定接收axios.all中每个请求返回的响应
axios.spread = require('./helpers/spread');

module.exports = axios;

// Allow use of default import syntax in TypeScript
module.exports.default = axios;

'use strict';

var defaults = require('./../defaults');
var utils = require('./../utils');
var InterceptorManager = require('./InterceptorManager');
var dispatchRequest = require('./dispatchRequest');

/**
 * Create a new instance of Axios
 *
 * @param {Object} instanceConfig The default config for the instance
 */
function Axios(instanceConfig) {
  this.defaults = instanceConfig; // 默认配置
  // InterceptorManager的实例上有一个handlers属性，默认是一个空数组，用于存放成功和失败的回调函数
  this.interceptors = { // 拦截器
    request: new InterceptorManager(),
    response: new InterceptorManager()
  };
}

/**
 * Dispatch a request
 *
 * @param {Object} config The config specific for this request (merged with this.defaults)
 */
Axios.prototype.request = function request(config) {
  /*eslint no-param-reassign:0*/
  // Allow for axios('example/url'[, config]) a la fetch API
  // 如果config是字符串，默认是get请求，第一个参数是URL，第二个参数是请求参数
  if (typeof config === 'string') {
    config = utils.merge({
      url: arguments[0]
    }, arguments[1]);
  }

  config = utils.merge(defaults, {method: 'get'}, this.defaults, config);
  config.method = config.method.toLowerCase(); // 转小写

  // Hook up interceptors middleware
  // chain : promise回调函数链
  /**
   * dispatchRequest分发请求，判断是用XHR(浏览器环境)还是HTTP(node环境)去发送请求;
   * undefined 用于占位，指请求失败的error回调函数
   * 为undefined表示promise状态为rejected时，在此不处理，透传到下一个promise.reject去处理
   * 通常是在响应拦截器中
   */
  var chain = [dispatchRequest, undefined];
  // config是一个常量，该promise变量调用then方法时，一定会调用成功的回调函数，即fulfilled
  var promise = Promise.resolve(config); 

  /**
   * this.interceptors.request.forEach：这个forEach是InterceptorManager原型上的方法，用于遍历请求拦截器中的handlers
   * 实际应用中使用时，axios.interceptors.request.use(fulfilled, rejected)
   * fulfilled：成功的回调
   * rejected：失败的回调
   * use是InterceptorManager原型上的方法，用于将{fulfilled, rejected}一组回调push到handlers中
   * 使用unshift方法，将请求拦截器中的handler一次放在chain的前面
   */
  this.interceptors.request.forEach(function unshiftRequestInterceptors(interceptor) {
    chain.unshift(interceptor.fulfilled, interceptor.rejected);
  });
   /**
    * 使用push方法，将请求拦截器中的handler一次放在chain的后面
    */
  this.interceptors.response.forEach(function pushResponseInterceptors(interceptor) {
    chain.push(interceptor.fulfilled, interceptor.rejected);
  });
  /**
   * 循环处理chain，chain = [请求拦截器2-成功, 请求拦截器2-失败, 请求拦截器1-成功, 请求拦截器1-失败, dispatchRequest, undefined, 响应拦截器1-成功,  响应拦截器1-失败, 响应拦截器2-成功, 响应拦截器2-失败]
   * 所以请求拦截器是先定义的后执行
   */
  while (chain.length) {
    promise = promise.then(chain.shift(), chain.shift());
  }

  return promise;
};

// Provide aliases for supported request methods
utils.forEach(['delete', 'get', 'head', 'options'], function forEachMethodNoData(method) {
  /*eslint func-names:0*/
  Axios.prototype[method] = function(url, config) {
    return this.request(utils.merge(config || {}, {
      method: method,
      url: url
    }));
  };
});

utils.forEach(['post', 'put', 'patch'], function forEachMethodWithData(method) {
  /*eslint func-names:0*/
  Axios.prototype[method] = function(url, data, config) {
    return this.request(utils.merge(config || {}, {
      method: method,
      url: url,
      data: data
    }));
  };
});

module.exports = Axios;

// 以下代码中，catch不会捕获到promise中的错误，运行到console.log(a)时，会直接报错
try {
  let p = new Promise((resolve) => {
    console.log(a) // ReferenceError: a is not defined
    resolve()
  })
  p.then(() => {
    console.log(1)
  })
} catch (error) {
  console.log(3)
  console.log(error)
}

// 自定义拦截方法methods，并缓存原始原型方法，拦截操作触发依赖后，调用原始原型方法实现功能
array._proto_ = methods 

let list = []
list[0] = 'a'

list.length = 0 // 清空数组

history.back();     // 等同于点击浏览器的回退按钮
history.forward();     // 等同于点击浏览器的前进按钮
history.go(-1);     //等同于history.back();
history.go(1);     //等同于history.forward();
history.go(n);  // 如果n超出界限或者n不为整数或者不传，那么这个方法没有任何效果也不会报错

window.history.pushState(data, title, targetURL);
//状态对象：传给目标路由的信息,可为空
//页面标题：目前所有浏览器都不支持,填空字符串即可
//可选url：目标url，不会检查url是否存在，且不能跨域。如不传该项,即给当前url添加data
window.history.replaceState(data, title, targetURL);
//类似于pushState,但是会直接替换掉当前url,而不会在history中留下记录

window.addEventListener('popstate', (event) => {
  console.log("location: " + document.location + ", state: " + JSON.stringify(event.state));
});
history.pushState({page: 1}, "title 1", "?page=1");
history.pushState({page: 2}, "title 2", "?page=2");
history.replaceState({page: 3}, "title 3", "?page=3");
history.back(); // Logs "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back(); // Logs "location: http://example.com/example.html, state: null
history.go(2);  // Logs "location: http://example.com/example.html?page=3, state: {"page":3}

/**
 * @param {TreeNode} root
 * @return {number}
 */
var maxDepth = function(root) {
    const depth = (node) => {
        if (node === null) {
            return 0
        }
        return Math.max(depth(node.left), depth(node.right)) + 1
    }
    return depth(root)
};

/**
 * @param {TreeNode} root
 * @return {number}
 */
var maxDepth = function(root) {
    let len = 0
    let queue = []
    root && queue.push(root)
    while(queue.length > 0) {
        len++
        let list = []
        queue.forEach((node) => {
            node.left && list.push(node.left)
            node.right && list.push(node.right)
        })
        queue = list
    }
    return len
};

<button onClick={handleClick}></button>

function handleClick(e) {
  // react中的e是合成事件，不需要我们担心跨浏览器兼容的问题
  e.preventDefault()
  //...
}

class MyComponent extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      isToggleOn: true
    }
    // 方法一：手动绑定
    this.handleClick = this.handleClick.bind(this)
  }
  // class中的方法默认不会绑定this
  handleClick() {
    this.setState((state) => ({
      isToggleOn: !state.isToggleOn
    }))
  }
  // 方法二：使用public class fields语法
  handleClick = () => {
    this.setState((state) => ({
      isToggleOn: !state.isToggleOn
    }))
  }
  render() {
    return (
      // 如果直接使用没有绑定this的handleClick，handleClick中的this为undefined
      <button onClick={this.handleClick}></button>
      // 方法三：此方法在每次渲染（调用render函数）的时候，都会创建一个新的函数，如果被当做prop传给子组件，子组件可能会进行额外的渲染，容易导致性能问题
      <myButton onClick={() => this.handleClick()}></myButton>
    )
  }
}

// 事件对象e通常作为函数的第二个参数传递
// 箭头函数中的e需要显示的传递
<button onClick={(e) => this.handleClick(id, e)}></button>
// bind方式，e被隐式的传递，不应该在jsx中使用bind，bind也会返回一个新函数
<button onClick={this.handleClick.bind(this, id)}></button>

<input type="text" value={this.state.value} onChange={this.handleChange} />
<select value={this.state.value} onChange={this.handleChange}>
  <option>...</option>
</select>
// 多选，value为数组
<select multiple={true} value={['a', 'b']} onChange={this.handleChange}>
  <option>...</option>
</select>

// 允许用户从本地选择一个或者多个文件，value是只读的，且只能有用户主动发起读取文件的行为
<input type="file" />

function Page(props) {
  const userLink = (
    <Link href={user.permalink}>
      <Avatar user={props.user} size={props.avatarSize} />
    </Link>
  )
  return <PageLayout userLink={userLink} />
}
// 现在，我们有这样的组件：
<Page user={user} avatarSize={avatarSize} />
// ... 渲染出 ...
<PageLayout userLink={...} />
// ... 渲染出 ...
<NavigationBar userLink={...} />
// ... 渲染出 ...
{props.userLink}

// 只有当所处组件树中没有匹配到Provider时，defaultValue才会生效
const MyContext = React.createContext(defaultValue);
// 每个context对象都会返回一个Provider React组件，它允许消费组件订阅context的变化
// 一个Provider组件可以对应多个消费组件，多个Provider组件可以嵌套使用，里层的数据会覆盖外层的数据
// 当Provider的value值发生变化，它内部的所有消费组件都会重新渲染，且不受shouldComponentUpdate函数的影响
<MyContext.Provider value={/* 某个值 */}>

class MyClass extends React.Component {
  // class的静态属性contextType会被赋值为一个Context对象
  // 组件内部可以通过this.context来消费最近Context对象上的值
  // this.context可以在任意生命周期中访问到，render函数中也能访问到
  static contextType = MyContext;
  render() {
    let value = this.context;
    /* 基于这个值进行渲染工作 */
  }
}

function MyClass() {
  return (<MyContext.Consumer>
  {value => {
    // 基于context的值进行渲染
  }}
  </MyContext.Consumer>)
}

const MyContext = React.createContext(defaultValue)
MyContext.displayName = 'MyDisplayName'

<MyContext.Provider /> // 在DevTools中显示为 MyDisplayName.Provider
<MyContext.Consumer /> // 在DevTools中显示为 MyDisplayName.Consumer

toggleTheme() {
  // 修改state.theme
}
<ThemeContext.Provider value={this.state.theme}>
  <Toolbar changeTheme={this.toggleTheme} />
</ThemeContext.Provider>

export const ThemeContext = React.createContext({
  theme: themes.dark,
  toggleTheme: () => {/*...*/}
})

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      hasError: false
    }
  }

  static getDirevedStateFromError(error) {
    // 更新 state 使下一次渲染能够显示降级后的UI
    return { hasError: true }
  }
  componentDidCatch(error, errorInfo) {
    // 可以在这里将错误日志上报给服务器
    logErrorToService(error, errorInfo)
  }

  render() {
    if (this.state.hasError) {
      return <h1>Something went wrong.</h1>
    }
    return this.props.childen
  }
}
// 使用
<ErrorBoundary>
  <MyWidget />
</ErrorBoundary>

const FancyButton = React.forwardRef((props, ref) => (
  // ref转发到DOM元素上
  <button ref={ref} className="fancy-button">{props.children}</button>
))

const ref = React.createRef()
// 向下传递ref
<FancyButton ref={ref}>click me</FancyButton>

function logProps(wrappedComponent) {
  class LogProps extends React.Component {
    constructor(props) {
      super(props)
    }
    render() {
      const {forwardedRef, ...rest} = this.props
      return <wrappedComponent ref={forwardedRef} {...rest}></wrappedComponent>
    }
  }
  return React.forwardRef((props, ref) => {
    // 将ref作为props属性forwardedRef传递下去
    return <LogProps {...props} forwardedRef={ref} />
  })
}

// FancyButton.js
class FancyButton extends React.Component {
  // ...
}
export default logProps(FancyButton)

// 父组件
import FancyButton from './FancyButton'
const ref = React.createRef()

<FancyButton ref={ref} label="click me" handleClick={handleClick} />

// 用在循环中时，可以在React.Fragment上指定key属性
<React.Fragment key={key}>
  <li></li>
  <li></li>
  <li></li>
</React.Fragment>
// 短语法-不支持key属性
<>
  <li></li>
  <li></li>
  <li></li>
</>

import PropTypes from 'prop-types';
class MyComponent extends React.Component {
  // 设置默认值-方法二 需要配合Bable转换工具`transform-class-properties`使用
  static defaultProps = {
    name: 'stranger'
  }
}
// 设置默认值-方法一
MyComponent.defaultProps = {
  name: 'stranger'
}
MyComponent.propTypes = {
  name: PropTypes.string.isRequired,
  age: PropTypes.number
}

// 受控组件使用value设置默认值，且value会控制组件的后续更新
// 非受控组件使用defaultValue设置默认值，这样react不会控制非受控组件的更新
render() {
  defaultVal = ''
  return (
    <form>
     <input value={defaultVal} />
     <input defaultValue={defaultVal} />
    </form>
  )
}

class MyComponent extends React.Component {
  constructor(props) {
    // 构造函数中必须先调用父类构造函数super()，然后才可以在构造函数中访问this
    super(props)
    this.state = {
      // ...
    }
  }
}
class MyComponent extends React.Component {
  // 
  state = {
    // ...
  }
}

const OtherComponent = React.lazy(() => import('./OtherComponent'))
<React.Suspense fallback={<div>Loading...</div>}>
  <OtherComponent></OtherComponent>
</React.Suspense>

deepClone(obj) {
  // 过滤特殊情况
  if (obj === null) {
    return null
  }
  if (typeof obj !== 'object') {
    // 函数/基本类型
    return obj
  }
  const type = Object.prototype.toString.call(obj)
  if (type === '[object RegExp]') {
    return new RegExp(obj)
  } else if (type === '[object Date]') {
    return new Date(obj)
  }
  // new obj.constructor()：保证克隆结果与之前保持相同的所属类
  let newObj = obj.constructor ? new obj.constructor() : {}
  
  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      newObj[key] = deepClone(obj[key]) // 递归
    }
  }
  return newObj
}

// 1. 导入Vue和VueRouter
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

// 2. 路由映射配置
const routes = [
  { path: '/foo', component: Foo },
  { path: '/bar', component: Bar }
]

// 3. 创建router实例
// 每个路由应该映射一个组件。 其中"component" 可以是
// 通过 Vue.extend() 创建的组件构造器，
// 或者，只是一个组件配置对象。
const router = new VueRouter({
  routes
})

// 4. 创建和挂载根实例。
// 记得要通过 router 配置参数注入路由，
// 从而让整个应用都有路由功能
const app = new Vue({
  router
}).$mount('#app')
// 通过注入路由器，我们可以在任何组件内通过 this.$router 访问路由器，也可以通过 this.$route 访问当前路由

let _Vue;
function install(Vue) {
    if (install.installed && Vue === _Vue) return
    _Vue = Vue;

  Vue.mixin({
    beforeCreate () {
      if (this.$options.router) {
        this._routerRoot = this
        this._router = this.$options.router
      } else {
        this._routerRoot = (this.$parent && this.$parent._routerRoot) || this
      }
    }
  })

  Object.defineProperty(Vue.prototype, '$router', {
    get () { return this._routerRoot._router }
  })

  Object.defineProperty(Vue.prototype, '$route', {
    get () { return this._routerRoot._route }
  })

  Vue.component('RouterView', View)
  Vue.component('RouterLink', Link)
}