图解你身边的 SOLID 原则 - JS 实例版

2020-04-23
阅读 4 分钟
3.3k
上次笔者翻译了一篇图解 SOLID 原则 原文见: 图解你身边的 SOLID 原则 过了两天发现有人为那篇文章补充了 JavaScript 例子,看了下例子还不错,这次就顺便也翻译一下哈,部分例子有删改~ 关于概念部分就不多说了,看上一篇或者看图就好~ 那么直接进入正题: S - 单一职责原则 例子 我们假设需要验证一个表单,然后将用...

图解你身边的 SOLID 原则

2020-04-15
阅读 2 分钟
8.3k
这篇文章我们来简单介绍一下 SOLID 原则(这五个字母代表了面向对象编程的五个基本原则) 我们用身边的事物来举例,让它们更易于理解和记忆。 好啦,开始吧~ S - 单一职责原则 Single Responsibllity Principle - 即 SRP 一个类只能承担一个职责。通俗点儿说就是一个类只能承担一件事,并且只能有一个潜在的原因去更改这...

浅析 FP:JavaScript 中的纯函数

2020-03-30
阅读 3 分钟
3.7k
前言 纯函数 是一个常见的概念,在日常工作中也经常会遇到,它其实非常简单,今天我们来了解一下它的好处以及为什么要使用它。 两个特点 一个函数,如果符合以下两个特点,那么它就可以称之为 纯函数: 对于相同的输入,永远得到相同的输出 没有任何可观察到的副作用 相同输入得到相同输出 我们先来看一个不纯的反面典型...

浅析 JS 设计模式之:工厂模式

