前端周刊-2018年9月第三期

编写「可读」代码的实践

链接:

http://taobaofed.org/blog/2017/01/05/writing-readable-code/

摘要

伟大的文学作品都是建立在废纸堆上的，不断删改作品的过程有助于写作者培养良好的「语感」。当然，代码毕竟不是艺术品，程序员没有精力也不一定有必要像作家一样反复打磨自己的代码/作品。但是，如果我们能够在编写代码时稍稍多考虑一下实现的合理性，或者在添加新功能的时候稍稍回顾一下之前的实现，我们就能够培养出一些「代码语感」。这种「代码语感」会非常有助于我们写出高质量的可读的代码。

React + Redux 组件化方案

链接:

http://imweb.io/topic/57c531bc6227a4f55a8872c2

摘要

组件化方案:理想中的组件化，第一步应该就是组件的标签化， 例如有一个 Header 组件，无需关注组件内部的实现，我们只需要使用一个

标签就能调用它，通过设置属性的方式，来控制它的显示的内容，和对应的事件。借助 jsx 语法，React 已经实现上述想法。

但是由于 React 的数据流向是单向的， 子组件的数据和方法只能由父级组件赋予，一旦组件嵌套层次变深，传递数据将会变得非常复杂。

redux 框架解决了这个问题，简单来说，它将 react 由父级传递数据，变为了由一个统一的数据源 store 单向地向各个组件传递数据。

所有数据都存放在 store 中，组件内部不维护任何数据。

store 提供了 dispatch 方法来触发改变 store 中数据。 dispatch 传入的值被称作 action。 dispatch(action) 之后，会进入到 store 中称为 reducer 的处理函数，这些 reducer 会依据不同的 action 的类型，进行不同的处理，reducer 返回的值就会作为 store 中新的数据，一个 reducer 对应的是 store 中一个数据字段，每多一个reducer， store 中就多一个数据字段。数据发生改变后， store 就会通知对应的组件重新渲染。

通过 redux 框架提供的 connect 高阶函数， 直接从 store 选取需要的数据和申明需要使用的方法传入组件中，这些申明的方法是组件事件具体的逻辑的实现，例如发送请求，上报逻辑等等，所以通常调用 dispatch(action) 的逻辑也会包含在里面。

ANT DESIGN PRO-开箱即用的中台前端/设计解决方案

链接:

https://github.com/ant-design/ant-design-pro?utm_source=gold_browser_extension

摘要

优雅美观：基于 Ant Design 体系精心设计；

常见设计模式：提炼自中后台应用的典型页面和场景；

最新技术栈：使用 React/dva/antd 等前端前沿技术开发；

响应式：针对不同屏幕大小设计；

主题：可配置的主题满足多样化的品牌诉求；

国际化：内建业界通用的国际化方案；

⚙️ 最佳实践：良好的工程实践助您持续产出高质量代码；

Mock 数据：实用的本地数据调试方案；

✅ UI 测试：自动化测试保障前端产品质量；

实现一个完美符合Promise/A+规范的Promise

链接:

https://github.com/forthealllight/blog/issues/4

摘要

Promise允许我们通过链式调用的方式来解决“回调地狱”的问题，特别是在异步过程中，通过Promise可以保证代码的整洁性和可读性。本文主要解读Promise/A+规范，并在此规范的基础上，自己实现一个Promise.

Vue知识点整理

链接

https://segmentfault.com/a/1190000016344599

对于MVVM的理解？

Model代表数据模型，也可以在Model中定义数据修改和操作的业务逻辑。

View 代表UI 组件，它负责将数据模型转化成UI 展现出来。

ViewModel 监听模型数据的改变和控制视图行为、处理用户交互，简单理解就是一个同步View 和 Model的对象，连接Model和View。

在MVVM架构下，View 和 Model 之间并没有直接的联系，而是通过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的， 因此View 数据的变化会同步到Model中，而Model 数据的变化也会立即反应到View 上。

ViewModel 通过双向数据绑定把 View 层和 Model 层连接了起来，而View 和 Model 之间的同步工作完全是自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM, 不需要关注数据状态的同步问题，复杂的数据状态维护完全由 MVVM 来统一管理。

Vue的生命周期（8个阶段：创建前/后, 载入前/后,更新前/后,销毁前/销毁后)

Vue 实例从创建到销毁的过程，就是生命周期。从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、销毁等一系列过程，称之为 Vue 的生命周期。

beforeCreate（创建前） 在数据观测和初始化事件还未开始

created（创建后） 完成数据观测，属性和方法的运算，初始化事件，$el属性还没有显示出来

beforeMount（载入前） 在挂载开始之前被调用，相关的render函数首次被调用。实例已完成以下的配置：编译模板，把data里面的数据和模板生成html。注意此时还没有挂载html到页面上。

mounted（载入后） 在el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用。实例已完成以下的配置：用上面编译好的html内容替换el属性指向的DOM对象。完成模板中的html渲染到html页面中。此过程中进行ajax交互。

beforeUpdate（更新前） 在数据更新之前调用，发生在虚拟DOM重新渲染和打补丁之前。可以在该钩子中进一步地更改状态，不会触发附加的重渲染过程。

updated（更新后） 在由于数据更改导致的虚拟DOM重新渲染和打补丁之后调用。调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作。然而在大多数情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环。该钩子在服务器端渲染期间不被调用。

beforeDestroy（销毁前） 在实例销毁之前调用。实例仍然完全可用。

destroyed（销毁后） 在实例销毁之后调用。调用后，所有的事件监听器会被移除，所有的子实例也会被销毁。该钩子在服务器端渲染期间不被调用。

Vue实现数据双向绑定的原理：Object.defineProperty（）

Vue组件间的参数传递

1.父组件与子组件传值

父组件传给子组件：子组件通过props方法接受数据;

子组件传给父组件：$emit方法传递参数

2.非父子组件间的数据传递，兄弟组件传值

eventBus，就是创建一个事件中心，相当于中转站，可以用它来传递事件和接收事件。项目比较小时，用这个比较合适

vue路由的钩子函数

首页可以控制导航跳转，beforeEach，afterEach等，一般用于页面title的修改。一些需要登录才能调整页面的重定向功能。

beforeEach主要有3个参数to，from，next：

to：route即将进入的目标路由对象，

from：route当前导航正要离开的路由

next：function一定要调用该方法resolve这个钩子。执行效果依赖next方法的调用参数。可以控制网页的跳转。

vuex是什么？怎么使用？哪种功能场景使用它

只用来读取的状态集中放在store中； 改变状态的方式是提交mutations，这是个同步的事物； 异步逻辑应该封装在action中。

在main.js引入store，注入。新建了一个目录store，….. export 。

场景有：单页应用中，组件之间的状态、音乐播放、登录状态、加入购物车