主页

概述 随着前端工程化越来越完善，应用开发越来越复杂，代码规范的问题也越来越受到大家的重视，特别是团队协作过程中的规范问题。 ESLint 是在 ECMAScript/JavaScript 代码中识别和报告模式匹配的工具，它的目标是保证代码的一致性和避免错误。本文主要整合 React 应用中 ESLint 与 Prettier 的使用。 本文案例仓库：react-eslint-prettier 创建项目 利用 create-react-app 脚手架创建 React 项目骨架结构： 1 $ npx create-react-app react-eslint-prettier ESLint 我们可以根据个人/团队的代码风格进行 ESLint 规则配置，也可以使用开源的配置...

原文：https://www.sitepoint.com/how-to-build-a-todo-app-using-react-redux-and-immutable-js/ 作者： Dan Prince 发布时间：2017.09.13 React 使用组件的方式和单向数据流使它非常适合用户界面结构的描述，然而，用于处理状态的工具故意保持得很简单——这是为了提醒我们，React 只是传统的 Model-View-Controller 体系结构中的 View。 没有什么可以阻止我们仅使用 React 来构建大型应用，但是我们很快就会发现，为了保持代码的简洁，我们需要在其它位置去管理应用的状态。 尽管没有官方解决方案来处理应用状态，但是有些库特别适合 ...

概述 目前很多公司已经实行前后端分离开发，前后端协作过程中，如果后端 API 接口未完成开发，就需要前端自己来模拟（mock）数据。 模拟数据的方式方法很多，可通过自建本地 JSON 文件、RAP2、JSON Server 等方式来实现。 本地自建 JSON 文件的方式比较适用于仅 GET 获取数据时，如果想要 POST 一些数据，那么就需要借助服务器环境了。JSON Server 可实现在本地搭建模拟数据的服务器，RAP2 是阿里妈妈前端团队出品的开源接口管理工具 RAP 第二代。 mock 数据作为前后端分离开发所需要掌握的必备技能，推荐使用在线版本的 RAP2，访问 http://rap2.taobao.org/，结合 Mock.js 的语法，即可快速实现数据 mock，...

为了给基于触摸的用户界面提供高质量的支持，触摸事件提供了在触摸屏或触控板上解释手指（或触控笔）活动的能力。 touch 事件 触摸事件有以下几种类型：touchstart、touchmove、touchend、touchcancel，可以通过检查触摸事件的 TouchEvent.type 属性来确定当前事件属于哪种类型。 touchstart 当用户在触摸平面上放置了一个触点时触发，可理解为当用户手指或使用手写笔之类的工具触摸到屏幕时触发。 touchmove 当用户在触摸平面上移动触点时触发，当触点的半径、旋转角度以及压力大小发生变化时，也将触发此事件。注意，不同浏览器上 touchmove 事件的触发频率并不相同，这个触发频率还和硬件设备的性能有关，因此决不能让程序的运...

本文主要介绍造成 1px 边框问题原因和几种常用的解决方案。 几个概念 像素（px）是作为网页布局的基础，通常一个像素就是计算机能够显示一种特定颜色的最小区域。当设备尺寸相同，像素变得越密集，屏幕能显示的画面就越细致。 像素是一个抽象的单位，它不是一个确定的物理量，也不是一个具体的点或者小方块（尽管可以用点和小方块来呈现），在不同的设备或不同的环境中，1px 所代表的大小是不同的。 以下先介绍几个基本的概念： CSS 像素 CSS 像素是一个抽象的单位，主要使用在浏览器上，用来精确度量 Web 页面上的内容。一般情况之下，CSS 像素也被称为与设备无关的像素（device-independent pixel，简称 DIPs）或逻辑像素。 CSS 像素，顾名思义就是我们写 ...

