blog
blog copied to clipboard
yinguangyao
关于 JavaScript 前端开发、工作经验的一点点总结。
## 前言 最近打算去总结一下以前写的一些需求和技术项目，方便以后及时回顾。 去年有过这么一个需求，我们需要到某合作方网站（某国银行）下载文件，他们只提供了帐号密码，没有提供下载的接口，需要我们自己去分析接口来调用。 后端以前端更熟悉接口参数为理由甩锅给了前端，于是不得不去分析一波网站的接口参数。 打开网站发现一大串参数，很多都是 asp 里面生成的状态，不好去分析这些参数。恰好当时已经听过无头浏览器这个概念了，就想试试 Puppeteer 能否实现这个功能。 自己本地写了一个 Demo 去下载文件，发现实现起来很完美。 ## 什么是无头浏览器？ 无头（Headless）浏览器是指没有图形界面的浏览器，可以运行在服务器，和我们常规的浏览器不一样。 无头浏览器能够模拟用户的真实操作，比如打开页面、输入账号密码、点击登录、跳转等等。网站也无法分辨当前是真实浏览器访问还是无头浏览器访问。 目前比较火的是无头浏览器是 Google 的 Puppeteer，常用于自动化 UI 测试和截图。Puppeteer 的文档非常详细，可以参考 [Puppeteer API][2]。 Puppeteer 是基于 Chrome Devtools...
## 前言 用过 Canvas 的都知道它的 API 比较多，使用起来也很麻烦，比如我想绘制一个圆形就要调一堆 API，对开发算不上友好。 ```js const canvas = document.querySelector('canvas'); const context = canvas.getContext('2d'); // 设置字体样式 context.font = '24px SimSun, Songti SC'; context.fillText('24px的宋体呈现', 20, 50); // 绘制完整圆...
JavaScript中提供了不同种类的运算符，每种运算符有不同的作用，常用的运算符大家应该都知道作用是什么，这篇文章来介绍一些运算符使用中的小技巧。 ## 一元运算符 ### void void 运算符对任何值返回undefined。那为什么不直接使用undefined呢？ 因为undefined不是保留字，在低版本浏览器或者局部作用域中是可以被当做变量赋值的，这样就会导致我们拿不到正确的undefined值，在很多压缩工具中都是将undefined用void 0来代替掉了。 ``` var a = void 0; // undefined ``` ## 算术运算符 ### + 加号一般都是用于计算数值，但是对两种不同类型使用加号会有一些意想不到的效果。在上一篇我们介绍类型转换的时候已经讲过加号是怎么进行类型转换的。 ``` // 这里会触发隐式类型转换，最后得到hello1 var str = 'hello'...
## 前言 名字是一个人在社会中必不可少的符号与标识，也是信息表达、交流、传播的一种工具。每当提起一个人的名字，我们总是能联想到对应的人，这就是名字的作用。 相信每个人都应该看过小说吧。在小说中，重要人物名都是很有讲究的。尤其是在好的小说中，往往从一个人的名字就能联想到此人的性格和命运。 例如：李寻欢，表面有寻欢作乐之意，而他也的确是个放浪不羁又多情的剑客；『君子剑』岳不群，孔子曰：君子矜而不争，群而不党。不群不群，暗示他是个伪君子。 ``` let 李寻欢; // 想必此人是个浪子 let 岳不群; // 很明显是个伪君子 let 张三; // 为什么叫张三？长了三只眼？三只手？家里排行老三？ ``` 我扯了这么多小说中的人物名，这和我们今天的主题是不是有关系呢？没错，如果在程序中能起一个好的变量名，对于可维护性和可读性都会有很大的提升。 ## 命名规范 由于JS中没有强制规定变量命名规范，因此出现了很多命名规范，比如：匈牙利命名法（数据类型+描述）、大驼峰命名法（FirstName）、小驼峰命名法（firstName）、下划线命名法（first_name）。 在这篇文章中，我们统一规定一下对类和构造函数应当使用大驼峰命名法，对其他的变量和函数都使用小驼峰命名法。 ``` let FirstName; // bad let...
## 前言 这节课属于 JavaScript 中函数的高级应用。随着 React/Redux 的火热，函数式编程也逐渐被带入了前端的应用领域，甚至还诞生了 elm、ClojureScript 等基于 JavaScript 的函数式语言。熟练掌握这节课的内容，对后续学习函数式编程会有一定帮助。 ## 1. 高阶函数 高阶函数也是函数式编程中的一个概念，使用范围比较广泛。在现在很火的 React 中，高阶组件就是基于高阶函数发展而来。 先看一下高阶函数的定义： > 高阶函数，又称算子(运算符)或泛函，包含多于一个箭头的函数。 在数学和计算机科学中，高阶函数是至少满足下列一个条件的函数: 1. 接受一个或多个函数作为输入 2. 输出一个函数 举一个简单的例子： ``` const add =...
## 1. 前言 设计模式（Design Pattern）不是软件开发圣经，更像是一种经验之谈，这是前辈们在无数实践中总结出来的一些方法，用来提高代码的可读性、可复用性、可维护性等。 1995 年，GoF（Gang of Four）出版了《设计模式：可复用面向对象软件的基础》这本书，里面一共收录了 23 种设计模式，从此设计模式深入人心。 本文会介绍几种常用的模式，还有一些实用的设计模式都分散在了后面其他的文章中，这里就不一一做介绍了。 ## 2. 模式分类 根据设计模式的用途，可以将他们分为三类，分别是创型性、结构型和行为型。 ### 2.1 创建型 创建型模式一般是将对象的创建和使用进行分离，外界只知道他们暴露的接口，却不知道实现细节，结构更加清晰。 1. 单例模式 2. 简单工厂模式 3. 工厂方法模式 4. 抽象工厂模式 5. 生成器模式...
## 前言 前面我们讲了 JavaScript 面向对象编程，这篇文章我们会介绍一下面向对象中的经典编程模式 —— MVC。 MVC、MVVM、MVP 这三个概念在前端领域是老生常谈了，但这节课不会只在概念层面讲述三者的区别，而是更偏向实践、从编写业务代码层面讨论一下 MVC 模式在前端开发中的意思。 ## 并未过时的 MVC 在 Angualr、Vue 等 MVVM 框架出现前，最火的前端框架当属 Backbone，这是一个典型的 MVC 框架。也许你会说 Backbone 不是过时了吗？那还在前端中讨论 MVC 还有什么意义？ Backbone 的确过时了，但是过时是因为 Backbone 的...
## 前言 面向对象是软件开发中的一种方法，现在被广泛使用。面向对象是使用一种抽象的方式来模拟现实世界的编程模式。在面向对象中，我们可以将程序看做一个个对象互相协作的结果。 面向对象具有三大特性和六大原则。三大特性是继承、多态和封装。六大原则是单一职责原则（SRP）、开放封闭原则（OCP）、里氏替换原则（LSP）、依赖倒置原则（DIP）、接口分离原则（ISP）、最少知识原则（LKP）。 ![image_1dml1scvj1o4830c1cnd1ucj1pmg9.png-55.5kB][1] 面向对象的好处在于提高了程序开发的灵活性和可维护性，尤其是有利于模块化。 ## 1. 鸭子类型 传统的静态类型语言中，在定义变量的时候就必须声明类型，这样有利于在编译阶段就能避免不必要的错误，但也会增加一些不必要的代码。 而在JS这种静态语言，只有在运行的时候才能确定真正的类型，虽然降低了后期的维护性，但也让我们可以更加专注于业务逻辑的编写。 所以我们在JS中使用一个对象的时候，完全不必考虑这个对象是否被设计为有这个方法。我们称之为「鸭子类型」。 如果一个动物走起路来像鸭子，叫起来也像鸭子，不管它本来是什么，都可以被认为是鸭子。 鸭子类型让我们更关注对象的行为和表现，而并非它自身的类型，我们应该更关注接口，而非实现。 用代码举个例子可能会更加直观： ``` class Duck { walk() { console.log("walk!"); } voice() { console.log("voice!"); } } class Chicken...
## 1. 什么是模块化？ 现代软件开发往往利用模块作合成的单位。 当一个系统足够复杂的时候，需要团队分工协作，把系统划分成若干模块管理，这一过程叫做模块化。 模块化是一种处理复杂系统分解成为更好的可管理模块的方式。它可以通过在不同组件设定不同的功能，把一个问题分解成多个小的独立、互相作用的组件，来处理复杂、大型的软件。 在很多编程语言中都有模块的概念，比如 Python 中使用 pip 进行模块的管理，在 JavaScript 中也使用 bower 和 npm 进行模块管理。 模块化本质上也属于“分治法”的一种。 > 分治法的精髓： > 分--将问题分解为规模更小的子问题； > 治--将这些规模更小的子问题逐个击破； > 合--将已解决的子问题合并，最终得出“母”问题的解； 模块化在现实中也有体现，图为谷歌 Project Ara 模块化手机：...
## 前言 随着 ES6 的发布，JavaScript 语法也越来越趋于成熟，新的提案也在不断地提出。在第一篇文章中，也有提到过 ECMA 提案的四个阶段，处于 stage3 的都需要我们持续关注，以后很可能就会被纳入新标准中。 那么就来一起看看 ECMA 中的新特性以及一些有趣的新提案吧。 ## Dynamic Import 如果你写过 node，会发现和原生的 `import/export` 不一样的地方就是支持就近加载。 你可以在你用到的时候再去加载这个模块，而不用全部放到顶部加载。 以下面这个 node 模块为例子，最后依次打印出来的是 `main`、`noop`。 ``` // noop.js console.log('noop'); module.exports...