敲碎时间的人

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

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

19小时前更新 7分钟阅读

敲碎时间的人

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

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

19小时前更新 8分钟阅读 设计模式

敲碎时间的人

耦合

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

2天前更新 6分钟阅读 javascript

敲碎时间的人

圈复杂度

圈复杂度圈复杂度是表示代码中独立现行路径的数量。举个例子:function sum(a, b) { if (typeof(a) !== typeof(b)) { throw new Error('Cannot sum different types'); } else { return a + b; } }这个方法的圈复杂度就是2，也就是说需要测试两个分支，

2天前更新 3分钟阅读 圈复杂度

敲碎时间的人

函数的命令和查询分裂

上一节，我们知道了什么是命令，以及什么是查询。今天我们继续前面的例子，来试着将一个功能太多的函数进行命令和查询的分离。      /** * 查询函数(用于设置值并返回) * */ function configure(values) { var config = { docRoot: '/somewhere' }; var

2天前更新 10分钟阅读 command

敲碎时间的人

什么是可测试代码

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

2天前更新 11分钟阅读 javascript

雨伯

thenjs 学习

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

4天前更新 2分钟阅读 javascript

敲碎时间的人

sinon最佳实践

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

4天前发布 37分钟阅读

敲碎时间的人

Injector框架理解(九)

上一节我们学习了关于didi依赖注入框架的关于组件和加载器作用域相关的使用，今天我们来了解一些初始化的一些使用。我们还是用一些例子来说明问题const { Injector } = require('didi'); const { expect } = require('chai'); const injector = new Injector([ { __init__: [ 'foo' ]

5天前发布 10分钟阅读

敲碎时间的人

Injector框架理解(一)

在可测试js的框架学习过程中，我们不断提到了依赖注入，依赖注入使用最多的就是在java中的spring，为了在js中使用依赖注入，我们今天学习另一个不那么常用的框架:didi首先看看安装命令npm install didi这个时候，我看到项目下的package.json{ "name": "babelwebpack", "version": "1.0.0", "description"

5天前更新 13分钟阅读

敲碎时间的人

Injector框架理解(八)

上一节我们学习了didi框架如何使用子加载器加载子模块的一些知识，还有包括初始化一些基本组件，今天我们继续学习相关的知识，还是从一个例子开始。const { Injector } = require('didi'); const { expect } = require('chai'); const injector = new Injector([ { __exports__: [ 'foo

6天前更新 10分钟阅读

敲碎时间的人

Injector框架理解(七)

上一节我们学习了didi依赖注入框架如何创建子加载器，以及如何加载子模块，今天我们继续使用例子来说明相关的内容：我们首先看看如下的例子：const {Injector} = require('didi'); const injector = new Injector([ { __exports__: [ 'foo' ], 'foo': [ 'fact

6天前更新 11分钟阅读

敲碎时间的人

Injector框架理解(六)

上一节我们学习了didi依赖注入框架，如何使用模块，以及如何创建子依赖注入器，今天我们继续深入理解它们，先来看看第一个例子： const {Injector} = require('didi'); //定义一个父模块 const moduleParent = /** @type ModuleDeclaration */ ({ a: [ 'value', 'a-parent' ]

7天前更新 8分钟阅读

敲碎时间的人

深入理解Mock,Stub

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

7天前更新 23分钟阅读 mock

敲碎时间的人

Fakes,Mocks,Stubs的区别

Fakes,Mocks,Stubs的区别首先，本节的内容有一点偏理论，而且代码也不一定是用js来说明的，其次，理论的作用在于指导实践，因此我们后期的可测试js很多代码都会用到今天的理论知识，好了，开始吧。1、FakeFakes are objects that have working implementations, but not same as production one. Usually

7天前更新 11分钟阅读 fake

敲碎时间的人

Injector框架理解(五)

上一节我们学习了如何配置一个组件的依赖项，以及怎么配置属性组件，还有就是invoke方法的使用，今天我们继续学习依赖注入框架的另外一些知识，比如如何初始化组件。我们先来看看instantiate方法：const {Injector}= require('didi'); class Foo { constructor(abc1, baz1) { this.abc = abc1;

8天前更新 8分钟阅读

敲碎时间的人

Injector框架理解(四)

上一节我们学习了配置一个组件的依赖项的两种方式，以及配置一个属性组件；今天我们来学习didi框架的另外一些功能，我们先看看代码:const {Injector} = require('didi'); function bar(baz, abc) { return { baz: baz, abc: abc }; } bar.$inject = [ 'baz',

9天前更新 5分钟阅读

敲碎时间的人

Injector框架理解(三)

上一节我们学习了didi框架的如何重用一个模块，以及依赖注入的数组式配置，今天我们继续学习如何配置依赖注入等。我们还是通过例子来说明使用方法const {Injector} = require('didi'); class FooType { constructor() { this.name = 'foo'; } } function barFactory(foo

9天前更新 11分钟阅读

敲碎时间的人

js设计模式(中介-Mediator)

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

9天前更新 5分钟阅读

敲碎时间的人

有趣的web-console

有趣的web-consoleWeb 控制台是一种工具，主要用于记录与网页相关的信息，例如：网络请求、JavaScript、安全错误、警告、CSS 等。它使我们能够通过在页面内容中执行 JavaScript 表达式来与网页交互。log()error()warn()clear()time() and timeEnd()table()count()group() and groupEnd()custom

9天前更新 6分钟阅读 console

敲碎时间的人

Injector框架理解(二）

今天我们继续学习didi这个依赖注入框架，上一节我们知道了怎么定义组件，怎么定义模块，怎么通过Injector这个类来载入模块和获取组件。今天我们来学习如何重用模块：我们首先定义好组件和模块:const {Injector} = require('didi'); class FooType { constructor() { this.name = 'foo'; } }

9天前更新 5分钟阅读

敲碎时间,铸造不朽

CKEditor5——Position源码分析(三)

CKEditor5——Position源码分析(三)上一节我们学习了比较两个Position之间的关系，它们可能属于不同的根节点，它们可能完全相同，它们也可能存在前后关系。今天我们继续学习这个类的另一个关键方法：那就是getTransformedByOperation( operation ) → PositiongetTransformedByOperation( operation ) {

13天前发布 12分钟阅读 ckeditor5

敲碎时间,铸造不朽

CKEditor5——Position源码分析(二)

CKEditor5——Position源码分析(二)上一节，我们学习了Position的基础知识，包括怎么寻找它的parent属性，它的path是什么意思？今天我们看另一个方法，两个Position之间的关系是什么，也就是这个方法：compareWith( otherPosition ) → PositionRelationcompareWith( otherPosition ) { if (

13天前发布 10分钟阅读 ckeditor5

静下心来

BabelJS - 使用 Babel 和 JSX

BabelJS - 使用 Babel 和 JSX在本文中，我们将了解如何使用 JSX 和 babel。在我们深入细节之前，让我们了解一下 JSX 是什么。什么是 JSX？JSX 是一个 JavaScript 代码，其中结合了 xml 语法。 JSX 标签具有标签名称、属性和子标签，使其看起来像 xml。React 使用 JSX 进行模板化，而不是常规的 JavaScript。没有必要使用它，但是，

14天前发布 12分钟阅读 babel

静下心来

BabelJS - 使用 Babel 和 Webpack

BabelJS - 使用 Babel 和 WebpackWebpack 是一个模块打包器，它将所有具有依赖关系的模块——js、样式、图像等打包成静态资产 .js、.css、.jpg、.png 等。Webpack 带有预设，有助于编译成需要的形式。例如，有助于以 react 形式获得最终输出的 react 预设，有助于在 ES5 或 6 或 7 中编译代码的 es2015 或 env 预设等。我们在

18天前发布 21分钟阅读 babel

静下心来

BabelJS - Babel 预设

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

18天前发布 8分钟阅读 babel-preset

静下心来

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

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

20天前更新 35分钟阅读 import

静下心来

webpack初步理解

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

20天前更新 73分钟阅读 webpack

静下心来

BabelJS - Babel CLI

BabelJS - Babel CLIBabelJS 带有一个内置的命令行界面，其中 JavaScript 代码可以使用的命令轻松编译为相应的 ECMA 脚本。我们将在本文中讨论这些命令的使用。首先，我们将为我们的项目安装 babel-cli。我们将使用 babeljs 来编译代码。为您的项目创建一个文件夹以使用 babel-cli。npm init为项目创建的 Package.json让我们运行

20天前发布 13分钟阅读 babel

静下心来

BabelJS - Babel Polyfill

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

24天前发布 19分钟阅读 babel

静下心来

BabelJS - Babel 插件

BabelJS - Babel 插件BabelJS 是一个 javascript 编译器，它可以根据可用的预设和插件更改代码的语法。 babel编译的流程涉及到以下3个部分：parsingtransformingprinting给 babel 的代码原样返回，只是语法改变了。我们已经看到将预设添加到 .babelrc 文件中以将代码从 es6 编译到 es5，反之亦然。预设只不过是一组插件。如果在

25天前发布 34分钟阅读 babel

静下心来

Webpack 或 Browserify & Gulp：哪个更好？

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

26天前发布 9分钟阅读 webpack

静下心来

BabelJS - 将 ES8 功能转换为 ES5

BabelJS - 将 ES8 功能转换为 ES5字符串填充是添加到 javascript 中的新 ES8 功能。我们将研究一个简单的示例，它将使用 babel 将字符串填充转换为 ES5。String Padding字符串填充根据指定的长度从左侧添加另一个字符串。字符串填充的语法如下所示:str.padStart(length, string); str.padEnd(length, strin

26天前发布 3分钟阅读 babel

静下心来

BabelJS - 将 ES7 功能转换为 ES5

BabelJS - 将 ES7 功能转换为 ES5在本文中，我们将学习如何将 ES7 功能转换为 ES5。ECMA Script 7 添加了以下新功能Async-AwaitExponentiation OperatorArray.prototype.includes()我们将使用 babeljs 将它们编译为 ES5。根据您的项目要求，也可以在任何 ecma 版本中编译代码，即 ES7 到 ES6

27天前发布 12分钟阅读 babel7

静下心来

BabelJS - 将 ES6 模块转换为 ES5

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

27天前更新 30分钟阅读 babel

静下心来

BabelJS - 将 ES6 功能转换为 ES5

BabelJS - 将 ES6 功能转换为 ES5在本文以及接下来的文章中，我们将看到 ES6 中添加的特性。我们还将学习如何使用 BabelJS 将功能编译到 ES5。以下是我们将在本章中讨论的各种 ES6 特性Let + ConstArrow FunctionsClassesPromisesGeneratorsDestructuringIteratorsTemplate LiteralstEn

28天前更新 49分钟阅读 babel

敲碎时间,铸造不朽

CKEditor5——Position源码分析

CKEditor5——Position源码分析前面我们介绍过CK5模型中的一个关键类，那就是Position的使用，今天我们来看看它的源码，梳理一下方便以后理解：export default class Position { /** * Creates a position. * * @param {module:engine/model/element~Element|module

1个月前发布 20分钟阅读 ck5

静下心来

BabelJS - 使用 Babel 7 设置项目

BabelJS - 使用 Babel 7 设置项目最新版本的 Babel，7 发布，对现有包进行了更改。安装部分与 Babel 6 相同。abel 7 唯一的区别是所有的包都需要用@babel/ 安装，例如@babel/core、@babel/preset-env、@babel/cli、@babel/polyfill 等。这是使用 babel 7 创建的项目设置。1、执行以下命令开始项目设置npm

1个月前发布 6分钟阅读 javascript

敲碎时间,铸造不朽

CKEditor5——模型理解（二：Node）

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

1个月前更新 9分钟阅读 ck5

敲碎时间,铸造不朽

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

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

1个月前发布 13分钟阅读 ck5