一期一会的博客

前端各知识点整理JS方面ES1. 讲下作用域的理解作用域是一套用来管理引擎如何在当前作用域以及嵌套的子作用域中根据标识符名称进行变量查找的规则。作用域分类：全局作用域函数作用域概念：属于这个函数的全部变量都可以在整个函数的范围内使用及复用，包括在嵌套的函数作用域中也可以使用创建：函数作用域的创建就需要声明一个函数，而声明函数这个行为又有函数声明和函数表达式两种操作方式块作用域概念：{...}块内部创建：在es6版本后，可以通过let和const定义块作用域，典型应用是f

React语法速查JSX介绍JSX语法中，可以在大括号内放置任何有效的JavaScript表达式。例如2+2、user.firstName或formatName(user)等均是有效的JavaScript表达式。JSX可以通过使用引号，来将属性指定为字符串字面量，也可以使用大括号来在属性值中插入一个JavaScript表达式。class JSXShow extends React.Comp...

上一章，讨论的是jQuery对象及其原型上的extend()方法，在源码中，实现了支持开发者自行扩展新方法的功能，但其实jQuery也通过对extend()传入一个对象参数来添加官方扩展方法，这些工具方法都是扩展在jQuery类对象上的，所以调用时的写法要注意。下面一起来看下扩展了哪些官方方法。//总览：jQuery.extend({ expando: "jQuery" + ( ve...

