javascript
关注
分享
扫一扫
javascript
江-月*夜
喜欢分享项目用到的知识。也方便我日后用到直接复制修改
展开
-
js 二进制流下载Excel文件
js 下载excel文件原创 2023-01-10 17:46:25 · 1046 阅读 · 1 评论 -
js 二进制流转换base64图片
js 二进制转banse64原创 2023-01-09 10:28:07 · 2413 阅读 · 0 评论 -
vue2.x树状结构（递归）
一、数据结构(无限级)二、父组件样式公共部分点这里 https://blog.youkuaiyun.com/qq_36529240/article/details/123506889<div class="anwer-box"> <TreeList :treeItem="treeItem" @anwerShow="anwerShow" @anwerMyClick="anwerMyClick" @problemaZan="problemaZan"原创 2022-05-23 14:47:06 · 673 阅读 · 1 评论 -
jquery 页面跳转至描点
$(function(){/*跳转至锚点*/var local_path = window.location.hash;var target = $(local_path);target = target.length && target || $('[name=' + local_path.slice(1) + ']');if (target.length) { var targetOffset = target.offset().top; $('html,body').an原创 2022-03-04 14:05:46 · 1038 阅读 · 0 评论 -
js控制页面缩放
<script language="javascript"> document.write('<meta name="viewport" content="width=720, minimum-scale = '+window.screen.width/720+', maximum-scale = '+window.screen.width/720+', target-densitydpi=device-dpi">');</script>原创 2022-03-04 14:04:33 · 915 阅读 · 0 评论 -
js常用的校验
/** * @param {string} path 判断字符串是否是https?:|mailto:|tal: 开头的 * @returns {Boolean} */export function isExternal(path) { return /^(https?:|mailto:|tel:)/.test(path)} /** * @param {string} str //检验字符串是否是 admin editor * @returns {Boolean} */expo转载 2022-03-01 16:41:39 · 471 阅读 · 0 评论 -
第25天 虚拟 DOM 实现原理？
拟 DOM 的实现原理主要包括以下 3 部分：用 JavaScript 对象模拟真实 DOM 树，对真实 DOM 进行抽象；diff 算法 — 比较两棵虚拟 DOM 树的差异；pach 算法 — 将两个虚拟 DOM 对象的差异应用到真正的 DOM 树。...原创 2022-01-12 15:28:52 · 203 阅读 · 0 评论 -
第25天 es6 Proxy 与 Object.defineProperty 优劣对比
Proxy 的优势如下:Proxy 可以直接监听对象而非属性；Proxy 可以直接监听数组的变化；Proxy 有多达 13 种拦截方法,不限于 apply、ownKeys、deleteProperty、has 等等是Object.defineProperty 不具备的；Proxy 返回的是一个新对象,我们可以只操作新的对象达到目的,而 Object.defineProperty 只能遍历对象属性直接修改；Proxy 作为新标准将受到浏览器厂商重点持续的性能优化，也就是传说中的新标准的性能红利；原创 2022-01-12 15:27:13 · 320 阅读 · 0 评论 -
第25天 javascript事件的各个阶段
1：捕获阶段 —> 2：⽬标阶段 —> 3：冒泡阶段document —> target ⽬标 ----> document由此， addEventListener 的第三个参数设置为 true 和 false 的区别已经⾮常清晰了true 表示该元素在事件的“捕获阶段”（由外往内传递时）响应事件false 表示该元素在事件的“冒泡阶段”（由内向外传递时）响应事件...原创 2022-01-12 08:43:20 · 175 阅读 · 0 评论 -
第25天 JavaScript写⼀个通⽤的事件侦听器函数
markyun.Event = { // 视能⼒分别使⽤dom0||dom2||IE⽅式 来绑定事件 // 参数： 操作的元素,事件名称 ,事件处理程序 addEvent : function(element, type, handler) { if (element.addEventListener) { //事件类型、需要执⾏的函数、是否捕捉 element.addEventListener(type, handler, false); } else if (element.at原创 2022-01-10 09:59:13 · 89 阅读 · 0 评论 -
webpack5 优化构建速度
下面会以这些方面来说明如何 优化构建速度：1.优化babel-loader：使用include或exclude来缩小查找范围使用cacheDirectory来设置缓存2.避免引入无用的模块：webpack.IgnorePlugin3.避免重复打包：module.noParse4.开启多进程打包：happypack5.多进程压缩js：webpack-parallel-uglify-plugin6.自动更新和热更新（仅适合开发环境）：watch(devServer自动开启)、HotModul原创 2022-01-10 09:54:36 · 1198 阅读 · 0 评论 -
第24天 javascript 如何渲染⼏万条数据并不卡住界⾯
如何在不卡住⻚⾯的情况下渲染数据，也就是说不能⼀次性将⼏ 万条都渲染出来，⽽应该⼀次渲染部分 DOM ，那么就可以通过requestAnimationFrame 来每 16 ms 刷新⼀次<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"原创 2022-01-08 17:17:28 · 740 阅读 · 0 评论 -
第24天 JavaScript 异步编程的实现⽅式
回调函数优点：简单、容易理解缺点：不利于维护，代码耦合⾼事件监听(采⽤时间驱动模式，取决于某个事件是否发⽣)：优点：容易理解，可以绑定多个事件，每个事件可以指定多个回调函数缺点：事件驱动型，流程不够清晰发布/订阅(观察者模式)类似于事件监听，但是可以通过‘消息中⼼ʼ，了解现在有多少发布者，多少订阅者Promise对象优点：可以利⽤then⽅法，进⾏链式写法；可以书写错误时的回调函数；缺点：编写和理解，相对⽐较难Generator函数优点：函数体内外的数据交换、错误..原创 2022-01-08 16:40:37 · 84 阅读 · 0 评论 -
第24天 JavaScript ajax原理
Ajax 的原理简单来说是在⽤户和服务器之间加了—个中间层( AJAX 引擎)，通过XmlHttpRequest 对象来向服务器发异步请求，从服务器获得数据，然后⽤ javascrip t 来操作 DOM ⽽更新⻚⾯。使⽤户操作与服务器响应异步化。这其中最关键的⼀步就是从服 务器获得请求数据Ajax 的过程只涉及 JavaScript 、 XMLHttpRequest 和 DOM 。 XMLHttpRequest 是aja x的核⼼机制/** 1. 创建连接 **/var xhr = null;原创 2022-01-08 11:16:50 · 88 阅读 · 0 评论 -
第24天 JavaScript事件模型
W3C 中定义事件的发⽣经历三个阶段：捕获阶段（ capturing ）、⽬标阶段 （ targetin ）、冒泡阶段（ bubbling）冒泡型事件：当你使⽤事件冒泡时，⼦级元素先触发，⽗级元素后触发捕获型事件：当你使⽤事件捕获时，⽗级元素先触发，⼦级元素后触发DOM 事件流：同时⽀持两种事件模型：捕获型事件和冒泡型事件阻⽌冒泡：在 W3c 中，使⽤ stopPropagation() ⽅法；在IE下设置 cancelBubble = true阻⽌捕获：阻⽌事件的默认⾏为，例如 clic.原创 2022-01-08 11:06:40 · 362 阅读 · 0 评论 -
第24天 JavaScript原型，原型链 ? 有什么特点？
一、说说你对作⽤域链的理解作⽤域链的作⽤是保证执⾏环境⾥有权访问的变量和函数是有序的，作⽤域链的变量只能 向上访问，变量访问到 window对象即被终⽌，作⽤域链向下访问变量是不被允许的简单的说，作⽤域就是变量与函数的可访问范围，即作⽤域控制着变量与函数的可⻅性和 ⽣命周期二、原型每个对象都会在其内部初始化⼀个属性，就是 prototype (原型)，当我们访问⼀个对象的 属性时如果这个对象内部不存在这个属性，那么他就会去 prototype ⾥找这个属性，这个prototype ⼜会有⾃原创 2022-01-08 10:55:13 · 134 阅读 · 0 评论 -
第22天 Vue ＜keep-alive＞＜/keep-alive＞ 的作⽤是什么? v-el的作⽤是什么
1.keep-alive<keep-alive></keep-alive> 包裹动态组件时，会缓存不活动的组件实例,主要⽤于保留 组件状态或避免重新渲染⽐如有⼀个列表和⼀个详情，那么⽤户就会经常执⾏打开详情=>返回列表=> 打开详情…这样的话列表和详情都是⼀个频率很⾼的⻚⾯，那么就可以对列表 组件使⽤ 进⾏缓存，这样⽤户每次返回列表的 时候，都能从缓存中快速渲染，⽽不是重新渲染2.v-el提供⼀个在⻚⾯上已存在的 DOM 元素作为 Vue 实例的挂载⽬标.可以原创 2022-01-06 09:43:31 · 169 阅读 · 0 评论 -
第21天 vuex是什么？怎么使⽤？哪种功能场景使⽤它？
只⽤来读取的状态集中放在 store 中； 改变状态的⽅式是提交 mutations ，这是个同步 的事物； 异步逻辑应该封装在 action 中。在 main.js 引⼊ store ，注⼊。新建了⼀个⽬录 store ， … export*场景有：单⻚应⽤中，组件之间的状态、⾳乐播放、登录状态、加⼊购物⻋1.vuexstate ： Vuex 使⽤单⼀状态树,即每个应⽤将仅仅包含⼀个 store 实例，但单⼀状态 树和模块化并不冲突。存放的数据状态，不可以直接修改⾥⾯的数据。mutation.原创 2022-01-05 15:12:32 · 133 阅读 · 0 评论 -
第21天 Vue路由
vue路由的钩⼦函数⾸⻚可以控制导航跳转， beforeEach ， afterEach 等，⼀般⽤于⻚⾯ title的修改。⼀些需要登录才能调整⻚⾯的重定向功能。全局前置守卫const router = createRouter({ ... })router.beforeEach((to, from) => { // ... // 返回 false 以取消导航 return false})beforeEach 主要有3个参数 to ， from ， next 。t原创 2022-01-05 15:09:27 · 90 阅读 · 0 评论 -
第21天 Vue实现数据双向绑定的原理：Object.defineProperty()
vue 实现数据双向绑定主要是：采⽤数据劫持结合发布者-订阅者模式的⽅式，通过 Object.defineProperty() 来劫持各个属性的 setter ， getter ，在数据变动时发布 消息给订阅者，触发相应监听回调。当把⼀个普通 Javascript对象传给 Vue 实例来作 为它的 data 选项时，Vue 将遍历它的属性，⽤ Object.defineProperty() 将它们转为 getter/setter 。⽤户看不到 getter/setter ，但是在内部它们让 Vue 追.原创 2022-01-05 15:08:39 · 115 阅读 · 0 评论 -
第21天 请详细说下你对vue⽣命周期的理解
总共分为8个阶段创建前/后，载⼊前/后，更新前/后，销毁前/后创建前/后： 在 beforeCreate 阶段， vue 实例的挂载元素 el 和数据对象 data 都为 undefined，还未初始化。在 created 阶段， vue 实例的数据对象 data 有了，el还 没有载⼊前/后：在 beforeMount 阶段， vue 实例的 $el 和 data 都初始化了，但还是挂载 之前为虚拟的 dom 节点，data.message 还未替换。在 mounted 阶段， vue 实例挂载原创 2022-01-05 14:44:00 · 113 阅读 · 0 评论 -
第21天 JavaScript性能
1 DNS 预解析DNS 解析也是需要时间的，可以通过预解析的⽅式来预先获得域名所对应的 IP<link rel="dns-prefetch" href="//blog.poetries.top">2 缓存缓存对于前端性能优化来说是个很重要的点，良好的缓存策略可以降低资源的重复加载提 ⾼⽹⻚的整体加载速度 通常浏览器缓存策略分为两种：强缓存和协商缓存1）强缓存实现强缓存可以通过两种响应头实现： Expires 和 Cache-Control 。强缓 存表示在缓存期间不需要请求，原创 2022-01-05 14:37:58 · 114 阅读 · 0 评论 -
第21天 javascript Service Worker
Service workers 本质上充当Web应⽤程序与浏览器之间的代理服务器，也可以在⽹络可⽤时作为浏览器和⽹络间的代理。它们旨在（除其他之外）使得 能够创建有效的离线体验，拦截⽹络请求并基于⽹络是否可⽤以及更新的资源是否驻留在服务器上来采取适当的动作。他们还允许访问推送通知和后台同步 API⽬前该技术通常⽤来做缓存⽂件，提⾼⾸屏速度// index.jsif (navigator.serviceWorker) { navigator.serviceWorker .register("sw.原创 2022-01-05 11:37:56 · 126 阅读 · 0 评论 -
第21天 es6 Proxy
Proxy 是 ES6 中新增的功能，可以⽤来⾃定义对象中的操作let p = new Proxy(target, handler);// `target` 代表需要添加代理的对象// `handler` ⽤来⾃定义对象中的操作 可以很⽅便的使⽤ Proxy 来实现⼀个数据绑定和监听let onWatch = (obj, setBind, getLogger) => { let handler = { get(target, property, receiver) { get.原创 2022-01-05 11:07:32 · 72 阅读 · 0 评论 -
第21天 JavaScript 防抖
你是否在⽇常开发中遇到⼀个问题，在滚动事件中需要做个复杂计算或者实现⼀个按钮的防⼆次点击操作。这些需求都可以通过函数防抖动来实现。尤其是第⼀个需求，如果在频繁的事件回调中做复杂计算，很有可能导致⻚⾯卡顿，不如将多次计算合并为⼀次计算，只在⼀个精确点做 操作PS：防抖和节流的作⽤都是防⽌函数多次调⽤。区别在于，假设⼀个⽤户⼀直触发这个函 数，且每次触发函数的间隔⼩于 wait ，防抖的情况下只会调⽤⼀次，⽽节流的 情况会每 隔⼀定时间（参数 wait ）调⽤函数// 这个是⽤来获取当前时间戳的原创 2022-01-05 10:56:39 · 188 阅读 · 0 评论 -
第22天 JavaScript Typeof
typeof 对于基本类型，除了 null 都可以显示正确的类型typeof 1 // 'number'typeof '1' // 'string'typeof undefined // 'undefined'typeof true // 'boolean'typeof Symbol() // 'symbol'typeof b // b 没有声明，但是还会显示 undefinedtypeof 对于对象，除了函数都会显示 objecttypeof [] // 'object'typ.原创 2022-01-05 10:33:50 · 73 阅读 · 0 评论 -
第21天 javascript == 和 ===区别，什么情况⽤ ==
// [] 转成 true，然后取反变成 false[] == false// 根据第 8 条得出 [] == ToNumber(false) [] == 0// 根据第 10 条得出ToPrimitive([]) == 0// [].toString() -> '''' == 0// 根据第 6 条得出 0 == 0 // -> true=== ⽤于判断两者类型和值是否相同。 在开发中，对于后端返回的 code ， 可以通过 == 去判断...原创 2022-01-05 10:30:48 · 234 阅读 · 0 评论 -
第21天 Promise
Promise 是 ES6 新增的语法，解决了回调地狱的问题。可以把 Promise 看成⼀个状态机。初始是 pending 状态，可以通过函数 resolve 和 reject ，将状态转变为resolved 或者 rejected 状态，状态⼀旦改变就不能再次变 化。then 函数会返回⼀个 Promise 实例，并且该返回值是⼀个新的实例⽽不是之前的实 例。因为 Promise 规范规定除了pending 状态，其他状态是不可以改变的，如果返回 的是⼀个相同实例的话，多个 then 调⽤就失去.原创 2022-01-04 11:07:43 · 67 阅读 · 0 评论 -
第21天 Generator 原理
Generator 是 ES6 中新增的语法，和 Promise ⼀样，都可以⽤来异步编 程// 使⽤ * 表示这是⼀个 Generator 函数// 内部可以通过 yield 暂停代码// 通过调⽤ next 恢复执⾏function* test() { let a = 1 + 2; yield 2; yield 3; }let b = test();console.log(b.next()); // > { value: 2, done: false }console.log(原创 2022-01-04 11:03:31 · 197 阅读 · 0 评论 -
第21天 async、await 优缺点
async 和 await 相⽐直接使⽤ Promise 来说，优势在于处理 then 的调 ⽤链，能够更清晰准确的写出代码。缺点在于滥⽤ await 可能会导致性能问 题，因为 await 会阻塞代码，也许之后的异步代码并不依赖于前者，但仍然需要等待前者完成，导致代码失去了并发性var a = 0var b = async () => { a = a + await 10 console.log('2', a) // -> '2' 10 a = (await 10) + a c.原创 2022-01-04 10:57:23 · 610 阅读 · 0 评论 -
第21天 怎么判断对象类型
可以通过 Object.prototype.toString.call(xx) 。这样我们就可以获得类似 [object Type]的字符串。instanceof 可以正确的判断对象的类型，因为内部机制是通过判断对象的原型链中是不 是能找到类型的 prototype...原创 2022-01-04 10:53:15 · 257 阅读 · 0 评论 -
第21天 简单说下原型？
每个函数都有 prototype 属性，除了 Function.prototype.bind() ，该属性指向原 型。每个对象都有__proto__ 属性，指向了创建该对象的构造函数的原型。其实这个属性指 向了 [[prototype]] ，但是 [[prototype]] 是内部属性，我们并不能访问到，所以使 ⽤ __proto__来访问。对象可以通过__proto__ 来寻找不属于该对象的属性，__proto__将对象连接起来组 成了原型链。...原创 2022-01-04 10:52:00 · 208 阅读 · 0 评论 -
第21天 bind、call、apply 区别
call 和 apply 都是为了解决改变 this 的指向。作⽤都是相同的，只是传参的⽅式 不同。除了第⼀个参数外， call可以接收⼀个参数列表， apply 只接受⼀个参数数组let a = { value: 1 }function getValue(name, age) { console.log(name) console.log(age) console.log(this.value) }getValue.call(a, 'yck', '24')getValue.apply.原创 2022-01-04 10:46:52 · 106 阅读 · 0 评论 -
第21天 谈谈变量提升
当执⾏ JS 代码时，会⽣成执⾏环境，只要代码不是写在函数中的，就是在 全局执⾏环境中，函数中的代码会产⽣函数执⾏环境，只此两种执⾏环境。b() // call bconsole.log(a) // undefinedvar a = 'Hello world'function b() { console.log('call b') }在提升的过程中，相同的函数会覆盖上⼀个函数，并且函数优先于变量提升b() // call b secondfunction b() { console..原创 2022-01-04 10:34:58 · 193 阅读 · 0 评论 -
第21天 UDP 与 TCP 的区别是什么？
一、UDP⾸先 UDP 协议是⾯向⽆连接的，也就是说不需要在正式传递数据之前先连接起双⽅。然后 UDP协议只是数据报⽂的搬运⼯，不保证有序且不丢失的传递到对端，并且 UDP 协议也没 有任何控制流量的算法，总的来说 UDP 相较于 TCP更加的轻便⾯向⽆连接⾸先 UDP 是不需要和 TCP ⼀样在发送数据前进⾏三次握⼿建⽴连接的，想发数据就可 以开始发送了。 并且也只是数据报⽂的搬运⼯，不会对数据报⽂进⾏任何拆分和拼接操作。在发送端，应⽤层将数据传递给传输层的 UDP 协议， UDP 只会原创 2022-01-04 10:04:21 · 729 阅读 · 0 评论 -
第21天 使用js写一个方法找出1-10000之间的对称数
对称数，又称回文数。const symmetryNumber = []const checkList = new Map()const checkSymmetryNumber = number => { if (number % 10 === 0) return const numberString = number.toString() const cn = numberString.split('').reverse().join('') if (cn === numberS原创 2022-01-04 09:19:24 · 612 阅读 · 0 评论 -
第20天 前端路由原理
前端路由实现起来其实很简单，本质就是监听 URL 的变化，然后匹配路由规则，显示相应的⻚⾯，并且⽆须刷新⻚⾯。⽬前前端使⽤的路由就只有两种实 现⽅式1. Hash 模式www.test.com/#/ 就是 Hash URL ，当 # 后⾯的哈希值发⽣变化时，可 以通过 hashchange 事件来监听到URL 的变化，从⽽进⾏跳转⻚⾯，并且 ⽆论哈希值如何变化，服务端接收到的 URL 请求永远是 www.test.comwindow.addEventListener('hashchange.原创 2021-12-31 15:13:44 · 218 阅读 · 0 评论 -
第20天 虚拟DOM
⼤家都知道操作 DOM 是很慢的， 那么相较于 DOM 来说，操作 JS 对象会快很多，并且我们也可 以通过 JS 来模拟 DOMconst ul = { tag: 'ul', props: { class: 'list' }, children: { tag: 'li', children: '1' } } //上述代码对应的 DOM 就是 <ul class='list'> <li>1</li></ul>那么既然 DOM原创 2021-12-31 15:10:17 · 170 阅读 · 0 评论 -
第20天 javascript浏览器缓存机制
缓存可以说是性能优化中简单⾼效的⼀种优化⽅式了，它可以显著减少⽹络传输所带来的 损耗。对于⼀个数据请求来说，可以分为发起⽹络请求、后端处理、浏览器响应三个步骤。浏览器缓存可以帮助我们在第⼀和第三步骤中优化性能。⽐如说直接使⽤缓存⽽不发起请求，或者发起了请求但后端存储的数据和前端⼀致，那么就没有必要再将数据回传回来，这样 就减少了响应数据。一、 缓存位置从缓存位置上来说分为四种，并且各⾃有优先级，当依次查找缓存且都没有命 中的时候，才会去请求⽹络Service WorkerMemory Ca.原创 2021-12-31 11:48:58 · 1475 阅读 · 0 评论 -
第20天 js存储
cookie，localStorage，sessionStorage，indexDB从上表可以看到， cookie 已经不建议⽤于存储。如果没有⼤量数据存储需 求的话，可以使⽤ localStorage 和sessionStorage 。对于不怎么改变 的数据尽量使⽤ localStorage 存储，否则可以⽤ sessionStorage存储对于 cookie 来说，我们还需要注意安全性。Service WorkerService Worker 是运⾏在浏览器背后的独⽴线程，⼀般可原创 2021-12-31 11:16:01 · 208 阅读 · 0 评论