前端社区

前端社区

js设计模式(工厂,原型,单例)

我们知道,在设计模式中,创建型模式有五种,今天我们继续讨论剩下的模式。 工厂模式工厂的作用是生产具有相同特性的相似物体。这有助于轻松管理、维护和操作对象。例如,在我们的玩具工厂,每个玩具都会有一定的信息。它将包含购买日期、原产地和类别。这里我首先定义了一个玩具叫做StarWars,然后定义了一个玩具工厂,然后根据工厂函数创建一个具体的玩具。 var StarWars = fun
19小时前更新 7分钟阅读

js设计模式(抽象工厂和建造器)

什么是设计模式首先,需要了解设计模式的真正定义。作为软件开发人员,您可以“以任何方式”编写代码。但是,设计模式将是最佳实践,这将对您维护代码的方式产生重大影响。以最大的技巧编写的代码将比业余代码持续更长时间。这意味着当您选择正确的编码风格时,您无需担心可扩展性或维护。设计模式的作用是帮助您构建不会使整体问题复杂化的解决方案。模式将帮助您构建交互式对象和高度可重用的设计。设计模式是面向对象编程中不可
19小时前更新 8分钟阅读

耦合

耦合上一节我们重点关注了扇出的内容,以及用例子说明了如何才能将一个函数或者模块的代码通过重构来达到一个合理的扇出值。今天我们来理解耦合:耦合是关注模块如何组合在一起的,增加子模块或许可以减少扇出的值,但是不能减少原始模块对最初依赖之间的耦合度;本质是将显示依赖变成了间接依赖。虽然今天我们不讲解内聚,但是我们也说说什么是内聚,以及什么是耦合? 内聚是从功能角度来度量模块内的联系,一个好的内
2天前更新 6分钟阅读

什么是可测试代码

什么是可测试代码我们理解的可测试代码指的是:1、松耦合2、短小的3、可隔离的我们会依照这三个原则来分析,怎么样编写可测试的代码?一般来说,一个函数或者一个功能,如果越复杂,那么实现此功能需要的代码可能就会越多,代码量就会越多,出现潜在Bug的概率就越大。因此,编写可测试代码的第一步就是让函数或者功能保持最小代码量,而保持最小代码量的方法就是让命令(Command)和查询(Query)分离。我们首先
2天前更新 11分钟阅读

thenjs 学习

thenjs 是一个js的异步控制流程库特点可以像标准的Promise那样,把N多异步回调函数写成一个长长的then链,并且比Promise更简洁自然。因为使用标准Promise的then链,其中的异步函数都必须转换成Promise,Thenjs则无需转换,像使用CallBack一样执行异步函数即可。强大的Error机制,可以捕捉任何同步和异步的异步错误。开启debug模式,可以把每一个then链
4天前更新 2分钟阅读

sinon最佳实践

我们对可测试js代码的学习已经有了一些理解,也认识了一些关于测试替身的问题,比如什么时候使用spies?什么时候使用stubs,什么时候使用mocks。今天我们用一个测试框架sinonjs来做具体的说明介。简介测试使用了Ajax、网络、超时、数据库或其他依赖项的代码可能很困难。例如,如果您使用 Ajax 或网络,您需要有一个服务器来响应您的请求。使用数据库,您需要使用测试数据设置测试数据库。所有这
4天前发布 37分钟阅读

深入理解Mock,Stub

深入理解Mock,Stub前面我们学习了Mock,Stub的一些基础知识,今天我们深入理解一下:我们知道,单元测试最重要的工作就是破除依赖项(break dependency),破除依赖的技巧有好几个,如何使用这些技巧也是我们需要深入研究和学习的。首先需要指出的是破除依赖项的技巧有Mock类和Stub类。为了破除依赖项它们都可以说是伪造相关library界面的假物件,只是用途不一样而已:Stub:
7天前更新 23分钟阅读

js设计模式(中介-Mediator)