概述 现在很多公司多人协作时代码都是使用 Git 进行集中管理，那么如何在多人协作过程中使用好 Git 也是工作的必备技能，本文主要介绍在需要多人协作开发项目中 Git 工作流的使用，包括集中式工作流、功能分支工作流、pull request 等。 集中式工作流 说明 集中式工作流以中央仓库作为项目所有修改的单点实体，该工作流只用到 master 分支，并且所有修改都提交到这个分支上。 这种工作流比较适合小型团队，因为小型团队可能不会有太多的协作和合流的动作。 示例 让我们用示例来展示一个常见的小型团队是如何使用这种工作流来协作的。假设有两个开发者（小明和小红），来看看他们是如何开发自己的功能并上传到中央仓库中的。 初始化中央仓库 首先需要有人在服务器上创建好仓库...

前言 随着移动设备变得越来越丰富，前端开发人员要实现 页面内容自动适应不同尺寸屏幕 的需求也越来越凸显了。原本可能通过百分比就可以完成适配的问题，现在也不是全部都适用了，为了适配各种不同尺寸的屏幕，我们需要了解一下都有哪些常用的适配方案。 适配方案 固定宽度 这是一种老版屏幕适配问题的解决方案，通常是把页面宽度固定死，如果有多余的宽度则进行居中留白。这种解决方案对于前端开发非常 happy，也就是不用管适配了。如下图示例： 但是这种适配如果放在移动设备端，就有点难堪了，估计粉丝量分分钟就掉完了： 响应式布局 这种方式是利用 CSS3 的 Media Query（媒体查询）技术实现，通过媒体查询根据不同的屏幕分辨率来进行适配。但响应式布局的问题在于： 屏幕...

诱因 之前写的一篇文章已经简单介绍过了 == 与 === 的比较运算符（见《JavaScript 中 == 与 === 的区别》一文）了，之所以再谈 JavaScript 中的相等比较，缘于昨天下午，同事出了一道灵魂拷问的题目：null == 0 的比较结果是什么？ 这还用想吗，== 比较在类型不同时会隐式类型转换，最终结果为 true 呗…… 但，等会儿，结果会这么简单？嗯，应该不简单。 简单测试一下，果然，运行结果为 false。 小朋友，你是否有很多的问号？？？ == 确实是一个令人头痛的运算符，它的语法行为多变，不符合直觉，为了一劳永逸，还是把 == 和 === 一次性搞清楚了吧。 规范 运算符==说明 为了弄清楚 null == 0 结果为 false 的原...

在实际开发中，由于团队成员编码习惯不一，技术层次不同，开发前定制并遵循一种代码规范能提高代码质量，增加开发效率。 开发规范 工作目录构建规范 示例： 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 front-end/ |--src | |--assets | | |--css | | |--font | | |--images | | |--js | |--components | |--requests | |--router | |--store | |--utils | |--views |--dist |--build |--test |--doc 前端项目构建时，目录结构大同小异，类似使用到上例中...

缘起 本文始于同事在群里提出的一道技术问题： 1 2 3 4 5 6 7 8 9 10 11 var a = 0 if (true) { a = 1 function a() {} function b() {} var c = 3 a = 21 b = 2 c = 4 } console.log(a, b, c) 在 Chrome 浏览器中执行结果为： 1 1 ƒ b() {} 4 即打印结果中，a 为 1，b 为函数 f b() {}，c 为 4。 结合作用域和变量提升（【翻译】JavaScript Scoping and Hoisting）的分析，不是应该结果为 a===21 b===2 c===4 吗？ 不行，换个浏览器试试，在...

概述 随着前端技术的发展，2015年6月17日，ECMA 国际组织发布了 ECMAScript 的第六版，该版本正式名称为 ECMAScript 2015。自此，ECMAScript 每年都会发布一次新标准，目前 ECMAScript 2020 草案已经出炉。ECMAScript 2015 通常被称为 ECMAScript 6 或者简称 ES6，实际上现在很多时候我们也将 ECMAScript 2015 之后的版本都统称为 ES6。 本文主要是结合 ES6 来实现一个 TodoList 示例，不曾想将“简单的问题复杂化”了，那就顺便利用原生的方式封装一下，再顺便把 React 相关的基本原理简单实现一下。当然，虚拟 DOM 暂不在讨论之列。 本文示例源码 TodoList 本...

