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

╰半夏微凉° 2023-08-17 17:15 102阅读 0赞

## 1.设计模式 ##

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

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

*  封装变化
 *  多用组合、少用继承
 *  针对接口编程，不针对实现编程
 *  分离‘常量’与‘变量’

设计模式可以分为4类：

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

【策略模式】

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

【观察者模式】

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

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

【命令模式】

未完待续

## 2.JS模块化 ##

[阮一峰\*Javascript模块化编程][Javascript]

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

[模块规范][Link 1]

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

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

服务器端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路由懒加载 ####

[文档][Link 2]

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

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

#### 3.3.babel配置 ####

相关阅读：

*  [@babel/core 与 babel-core 有什么区别？][babel_core _ babel-core]
 *  [如何写好.babelrc？Babel的presets和plugins配置解析][.babelrc_Babel_presets_plugins]
 *  [babel到底该如何配置？][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，如果混用了，就会去找另一个版本的模块，自然会报错找不到。

转载于:https://www.cnblogs.com/mthz/p/week9.html

[Javascript]: http://www.ruanyifeng.com/blog/2012/10/javascript_module.html
[Link 1]: http://www.ruanyifeng.com/blog/2012/10/asynchronous_module_definition.html
[Link 2]: https://router.vuejs.org/zh/guide/advanced/lazy-loading.html#%E6%8A%8A%E7%BB%84%E4%BB%B6%E6%8C%89%E7%BB%84%E5%88%86%E5%9D%97
[Link 3]: https://cn.vuejs.org/v2/guide/components-dynamic-async.html#%E5%BC%82%E6%AD%A5%E7%BB%84%E4%BB%B6
[Link 4]: https://doc.webpack-china.org/guides/code-splitting-async/#require-ensure-/
[babel_core _ babel-core]: https://segmentfault.com/q/1010000016207460
[.babelrc_Babel_presets_plugins]: https://excaliburhan.com/post/babel-preset-and-plugins.html
[babel]: https://segmentfault.com/a/1190000011665642