jQuery的css选择器，是一大亮点，其实现源码也可单独拎出来作为模块使用。先看个整体，在jQuery源码中在行229-2752区域。var Sizzle = (function(window){ // 具体实现暂略...})(window)css选择器的具体实现是一个匿名自执行函数，传入参数为window对象。函数顶部定义若干变量，包括本地文档变量、特定实例数据和特定实例方法...

Sizzle模块第二篇。顺序看下去，看模块所用的方法。2、createCache()方法，创建一个受限的键值对类型缓存。返回的是一个函数，function createCache(){ var keys = []; function cache( key, value ){ //向数组`keys`末尾添加元素时，返回新的长度。 if( keys...

编写可维护代码，对我来说是现阶段需要明确提升的一个方法。毕竟还是野路子出来的，有时明知那样写，重用性差、容易造成代码冗余，但是或是时间紧，或是暂时没有想到更好的实现方式，就会那么稀里糊涂的写出烂代码。但代码的维护者也是自己，过段时间再看，会觉得哪哪不好，但有时懒癌发作，又不太想重构，如此便会层层积压着烂代码。所以何不一开始就写出可维护性高的好代码呢？尽管写出好代码，是需要不断磨炼的，但我也是愿意...

编写可维护的代码规则第2篇。本篇将来讨论下数据类型检测的较好实践。首先是空比较的问题，有时会出现将变量与null值进行比较的情况，例如：if(val !== null){ val.sort(); val.forEachj(function(){ //执行逻辑代码... })}上例中，可以预见变量val应该是个数组类型的数据，因为具有sort()和...

编写可维护的代码规则第3篇。在js开发中，调试错误是一个比较头疼的事，又不像java的debug那么方便，定位错误往往不是那么容易，除非对代码熟悉无比，但即使是自己写的代码，功能一复杂，时间一长，再想快速定位问题，至少我现在是比较头疼的。此时，如果有一个比较友好的错误提示，那解决问题的效率将大大提高。所以是时候学会在合适的地方抛出错误提示了。js中抛出错误的方法有两种：throw new E...

编写可维护的代码规则第4篇。本篇主要讲下对象的属性与方法的修改问题。由于js中修改对象的属性和方法简直容易至极，所以任何人都可以更改js中的具有可访问可修改权限的对象。这就带来极大的风险，容易造成各种奇葩的bug问题且难以排查，更别说如果是多人协同开发的情况下，某个人改动已有方法时，一旦产生bug，且被其他维护，那找起问题根源的麻烦程度简直是想要杀人的。所以为了人生财产安全，在js维护时，个人...

今天是2018年的最后一天，不管这一年当中有多少五味杂陈，统统都即将过去。明天是新的一天，也是新的一年，预祝我自己，也预祝所有关注我公众号的朋友，新年一切安康。本篇开始，读《你不知道的JavaScript》上中下三卷，并将读后总结奉上。今天读上卷，第一部分作用域和闭包中的作用域。作用域概念：作用域指：一套设计良好的用来存储变量、并且之后可以方便找到这些变量的规则。说的更细致点，作用域就...

《你不知道的JavaScript》第一部分作用域和闭包第2篇。昨天讲到作用域，回顾下概念：作用域是一套用来管理引擎如何在当前作用域以及嵌套的子作用域中根据标识符名称进行变量查找的规则。常见的作用域形式在JS中，最常见的作用域是函数作用域，其他结构通常不会创建作用域。但随着js的迭代，现在也有了块作用域，将在后面讲到。而函数作用域的含义是指：属于这个函数的全部变量都可以在整个函数的范围内使用...

从本篇开始读《你不知道的JavaScript》中篇。本篇看下js中的类型和值的知识点。先来看下js中的七种内置类型：空值 null未定义 undefined布尔值 boolean数值 number字符串 string对象 object符号 symbol(ES6中新增)除对象外，其他统称为基本类型。可以使用typeof来查看值的类型，它返回的是类型的字符串值。但有一种类型和...

起源：前几天测试发来一个需求，内容要求看图：看到这个需求，我有点懵逼。现在的情况是只有点击日期内容框空白区域时，才会响应点击事件显示下拉日期菜单。而这个icon图标我是绝对定位到日期内容框中的，它的图层维度是高于日期内容框的，点击icon图标时是不会响应点击事件的。我的第一个反应是事件点击穿透，但是该怎么实现？感觉触碰到我一直忽视的知识盲区了。懵逼的我一顿操作猛如虎，开启面向谷歌编程大法...

作为一个半路出家的前端，随着项目经验的积累，也越来越意识到原生js的博大精深，最近正在研究js设计模式，接下来每学一个设计模式就是写篇文章做笔记，其实主要还是代码和设计思想的结合，努力体会，多思考合适自己项目中的应用场景，争取实际应用到实际项目中。话不多说，进入主题，js设计模式之：单例模式单例模式定义: 保证一个类仅有一个实例，并提供一个访问它的全局访问点上代码：标准单例模式//方法1...

策略模式指定义一系列算法，将它们一个个封装起来。将不变的部分与变化的部分隔开是每个设计模式的主题，策略模式同样如此，策略模式的基础组成： 一个基于策略模式的程序至少要由两部分组成。第一个部分是一组策略类，策略类封装了具体的算法，并负责具体的计算过程。第二个部分是环境类Context，Context接收。客户的请求，随后把请求委托给某一个策略类(发送消息给某个策略对象)，要做到这点，说明Cont...

代理模式是一种对程序对象进行控制性访问的一类解决方案。引入代理模式，其实是为了实现单一职责的面向对象设计原则。单一职责其实就是指在一个类中（js中通常指对象和函数等），应仅有一个引起它变化的原因。这样会帮助程序设计具有良好的健壮和高内聚特性，从而当变化发生时，程序设计会尽量少的受到意外破坏。代理模式有多种方法，保护代理、远程代理、虚拟代理、缓存代理等。但在javascript中，代理模式最...

迭代器模式分为内部迭代器和外部迭代器，内部迭代器就是在函数内部定义好迭代的规则，它完全接手整个迭代的过程，外部只需一次初始调用。内部迭代器以下自行实现的类似jquery中$.each()的each()函数就是内部迭代器//实现一个jq的$.each()迭代器var arr = [1, 2, 3, 4, 5, 6, 7, 8]var each = function(arr, callb...

在javascript语言中，原型与原型链是一个非常重要的概念，因为它们是javascript语言得以成立的根本。因为javascript是基于原型的面向对象编程语言，这有别于基于类的java、python等面向对象编程语言。虽然javscript现在也有了class，但它骨子里还是个基于原型的语法糖罢了。所以在使用javascript时，始终要记清基于原型，基于原型，基于原型。在说原型和原型链...

发布-订阅模式也叫观察者模式，是js开发中应用广泛的一种模式。下面将列举一个通用发布订阅模式的示例，应用到闭包、this、apply/call、自执行函数等概念，起码达到熟悉的程度，才能说把发布-订阅模式真正吃透并能灵活运用到实际场景中去。常见的发布订阅模式应用场景有：登录后head/nav等模块异步获取登录成功返回的数据；页面无刷新点击事件进行数据自增…var ObserverEvent =...

模板方法模式，是一种典型的通过封装变化提高系统扩展性的设计模式。在传统的面向对象语言中，一个运用了模板方法模式的程序中，子类的方法种类和执行顺序都是基本不变的，所以把这部分逻辑抽象到父类的模板方法中。而子类的方法具体怎么实现则是可变的，于是我们把这部分变化的逻辑封装到子类中。通过增加新的子类，就能给系统增加新的功能，并不需要改动抽象父类以及其他子类，这符合开放-封闭原则。定义抽象类，父类模板方...

职责链的定义：使多个对象都有机会处理请求，从而避免请求的发送者和接收者之间的耦合关系，将这些对象连成一条链，并沿着这条链传递该请求，直到有一个对象能处理它为止，传递链中的这些对象就叫节点。需求背景： 一个电商网站，用户交500定金且定金已付时，可享受500优惠券且不受货物数量限制；用户交200定金且定金已付时，可享受500优惠券且不受货物数量限制；用户不交定金时受货物数量限制，有货时原价买，无货...

中介者对象践行了最少知识原则，指一个对象尽可能少的了解别的对象，从而尽量减少对象间耦合程度。这样各个对象只需关注自身实现逻辑，对象间的交互关系交由中介者对象来实现和维护。需求背景：手机购买页面，在购买流程中，可以选择手机的颜色及输入购买数量，同时页面有两个展示区域，分别向用户展示刚选择好的颜色和数量。还有一个按钮动态显示下一步的操作，我们需要查询该颜色手机对应的库存，如果库存数量少于这次购买的...

在js函数开发中，想要为现有函数添加与现有功能无关的新功能时，按普通思路肯定是在现有函数中添加新功能的代码。这并不能说错，但因为函数中的这两块代码其实并无关联，后期维护成本会明显增大，也会造成函数臃肿。比较好的办法就是采用装饰器模式。在保持现有函数及其内部代码实现不变的前提下，将新功能函数分离开来，然后将其通过与现有函数包装起来一起执行。先来看个比较原始的js版装饰器模式实现：var Pla...

再来看下js中的值类型。常见的值类型有数组(array)、字符串(string)、数字(number)等。js中的数组可以容纳任何类型的值，可以是字符串、数字、布尔、对象甚至也可以是数组。对数组声明后即可向其中加入值，无需预先设定大小。这里有个小注意点，虽然可以用delete关键字来将单元从数组中删除，但单元删除后，数组的length属性并不会发生变化。在创建稀疏数组(即含有空白或空缺单元的...

在JS开发中，异步函数是一个绕不过去的坎，要想写出优雅适用的js代码，把异步函数的使用技巧掌握透是必须的。在es5版本中，异步函数的使用受原生API支持较少影响，好用的方法不多，笨办法可以写出个回调嵌套，在回调嵌套1 2层还好，多了就变成回调地狱了，那种代码的恶心程度，真是不忍直视，比如：//Nodejs 代码connection.query(sql, (err, result) =>...

在js中，对于对象的理解很重要。js的数据类型主要分为基本类型和引用类型。基本类型包括String、Number、Boolean、undefined、null。引用类型包括Object。通常判断一个数据类型是基本类型可以使用typeof，判断一个数据类型是引用类型的可以使用instanceof。本文要讲的其实就是基于引用类型对象来说的。所谓的对象其实可以理解为若干属性的集合。狭义的对象obj...

在弄明白函数闭包前，先要弄清楚函数执行时的上下文环境。console.log(fn);var fn = function(){ //函数表达未 return 55;}//打印 undefinedconsole.log(fn);function fn(){ //函数声明 return 55;}//打印/*ƒ fn(){ retur...

在JS中，函数是一等公民。这该怎么理解？为什么说它是“一等”的呢？其实这体现在函数可以去任何值可以去的地方，很少有限制。函数可以存储为变量函数可以存储为数组元素函数可以成为对象的成员变量函数可以在使用时直接创建出来函数可以传递给另一个函数函数可以被另一个函数返回最后两点其实就是高阶函数的定义，一个高阶函数可以执行以下至少一项操作：以一个函数作为参数、返回一个函数作为结果。这两...

JS中的this用法很灵活，使用场景不同，this的指向也会不同。本文我先给出this在使用过程中指向的注意点，配合下文示例服用更佳：this的指向在函数定义的时候是确定不了的，只有函数执行的时候才能确定this到底指向谁，实际上this的最终指向的是那个调用它的对象如果一个函数中有this，但是它没有被上一级的对象所调用，那么this指向的就是window，这里需要说明的是在js的严格模...

本章讨论下Promise使用时的较佳实践。顺序错误处理Promise的设计局限性有一个让人掉坑的地方，即Promise链中错误容易被无意中默默忽略掉。由于一个Promise链仅仅是连接到一起的成员Promise，没有把整个链标识为一个个体的实体，这意味着没有外部方法可以用于观察可能发生的错误。如果构建了一个没有错误处理函数的Promise链，链中任何地方的错误都会在链中一直传播下去，直到被...

js中只有一种数值类型，即number，包括"整数"和带小数的十进制数。js中其实是没有真正意义上的整数的，这个整数就是没有小数的十进制数。js使用的双精度格式。数字值可以调用 Number.prototype中的方法，比如toFixed()方法可以用来指定小数部分显示的位数：var a = 68.9527;console.log(a.toFixed(0)); // 69cons...

在js中，有一个普遍依赖的假定：一个函数一旦开始执行，就会运行到结束，期间不会有其他代码能够打断它并插入其间。但ES6中引入了一个新的函数类型，它并不符合这种运行到结束的特性。这类新的函数被称为生成器。看下面的普通函数示例：var x = 1;function foo(){ x++; bar(); console.log(x);}function bar(){...

本篇来看下js中的原生函数，也叫内置函数。主要包括如下：String()Number()Boolean()Array()Object()Function()RegExp()Date()Error()Symbol()原生函数可以被当作构造函数来用，但其构造出来的对象与设想的有区别，以String()为例：var s = new String("abc");console...

《你不知道的JavaScript》第一部分作用域和闭包第3篇。前两篇主要讲作用域的查询机制和常见形式，本篇要讲的是作用域中的声明提升。在全局作用域和局部作用域中，都存在声明提升的行为。所谓声明，包括变量声明和函数声明。而声明提升，就是在作用域范围内，不管内部的变量与函数声明在何处，当执行到这个作用域时，引擎都会首先将当前作用域内的变量和函数声明放置到当前作用域顶端后，再按从上到下顺序执行其他...

《你不知道的JavaScript》第一部分作用域和闭包第4篇。在掌握作用域的前提下，才能真正理解和识别闭包。闭包：当函数可以记住并访问所在的词法作用域时，就产生了闭包，即使函数是在当前词法作用域之外执行。function foo(){ var a = 10; return function(){ console.log(a*2); }}var fn...

《你不知道的JavaScript》第二部分this和对象原型第 1 篇。本篇来看下js中的this关键字。刚接触this关键字的时候，一脸懵逼，看字面意思很好理解，日常英语中的this指代“这个”，有指向的意思，难道这个关键字意思也是如此？作为纯自学起来的我，在踩了那么多坑后，已然条件反射般的感觉不对劲。果不其然，在新手阶段，我是看概念懵、抄demo懵、用起来更懵，完全不知什么鬼，这个this...

《你不知道的JavaScript》第二部分this和对象原型第 2 篇。关于this，之前说过，this的指向取决于函数调用位置而非函数定义位置。谁调用函数，则函数上下文中的this就指向谁。概念很好理解，但实际使用时，坑实在是多，要注意看。坑一：默认绑定。在没有应用其他规则时，this绑定遵循默认绑定，但严格模式下与非严格模式下完全不同。//非严格模式var a = 2;funct...

《你不知道的JavaScript》第二部分this和对象原型第 3 篇。前面两篇讲了this的调用位置影响和绑定规则，在一般情况下想要弄清this的指向，只需找到函数的调用位置和并判断应当应用哪条绑定规则即可。但有时会出现某个调用位置可以应用多条绑定规则的情况，这个时候又该怎么办？也就是我们要弄清楚这些绑定规则的优先级问题。首先可以知道默认绑定这条规则的优先级是最低的，所以在比较优化级条件时先...

《你不知道的JavaScript》第二部分this和对象原型第 4 篇。前篇说了this绑定的例外情况，比如当以为是应用的其他绑定规则时，其实应用的可能是默认绑定。例外情况1：this忽略当把null或者undefined作为this的绑定对象传入call、apply或bind时，这些值在调用时会被忽略，此时实际应用的是默认绑定规则。function fn(){ console.l...

前面讲完了词法作用域和this机制。接下来要看下js中重头：对象。在js中，数据类型主要有：string、number、boolean、undefined、null、symbol和object。其中前6种是基本数据类型，最后种引用数据类型。注意喽，这里的英文表示全是小写。这里注意个小细节，null也是基本类型，尽管typeof null时会返回字符串"object"，但null本身还真就是基本...