随笔分类 - JS与Vue
JavaScripts与Vue 技术学习随笔
摘要：背景 由于公司业务涉及到多个国家，每个国家站的访问的域名不同（指向同一个 Web 服务） 在站内能够切换不同的国家，服务端一个token支持所有国家鉴权 此时需要前端将Token等相关信息共享到即将跳转到的新站点，因为不同域，浏览器不会共享 Cookie 方案 将 Token 相关信息 通过 URL
阅读全文
摘要：手写 Promise 实现 Promise的基本使用 Promise定义及用法详情文档：Promise MAD文档 function testPromise(param) { return new Promise((resolve, reject) => { setTimeout(() => { p
阅读全文
摘要：Vue中的发布订阅模式分析 模块：instanceEventEmiiter.ts（在下方有简单实现和解析） 在Vue3中，已经取消了对这个模块的引用，故而不再支持 $on、$off、$once相关的方法，不过还是可以对进行学习和借鉴，运用到工作中。 Vue3中的简单实现 Vue3中 emit 的实现
阅读全文
摘要：Vue3中的响应式对象Reactive源码分析 ReactiveEffect.js 中的 trackEffects函数 及 ReactiveEffect类 在Ref随笔中已经介绍，在本文中不做赘述 本文中所有的源代码均为 JS简易版本，便于阅读理解 Vue3源码分析之 Ref 与 ReactiveE
阅读全文
摘要：Vue3中的响应式实现原理 完整 js版本简易源码 在最底部 ref 与 reactive 是Vue3中的两个定义响应式对象的API，其中reactive是通过 Proxy 来实现的，它返回对象的响应式副本，而Ref则是返回一个可变的ref对象，只有一个 .value属性指向他内部的值，本文则重点来
阅读全文
摘要：Diff 算法源码（结合源码写的简易版本） 备注：文章后面有详细解析，先简单浏览一遍整体代码，更容易阅读 // Vue3 中的 diff 算法 // 模拟节点 const { oldVirtualDom, virtualDom } = require('./dom') // 这是节点的类型（源码中还
阅读全文
摘要：参考资料：https://github.com/mqyqingfeng/Blog/issues/42 柯里化（Currying）： 定义：柯里化是表示将某个多参数的函数转换为一系列只有一个参数的函数的技术。 优点： 1. 参数复用 2. 延迟执行 3. 函数式编程（具体没有深入了解） 缺点：由于 柯
阅读全文
摘要：JavaScript经典面试题算法：最长回文字符串 下面的解题方法是通过中心扩散法的方式实现的，具体代码和注释如下（时间复杂度: O(n^2),空间复杂度：O(1)） // str字符串function longestPalindrome(str) { function palindrome(s,
阅读全文
摘要：链表相较于数组的优缺点 1. 链表在 插入、删除、移动数据效率比数组要高，数组插入、移动、删除数据需要改变没有数据的索引，而链表则只需要更改指针即可 2. 在查询方面，数组要优于链表，数组存储的数据是连续的，可以直接通过位置信息读取到数据，而链表则需要通过遍历的方式找到对应的指针 3. 灵活性方面，
阅读全文
摘要：参考资料：https://zh.javascript.info/microtask-queue#wei-ren-wu-dui-lie-microtaskqueue 简化版 Vue3 中的 微任务队列实例及说明： // 任务队列 const queue = [] // 创建一个异步函数 const t
阅读全文
摘要：JavaScript通过父节点ID递归生成JSON树： · 实现思路：通过递归实现（第一次递归的时候查询出所有的父节点，然后通过当前父节点id不断地去查询所有子节点，直到递归完毕返回） · 代码示例： // 模拟数据 const ary = [ { id: '1', name: '11', pare
阅读全文
摘要：h5调用摄像头（允许自定义界面）【MediaDevices.getUserMedia()】 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" conten
阅读全文
摘要：变量提升（Hoisting） var: 使用var在函数或全局内任何地方声明变量相当于在其内部最顶上声明它，这种行为称为Hoisting（提升） 注意：变量赋值的位置不会改变 function fn() { console.log(x) // -> undefined var x = 2 } //
阅读全文
摘要：contentBase：主要是指定静态资源的根目录的。
阅读全文
摘要：Throttling：在监听鼠标移动事件、盒子滚动事件等使用节流技术能节省性能消耗 /** * 节流函数（每隔t执行一次） */ function Throttling(fn, t) { const timer = null return function() { // 执行完上一次的内容后才执行下
阅读全文
摘要：##迪卡算法求积（n * n） 使用 array.reduce 的方式实现 笛卡尔积算法 const arr = [ ['黑色', '白色', '蓝色'], ['1.2KG', '2.0KG', '3.0KG'], ['a', 'b'], ['aa', 'bb'] ]; function desca
阅读全文
摘要：1. 事件穿透属性：pointer-events: none // auto默认值、none：不捕捉target事件（实现穿透） 用途：当需要使用透明遮罩并且允许点击遮罩下方元素时，或需要使用背景容器展示样式时 2. 背景图不跟随滚动条： background-image: url('xxx');
阅读全文
摘要：nginx多页面路由配置，进入 nginx/conf/nginx.conf： http { ...... server { listen 80; server_name localhost; location / { root C:\xxxx\xxxx\dist; try_files $uri $u
阅读全文
摘要：一、遍历的方式性能更加，递归的方式代码利于阅读、简短，性能略差 二、裴波那契数定义： · 位置0的裴波那契数为0 · 1和2的裴波那契数为1 · n（n > 2）裴波那契数为 (n-1)的裴波那契数 + (n-2)裴波那契数 三、遍历的方式 fibonacciIterative (n) { if (
阅读全文
摘要：为什么要配置多页面开发？ · 由于单页面应用不利于SEO，对于某些资讯类网站不够友好，而多页面则能够更优的解决此问题。 · 传统的多页面开发模式（如java的jsp等） 前后端耦合性大，开发效率低，代码复用率小。 · 本文介绍通过目前流行的如React、Vue等前端框架结合webpack来进行多页面
阅读全文
浙公网安备 33010602011771号