javascript - 关于一个vue2插件的部分源码疑惑-PHP中文网问答

讲师中心微信公众号

首页

文章

后端开发 web前端数据库开发工具 php框架常见问题人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程自媒体新闻

专题

后端开发 web前端数据库开发工具 php框架人工智能 Java 系统教程电脑教程硬件教程手机教程软件教程游戏教程新闻

AI工具

AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 AI 提示词

学习

大前端后端开发数据库移动端运维开发计算机基础

编程手册

大前端后端开发数据库移动端运维开发计算机基础

下载

js特效网站源码工具下载类库下载网站素材学习资源插件扩展手机游戏

最近更新

javascript - 关于一个vue2插件的部分源码疑惑

巴扎黑 2017-04-11 11:22:19

[JavaScript讨论组]

615

这个插件是vuelidate

研究了它大半天，完全基于es6的写法，写的很酷炫，对于部分核心函数代码，没看懂。。
就如下面的例子

    const buildFromKeys = (keys, fn, keyFn) => keys.reduce((build, key) => {
      build[keyFn ? keyFn(key) : key] = fn(key)
      return build
    }, {})
    
  const computedRules = buildFromKeys(validationKeys, (key) => {
    const rule = validations[key]
    return mapValidator(rootVm, rule, key, parentVm, parentProp)
  }, mapDynamicKeyName)

  const validationVm = new Vue({
    data: {
      dirty: false,
      dynamicKeys
    },
    methods: defaultMethods,
    computed: {
      ...computedRules,
      ...defaultComputed
    }
  })

就单纯考虑 computed中的...computedRules来看，我也看过了 es6中关于...拓展运算符的用法，还是没搞懂，为什么它这里可以成功运行呢。
假如有人研究过这个开源插件就更好啦，希望可以和你多请教点问题，谢谢~

巴扎黑

全部回复(1)

巴扎黑2017-04-11 11:24:19 1楼

... 这三个点叫做 spread operator.

语法是

// for function calls
myFunction(...iterableObj)

// for array literals:
[...iterableObj, 4, 5, 6]

通常大部分情况下 ... 是用来 copy 一个 array 或者方便地传入一个函数的参数

/* 1. passing arguments */

var params = [param1, param2, param3]
// without spread operator
function foo(params[0], params[1], params[2]) 
// 你当然可以直接传一个array进去啦，但是我们就是傲娇，就想把它一个一个传进去

// with spread operator
function foo(...params)

/* 2. copy an array */

var arr = [1, 2, 3]

// without spread operator
var newArr = [arr[0], arr[1], arr[2], 4, 5] 

// with spread operator
var newArr = [...arr, 4, 5]

注意 spread operator 只能作用在 iterableObj 上面, 而只有实现 iteration protocols 的元素才是被叫做 iterableObj

In order to be iterable, an object must implement the @@iterator method, meaning that the object (or one of the objects up its prototype chain) must have a property with a @@iterator key which is available via constant Symbol.iterator:

常见的iterableObj 有 String, Array, TypedArray, Map and Set, 很显然，我们的普通的 object 并没有 iterator 这个 property, 不信你看

function isIterable(obj) {
  // checks for null and undefined
  if (obj == null) {
    return false;
  }
  return typeof obj[Symbol.iterator] === 'function';
}

var a = {"foo": "bar"}

isIterable(a) // false
isIterable([1,2,3]) // true

但是 LZ 给出的代码里面 computedRules 很明显是一个 object 啊，为什么也可以用 ... ???
这是因为虽然es6里面没有这个用法，但是大家已经寂寞难忍，饥渴难耐了，配合这个插件Object rest spread transform
就可以做到

var x = {
    a: 1,
    b: 2
}
var output = {
    ...x,
    c: 3
}
// output = {a: 1, b: 2, c: 3}

但是我们为什么要这么做呢？直接

return computedRules

不好吗？

不好!
为了避免 mutation 啊，因为object 是 reference 传递的，谁能保证你将来不会乱改 computed 里面的 property 然后不知情的情况下改了 computedRules 里面相应的 property.

为了 immutability, 为了部落，!

当然你懒的装插件或者就是看不惯这种用法，也可以

computed: Object.assign({}, computedRules, defaultComputed}

这么写行不行？

行

那么为什么不这么写

简单来说是代码相对复杂一点, 往深入了说就是逼格不高 XD

赞 +0

添加回复

专题推荐

更多>

热门话题

热门教程

更多>