javascript
关注
分享
扫一扫
文章平均质量分 73
大吕十六 不见长安
春风得意马蹄疾，一日看尽长安花。
展开
-
研究vue2.0源码（1）initMixin——core
研究vue2.0源码（1）initMixin——core为什么研究源码事情是这样…本来只是一个前端菜鸡（虽然现在也是一个前端大菜鸡（可以菜但是必须得大对不对:)）），然后有幸去年参加了一个大项目，就是那种全国性大大项目啊哈哈哈哈，也不用点名点姓说是哪个项目了，就是很大的全国性的，然后触发了程序员的被动技能——工作半年，实际工作时间一年。。。（天天加班）然后吧，每天晚上也没有啥事，就闲来无事的时候脑子一抽（也是恋爱不好谈了，王者荣耀不好玩了）想看vue2.0的源码，（这时候内心就一个想法，你在凝视原创 2021-04-26 17:54:40 · 372 阅读 · 0 评论 -
JavaScript数据结构与算法详解
JavaScript数据结构与算法详解一、数据结构1、数组2、栈3、队列4、链表5、集合// 封装集合的构造函数function Set() { // 使用一个对象来保存集合的元素 this.items = {} // 集合的操作方法 // 判断集合中是否有某个元素 Set.prototype.has = function (value) { return this.items.hasOwnProperty(value) }原创 2021-02-19 11:20:07 · 376 阅读 · 0 评论 -
canvas绘制验证码简单明了
canvas绘制验证码<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="原创 2020-11-23 14:43:00 · 197 阅读 · 0 评论 -
VUE内置 HOOKS钩子函数，HOOKS API的Vue实现
VUE内置 HOOKS钩子函数，HOOKS API的Vue实现一、HOOKS二、使用步骤1.withHooks2.useState2.useEffect总结一、HOOKSHook 是 React 16.8 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。后来看到尤大在 Vue 3.0 最近进展 的视频中也提到了 Hooks API，并写了一个在 Vue 中使用 Hooks 的 POC。可以把hooks当作更强、更实用的mixins。二、使用步骤原创 2020-09-29 16:08:00 · 2634 阅读 · 0 评论 -
VUE3模板，JSX，JSV
JSXJSX1. 变量作用域比较1.1 .vue 中无法使用当前作用域变量，必须return后才能使用1.2 .jsx 中可以直接使用当前作用域的变量2. 灵活性比较2.1 .vue 中一个文件只能写一个组件2.2. .jsx 中可以写多个组件3. 指令比较3.1. .vue 原生支持优雅的指令写法3.2. .jsx 本身不支持指令 社区有多种指令的书写方式，各种千奇百怪，为此还开了issue讨论，至今仍然没有友好的解决方式。因此可以暂时认为 .jsx 不支持指令或支持的不好.4. 运行时性能比较4.1.原创 2020-09-29 11:02:29 · 1444 阅读 · 1 评论 -
面试题系列——深思考核内容
面试题系列——深思考核内容一、如何让(a===1&&a=\==2&&a=\==3)的值为true?二、如何实现一个无限累加函数总结一、如何让(a===1&&a===2&&a===3)的值为true?双等号(==)：会触发隐式类型转换，所以可以使用 valueOf 或者 toString 来实现。每次判断都会触发valueOf方法，同时让value+1，才能使得下次判断成立。class A { constructor(value)原创 2020-09-27 11:12:12 · 734 阅读 · 0 评论 -
资深架构师之路——深入理解JavaScript垃圾回收机制
资深架构师之路——深入理解JavaScript垃圾回收机制一、垃圾回收机制二、为什么使用三、如何使用1、引用计数2、标记清除四、避免垃圾回收1.数组array优化2. 对象尽量复用3.循环优化五、避免内存泄漏1.意外的全局变量2.被遗忘的计时器或回调函数3.闭包4.没有清理的DOM元素引用总结一、垃圾回收机制垃圾回收：js代码想要运行，需要操作系统或者运行时提供内存空间，来存储变量及它的值。在某些变量（例如局部变量）在不参与运行时，就需要系统回收被占用的内存空间，称为垃圾回收内存泄漏：某些情况下，不再原创 2020-09-27 10:47:21 · 410 阅读 · 0 评论 -
JavaScript比较两个对象的值，自定义equal方法
JavaScript比较两个对象的值，自定义equal方法总结定义比较两个对象的方法//比较2个对象是否相同function isObjEqual(o1,o2){ var props1 = Object.getOwnPropertyNames(o1); var props2 = Object.getOwnPropertyNames(o2); if (props1.length != props2.length) { return false; } fo原创 2020-09-21 22:58:08 · 1668 阅读 · 0 评论 -
使用本地文件创建Web Worker多线程任务，分担复杂的操作，加快操作速度
使用本地文件创建Web Worker多线程任务，分担复杂的操作，加快操作速度一、Web Worker二、使用步骤1.创建worker2.调用worker总结一、Web Workerweb worker 是运行在后台的 JavaScript，不会影响页面的性能。当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。web worker 是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web work原创 2020-09-21 11:35:35 · 1447 阅读 · 0 评论 -
比较ES6、ES7、ES8常用特性和新特性
比较ES6、ES7、ES8常用特性和新特性一、ES6变量的改变，添加了块级作用域的概念字符串新增方法函数可以像C/C++那样设置默认参数值，增加数据容错能力对象键值对重名简写对象字面量简写提供对象对象合并数据解构和rest参数数据展开PromisecatchallracesetES7求幂运算符（**）Array.prototype.includes()ES8async、await异步解决方案Object.entries()Object.values()字符串填充padStart()、padEnd()总结一原创 2020-09-20 22:36:40 · 2440 阅读 · 0 评论 -
javascript中while、dowhile、switch、for循环语句
javascript中while、dowhile、for循环语句一、循环语句二、whiledo...whileswitchfor总结一、循环语句一组被重复执行的语句称之为循环体，能否继续重复，决定循环的终止条件。循环结构是在一定条件下反复执行某段程序的流程结构，被反复执行的程序被称为循环体。 循环语句是由循环体及循环的终止条件两部分组成的。二、whilelet a = 1while(a < 10){console.log('a:' + a)a++}do…whiledo{con原创 2020-09-20 11:50:25 · 265 阅读 · 0 评论 -
字符串中的特殊字符
字符串中的特殊字符总结加上反斜线’'转义总结good night原创 2020-09-19 23:36:08 · 623 阅读 · 0 评论 -
VUE源码解析——Object、Array变化侦测原理解析，学习Vue中如何实现数据的响应式系统，从而达到数据驱动视图。
VUE源码解析——Object变化侦测原理解析一、什么是变化侦测？二、Object变化侦测1.Object.defineProperty方法2.依赖收集什么是依赖收集何时收集依赖？何时通知依赖更新？依赖管理器Dep类Watcher类不足之处Object变化侦测流程总结├─dist # 项目构建后的文件├─scripts # 与项目构建相关的脚本和配置文件├─flow # flow的类型声明文件├─s原创 2020-09-18 11:41:22 · 358 阅读 · 0 评论 -
从浅入深学习TypeScript，通俗易懂——变量声明
从浅入深学习TypeScript，通俗易懂——变量声明一、TypeScript是什么？二、使用步骤1.var 声明作用域规则捕获变量怪异之处 *(常见面试题)let 声明块作用域重定义及屏蔽块级作用域变量的获取总结一、TypeScript是什么？TypeScript 是 JavaScript 的类型的超集，它可以编译成纯 JavaScript。编译出来的 JavaScript 可以运行在任何浏览器上。TypeScript 编译工具可以运行在任何服务器和任何系统上。TypeScript 是开源的。Ty原创 2020-09-17 20:16:27 · 465 阅读 · 1 评论 -
JavaScript原型和原型链详解
JavaScript原型和原型链详解一、JavaScript原型什么是原型二、JavaScript原型链什么是原型链什么是prototype和custructor一、JavaScript原型什么是原型在JavaScript中，每当定义一个函数数据类型(普通函数、类)时候，都会天生自带一个prototype属性，这个属性指向函数的原型对象，并且这个属性是一个对象数据类型的值。二、JavaScript原型链什么是原型链在JavaScript中万物都是对象，对象和对象之间也有关系，并不是孤立存在的。对原创 2020-09-14 22:17:21 · 416 阅读 · 0 评论 -
JavaScript作用域和作用域链详解
JavaScript作用域链详解一、JavaScript作用域JavaScript作用域是什么？作用域范围二、JavaScript作用域链作用域与执行上下文总结一、JavaScript作用域JavaScript作用域是什么？作用域是在运行时代码中的某些特定部分中变量，函数和对象的可访问性。换句话说，作用域决定了代码区块中变量和其他资源的可见性。作用域范围块语句（大括号“｛｝”中间的语句），如 if 和 switch 条件语句或 for 和 while 循环语句，不像函数，它们不会创建一个新的作用域原创 2020-09-14 19:44:19 · 425 阅读 · 0 评论 -
以凡人之躯，用js事件监听自定义——写一个绝对定位card组件
以凡人之躯，用js事件监听自定义——写一个绝对定位card组件一、组件是什么？二、使用步骤1.创建组件三、效果总结一、组件是什么？所谓组件化，就是把页面拆分成多个组件，每个组件依赖的 CSS、JS、模板、图片等资源放在一起开发和维护。 因为组件是资源独立的，所以组件在系统内部可复用，组件和组件之间可以嵌套，如果项目比较复杂，可以极大简化代码量，并且对后期的需求变更和维护也更加友好。二、使用步骤1.创建组件html<div class="floatCard" ref="floatCard"原创 2020-09-13 11:32:49 · 302 阅读 · 0 评论 -
Object原生监听对象变化，类似ES6的proxy代理
Object原生监听对象变化，类似ES6的proxy代理一、监听对象变化二、使用步骤总结一、监听对象变化数据驱动视图的关键点则在于我们如何知道数据发生了变化JS的Object.defineProperty方法二、使用步骤// defineProperty第一个参数是对象，第二个参数是访问对象属性名，第三个参数是get和set操作let car = {}let val = 3000Object.defineProperty(car, 'price', { enumerable: true,原创 2020-09-12 16:24:37 · 337 阅读 · 0 评论 -
JavaScript前端定时器，异步操作
JavaScript前端定时器，异步操作一、定时器是什么？二、使用步骤1.setInterval()2.setTimeout()总结一、定时器是什么？定时器就是闹钟二、使用步骤1.setInterval()代码如下（示例）：setInterval(code,millisec,lang)2.setTimeout()代码如下（示例）：setTimeout(code,millisec,lang)setTimeout(function(){alert("Hello")},3000);原创 2020-09-09 19:53:09 · 485 阅读 · 0 评论 -
从浅入深学习TypeScript，通俗易懂——基础类型
从浅入深学习TypeScript，通俗易懂一、TypeScript是什么？二、使用步骤1.引入库2.编译ts文件2.运行ts文件3.原始数据类型4.任意值总结一、TypeScript是什么？TypeScript 是 JavaScript 的类型的超集，它可以编译成纯 JavaScript。编译出来的 JavaScript 可以运行在任何浏览器上。TypeScript 编译工具可以运行在任何服务器和任何系统上。TypeScript 是开源的。TypeScript 增加了代码的可读性和可维护性类型系统原创 2020-09-09 14:51:40 · 447 阅读 · 0 评论 -
前端必须掌握知识点——Javascript数据类型
Javascript数据类型总结JavaScript 的类型分为两种：原始数据类型（Primitive data types）和对象类型（Object types）。原始数据类型包括：布尔值、数值、字符串、null、undefined 以及 ES6 中的新类型 Symbol 和 BigInt。对象数据类型包括： object1、Undefined：Undefined类型只有一个值，即特殊值undefined。在使用var声明变量，但未对其加以初始化时，这个变量值就是undefined。2、Null原创 2020-09-09 14:41:27 · 236 阅读 · 0 评论 -
ES6系列——Map 和 WeakMap 数据结构
ES6系列——Map 和 WeakMap 数据结构一、Map二、WeakMap总结一、MapObject 结构提供了“字符串—值”的对应，Map 结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现const m = new Map();const o = {p: 'Hello World'};m.set(o, 'content')m.get(o) // "content"m.has(o) // truem.delete(o) // truem.has(o) // false原创 2020-09-06 18:59:08 · 190 阅读 · 0 评论 -
ES6系列——Set 和 WeakSet 数据结构
ES6系列——Set 和 WeakSet 数据结构一、SetSet是什么Set 实例的属性和方法遍历Set二、WeakSetWeakSet 实例的属性和方法总结一、SetSet是什么ES6 提供了新的数据结构 Set。它类似于数组，但是成员的值都是唯一的，没有重复的值。Set本身是一个构造函数，用来生成 Set 数据结构。const s = new Set();[2, 3, 5, 4, 5, 2, 2].forEach(x => s.add(x));for (let i of s) {原创 2020-09-05 19:26:04 · 224 阅读 · 0 评论 -
深入理解js原型链和作用域链，了解作用域链和原型链的区别
深入理解js原型链和作用域链，了解作用域链和原型链的区别一、原型链二、作用域链三、原型链和作用域链的区别：总结一、原型链每一个构造函数都有一个prototype属性，这个属性就叫原型对象。每一个构造函数new出来的对象都有一个–proto–属性，这个属性指向原型对象。<script> function Car(){ //实例属性： //this.produce = ‘chevrolet‘, this.price = 8原创 2020-09-05 19:15:10 · 1196 阅读 · 0 评论 -
闭包，堆栈，深浅克隆
闭包，堆栈，深浅克隆一、闭包二、使用步骤1.引入库2.读入数据总结一、闭包立即执行函数，函数后面的括号带的是实参var test = (function (i) { return function () { alert(i *= 2) }})(2);test(5) //字符串4二、使用步骤1.引入库代码如下（示例）：import numpy as npimport pandas as pdimport matplotlib.pyplot as pltimport seabo原创 2020-09-05 19:01:38 · 174 阅读 · 0 评论 -
纯js前端通过url地址，下载文件保存到本地
文章目录一、下载含有url的文件二、保存到本地并自动点击总结一、下载含有url的文件代码如下（示例）：// 下载含有url的文件function downloadUrlFile(url, fileName) { const url2 = url.replace(/\\/g, '/'); const xhr = new XMLHttpRequest(); xhr.open('GET', url2, true); xhr.responseType = 'blob';原创 2020-09-02 17:33:03 · 30154 阅读 · 4 评论 -
前端post请求方式传参参数各种格式详解，form-data，application/x-www-form-urlencoded，application/json，text/xml
前端传参参数各种格式详解一、form-data二、application/x-www-form-urlencoded总结一、form-dataform-data格式一般是用来进行文件上传调用接口的时候参数data等于formDataconst formData = new FormData();formData.append('modelName', code);二、application/x-www-form-urlencoded表单的传参格式，常见的post传参格式data等于一个对象原创 2020-09-02 15:22:27 · 17605 阅读 · 1 评论 -
黑科技偏门实用的js方法总结
黑科技偏门实用的js方法总结一、contains是什么？总结一、contains是什么？使用场景：自定义一个组件，监听每一次点击事件，如果点击到组件以外的区域，则组件隐藏——类似于dialog弹窗的效果原理：每一次点击，都会有捕获和冒泡的阶段，捕获是从html元素向下到点击元素，冒泡阶段是从点击元素向上到html，在这过程中是否有需要的组件dom使用语法：//意思判断B中是否包含AB.contains(A)总结good afternoon...原创 2020-09-02 14:54:18 · 1896 阅读 · 0 评论 -
前端使用js控制腾讯云cos存储对象，优化静态文件存储读取的功能，获取预签名，上传下载，腾讯云大文件分块上传失败，报错跨域失败
前端使用js控制腾讯云存储对象，优化静态文件存储读取的功能，报错跨域失败一、对象存储是什么？二、使用步骤1.引入库2.引入作为模块3.前端使用固定密钥计算签名，该格式适用于前端调试4.下载对象5.上传对象6.调用cos上传下载跨域总结一、对象存储是什么？对象存储（Cloud Object Storage，COS）是由腾讯云推出的无目录层次结构、无数据格式限制，可容纳海量数据且支持 HTTP/HTTPS 协议访问的分布式存储服务。腾讯云 COS 的存储桶空间无容量上限，无需分区管理，适用于 CDN 数据原创 2020-09-02 14:15:30 · 3247 阅读 · 0 评论 -
ES6系列——深入浅出的讲解class语法，java类创建
ES6系列——深入浅出的讲解class语法，java类创建一、class语法是什么？二、使用步骤1.将E5语法转换成ES6语法总结一、class语法是什么？ES6 提供了更接近传统语言的写法，引入了 Class（类）这个概念，作为对象的模板。通过class关键字，可以定义类。基本上，ES6 的class可以看作只是一个语法糖，它的绝大部分功能，ES5 都可以做到，新的class写法只是让对象原型的写法更加清晰、更像面向对象编程的语法而已二、使用步骤1.将E5语法转换成ES6语法本人亲测遇到过原创 2020-09-01 20:45:38 · 218 阅读 · 0 评论 -
关于js堆栈内存问题
关于堆栈内存的闭包作用域问题情况解析1.第一种情况2.第二种情况3.第三种情况总结情况解析1.第一种情况let a = {}, b = Symbol('1'), c = Symbol('1');a[b] = 'abc';a[c] = 'cba';console.log(a[b])// abc// 因为b和c是symbol值，不会重复，除非使用Symbol的for创建// 所以啊a[b]即a[Symbol('1')]为'abc'2.第二种情况let a = {}, b = '0', c原创 2020-09-01 20:40:07 · 237 阅读 · 0 评论 -
Js FileReader图片加载，预处理本地缓存图片
Js FileReader图片加载一、FileReader是什么？二、使用步骤总结FileReader主要用于将文件内容读入内存，通过一系列异步接口，可以在主线程中访问本地文件。一、FileReader是什么？ FileReader主要用于将文件内容读入内存，通过一系列异步接口，可以在主线程中访问本地文件。二、使用步骤//获取文件名字的后缀名const prefix = img.name.split('.')[1]if (prefix !== 'jpg' && prefix !原创 2020-08-31 15:58:33 · 904 阅读 · 0 评论 -
js正则表达式大全，修饰符描述，表达式描述，元字符描述，量词描述，方法描述，属性描述
js正则表达式大全总结正则表达式修饰符修饰符用于执行区分大小写和全局匹配:修饰符描述i 执行对大小写不敏感的匹配。g 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。m 执行多行匹配。方括号方括号用于查找某个范围内的字符：表达式描述[abc] 查找方括号之间的任何字符。[^abc] 查找任何不在方括号之间的字符。[0-9] 查找任何从 0 至 9 的数字。[a-z] 查找任何从小写 a 到小写 z 的字符。[A-Z] 查找任何从大写 A 到大写 Z 的字符。[A-z]原创 2020-08-31 11:55:18 · 214 阅读 · 0 评论 -
js字符串方法大全，concat()，indexOf()，replace()，slice()，split()，substr()，trim()，toString()使用方法
js字符串方法大全总结字符串方法charAt() 返回在指定位置的字符。charCodeAt() 返回在指定的位置的字符的 Unicode 编码。concat() 连接两个或更多字符串，并返回新的字符串。fromCharCode() 将 Unicode 编码转为字符。indexOf() 返回某个指定的字符串值在字符串中首次出现的位置。includes() 查找字符串中是否包含指定的子字符串。lastIndexOf() 从后向前搜索字符串，并从起始位置（0）开始计算返回字符串最后出现的位置。原创 2020-08-31 11:54:26 · 728 阅读 · 0 评论 -
js数组方法大全，遍历数组方法every()，filter()，forEach()，map()，some()使用方法
数组方法大全总结数组方法concat() 连接两个或更多的数组，并返回结果。copyWithin() 从数组的指定位置拷贝元素到数组的另一个指定位置中。entries() 返回数组的可迭代对象。every() 检测数值元素的每个元素是否都符合条件。fill() 使用一个固定值来填充数组。filter() 检测数值元素，并返回符合条件所有元素的数组。find() 返回符合传入测试（函数）条件的数组元素。findIndex() 返回符合传入测试（函数）条件的数组元素索引。forEach()原创 2020-08-31 11:53:28 · 673 阅读 · 0 评论 -
对数组和对象进行操作，没有被vue监听到没有实时更新，如何操作让vue监听动态变化
对数组和对象进行操作，没有被vue监听到没有实时更新，如何操作让vue监听动态变化一、什么操作会导致vue监听不到1、对象的变化1、数组的变化总结一、什么操作会导致vue监听不到1、对象的变化受现代 JavaScript 的限制（以及废弃 Object.observe），Vue 不能检测到对象属性的添加或删除。由于Vue 会在初始化实例时对属性执行 getter/setter 转化过程，所以属性必须在 data 对象上存在才能让 Vue 转换它，这样才能让它是响应的使用Object.assign()原创 2020-08-31 11:36:16 · 755 阅读 · 0 评论 -
web storage存储方式，localstorage和sessionstorage
web storage存储方式，localstorage和sessionstorage一、web storage是什么？二、使用步骤1.localstorage2.sessionStorage总结一、web storage是什么？提供一种在cookie之外存储会话数据的途径。提供一种存储大量可以跨会话存在的数据的机制。二、使用步骤1.localstoragelocalStorage的生命周期是永久性的。使用过后一定要记住清楚点，本地缓存过多会影响浏览器性能setItem的值时字符串，存入的是原创 2020-08-28 21:58:01 · 606 阅读 · 0 评论 -
获取上传文件的后缀，.jpg,.png,.word,.xsl...使用方法split，lastindexOf，subtr
获取上传文件的后缀，.jpg,.png,.word,.xsl...使用方法split，lastindexOf，subtr一、使用详情使用场景使用效果总结一、使用详情使用场景有个需求，是上传的文件为2.2.jpg的图片使用代码如下（示例）：html现有字符串：{{message}}<br />使用split方法将字符串分割成数组{{splitMessage}}<br />找到数组中最后一个. 符号{{lastIndex}}<br />最后一个原创 2020-08-28 12:30:13 · 342 阅读 · 0 评论 -
companyManagement项目home主页开发，使用热门gsap库开发炫酷2d动画
companyManagement项目home主页开发总结代码如下（示例）：<template> <div id="home"> <div class="container"> <div class="welcome"> <p> <a href="https://en.wikipedia.org/wiki/Red">Welcome</a> <原创 2020-08-27 18:11:23 · 299 阅读 · 0 评论 -
companyManagement项目nav导航栏公共组件
companyManagement项目nav导航栏公共组件一、nav是什么？二、代码1.引入库总结一、nav是什么？是一个用来帮助浏览web的工具二、代码1.引入库代码如下（示例）：<template> <div id="headerNav"> <div class="frame"> <div class="frame_img-div"> <img src="../assets/svg/wohensh原创 2020-08-27 18:06:28 · 423 阅读 · 0 评论