axios全局代理实战
在项目中,为了方便使用,对axios进行了二次封装,原因如下:
由于内网服务器的安全策略,put、delete 等方法的请求无法发送到后台
为了方便快速对接后端服务器,api 接口的前缀、安全策略过期时间等通用配置应该抽离
公共配置抽离假设后端 api 的前缀地址是://1.1.1.1/api/,安全过期时间是 5000ms.
那么通用配置信息如下:
123456789101112const CONFIG = { baseURL: "//1.1.1.1/api/", timeout: 5000};// ...const instance = axios.create({ CONFIG });// ...export default instance;
编写拦截器“拦截器”的做法来源于设计模式中的“装饰器模式”,它能在不改变原有函数逻辑的情况下,添加其他业务逻辑。
低耦合的设计非常适用于参数过滤、中间层拦截等场景。
请求拦截器考虑到业务场景,请求到后端的数据需要在 Headers 中带有认证数据。
同时,由于不支持 p ...
微信网页登录逻辑与实现
现在的网站开发,都绕不开微信登录(毕竟微信已经成为国民工具)。虽然文档已经写得很详细,但是对于没有经验的开发者还是容易踩坑。
所以,专门记录一下微信网页认证的交互逻辑,也方便自己日后回查:
加载微信网页 sdk
绘制登陆二维码:新 tab 页面绘制 / 本页面 iframe 绘制
用户扫码登陆,前端跳入回调网址
回调网址进一步做逻辑处理,如果是页内 iframe 绘制二维码,需要通知顶级页
微信网页 SDK 加载在多人团队协作中,加载资源的代码需要格外小心。因为可能会有多个开发者在同一业务逻辑下调用,这会造成资源的重复加载。
处理方法有两种,第一种是对外暴露多余接口,专门 check 是否重复加载。但是考虑到调用者每次在加载前,都需要显式调用check()方法进行检查,难免会有遗漏。
所以采用第二种方法–设计模式中的缓存模式,代码如下:
123456789101112131415161718192021// 备忘录模式: 防止重复加载export const loadWeChatJs = (() => { let exists = false; // 打点 co ...
React组件通信解决方案
场景介绍最近在做 react 开发的时候,需要在多级组件之间进行有效通信。这里所说的多级组件,可能是父子组件、兄弟组件,还可能是两个完全不相关的组件。
那么问题是:有没有一种方法可以统一实现组件之间的通信?不借助 redux 等第三方库,降低依赖性,保证代码简洁,还要保证通用性。
解决方案:订阅-发布模式这里利用“订阅-发布模式”实现一个事件类:Event。它与 window.addEventListener 、 window.removeEventListener 类似。为了方便演示,Event 的实现放在文章最后,下面将展示在具体场景中的应用。
假设现在有 2 个 react 组件(A 与 B)需要进行通信,组件 A 用户点击后,组件 B 能接收到消息。
组件 A 的大致业务逻辑:
12345678910111213141516import Event from 'event-proxy'export default ComponentA { // ... render() { return ( <div> ...
设计模式手册之抽象工厂模式
1. 什么是抽象工厂模式?抽象工厂模式就是:围绕一个超级工厂类,创建其他工厂类;再围绕工厂类,创建实体类。
相较于传统的工厂模式,它多出了一个超级工厂类。
它的优缺点与工厂模式类似,这里不再冗赘它的优缺点,下面直接谈一下实现吧。
2. 如何实现抽象工厂模式?为了让目标更清晰,就实现下面的示意图:
准备实体类按照之前的做法,这里我们实现几个实体类:Cat 和 Dog 一组、Male 和 Female 一组。
12345678910111213141516171819202122232425class Dog { run() { console.log('狗') }}class Cat { run() { console.log('猫') }}/*************************************************/class Male { run() { ...
设计模式手册之工厂模式
1. 什么是工厂模式?工厂方法模式的实质是“定义一个创建对象的接口,但让实现这个接口的类来决定实例化哪个类。工厂方法让类的实例化推迟到子类中进行。”
简单来说:就是把new对象的操作包裹一层,对外提供一个可以根据不同参数创建不同对象的函数。
2. 工厂模式的优缺点优点显而易见,可以隐藏原始类,方便之后的代码迁移。调用者只需要记住类的代名词即可。
由于多了层封装,会造成类的数目过多,系统复杂度增加。
3. 多语言实现ES6 实现调用者通过向工厂类传递参数,来获取对应的实体。在这个过程中,具体实体类的创建过程,由工厂类全权负责。
123456789101112131415161718192021222324252627282930313233343536373839404142/** * 实体类:Dog、Cat */class Dog { run() { console.log('狗') }}class Cat { run() { console.log(' ...
数组与字符串类型相同方法区别
数组和字符串有很多相似的对方,比如数组和字符串都有以下方法:
concat
indexOf
lastIndexOf
slice
includes
鉴于toString及valueOf方法基本类型都有,这里就不做过多介绍了
1、数组中indexOf和较数组中includes的比较
看函数的返回值:indexOf返回的是数值型的而includes返回的是布尔型的
都可以支持第二参数,而且的第二个参数都支持负数形式
数组中的indexOf不能判断数组中是否有NaN而includes可以
1.1 indexOf不能判断NaN123var arr = [NaN];console.log(arr.indexOf(NaN)) //-1console.log(arr.includes(NaN)) //true
1.2 判断稀疏数组结果不同123var arr = [,,];console.log(arr.indexOf(undefined))//-1console.log(arr.includes(undefined))//true
这是因为 indexOf 认为稀疏数组, ...
《JavaScript高级程序设计》读书笔记
第一章 JavaScript 简介1.2 js 实现
一个完成的 js 实现由 3 个不同部分组成:核心(ECMAScript)、文档对象模型(DOM)、浏览器对象模型(BOM)
常见的 Web 浏览器知识 ECMAScript 实现的宿主环境之一,其他环境包括 Node、Adobe Flash
DOM:是针对 XML 经过扩展用于 HTML 的程序编程 API
BOM:控制浏览器显示的页面以外部分
第二章 在 HTML 中使用 JavaScript2.1 <script>标签下面两个属性可以控制 script 加载,它们不能严格保证执行顺序:
async:不阻塞页面,下载并且执行脚本
defer:脚本延迟到文档被完全解析和显示后再执行。
script 脚本中不要嵌入出现"</script>" 字符串,会被错误识别为结束标签。正确写法是:"<\/script>"。
如果 script 标签中既有代码内容,并且也引入了外部脚本(src 属性)。浏览器只会执行外部脚本。
2.2 可扩展超文本标记语言 XHTM ...
JavaScript基础知识梳理(下)
👇 内容速览 👇
实现 ES5 继承的 4 种方法
原型和原型链
作用域和作用域链
Event Loop
执行上下文
闭包的理解和分析
ES5 继承
题目:ES5 中常用继承方法。
方法一:绑定构造函数
缺点:不能继承父类原型方法/属性
1234567891011121314function Animal() { this.species = "动物";}function Cat() { // 执行父类的构造方法, 上下文为实例对象 Animal.apply(this, arguments);}/** * 测试代码 */var cat = new Cat();console.log(cat.species); // output: 动物
方法二:原型链继承
缺点:无法向父类构造函数中传递参数;子类原型链上定义的方法有先后顺序问题。
注意:js 中交换原型链,均需要修复prototype.constructor指向问题。
123456789101112131415161718192021222324functi ...
JavaScript基础知识梳理(上)
👇 内容速览 👇
普通函数和箭头函数的this
原始数据类型及其判断和转化方法
深浅拷贝及实现
JS 事件模型
常见的高阶函数
普通函数和箭头函数的 this还是一道经典题目,下面的这段代码的输出是什么?(为了方便解释,输出放在了注释中)
1234567891011121314151617181920function fn() { console.log(this) // 1. {a: 100} var arr = [1, 2, 3] ;(function () { console.log(this) // 2. Window })() // 普通 JS arr.map(function (item) { console.log(this) // 3. Window return item + 1 }) // 箭头函数 let brr = arr.map((item) => { ...
Javascript原型链
原型链
创建 (声明) 对象有几种方法
原型、构造函数、实例、原型链
instanceof 的原理
new 运算符
一. 创建对象有几种方法1.字面量12345var test2 = {x:123,y:345};console.log(test2);//{x:123,y:345};console.log(test2.x);//123console.log(test2.__proto__.x);//undefinedconsole.log(test2.__proto__.x === test2.x);//false
2.构造函数new12345678910// 方法1 #通过new Object声明的一个对象var test1 = new Object({x:123,y:345});console.log(test1);//{x:123,y:345}console.log(test1.x);//123console.log(test1.__proto__.x);//undefinedconsole.lo ...