概述 使用 Vue 有一段时间了，其响应式数据处理在很大程度上提高了项目编码效率，一直没有好好研究过其原理，趁最近疫情宅家的时间，研究整理并自定义了一个简单的 MVVM 库，算是加深对它的的理解吧。 本库借鉴 Vue.js 2.x 版本相关原理，需要一定的 JavaScript 基础，文中如果遇到不理解的地方可自行查阅相关文档。 本文代码片段仅是为作说明的部分代码，并不是完整代码，请 clone 本仓库到本地后对照参考。 准备 Vue 双向绑定原理 Vue 采用数据劫持加发布-订阅模式（有说观察者模式-有待细致研究其差异）实现响应式数据处理，通过 Object.defineProperty() 来劫持数据的 getter/setter，当数据更新时触发 setter 以更新...

1. 概要 在 JavaScript 执行过程中，可能经常遇到一些“奇怪”的行为，比如闭包为什么能将函数中局部变量的值一直保存在内存中以供在函数体外继续调用，不理解 JavaScript 为什么会这样工作。 很多时候，我们会认为 JavaScript 中有很多坑，那可能是我们对 JavaScript 的了解还不够深入，本文将对 JavaScript 中的执行上下文作简单的阐述，如有表达不准确之处还望指出，敬请谅解。 2. 执行上下文定义 每当控制到达 ECMAScript 可执行代码时，就会进入一个执行上下文。 执行上下文（Execution Context，简称 EC）是 ECMA-262 规范中用于代表和区分可执行代码的抽象概念。简单来说，执行上下文，就是代码的执行环境或...

1. 简介 原生 JavaScript 中，我们可以通过 setTimeout() 或是 setInterval() 来不断更新元素状态以实现动画效果。要看到流畅的动画效果，就需要在更新元素状态时以一定的频率进行，我们先来了解一下“帧”的概念。 以下是百度百科是关于“帧”的说明： 为了更好地说明帧的概念，我们先来看看电影播放的基本原理。 在放映电影的过程中，画面被一幅幅地放映在银幕上。画幅移开时，光线就被遮住，幕上便出现短暂的黑暗；每放映一个画幅后，幕上就黑暗一次。但这一次次极短暂的黑暗，被人的视觉生理现象“视觉暂留”所弥补。人眼在观察景物时，光信号传入大脑神经需经过一段短暂时间，光的作用结束时，视觉也不立即消失。视觉的这一现象称为“视觉暂留”。当电影画面换幅频率达到...