2020-03-24
阅读 3 分钟
2.3k
工厂模式是一种创建对象的 创建型模式,遵循 DRY(Don't Repeat Yourself)原则。在该模式下,代码将会根据具体的输入或其他既定规则,自行决定创建哪种类型的对象。简单点儿说就是,动态返回需要的实例对象。

webpack 小技巧:动态批量加载文件

2020-03-18
阅读 3 分钟
6.6k
背景 最近笔者在工作中遇到了一个小需求: 要实现一个组件来播放帧图片 这个需求本身不复杂,但是需要在组件中一次性引入十张图片,就像下面这样: {代码...} 作为一个有代码洁癖的程序员,我是不允许这种重复性代码存在滴,于是乎就尝试有没有什么简单的方法。 方法一:绕过 webpack 由于笔者用的是 vue-cli 3,熟悉的...

浅析 JS 设计模式之:单例模式

2020-03-02
阅读 2 分钟
5.2k
良好的设计模式可以显著提高代码的可读性,降低复杂度和维护成本。笔者打算通过几篇文章通俗地讲一讲常见的或者实用的设计模式。 今天先从最简单的一个入手:单例模式。 文中的示例代码会使用 ES6 语法,尽量简化不必要的细节 概念 单例模式(Singleton)属于创建型的设计模式,它限制我们只能创建单一对象或者某个类的...

你可能忽略的 async/await 问题

2020-02-16
阅读 3 分钟
5k
async/await 大家肯定都用过,在处理异步操作的时候真的是很方便。 如果有还不熟悉的小伙伴可以看笔者之前的文章: 带你理解 async/await 那今天主要讲一些在使用 async/await 时容易忽略和犯错的地方。 一个例子 下面是一个常见的 Vue 代码片段: {代码...} 上面的代码中,每一行都会 等待上一行的结果返回后才会执行。...

写给 Web 工程师的设计入门

2020-01-22
阅读 4 分钟
3.2k
今天分享一篇 设计过程 的入门~ 其中也包含一些有用的 设计网站。如果你你想知道如何完整设计一个项目,可以一起来看下~ 在本文中,将以设计一个 CMS 系统界面为例,介绍针对 web 开发中的通用设计流程。 CMS,全称 Content Management System,即内容管理系统 搭建环境 原文作者使用的是 Adobe XD(它是完全免费的)中...

动图学 JavaScript 之:原型继承

2020-01-15
阅读 4 分钟
3.4k
你是否曾思考为什么我们能使用 JS 中的一些内置属性和方法,比如 .length,.split(),.join()?我们并没有显式地声明它们,那么究竟它们从哪里来的呢? 可不要说什么“那是 JS 中的魔法!”。其实这些都因为一个叫做 原型继承(prototypal inheritance) 的东西。它太棒啦,你平时也经常会用到,只不过可能没有注意!

动图学 JavaScript 之: JS 引擎原理

2020-01-07
阅读 3 分钟
6.2k
JS 实在是太酷了(认真脸),那你有没有想过机器是怎么解析 JS 代码的?作为一个 JS 开发者,一般我们不需要直接跟编译器打交道,但是如果可以了解其中的基本原理,相信会对以后的工作和学习都有帮助的!

动图学 JavaScript 之:事件循环(Event Loop)

2019-12-31
阅读 3 分钟
10.4k
我们都知道 JavaScript 是一门 单线程 的语言:同一时间只能运行一个任务。通常情况下这没什么问题,但是如果你有一个任务需要耗费 30 秒的时间,那其他任务难道都要等它 30 秒么?(由于 JS 运行在浏览器的主线程,所以这 30 秒的时间里,整个页面都会处于卡死状态)

动图学 JavaScript 之:作用域链(Scope Chain)

2019-12-23
阅读 3 分钟
4.3k
一个例子 今天我们来用介绍一下 JS 中的作用域链,先来看一段代码: {代码...} 上面调用了函数 getPersonInfo,然后返回了一个包含 name,age,city 的字符串: Sarah is 22 and lives in San Francisco。 但是 getPersonInfo 这个函数中并没有 city 变量,那么它是怎么访问到 city 的呢? 首先,不同的执行上下文会分配...

动图学 JavaScript 之:声明提升(Hoisting)

2019-12-16
阅读 3 分钟
3.2k
JS 由于语言设计的缺陷(工期不够?),里面有一些堪称神奇的特性,初学者碰到后可能会满脸黑人问号,今天要介绍的就是其中的一个特性:声明提升(Hoisting)。

你可能不知道的 JS 特性:可选链

2019-12-09
阅读 2 分钟
8.6k
今天我们来介绍一个你可能没见过的 JS 新特性,目前处于 Stage 3 阶段,它叫作 可选链(optional chaining),它可能解决很多人都面对过的痛点,让我们来了解这下~

写给前端的正则表达式入门

2019-11-29
阅读 2 分钟
11.8k
常用的跟正则相关的方法有 match、test 和 replace。其中 match,replace 都是字符串上的方法, test 是正则对象上的方法。

18 个提高生产力的开发者工具

2019-11-22
阅读 2 分钟
7.3k
本篇介绍一些提高生产力的工具,包括网站、浏览器插件、VSCode插件和命令行工具~ 网站篇 Bundlephobia 如果你想要安装一个新的依赖,这个网站可以查看这个依赖的大小、是否支持 tree-shaking 等各项指标。(仅限 npm 包哈) [链接] Coolors 还在发愁自己某个项目的配色?可以来这个网站找找看。 [链接] Carbon 可以把代...

你可能不知道的 JSON.stringify 用法

2019-10-31
阅读 2 分钟
4k
JS 中有许多常见的函数,我们可能每天都在使用它们,但是却不知道它们的一些额外功能。JSON.stringify 就是这样的一个函数,今天就来看下它的特殊用法。

教你 30 秒发布一个 TypeScript 包到 NPM

2019-07-21
阅读 2 分钟
9.4k
发布过 npm 包的同学都知道,初始化一个 npm 项目,直接用 npm init -y 就可以了,那如果要用 ts 呢,直接 tsc --init 即可。这两个操作会生成 package.json 和 tsconfig.json 文件。然后我们按以下步骤修改一下配置:

[译]ES6 模块化入门

2019-07-14
阅读 4 分钟
3.7k
在 ES6 之前,我们已经知道了 RequireJS,AngularJS 的依赖注入,以及 CommonJS,具体可以看笔者的上一篇文章《JS模块化历史简介》。当我们学习 ES6 的模块化,就会发现它的发展深受 CommonJS 的影响。通过这篇文章,我们将看到 export 和 import 语句,以及 ES6 模块是怎么与 CommonJS 模块兼容的。

[译]JS 模块化历史简介

2019-06-27
阅读 4 分钟
5.2k
在早些年间,JavaScript 就是直接写在 HTML 的 <script> 标签里的,最多也就是放在独立的文件里面,而它们也都共享一个全局作用域。

[译]带你理解 Async/await

2019-06-16
阅读 5 分钟
9.6k
在函数前面的「async」这个单词表达了一个简单的事情:即这个函数总是返回一个 promise。即使这个函数在语法上返回了一个非 promise 的值,加了「async」这个关键字就会指示 JavaScript 引擎自动将返回值包装成一个解析后的 promise。

浅析 JS 事件循环之 Microtask 和 Macrotask

2019-06-07
阅读 2 分钟
4.4k
Event Queue 在 HTML 规范中被称为 Task Queue,但是为了区分,一般都叫作 Macrotask QueueJob Queue 是在 ECMAScript 规范中谈及处理 Promise 回调时提到的,但是由于和 V8 中的实现比较相似,所以一般都称为 Microtask Queue

浅析 JS 中的 EventLoop 事件循环(新手向)

2019-05-28
阅读 3 分钟
15k
Event Loop 这个概念相信大家或多或少都了解过,但是有一次被一个小伙伴问到它具体的原理的时候,感觉自己只知道个大概印象,于是计划着写一篇文章,用输出倒逼输入,让自己重新学习这个概念,同时也能帮助更多的人理解它~

VueJS 如何编译服务器端远程模板【异步组件+简单方法】

2017-08-28
阅读 3 分钟
10.5k
有些时候你可能需要从后台获取模板,并在前台在自己编译,这在用 AngularJS 1.x 的时候似乎很常见,可以直接用 ng-include 搞定,在 Vue 1.x 的时候也可以直接用 partial 搞定。但是在 Vue 2.x 中,官方取消了 partial 这个 API,根据情况推荐使用 component 代替,参见这里

快速理解JavaScript 中的 LHS 和 RHS 查询

2017-08-14
阅读 2 分钟
14.1k
变量的赋值操作会执行两个动作,首先编译器会在当前作用域中声明一个变量(如果之前没有声明过),然后在运行时引擎会在作用域中查找该变量,如果能够找到就会对它赋值。 --- 《你不知道的JavaScript(上卷)》 P7

【闯关模式】作用域、链和闭包 下

2016-04-06
阅读 2 分钟
1.7k
前言 上篇 【闯关模式】作用域、链和闭包 中 任务四 闭包(Closures) 闭包在JS中是很重要的概念,他们让JS出色地完成异步任务。 为了能更好的理解闭包,我们先来看作用域链的例子: {代码...} 我们称someFunc()声明了一个变量bar: {代码...} 有了嵌套作用域的知识,我们可以说inner()有权访问bar: {代码...} inner() 可以...

【闯关模式】作用域、链和闭包 中

2016-04-05
阅读 2 分钟
2k
理解作用域链在哪结束很重要!所有的JS运行时环境都必须隐式创建一个全局作用域对象(浏览器中是window,node中是global),这个对象就位于作用域链的顶端:

【闯关模式】作用域、链和闭包 上

2016-04-05
阅读 2 分钟
2.3k
前言 这个系列是翻译自 nodeschool.io中的 scope-chains-closures 直接闯关: {代码...} scope-chains-closures 作用域链和闭包 作用域,作用域链,闭包和垃圾回收机制都有一个共同点:学了就忘!闭包到底是干啥的?啥时候发生垃圾回收机制?作用域链到底是啥? 这个教程让你发现这些都是小意思。让你在实践中学习! 任...

自定义指令实现手风琴菜单 AngularJS

2015-12-29
阅读 3 分钟
7k
自定义指令在angular中是比较难的一个点,写了这么长时间也只会一些简单的单指令,翻出《用AngularJS开发下一代Web应用》,拿出里面的accordion例子好好啃一下。

在ui-grid中使用右键菜单ng-context-menu

2015-11-12
阅读 3 分钟
6.1k
自己的坑自己填 在项目里面为了省事用了ui-grid,刚开始看效果不错的!后来坑越来越多..这个坑印象比较深记录一下好了 关于ui-grid 官网:[链接] 怎么说呢,文档还是比较全的(有时候要翻GFW),star也很多,遇到的问题网上也基本上能找到解决方法 需求 在ui-grid渲染的表格里面使用右键菜单,同时双击row执行指定方法。效...