中介设计模式另一个设计模式,正如其名称所暗示的那样,是中介,起着调解作用。这种模式为一组对象提供了一个中心控制点。它被大量用于状态管理。当其中一个对象更改其属性的状态时,中介可以轻松地将其广播给其他对象。下面是一个简单的例子,说明 Mediator 设计模式如何提供帮助:var Participant = function (name) { this.name = name; th
9天前更新 5分钟阅读

BabelJS - Babel 预设

BabelJS - Babel 预设Babel presets是 babel-transpiler 的配置详细信息,告诉它以指定的模式进行转换。以下是我们将在本章中讨论的一些最受欢迎的预设:ES2015EnvReact我们需要使用具有我们希望转换代码的环境的预设。或者例如,es2015 preset 会将代码转换为 es5。带有值 env 的预设也将转换为 es5。它还具有附加功能,即选项。如果您
18天前发布 8分钟阅读

揭秘 webpack 的“导入”功能:使用动态参数

揭秘 webpack 的“导入”功能:使用动态参数在本文中,我们将学习揭开 webpack 的“导入”功能迷雾:使用动态参数。虽然是 webpack 的一个热门卖点功能,但是导入功能有很多隐藏的细节和特性,很多开发者可能都不知道。例如,导入函数可以接受动态表达式,能够实现一些众所周知的特性,比如延迟加载等。您可以将动态表达式视为不是原始字符串(例如 import('./path/to/file.j
20天前更新 35分钟阅读

webpack初步理解

Webpack 是一个非常强大且有趣的工具,被视为当今许多 Web 开发人员用来构建其应用程序的技术中的基本组件。然而,许多人会认为使用它是一个相当大的挑战,主要是因为它的复杂性。 webpack bundle过程图表modules模块是一个文件的升级版本。一个模块,一旦创建并且构建之后,除了包含原始的文件代码之外,还有一些其他有意义的信息:比如模块使用的加载器,模块的依赖项,模块的导出
20天前更新 73分钟阅读

BabelJS - Babel Polyfill

BabelJS - Babel PolyfillBabel Polyfill 为 Web 浏览器添加了对功能的支持,这些功能不可用。 Babel 将代码从最近的 ecma 版本编译为我们想要的版本。它根据预设更改语法,但不能对使用的对象或方法做任何事情。为了向后兼容,我们必须为这些功能使用 polyfill。可以polyfilled的功能以下是在旧浏览器中使用时需要 polyfill 支持的功能列
24天前发布 19分钟阅读

Webpack 或 Browserify & Gulp:哪个更好?

Webpack 或 Browserify & Gulp:哪个更好?随着 Web 应用程序变得越来越复杂,使您的 Web 应用程序可扩展变得至关重要。过去编写ad-hot时候, JavaScript 和 jQuery 就足够了,而如今构建 Web 应用程序需要更高程度的纪律原则和正式的软件开发实践,例如:1、单元测试以确保对代码的修改不会破坏现有功能。2、Linting 以确保一致的编码风格
26天前发布 9分钟阅读

BabelJS - 将 ES6 模块转换为 ES5

BabelJS - 将 ES6 模块转换为 ES5在本文中,我们将看到如何使用 Babel 将 ES6 模块转换为 ES5。Modules考虑需要重用部分 JavaScript 代码的场景。 ES6 用模块的概念来拯救你。一个模块只不过是写在一个文件中的一段 JavaScript 代码。模块中的函数或变量不可用,除非模块文件导出它们。简单来说,这些模块帮助您在模块中编写代码,并且只公开应该由代码的
27天前更新 30分钟阅读

CKEditor5——模型理解(二:Node)

上一节我们理解了基本的CK5的模型基本信息,今天我们来学习一些模型的API。节点说明首先,需要理解的就是模型的节点。在这一点上,CK5的模型节点和dom的节点有点类似,也有一些不同。我会在文章中一一介绍。节点是模型树的基本结构。它是模型中不同节点类型的一种抽象。这里需要指出的一点是:如果一个节点从模型树中分离出来,你可以使用它的 API 来操作它。但是,非常重要的是,已经附加到模型树的节点只能通过
1个月前更新 9分钟阅读

CKEditor5——Node,Element,NodeList源码分析

CKEditor5——Node,Element,NodeList源码分析前面大概知道了模型的基本组成,包括一个抽象类Node,两个实现类Text和Element,以及还有一个关键的类就是NodeList。为了容易展开这个话题,我首先提出一个问题,那就是为什么是Node类是一个抽象类?先看看这个类的具体代码:export default class Node { /** * Creates a
1个月前发布 13分钟阅读
数据加载中