1. 命名冲突 首先从一个简单的习惯开始。 由于以前一直做 JavaEE 开发的缘故，在 JavaScript 开发中，我已经习惯将项目中的一些通用功能抽象出来，形成一个个的独立函数，以便于实现代码复用，如： 1 2 3 4 5 6 7 function css(element, attr) { // 获取 element 元素的 attr 对应的 CSS 属性值 // ... } function offset(element) { // 获取 element 元素在文档中的位置坐标 // ... } 并把这些封装的函数放在统一的 tools.js 文件中。 如果页面功能实现需要使用到这些函数，则直接通过 <script src="tools.js">&...

1. 简介 以前我们在写 CSS 时，通常都是直接在外部 CSS 文件中一个属性一个属性的敲，如果要实现代码的复用，那就 ctrl+c 和 ctrl+v 了，如果要使用某个 RGB 颜色值，还得一遍遍的翻回去复制。这样的开发效率很低，并且也很烦琐，因为 CSS 并不是编程语言，所以也就不能像写 JavaScript 代码一样来实现流程控制等操作了。 幸运的是现在我们有了“CSS预处理器”（css preprocessor），在 CSS 中加入了编程元素，当然不是直接使用 CSS 来实现编程，而是使用专门的编程语言，进行设计后再编译成 CSS 文件。 这种“CSS预处理器”也有很多种，参见8 CSS preprocessors to speed up development tim...

1. 简介 Gulp 是前端开发过程中对代码进行构建的工具，是自动化项目的构建利器；她不仅能对网站资源进行优化，而且在开发过程中很多重复的任务能够使用正确的工具自动完成；使用她，我们不仅可以很愉快的编写代码，而且大大提高我们的工作效率。 Gulp 是基于 Nodejs 的自动任务运行器， 她能自动化地完成 JavaScript/coffee/sass/less/html/image/css 等文件的的测试、检查、合并、压缩、格式化、浏览器自动刷新、部署文件生成，并监听文件在改动后重复指定的这些步骤。在实现上，她借鉴了 Unix 操作系统的管道（pipe）思想，前一级的输出，直接变成后一级的输入，使得在操作上非常简单。 通过本文，我们将学习如何使用 Gulp 来改变开发流程，从而使...

1. 引子 在介绍这篇内容之前，先以一个小故事开头。 话说有一个暴发户，他家有三辆轿车（奔驰、宝马、奥迪），还雇了司机为他开车。不过，暴发户每次坐车时总是这样：上奔驰车后跟司机说“开奔驰车！”，坐上宝马后他说“开宝马车！”，坐上奥迪后他说“开奥迪车！”。 也许你会说：这人有病吧！直接说开车不就行了？！非得多此一举是要表明自己是壕了吗？这是病，得治。 其实像这样的行为放到程序中来实现时，在面向过程思想中暴发户一直是通过这种方式来坐车的。 幸运的是，这种病在面向对象思想中有得治了。那如何来治病，下面我们开始今天的主题：工厂模式。 2. 工厂模式 工厂模式主要是为创建对象提供过渡接口，专门负责将大量有共同接口的类实例化，而且不必事先知道每次是要实例化哪一个类的模式，以便将创建对...

1. 概述 单例模式（Singleton，也称单件模式、单体模式）是对象创建型模式，主要用于保证一个类仅有一个实例，并提供一个访问它的全局访问点。单例模式是一种常见的设计模式。 要使用单例模式，在某些场景显得尤为重要。比如要使用迅雷播放器播放视频，我同时打开两个视频文件，如果这两个视频文件分别在各自的播放器窗口放映视频内容，那么可能会有很不好的观看体验，我没办法分别让左右耳朵和左右眼睛只专注各自对应的视频。这时候，我们就需要单例模式来解决这个问题了：即一次只能打开一个迅雷播放器窗口。 在 windows 操作系统中还有很多单例的例子，比如任务管理器、回收站等。 2. 实现 单例模式是保证一个类仅有一个实例，那么传统做法是先判断实例是否存在，如果已经存在，则直接返回已存在实例，...

1. 概述 设计模式（Design pattern）是一套被反复使用、多数人知晓的、经过分类编目的、代码设计经验的总结。使用设计模式是为了可重用代码、让代码更容易被他人理解、保证代码可靠性。 毫无疑问，设计模式于己于他人于系统都是多赢的，设计模式使代码编制真正工程化，设计模式是软件工程的基石，如同大厦的一块块砖石一样。项目中合理的运用设计模式可以完美的解决很多问题，每种模式在现在中都有相应的原理来与之对应，每一个模式描述了一个在我们周围不断重复发生的问题，以及该问题的核心解决方案，这也是它能被广泛应用的原因。 拿现在的话来说，设计模式就是套路，已知的解决某类问题的套路。中国自古以来其实就有这种套路了，比如《孙子兵法》。 设计模式的四人帮： Erich Gamma、Richar...