正在查看 — 编程

听说 Vue3 数据绑定要切换到 Proxy,为什么?

这就是这篇文章的原因,来源于某个牛逼公司的面试。我真的应该学会怎么清楚表达观点…

definePropertyProxy 使用方式和效果看起来是差不多的,但如果翻译成中文的话,一个是定义属性,一个是代理,并且 MDN 上描述有所不同。

Object.defineProperty() 方法会直接在一个对象上定义一个新属性,或者修改一个对象的现有属性, 并返回这个对象。 —— MDN

Proxy 对象用于定义基本操作的自定义行为(如属性查找,赋值,枚举,函数调用等)。 —— MDN

defineProperty

这是一个 ES5 的方法。一个 defineProperty 需要三个参数,都是 require

其实这个功能早在 2.x 版本就加入了,那时候对 PWA 并没有什么概念。好想换 iPad Mini (new)

nlvi-ios-desktop

目前 3.x 只改了启动图,适配了 iPad 横屏和 iPhone 全面屏(普通屏和plus后续加)。之前看到苹果对 PWA 持拒绝态度我是震惊的,你 tm 早就给 safari 加入了这个功能,也有相关meta配置(包括”识别为WebApp“),然后你告诉我这东西不是 PWA?

本来确实想支持 PWA 的,想到除了要 manifest.json,还要搞定对应生成 service worker,使用不是很友好,所以取消计划。这部分添加功能就是一个尝试的甜点,所以也没有拿出来说。目前 3.x 开启 pjax 然后添加到桌面,阅读体验还是挺好的。

所以这次打算讲讲「苹果式网页应用安装」,其实挺简单的。

Round 1

- 我现在把所有东西都注释掉,改成这样
function a() {
return inner;
let inner;
}
返回什么?

- 那就应该 undefined 了,反正后面不执行

自信的不行,出了门掏出全世界最牛逼的千元机坚果 Pro 2S,验证了一下。

inner is not defined

确实是不执行,但好像不是 undefined 啊╭(*゚Д゚*)╮

Round 2

- 如果改成这样呢
function a() {
function inner() {}
return inner;
let inner;
}
返回什么?

- 返回方法

自信的不行,同样用全世界最牛逼的千元机坚果 Pro 2S,验证了一下。

Identifier ‘inner’ has already been declared

(゚Д゚≡゚д゚)!? 你在返回你🐴呢?

又在「杂乱的工作台上」完成文章……

没错又错过一个非常好的机会。与其说是因为时间不够做不完,还不如说是因为陷入斐波那契思考导致做不完。

不留遗憾,把它搞完。题源就不说了。

事出有因,写 rabbit 的时候,一条单测出了问题

Reducer _object returned undefined during initialization.

想来必然是 reducer 缺少默认的 state 所致,但是我的单测是从 dva 直接拿过来改改就用的,应该不会出现问题,所以一定是哪里出了差错。后面发现了,虽然 dva 可以接受 reducers 是空对象,但应用运行起来有一样问题。

主要是这个问题无伤大雅,model 不会出现只有 reducers 这种情况。我也给出了解决:构建 reducer 给一个默认 state 顶着(但我认为一个 model 应该强制存在 state

显然这次并不想讲这个,而是想理解 combineReducers

我们现在小程序需要使用状态管理,但因为项目体量实在很小又没必要使用 redux 或者 mobx。所以我打算不负责任的写一个。

createStore

Redux 最核心的部分,提供基础的功能。createStore接受三个参数:reducer, initialState, enhancer。前两个比较好理解,enhancer主要用在接受中间件中。返回产物我们主要使用三个方法:getState, dispatch, subscribe

  • getState:获取当前 state 值
  • subscribe:接受监听,存入 listeners 池中
  • dispatch:处理 reducer 操作,触发 listeners 方法

最近想到一个问题:为什么JavaScript定义一个函数有那么多种形式,是历史残留还是为了装逼?研究了一下发现还是有区别的。

JavaScript中定义一个方法主要可以分成两种形式:

  • 函数声明
  • 函数表达式

学会了却不会活用是真的菜…

前几天面试,提到了回调地狱用promise,然后抛出个衍生问题:promise也会嵌套,怎么解决promise的回调地狱。

我想不到,直接问能不能用ES8,说行,然后我就想到了const p2 = await Promise这种做法。

可是,我记得我在若干天前才写了一篇关于「JS方法链式调用」。

只要函数返回值是一个函数,就可以连着调用

So,

p1.then(({ p2 }) => {
  return p2
}).then({ p3 } => {})

继续,这次尝试逐行理解Store类的东西

然后关于这次,一些“工具函数”都集中在util.js的这种做法,已经够我学的了。这是个很受用的做法。

一些简单的东西

if (process.env.NODE_ENV !== 'production') {
  assert(Vue, `must call Vue.use(Vuex) before creating a store instance.`)
  assert(typeof Promise !== 'undefined', `vuex requires a Promise polyfill in this browser.`)
  assert(this instanceof Store, `Store must be called with the new operator.`)
} // 断言函数在util,如果不满足前面的情况,后面以error 排出来
// (实际上就是想看有没有在vue环境中和有没有正确安装)
const {
  plugins = [],
  strict = false
} = options // 定义两个变量,在传入的对象中把这两个东西拿出来,字面意思

看个代码代价很高,我边读边转笔,然后一个失手把手挑了个滴血不止…(笔头挑掉了一层手皮)

vuex和dva的源码都想看,不然没办法知道相性在哪。

由口而入

这都暴露干净了…

export default {
  Store,
  install,
  version: '__VERSION__',
  mapState,
  mapMutations,
  mapGetters,
  mapActions,
  createNamespacedHelpers
}

install肯定是Vue老套路,想把东西当插件用肯定要暴露这个方法。这个之前写组件经常需要碰到,弃之!

这次就先读暴露出来的四个方法吧


0%