![](https://img-blog.csdnimg.cn/a7fd5f97e50a4cc7adb7c626139491d9.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
前端设计模式
文章平均质量分 61
了解与学习前端设计模式我们首先要学习一些知识: 面向对象、设计原则; 最后才是设计模式。最好我们知道如何绘画‘UML 类图‘。具体的讲解还是在我们的每一个章节中去学习和体会。
黑木令
这个作者很懒,什么都没留下…
展开
-
前端 JavaScript 设计模式--设计模式真实业务场景
设计原则 — 真实实例1. 某打车公司的业务场景2. 某短视业务场景注释: 这两个场景是某公司的面试题, 它与设计模式紧密相关, 其中UML类图实现与代码实现, 有兴趣的同学可以进来看一下。原创 2022-01-08 16:15:03 · 836 阅读 · 0 评论 -
前端 JavaScript 设计模式前奏--面向对象JQ实例与总结
1. 面向对象 – JS 的应用举例/** * 1. 我们可以认为 JQuery 就是一个类 * 1. JQ 的打包源码中是一个函数, 这个函数就是一个构造函数, 其实就是一个 class 。 * 2. $('p') 其实就是 JQ 的一个实例 。 * * 2. 实现原理 (实际上使用的 ES5 的构造函数): */class jQuery { constructor(selector) { let slice = Array.prototype.slice原创 2022-01-08 15:22:56 · 1123 阅读 · 1 评论 -
前端 JavaScript 设计模式前奏--面向对象-Class类
面向对象–class 类1. 类 的声明1.1 方式一: 传统的使用 构造函数 的方式, 模拟一个类的方式/** * 1. 方式一: 传统的使用 构造函数 的方式, 模拟一个类的方式 * * 1. 这里我们就声明了一个 Animal1 类 。 */function Animal1 () { // 通过 this 来表明这是一个构造函数 。 this.name = 'name'}console.log('Animal1: ', Animal1)1.2 方式二: ES6 中对 c原创 2022-01-07 14:50:31 · 1011 阅读 · 0 评论 -
前端 JavaScript 设计模式前奏--面向对象-封装、继承、多态
JavaScript 面向对象如图所示:1. 什么是面向对象1. 面向对象的概念2. 面向对象的三要素: 继承/封装/多态 ⭐️3. JS 的应用举例4. 面相对象的意义 --- 数据结构化2. 面向对象 的概念: 类 + 对象1. 面向对象 的概念: 类 + 对象 1. 类(模板) / 对象(实例) 1. 通过 class 这个 类(模板)来实例化很多对象 (如同 ES5 的构造函数一样) 。2.1 对象(实例):类图关系如图所示:1. 对象(实例):原创 2022-01-06 13:52:26 · 1030 阅读 · 0 评论 -
前端 JavaScript 设计模式--搭建开发环境
本章节的主要内容是–搭建开发环境因为所涉及到的知识点包含ES6语法, 也为了我们的执行效率更高所以我们搭建一套自己需要的开发环境。如图所示:知识点大纲1. 搭建开发环境2. 什么是面向对象3. UML 类图搭建开发环境1. 初始化 npm 环境 。2. 安装 webpack 。3. 安装 webpack-dev-server 。4. 安装 babel (解析 ES6 语法)。细节知识点:--save-dev: 1. 标识文件除了安装以外, 还要在 package.jso原创 2022-01-05 10:07:15 · 960 阅读 · 0 评论 -
前端 JavaScript 设计模式-大纲
前端 JavaScript 设计模式大纲废话不多说, 上图有真相 。1. 一名合格的工程师必备条件:1. 对前端开发有一定的设计能力 。 1. 想要成为项目技术负责人, 设计能力是必要的基础 。 2. 从写好代码, 到做好设计, 设计模式是必经之路 2. 前端学习设计模式的困难1. 网上的资料大都是针对后端 Java 的 。2. 看得懂概念, 但是不知道怎么使用, 看完就忘 。3. 现在的前端开发大都是针对业务开发, 框架的使用, 很少有精力去研究设计模式相关内容 。3. 知原创 2022-01-04 14:25:41 · 553 阅读 · 0 评论