读vue源码笔记(1)

摘要:
shared/util.js1.hasOwnvarhasOwnProperty=对象.prototype.hasOwnProperty;对象{for(constkeyin_from){to[key]=_from[key]}returnto}mergeField//选项[key]的策略处理:string)=&gt:

shared/util.js

1.hasOwn

var hasOwnProperty = Object.prototype.hasOwnProperty;
function hasOwn (obj, key) {
    return hasOwnProperty.call(obj, key)
}

extend 

export function extend (to: Object, _from: ?Object): Object {
  for (const key in _from) {
    to[key] = _from[key]
  }
  return to
}

mergeField

// 对option[key]进行策略处理,默认不处理
function mergeField (key) {
    const strat = strats[key] || defaultStrat
    options[key] = strat(parent[key], child[key], vm, key)
  }

makeMap

export function makeMap (
  str: string,
  expectsLowerCase?: boolean
): (key: string) => true | void {
  const map = Object.create(null)
  const list: Array<string> = str.split(',')
  for (let i = 0; i < list.length; i++) {
    map[list[i]] = true
  }
  // 箭头函数返回的格式
  return expectsLowerCase
    ? val => map[val.toLowerCase()]
    : val => map[val]
} 

很多地方都会用到:例如”isPlainTextElement = makeMap('script,style,textarea', true)

2.getTypeIndex

function getType (fn) {
  var match = fn && fn.toString().match(/^s*function (w+)/);
  return match ? match[1] : ''   //获得函数名
}
// console.log(Boolean.toString().match(/^s*function (w+)/))
// ["function Boolean", "Boolean", index: 0, input: "function Boolean() { [native code] }", groups: undefined]
function isSameType (a, b) {
return getType(a) === getType(b)
}
function getTypeIndex (type, expectedTypes) {
  if (!Array.isArray(expectedTypes)) {
    return isSameType(expectedTypes, type) ? 0 : -1  
  }
  for (var i = 0, len = expectedTypes.length; i < len; i++) {
    if (isSameType(expectedTypes[i], type)) {
      return i
    }
  }
  return -1
}

3.proxy代理

//key a
if (!(key in vm)) {
  proxy(vm, "_props", key);
}
function noop (a, b, c) {}
var sharedPropertyDefinition = {
    enumerable: true,
    configurable: true,
    get: noop,
    set: noop
};

function proxy (target, sourceKey, key) {
    sharedPropertyDefinition.get = function proxyGetter () {
      // this为vm。
       return this[sourceKey][key]
     };
    sharedPropertyDefinition.set = function proxySetter (val) {
       this[sourceKey][key] = val;
    };
   Object.defineProperty(target, key, sharedPropertyDefinition);
}
//对vm._props进行代理。

4.toggleObserving

var shouldObserve = true;
function toggleObserving (value) {
    shouldObserve = value;
}

 5.hasProto

var hasProto = '__proto__' in {};console.log(hasProto); //true

 6.mergeOptions

export function mergeOptions (
  parent: Object,
  child: Object,
  vm?: Component
): Object {
  if (process.env.NODE_ENV !== 'production') {
    //核实子对象中components的名字合法
    checkComponents(child)
  }

  if (typeof child === 'function') {
    child = child.options
  }

  normalizeProps(child, vm)
  normalizeInject(child, vm)
  normalizeDirectives(child)
  const extendsFrom = child.extends
  if (extendsFrom) {
    parent = mergeOptions(parent, extendsFrom, vm)
  }
  if (child.mixins) {
    for (let i = 0, l = child.mixins.length; i < l; i++) {
      parent = mergeOptions(parent, child.mixins[i], vm)
    }
  }
  const options = {}
  let key
  for (key in parent) {
    mergeField(key)
  }
  for (key in child) {
    if (!hasOwn(parent, key)) {
      mergeField(key)
    }
  }
  function mergeField (key) {
    const strat = strats[key] || defaultStrat
    options[key] = strat(parent[key], child[key], vm, key)
  }
  return options
} 

 7.toArray、cached(shared/util.js)

// 形成一个新数组,该数组是 any 从 number 以后的数组。
export function toArray (list: any, start?: number): Array<any> {
  start = start || 0
  let i = list.length - start
  const ret: Array<any> = new Array(i)
  while (i--) {
    ret[i] = list[i + start]
  }
  return ret
}

// 高阶函数,对外赋值之后调用。每次调用缓存结果。

export function cached<F: Function> (fn: F): F {
   const cache = Object.create(null)
   return (function cachedFn (str: string) {
     const hit = cache[str]
     return hit || (cache[str] = fn(str))
   }: any)
} 

cached的用法如下:

function cached(fn) {
  const cache = Object.create(null)
  return (function cachedFn (str) {
    const hit = cache[str]
    return hit || (cache[str] = fn(str))
  })
}
let f = function (x) {
    return x*x
}
let k1 = cached(f)
let k2 = k1('7')
console.log('k2=',k2)  //k2= 49
let k3 = k1('7')
console.log('k3=',k3)  //k3=49 

以 _和$开头的变量或者方法的key, 

/**
 * Check if a string starts with $ or _
 */
export function isReserved (str: string): boolean {
  const c = (str + '').charCodeAt(0)
  return c === 0x24 || c === 0x5F
}

 

免责声明:文章转载自《读vue源码笔记(1)》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇dba权限导出dmp后使用普通用户导入报错1036. 跟奥巴马一起编程(15)下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

网页仿 Office 2003 的工具条

网页仿 Office 2003 的工具条   [ 日期:2005-01-27 ]   [ 来自:网上摘录 ]<html><head><meta http-equiv="Content-Language" content="zh-cn"><meta http-equiv="Content-Type" content=...

mif文件生成方法

mif文件就是存储器初始化文件,即memory initialization file,用来配置RAM或ROM中的数据。常见生成方法: Quartus自带的mif编辑器生成 mif软件生成 高级编程语言生成 前两种方法都有一定的缺陷,主要介绍第三种方法,按照mif文件格式,使用高级编程语言(Matlab、C)编写生成。 注意: mif文件都是ASCⅡ码...

flask中内置的session

Flask中的Session非常的奇怪,他会将你的SessionID存放在客户端的Cookie中,使用起来也非常的奇怪 1. Flask 中 session 是需要 secret_key 的 from flask import session app = Flask(__name__) app.secret_key = "xiaobai" secret_k...

d3的常用方法和数据类型

1. 选择集自身属性 1. selection.empty() 选择集是否为空,为空返回true,否则返回false 2. selection.node() 返回第一个非空元素,无则返回null 3. selection.size() 返回选择集中的元素个数 2. 选择集元素属性 1. attr 设置属性 2. classed 设置class 3. sty...

chinaMap

中国地图 基本地图 import pandas as pd from matplotlib.colors import rgb2hex from mpl_toolkits.basemap import Basemap import matplotlib.pyplot as plt ### 1. 中国基本地图 map = Basemap( llcrnrlo...

ReactNative WebView组件详解

在开发Android的时候,一般我们会有一些加载网页的需求,或者执行一些JavaScript,我们都知道在Android中实现这个功能的控件是WebView,在ReactNative中也有实现此类需求额的组件,它的名字也是WebView。那么今天的这篇文章就来详细说说在ReactNative WebView的使用。本文示例效果图 webview.gif...