前端每周学习分享--第9期

1.设计模式

基础：抽象、封装、多态、继承

GOF提出的设计模式主要基于以下面向对象设计原则：

• 封装变化

• 多用组合、少用继承

• 针对接口编程，不针对实现编程

• 分离‘常量’与‘变量’

设计模式可以分为4类：

1. 创建型模式
2. 结构型模式
3. 行为型模式
4. J2EE模式

【策略模式】

定义算法族，分别封装起来，让它们之间可以相互替换。使算法的变化独立于算法的使用。

【观察者模式】

定义了对象之间的一对多依赖，当一个对象改变状态是，它的所有依赖者都会收到通知并自动更新。

观察者模式提供了一种对象设计，让主题和观察者之间松耦合，对象之间的互相依赖降低，能够应对变化，从而建立有弹性的OO系统。

【命令模式】

未完待续

2.JS模块化

阮一峰*Javascript模块化编程

• 使用立即执行函数形成闭包，从而保护模块内私有成员。
• 使用放大模式来实现模块的继承
• 显示输入全局变量

模块规范

浏览器端与服务器端模块的差异

• 服务器端模块放在本地硬盘，等待时间是硬盘读取时间，可以同步加载完成
• 浏览器端模块通过网络加载，同步加载的话会阻塞应用，应该采用异步加载

服务器端node的module遵循CommonJS规范。

浏览器端requirejs遵循AMD，seajs遵循CMD。

ES6引入了模块化，其设计思想是在编译时就能确定模块的依赖关系，以及输入和输出的变量。

ES6模块化的特点

• 默认开启严格模式
• 可以导入导出各种类型的变量
• 模块内的变量都是局部变量
• 模块是单例的，只加载一次，再次加载直接读内存

ES6的模块化分为导入（import）和导出（export）

import可放在任意位置，会提升至模块头部

export必须再模块的最外层

3.代码相关

3.1.在子组件mouted中用一个prop值来做逻辑判断

我希望判断的时候prop值已经从父组件中传过来了，父组件给这个prop绑定的值是在父组件mouted时从路由中获取的，但我发现在子组件mouted的时候它的prop值还是default值，就导致在子组件mouted中没有做出我期望的判断。

我的处理方法是把这一段逻辑判断的代码放入setTimeout(function,0)中。

setTimeout将这段代码变成了异步任务，异步任务会被放入任务队列，等到主线程执行完后才开始从任务队列中取异步任务执行。

setTimeout(() => {
    console.log("init upload image",this.initUploadImg)
    this.initUploadImg && this.handleImgUpload(this.editor.getContents())
    },0)

当主线程执行完后，prop值已经成功传过来了，自然就能成功处理了。

3.2.vue路由懒加载

文档

当打包构建应用时，JavaScript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路由被访问的时候才加载对应组件，这样就更加高效了。

结合 Vue 的异步组件和 Webpack 的代码分割功能，轻松实现路由组件的懒加载。

3.3.babel配置

相关阅读：

• @babel/core 与 babel-core 有什么区别？
• 如何写好.babelrc？Babel的presets和plugins配置解析
• babel到底该如何配置？

常用的几个babel依赖：

    "@babel/core": "^7.0.0",

​    "@babel/preset-env": "^7.3.1",

​    "@babel/plugin-syntax-dynamic-import": "^7.2.0",

​    "babel-loader": "^8.0.5",

几个babel包的依赖版本不要新版旧版混用， "babel-loader": "^8.0.5"会引用7.0.0以上的@babel/core，而"babel-loader": "^7.2.0"会引用7.0.0以下的babel-core，如果混用了，就会去找另一个版本的模块，自然会报错找不到。