- 博客(68)
- 收藏
- 关注
RSS订阅原创 ES7 装饰器
装饰器是 ES7 中的一个提案，是一种与类（class）相关的语法，用来注释或修改类和类方法。装饰器在 Python 和 Java 等语言中也被大量使用。装饰器是实现 AOP（面向切面）编程的一种重要方式。@frozen@frozen 和 @configurable 就是我们说的装饰器。可以看出是通过@来使用装饰器。一共用了两种：一个用在类上，一个用在方法上。装饰器属性：这个 @readonly 可以将 count 属性设置为只读。可以看出来，装饰器大大提高了代码的简洁性和可读性。
2023-11-07 11:46:59
387
原创 vue源码中值得学习的函数
最近在深入研究vue源码，把学习过程中，看到的一些好玩的的函数方法收集起来做分享，希望对大家对深入学习js有所帮助。数据类型判断Object.prototype.toString.call()返回的数据格式为 [object Object]类型，然后用slice截取第8位到倒一位，得到结果为 Objectvar _toString = Object.prototype.toString;function toRawType (value) { return _toString.call(va
2023-08-09 15:59:25
310
原创 axios（三）- 源码
0、热门请求库1、axios的特性2、axios的使用3、核心目录结构4、执行流程5、Axios 中的公共方法 6、Axios 如何支持不同的使用方式?7、 请求 / 响应拦截器是如何生效的？8、派发请求 dispatchRequest9、转换请求 / 响应数据10、适配器（adapter）处理请求11、取消请求12、取消重复请求13、总结热门请求库热门 JS HTTP 请求库特性简介Axios基于 Promise，支持浏览器和 nodeReques
2021-12-11 11:17:51
1615
原创 axios (十一) -- 取消重复请求
1、场景2种场景：假设页面中有一个按钮，用户点击按钮后会发起请求。如果没有对该按钮进行控制，当用户快速点击按钮时，会发出重复请求。假设在工单结果查询页面中，用户可以根据 “已审批”、“未审批” 和 “全部” 3 种查询条件来查询工单结果。如果请求的响应比较慢，当用户在不同的查询条件之前快速切换时，就会产生重复请求。处理有三种情况：（第一次请求A，第二次请求B）1、取消第一次A ，请求第二次B2、请求第一次A，取消第二次B3、请求第一次A，取消第二次B，将A请求结果给B这里用第二种理解小 t
2021-12-11 11:16:00
367
原创 axios（九）-- 适配器（adapter）处理请求
Axios 中的公共方法1、关键adapter 做了一件事非常简单，就是根据不同的环境 使用不同的请求。如果用户自定义了adapter，就用config.adapter。否则就是默认是default.adpter.adpter 适配浏览器的xhr，和node的http2、源码：默认适配器 default.jsimport utils from './utils'var defaults = { // ... // 请求超时时间，默认不超时 timeout: 0,
2021-12-11 11:13:45
3904
原创 axios（十）-- 取消请求
Axios 中的公共方法1、关键点（思路）如果要取消请求的话，可以通过调用 XMLHttpRequest 对象上的 abort 方法来取消请求：let xhr = new XMLHttpRequest();xhr.open("GET", "https://developer.mozilla.org/", true);xhr.send();setTimeout(() => xhr.abort(), 300);取消请求用xhr.abort()，那么什么时候执行这个取消请求的操作呢？得有一
2021-12-10 19:24:24
1541
原创 axios（八）--- 转换请求 / 响应数据
1、源码lib/core/dispatchRequest.js1、transformRequest: 对 config 中的 data 进行加工，比如对 post 请求的 data 进行字符串化 （JSON.stringify(data)）2、adapter：适配器，包含浏览器端 xhr 和 node 端的 http3、transformResponse: 对服务端响应的数据进行加工，比如 JSON.parse(data)let transformData = require('./transfo
2021-12-10 19:05:14
2801
原创 axios（七）-- 派发请求 dispatchRequest
1、关键点dispatchRequest中主要做了两件事，先通过transformData对请求数据进行处理，然后定义适配器adapter并执行，通过 .then 方法 对adapter（适配器）resolve 出的响应数据进行处理（transformData）并返回 response，失败返回一个状态为rejected`的 Promise 对象。到此，当用户调用 axios()时，可以链式调用 Promise 的 .then() 和 .catch() 来处理业务逻辑了。2、使用生成prom
2021-12-10 18:59:37
940
原创 axios（六）-- 请求 / 响应拦截器是如何生效的？
1、关键点假设1个请求拦截和1个相应拦截一开始栈的数据就两个（dispatchRequest是 ajax请求）[dispatchRequest ,undefined] --> undefined 是为了后面一对一对的如果拦截器存在，就要往栈中加数据 (unshift)[rejected1, fulfilled1, dispatchRequest, undefined]请求结束后，如果还有拦截，就要继续添加，（添加在请求完后面 push）[rejected1, fulfille
2021-12-10 18:33:25
624
原创 axios （五）--- Axios 如何支持不同的使用方式?
1、关键axios有几种调用方式，一种是 axios({})，以函数的方式，传入config就好；一种是axios.get(), 不只是get，还有axios.request(), axios.post()等即又有对象属性，又可以用函数方式调用，而 Axios是一个大类，所以可以用bind。Axios new出来的实例是一个对象，用bind去生成一个函数，并把Axios上的方法与属性拷贝到实例instance上，就可以用axios()或者axios.get()去调用 2、使用：// 方式
2021-12-10 18:14:07
569
原创 axios （四）--- Axios 中的公共方法-实用的基础工具函数
axios 中的defaults 文件包含了许多公共方法????1、后续需要很多判断类型的，他们公共的代码就有Object.prototype.toString判断：Array、ArrayBuffer、FormData、ArrayBuffer、object、Date、File、Blob、Function、Stream、URLSearchParamsvar toString = Object.prototype.toString;/** * 判断是否为数组 * * @param {Object
2021-12-10 18:02:45
342
原创 axios（二）- axios的理解和使用
axios的文档说明：axios此处只记录部分，及对axios的封装目录：1、axios.create(config)2、请求拦截和响应拦截3、取消拦截4、请求拦截和响应拦截的实践axios.create(config)1、根据指定的配置创建一个新的axios；2、明明直接由axios()和axios.get()等方法，为什么还有设置create呢？比如有个需求，项目中有部分接口需要配置的与另外的不一样，比如一个前端应用可以向多个后端应用发送请求，baseUrl就可以根据create设置
2021-12-03 18:16:20
1643
原创 axios篇（一） - xhr
用XMLHttpRequest 封装请求：需求/功能：1、同axios一样，返回的是promise2、请求参数：url, method方法默认为get(可传大小写)，param(挂在url上的参数)，dataContent-Type: 'application/x-www-formurlencoded;chartset=utf-8'，用于键值对参数，参数的键只用=链接，参数之间用&链接例如：name=%E5%B0%8F&age=12Content-Type: 'applica
2021-12-03 17:20:14
732
原创 滴答的时钟 -- 高阶函数
功能：构建一个滴答作响的闹钟。时钟需要显示小时，分钟，秒以及当地时间的日期要求：1、每个字段必须是双位数字，不足补上02、时钟必须显示每秒的变化3、十二小时制，用 AM PM 表示上午下午（主要体现函数式编程）将业务逻辑分解成更小的部分或者函数。// 可以将许多函数，合成一个更大的函数，还可以方便地修改被合称函数的顺序（解析详细在下方）const compose = (...fns) => (arg) => fns.reduce(
2021-11-29 23:22:47
95
原创 css之 变量中的变量 及 花式计算calc
css是我的一个痛点????，学了点看起来有点高大上又有点好玩的变量中的变量咦，css可以用变量耶，比如说，有p, h1, h2元素，你设置他们的颜色相同红色，那得每个元素都设置一次红色，如果要把他们都改成其他也是一样的颜色，那也得一个一个元素去找css。而css也是可以设置变量的，:root 选择器用匹配文档的根元素。 :root { --text-color: rgb(255, 0, 0); /* 设置一个变量 */ } p { color: var(--text-c
2021-10-13 09:16:05
1075
原创 javascript 按给出的顺序，定义一个函数fn
按顺序输出：实现fn:1、fn(‘John’) output: I am John2、fn(‘John’).rest(10).learn(‘computer’)output: I am John// 等待10s：Start learning after 10 secondsLearning Computer3、fn(‘John’).restFirst(5).learn(‘chinese’)output:// 等待5sstart learning after 5 secondsI a
2021-03-13 00:03:57
170
原创 hash和history
hash 模式：#后面 hash 值的变化，不会导致浏览器向服务器发出请求，浏览器不发出请求，就不会刷新页面通过监听 hashchange 事件可以知道 hash 发生了哪些变化，然后根据 hash 变化来实现更新页面部分内容的操作。history 模式：history 模式的实现，主要是 HTML5 标准发布的两个 API，pushState 和 replaceState，这两个 API 可以在改变 url，但是不会发送请求。这样就可以监听 url 变化来实现更新页面部分内容的操作。区别：ur
2021-01-09 17:28:49
120
原创 回调对象设计callbacks、异步回调解决方法deferred
callbacks使用方法callbacks原理分析deferred概念 及 使用方法deferred原理分析callbacks$.callbacks用于管理函数队列通过add添加处理函数到队列当中，通过fire去执行这些处理函数ps：$.callbacks是在jq内部的使用的，如.ajax, $.Defferred等组件提供基础功能的函数。它也可以用在自己开发的插件中。 使用方法：通过字符串参数的形式，支持4种特定的功能：Once: 队列中只执行一次unique..
2020-12-02 14:17:00
255
原创 vue源码之 eventBus原理
VUE中eventBus可以用来进行任何组件之间的通信，我们可以把eventBus当成一个管道，这个管道两端可以接好多组件，两端的任何一个组件都可以进行通信。其实这个管道就是Vue实例，实例中的$on, $off, $emit方法来实现此功能。
2020-12-02 14:14:51
1137
原创 vue源码之 虚拟dom 及 diff算法
前言目标：写一篇关于虚拟dom及vue怎么去处理节点（diff算法）目录：1.虚拟dom1.1 什么是虚拟dom1.2 为什么要引入1.3 vuejs里的虚拟dom1.4 总结2.patch2.1 patch介绍2.2 创建节点2.3 删除节点2.4 更新节点2.5 更新子节点2.6 总结1.1 、什么是虚拟dom在web早期，页面交互效果比较简单，没有那么多复杂的状态需要管理，不需要频繁的去操作dom，js jq就能满足我们的需求。随着时代发展，页面的功能越来越多，实现的
2020-12-02 11:25:29
272
原创 下载/导出文件的几种方式
返回的是 二进制文件：1、传参类型：两个属性值form表单格式传参，设置action中的url及方法，点击下载时直接submit<button @click.prevent='downTemplate'> <form ref='downTemplate' :action='url' method='POST' targer='downTemplate> <input type='hidden' name='TICKET' :value='$util
2020-12-01 16:22:41
1072
原创 jQuery源码分析（一）--- init extend merge 源码解析
jQuery整体架构无new化架构（源码）：$ 就是jQuery的别称$() 就是创建jQuery的实例对象若使用new： var jQuery = function( selector, context ) { return new jQuery( selector, context, rootjQuery ); }如果这样写会存在一个问题，在jQuery函数内部new一个新的jQuery，然后会一直这样new下去无限循环，最后陷入死循环。为了防止这种情况的出现，用ini
2020-09-10 19:23:24
114
原创 《Flask Web开发实战：入门、进阶与原理解析》笔记 --- 3.模板
模板引擎：html代码放在单独文件中，我们没法再使用字符串格式化或拼接字符串的方法来再HTML中插入变量，需要模板引擎Flask默认的模板引擎为jinja2jinja2三种定界符：语句；比如if判断、for判断 {%…%}表达式：比如字符串、变量、函数调用 {{…}}注释：{#…#}渲染模板：传入user与movies，在html中可以使用{{user.~}}过滤器：‘|’用来修...
2019-02-13 10:18:25
1109
原创 《Flask Web开发实战：入门、进阶及原理解析》笔记 --- 2. Flask与HTTP（下）
响应报文：由协议版本、状态码（status code）、原因短语（reason phrase）、响应首部和响应主体组成。HTTP几种状态码和相应的原因短语 有时想附加或者修改某个首部字段。比如，生成状态码3XX的重定向响应，需要将首部中的LOCATION字段设置为重定向的目标URL：重定向(Redirect), 向访问location:5000/hi，加载后url变成loc...
2019-02-13 09:04:16
1337
原创 《Flask Web开发实战：入门、进阶与原理解析》笔记 --- 2. Flask与HTTP（上）
HTTP (超文本传输协议)定义了服务器和客户端之间信息交流的格式和传递方式，他是万维网(WWW)中数据交互的基础一个Flask程序工作的实际流程：HTTP是客户端与服务器的连接方式，WSGI是服务器接受数据与Flask的链接方式。在程序中，Flask根据请求的URL执行对应的试图函数，获取返回值生成相应。相应一次经过WSGI转换成HTTP相应，再经由Web服务器传递，最终被发出请求...
2019-02-07 14:48:38
1586
1
原创 《Flask Web开发实战：入门、进阶与原理解析》笔记 --- 1. 初识Flask
pip:安装python包的工具，创建虚拟环境，可以拥有一个独立的python解释器环境。虚拟环境通过Virtualenv来创建，但是为了更方便管理虚拟环境和依赖包，使用继承了virtualenv的pipevn。在项目目录下，pipenv install创建一个虚拟环境，会在当前环境下创建一个文件夹，其中包含隔离的python解释器环境，并安装好pip wheel setuptools等...
2019-02-06 09:57:40
1576
原创 单例模式--js
单体（单例）模式的实现在于保证一个特定类仅有一个实例，意味着当第二次使用同一个类创建新对象时，应该得到第一个所创建对象完全相同对象。new操作符： 单体思想是，当使用同一个构造函数以new操作符来创建多个对象时，应该仅获得指向完全相同的对象的新指针。实现方法：1、可以使用全局变量来存储该实例，但是并不推荐使用这种方法，因为在一般原则下，全局变量是有确定啊的，此外，任何人都能f覆盖该全局变量，...
2018-05-23 13:20:05
164
原创 （腾讯编程题）字符移位--js
小Q最近遇到了一个难题：把一个字符串的大写字母放到字符串的后面，各个字符的相对位置不变，且不能申请额外的空间。你能帮帮小Q吗？输入描述:输入数据有多组，每组包含一个字符串s，且保证:1<=s.length<=1000输出描述:对于每组数据，输出移位后的字符串。输入例子1:AkleBiCeilD输出例子1:kleieilABCD...
2018-05-20 12:25:42
932
原创 (腾讯编程题)构造回文--js 动态规划
给定一个字符串s，你可以从中删除一些字符，使得剩下的串是一个回文串。如何删除才能使得回文串最长呢？输出需要删除的字符个数。输入描述:输入数据有多组，每组包含一个字符串s，且保证:1<=s.length<=1000.输出描述:对于每组数据，输出一个整数，代表最少需要删除的字符个数。输入例子1:abcdagoogle输出例子1:22思路：保存字符串并保存该字符串的反转字符串，然后用最...
2018-05-20 11:35:25
392
原创 原型链
原型链的基本思想：利用原型让一个引用类型继承另一个引用类型的属性和方法。构造函数、原型和实例的关系：每个构造函数都有一个原型对象，原型对象都包含一个指向构造函数的指针，而实例都包含一个指向原型对象的内部函数。实现原型链的代码： function SuperType(){ this.prototype=true; } SuperType.proto...
2018-05-08 14:30:29
172
原创 验证用户名、邮箱、密码----灵活的javascript
一、小白写法： function checkName(){ // 验证名字 } function checkEmail(){ // 验证邮箱 } function checkPassword(){ // 验证密码 } 创建了很多变量（函数也是变量）二、函数的另一种形式var checkName=
2018-05-05 21:18:35
1110
原创 npm install中--save-dev 与 --save 的区别
使用npm install时，我们会用到--save-dev和--save，他们的区别是：--save-dev:是开发时依赖的东西，而--save：是发布后要依赖的东西而在package.json中：--save-dev的依赖放在devDependencies中，如webpack--save的依赖放在dependencies中，如jquery...
2018-04-16 16:45:25
361
原创 快速排序
：流程：1. 随机选取数组中的一个数index,将这个数放到最后；2. 其他数字跟这个数进行比较，也记录这个数是第几小的数，将比它小的往左，大的往右；3. 根据这个记录第几小将该数放在其对应位置，即左边比它小，右边比它大4. 这时候将左边的数和右边的数再递归上面的过程一：不需要辅助空间。//交换元素 function swap(data,a,b){ var temp=
2018-03-24 14:18:58
117
原创 css清除浮动的方法
关于清除浮动的方法：方法一：使用clear.clear{ clear: both;}在浮动的盒子之下，再放一个clear类标签，可以清除对页面的影响。这个标签可放在两个位置：在父元素内部：会将父盒子高度重新撑开；在父元素外部：会将这个浮动盒子的影响清除吗，但不会撑开父盒子一般不会用这个方法来清除倾向，这会增加页面的标签。方法二：使用overflow在父元素中添加一个属性：overflow:hi...
2018-03-10 15:17:07
106
原创 <meta>标签及常用
1. <meta>元素提供有关页面的元信息，比如针对搜索引擎和更新的频度的描述和关键词。 位于文档首部，不包含任何内容。它的属性定义了与文档相关联的名称/值对。2. HTML与XHTML之间的差异： 在HTML中，<meta>没有结束标签；在XHTML中，<meta>必须被正确地关闭3. 必须的属性：content:定义与 http-equiv或na...
2018-03-09 19:35:40
251
原创 HTML5中的web存储
在html4及之前的版本中，通常使用cookie存储在用户的客户端，并随浏览器的请求一起发送到服务器的，它有一定的过期时间，过期后自动消失，也制约其发展的因素。HTML5中增加了两种全新的数据存储方式：Web Storage和Web SQL Database.Web Storage:可用于临时或永久保存客户端的少量数据，Web SQL Database:客户端本地化的一套数据库系统，将大量的数据保...
2018-03-08 10:54:14
2453
原创 网页性能优化
页面的加载速度不仅影响到网站的搜索引擎排名，还严重影响到用户的体验。以下介绍优化页面加载速度的几种方法：一、优化图像。二、去掉不必要的插件三、减少DNS查询（页面加载时间快速有效的方法）四、最小化重定向：重定向增加了额外的http请求，因此也增加了加载时间，但有时重定向是不可避免的，如链接网站的不同部分、保存多个域名、或者从不存在的页面跳转到新页面。重定向 增加了延迟时间，因此要避免使用它。五、使...
2018-02-11 14:47:29
271
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人