03 2022 档案
摘要：
题目描述 给定一个整数数组 nums 和一个整数目标值 target，请你在该数组中找出 和为目标值 target 的那 两个 整数，并返回它们的数组下标。 你可以假设每种输入只会对应一个答案。但是，数组中同一个元素在答案里不能重复出现。 你可以按任意顺序返回答案。 示例 1： 输入：nums =
阅读全文
题目描述 给定一个整数数组 nums 和一个整数目标值 target，请你在该数组中找出 和为目标值 target 的那 两个 整数，并返回它们的数组下标。 你可以假设每种输入只会对应一个答案。但是，数组中同一个元素在答案里不能重复出现。 你可以按任意顺序返回答案。 示例 1： 输入：nums =
阅读全文
摘要：
Vue3 采用了 Proxy 做数据的拦截，因为 Proxy 是懒执行的，所以没有像 Vue2 一样上来需要递归的去劫持属性的 get set, 这样带来的好处就是提升了更好的性能 Vue3 在编译阶段做的优化，由于模版语法带来的灵活性的限制，所以 vue3 在模版编译方面采用了 只编译动态属性和动
阅读全文
Vue3 采用了 Proxy 做数据的拦截，因为 Proxy 是懒执行的，所以没有像 Vue2 一样上来需要递归的去劫持属性的 get set, 这样带来的好处就是提升了更好的性能 Vue3 在编译阶段做的优化，由于模版语法带来的灵活性的限制，所以 vue3 在模版编译方面采用了 只编译动态属性和动
阅读全文
摘要：
vue.nextTick()方法的使用详解: https://blog.csdn.net/zhouzuoluo/article/details/84752280 vue源码解析：nextTick: https://segmentfault.com/a/1190000020049857 原理 Vue是
阅读全文
vue.nextTick()方法的使用详解: https://blog.csdn.net/zhouzuoluo/article/details/84752280 vue源码解析：nextTick: https://segmentfault.com/a/1190000020049857 原理 Vue是
阅读全文
摘要：
S继承的原理、方式和应用: https://www.cnblogs.com/yunshangwuyou/p/11968539.html //寄生组合式继承（寄生式+原型:通过借用函数来继承属性,通过原型链的混成形式来继承方法） function inheritObject(o) { //声明一个过渡
阅读全文
S继承的原理、方式和应用: https://www.cnblogs.com/yunshangwuyou/p/11968539.html //寄生组合式继承（寄生式+原型:通过借用函数来继承属性,通过原型链的混成形式来继承方法） function inheritObject(o) { //声明一个过渡
阅读全文
摘要：
组合继承实现原理 核心:结合了原型链继承和构造函数继承两种模式的优点，传参和复用，在子类构造函数中执行父类构造函数，在子类原型上实例化父类 缺点 内存浪费 子类原型上有一份多余的父类实例属性，因为父类构造函数被调用了两次，生成了两份，而子类实例上的那一份屏蔽了子类原型上的 function Pare
阅读全文
组合继承实现原理 核心:结合了原型链继承和构造函数继承两种模式的优点，传参和复用，在子类构造函数中执行父类构造函数，在子类原型上实例化父类 缺点 内存浪费 子类原型上有一份多余的父类实例属性，因为父类构造函数被调用了两次，生成了两份，而子类实例上的那一份屏蔽了子类原型上的 function Pare
阅读全文
摘要：
问题：假设集合 A={a, b}，集合 B={0, 1, 2}， 则两个集合的笛卡尔积为{(a, 0), (a, 1), (a, 2), (b, 0), (b, 1), (b, 2)}。 求当 A={a, b, ..., n}, B={0, 1, 2, ..., n}时的笛卡尔积. 复习reduce
阅读全文
问题：假设集合 A={a, b}，集合 B={0, 1, 2}， 则两个集合的笛卡尔积为{(a, 0), (a, 1), (a, 2), (b, 0), (b, 1), (b, 2)}。 求当 A={a, b, ..., n}, B={0, 1, 2, ..., n}时的笛卡尔积. 复习reduce
阅读全文
摘要：
复习 call 的基本实现原理 call 能改变函数的 this call 的第一个参数是 this, 后面的参数都是无限的 const obj = { name: "jack", }; function getB(x, y) { console.log(this, x, y); } Functio
阅读全文
复习 call 的基本实现原理 call 能改变函数的 this call 的第一个参数是 this, 后面的参数都是无限的 const obj = { name: "jack", }; function getB(x, y) { console.log(this, x, y); } Functio
阅读全文
摘要：
问题：有一个数组 arr = [a1, a2, a3, b1, b2, b3, c1, c2, c3...], 通过算法将数组进行拆分, 转化为如下格式的数组 [a1, b1,c1], [a2, b2, c2], [a3, b3, c3]并实现通用公式. 总体思路：将数组的 n-1 下标下的内容，挑
阅读全文
问题：有一个数组 arr = [a1, a2, a3, b1, b2, b3, c1, c2, c3...], 通过算法将数组进行拆分, 转化为如下格式的数组 [a1, b1,c1], [a2, b2, c2], [a3, b3, c3]并实现通用公式. 总体思路：将数组的 n-1 下标下的内容，挑
阅读全文
摘要：
https://juejin.cn/post/6850418115042836487 https://blog.csdn.net/double_sweet1/article/details/122786636?utm_medium=distribute.pc_aggpage_search_resul
阅读全文
https://juejin.cn/post/6850418115042836487 https://blog.csdn.net/double_sweet1/article/details/122786636?utm_medium=distribute.pc_aggpage_search_resul
阅读全文
摘要：
父子组件挂载渲染过程 子组件更新过程： 影响到父组件： 父beforeUpdate → 子beforeUpdate->子updated → 父updated 不影响父组件： 子beforeUpdate → 子updated 父组件更新过程： 影响到子组件： 父beforeUpdate → 子befo
阅读全文
父子组件挂载渲染过程 子组件更新过程： 影响到父组件： 父beforeUpdate → 子beforeUpdate->子updated → 父updated 不影响父组件： 子beforeUpdate → 子updated 父组件更新过程： 影响到子组件： 父beforeUpdate → 子befo
阅读全文
摘要：
最重要的就是最后一步:如果走一步就需要 f(n-1)种,如果走两步就需要 f(n-2)种 走一个台阶:1种-f(1) 走两个台阶:2种-f(2) 三个台阶: 先走一个台阶f1和最后一次走两个台阶:f(1) 先走二个台阶f2和最后一次走一个台阶:f(2) f(3)=f(1)+f(2) 四个台阶: 先走
阅读全文
最重要的就是最后一步:如果走一步就需要 f(n-1)种,如果走两步就需要 f(n-2)种 走一个台阶:1种-f(1) 走两个台阶:2种-f(2) 三个台阶: 先走一个台阶f1和最后一次走两个台阶:f(1) 先走二个台阶f2和最后一次走一个台阶:f(2) f(3)=f(1)+f(2) 四个台阶: 先走
阅读全文
摘要：
跨域出现的原因，是因为浏览器的同源策略导致，即 协议 域名 端口号 不一致， 如何解决 代理服务器 nginx 使用代理服务，帮助我们请求接口，在响应回来给到浏览器 jsonp 利用 script 标签，天然跨域特性 ，仅支持 get CORS 服务器端开启 CORS proxy 代理 等
阅读全文
跨域出现的原因，是因为浏览器的同源策略导致，即 协议 域名 端口号 不一致， 如何解决 代理服务器 nginx 使用代理服务，帮助我们请求接口，在响应回来给到浏览器 jsonp 利用 script 标签，天然跨域特性 ，仅支持 get CORS 服务器端开启 CORS proxy 代理 等
阅读全文
摘要：
实现原理：vue-router 的原理就是更新视图而不重新请求页面 vue-router 可以通过 mode 参数设置为三种模式：hash 模式、history 模式、abstract 模式。 hash 模式。默认是 hash 模式，基于浏览器 history api，使用 window.addEv
阅读全文
实现原理：vue-router 的原理就是更新视图而不重新请求页面 vue-router 可以通过 mode 参数设置为三种模式：hash 模式、history 模式、abstract 模式。 hash 模式。默认是 hash 模式，基于浏览器 history api，使用 window.addEv
阅读全文
摘要：
如何确定首屏加载时间？ 首屏时间的定义： 浏览器显示第一屏页面所消耗的时间，以 800x600 像素尺寸为标准，从开始加载到浏览器页面显示高度达到 600 像素且此区域有内容显示的时间。 也就是说用户能够看到区域内所有元素加载完的时间。 一个页面的“总加载时间”要比“首屏时间”长，但对于最终用户体验
阅读全文
如何确定首屏加载时间？ 首屏时间的定义： 浏览器显示第一屏页面所消耗的时间，以 800x600 像素尺寸为标准，从开始加载到浏览器页面显示高度达到 600 像素且此区域有内容显示的时间。 也就是说用户能够看到区域内所有元素加载完的时间。 一个页面的“总加载时间”要比“首屏时间”长，但对于最终用户体验
阅读全文
摘要：
方式一：padding + 百分比 <style> html, body { margin: 0; padding: 0; } .outer { width: 20%; height: 0; padding-bottom: 20%; background-color: red; } </style>
阅读全文
方式一：padding + 百分比 <style> html, body { margin: 0; padding: 0; } .outer { width: 20%; height: 0; padding-bottom: 20%; background-color: red; } </style>
阅读全文
摘要：
核心:实例化父类函数之后，将其拷贝到子类的原型prototype上。继承父类之后,子类可以使用父类的实例属性以及父类的原型属性 优点:从已有的对象衍生新的对象，不需要创建自定义类型 缺点1，新实例向父类构造函数传参，不符合面向对象编程的规则 function Person(name, age, jo
阅读全文
核心:实例化父类函数之后，将其拷贝到子类的原型prototype上。继承父类之后,子类可以使用父类的实例属性以及父类的原型属性 优点:从已有的对象衍生新的对象，不需要创建自定义类型 缺点1，新实例向父类构造函数传参，不符合面向对象编程的规则 function Person(name, age, jo
阅读全文
摘要：
引言 前边说了三列布局的三种方法，博主经过了解发现，原来还有其他的办法，今天我们就来聊一聊其他的方法 方法一：calc实现三列布局 css .outer{ height: 300px; } .left{ float: left; width: 100px; height: 300px; backgr
阅读全文
引言 前边说了三列布局的三种方法，博主经过了解发现，原来还有其他的办法，今天我们就来聊一聊其他的方法 方法一：calc实现三列布局 css .outer{ height: 300px; } .left{ float: left; width: 100px; height: 300px; backgr
阅读全文
摘要：
// 实现1物理像素边框 .border-1px-inenr(@color) { &::after { content: ''; position: absolute; left: 0; width: 100%; height: 1px; background-color: @color; @med
阅读全文
// 实现1物理像素边框 .border-1px-inenr(@color) { &::after { content: ''; position: absolute; left: 0; width: 100%; height: 1px; background-color: @color; @med
阅读全文
摘要：
小程序宿主环境 1. 小程序宿主环境包含的内容 通信机制 运行机制 组件 api 1.通信机制 小程序中的通信的主体是渲染层 和逻辑层，其中 WXML 模版和 WXSS 样式工作在渲染层 js 脚本工作在逻辑层 2. 运行机制 小程序启动的过程 把小程序的代码包下载到本地 解析 app.json 全
阅读全文
小程序宿主环境 1. 小程序宿主环境包含的内容 通信机制 运行机制 组件 api 1.通信机制 小程序中的通信的主体是渲染层 和逻辑层，其中 WXML 模版和 WXSS 样式工作在渲染层 js 脚本工作在逻辑层 2. 运行机制 小程序启动的过程 把小程序的代码包下载到本地 解析 app.json 全
阅读全文
摘要：
浏览器层合成与页面渲染优化: https://juejin.cn/post/6844903966573068301 3D transforms：translate3d、translateZ 等 video、canvas、iframe 等元素 通过 Element.animate() 实现的 opac
阅读全文
浏览器层合成与页面渲染优化: https://juejin.cn/post/6844903966573068301 3D transforms：translate3d、translateZ 等 video、canvas、iframe 等元素 通过 Element.animate() 实现的 opac
阅读全文
摘要：
什么是 WXML 模版 1. 什么是 WXML WXML 是小程序框架设计的一套标签语言，用来构建小程序页面的结构，其作用类似网页开发中的 HTML 2. WXML 和 HTML 的区别 标签名不相同 HTML（div,span,img,a） WXML (wiew, text, image, nav
阅读全文
什么是 WXML 模版 1. 什么是 WXML WXML 是小程序框架设计的一套标签语言，用来构建小程序页面的结构，其作用类似网页开发中的 HTML 2. WXML 和 HTML 的区别 标签名不相同 HTML（div,span,img,a） WXML (wiew, text, image, nav
阅读全文
摘要：
小程序和普通网页开发等区别? 1.运行环境不同 网页运行在浏览器环境中 小程序运行在微信环境中 2. API 不同 由于运行环境等不同，所以小程序中，无法调用 DOM 和 BOM 的 api 但是小程序中可以调用微信提供的各种 API，例如： 地理定位 扫码 支付 3. 开发模式不同 网页开发模式：
阅读全文
小程序和普通网页开发等区别? 1.运行环境不同 网页运行在浏览器环境中 小程序运行在微信环境中 2. API 不同 由于运行环境等不同，所以小程序中，无法调用 DOM 和 BOM 的 api 但是小程序中可以调用微信提供的各种 API，例如： 地理定位 扫码 支付 3. 开发模式不同 网页开发模式：
阅读全文
摘要：
1. 什么是 srr 在讲服务度渲染之前，我们先回顾一下页面的渲染流程： 浏览器通过请求得到一个HTML文本 渲染进程解析HTML文本，构建DOM树 解析HTML的同时，如果遇到内联样式或者样式脚本，则下载并构建样式规则（stytle rules），若遇到JavaScript脚本，则会下载执行脚本。
阅读全文
1. 什么是 srr 在讲服务度渲染之前，我们先回顾一下页面的渲染流程： 浏览器通过请求得到一个HTML文本 渲染进程解析HTML文本，构建DOM树 解析HTML的同时，如果遇到内联样式或者样式脚本，则下载并构建样式规则（stytle rules），若遇到JavaScript脚本，则会下载执行脚本。
阅读全文
摘要：
1、虚拟DOM的key的作用： key是虚拟DOM对象的标识，当状态中的数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】， 随后Vue进【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下： 2、对比规则： （1）旧虚拟DOM中找到了与新虚拟DOM相同的key： 若虚拟DOM中内容
阅读全文
1、虚拟DOM的key的作用： key是虚拟DOM对象的标识，当状态中的数据发生变化时，Vue会根据【新数据】生成【新的虚拟DOM】， 随后Vue进【新虚拟DOM】与【旧虚拟DOM】的差异比较，比较规则如下： 2、对比规则： （1）旧虚拟DOM中找到了与新虚拟DOM相同的key： 若虚拟DOM中内容
阅读全文
摘要：
Tree-Shaking 实现原理:https://zhuanlan.zhihu.com/p/403901557#:~:text=Tree-Shaking%20%E6%98%AF%E4%B8%80%E7%A7%8D%E5%9F%BA%E4%BA%8E%20ES%20Module%20%E8%A7%8
阅读全文
Tree-Shaking 实现原理:https://zhuanlan.zhihu.com/p/403901557#:~:text=Tree-Shaking%20%E6%98%AF%E4%B8%80%E7%A7%8D%E5%9F%BA%E4%BA%8E%20ES%20Module%20%E8%A7%8
阅读全文
摘要：
javascript 历史的浮点计算精度问题 加法 plus function plus(arg1, arg2) { let r1, r2, m; try { r1 = arg1.toString().split(".")[1].length; } catch (e) { r1 = 0; } try
阅读全文
javascript 历史的浮点计算精度问题 加法 plus function plus(arg1, arg2) { let r1, r2, m; try { r1 = arg1.toString().split(".")[1].length; } catch (e) { r1 = 0; } try
阅读全文
摘要：
Array.form [...] Array.prototype.slice.call Array.prototype.map.call
阅读全文
Array.form [...] Array.prototype.slice.call Array.prototype.map.call
阅读全文
摘要：
什么是BFC？看这一篇就够了 https://blog.csdn.net/sinat_36422236/article/details/88763187 简单来说 BFC (块级格式化上下文) 就是指定页面的盒子采用何种策略模式渲染盒子中的内容， 下列方式会创建块格式化上下文： 根元素或包含根元素的
阅读全文
什么是BFC？看这一篇就够了 https://blog.csdn.net/sinat_36422236/article/details/88763187 简单来说 BFC (块级格式化上下文) 就是指定页面的盒子采用何种策略模式渲染盒子中的内容， 下列方式会创建块格式化上下文： 根元素或包含根元素的
阅读全文
摘要：
单例模式 单例模式，是一种常见的软件设计模式。在它的核心结构中只包含一个被称为单例的特殊类。通过单例模式，可以保证系统中采用该模式的类只有一个实例。即：一个类只有一个对象实例。 因此，在实现单例模式的要点是创建一个类，而这个类无论怎么 new 只能取得同一个对象。 代码 class Singleto
阅读全文
单例模式 单例模式，是一种常见的软件设计模式。在它的核心结构中只包含一个被称为单例的特殊类。通过单例模式，可以保证系统中采用该模式的类只有一个实例。即：一个类只有一个对象实例。 因此，在实现单例模式的要点是创建一个类，而这个类无论怎么 new 只能取得同一个对象。 代码 class Singleto
阅读全文
摘要：
回调函数 回调函数是作为参数传给另一个函数的函数，这个函数会在另一个函数执行完成后执行 任务队列 任务队列是一个事件的队列，IO设备完成一项任务后，就在队列中添加一个事件，表示相关的异步任务可以进入执行栈中了 同步任务：主线程上排队执行的任务，前一个任务执行完成后才能执行下一个任务 异步任务：不进入
阅读全文
回调函数 回调函数是作为参数传给另一个函数的函数，这个函数会在另一个函数执行完成后执行 任务队列 任务队列是一个事件的队列，IO设备完成一项任务后，就在队列中添加一个事件，表示相关的异步任务可以进入执行栈中了 同步任务：主线程上排队执行的任务，前一个任务执行完成后才能执行下一个任务 异步任务：不进入
阅读全文
摘要：
一、页面内容优化 减少http请求次数 减少DNS查询次数 避免页面跳转 缓存ajax 延迟加载（一般用在图片多的页面中，滚动时才加载） 预加载 减少DOM元素数量 减少iframe数量 避免404 关键资源个数越多，首次页面加载时间就会越长 关键资源的大小，内容越小，下载时间越短 优化白屏：使用S
阅读全文
一、页面内容优化 减少http请求次数 减少DNS查询次数 避免页面跳转 缓存ajax 延迟加载（一般用在图片多的页面中，滚动时才加载） 预加载 减少DOM元素数量 减少iframe数量 避免404 关键资源个数越多，首次页面加载时间就会越长 关键资源的大小，内容越小，下载时间越短 优化白屏：使用S
阅读全文
摘要：
封装 封装是面向对象的三个基本特征之一，将现实世界的事物抽象成计算机领域中的对象, 对象同时具有属性和行为（方法），这种抽象就是封装. 重要特性 数据隐藏。对象只对外提供与其它对象交互的必要接口,而将自身的某些属性和实现细节对外隐藏, 通过这种方式，对象对内部数据提供了不同级别的保护， 以防止程序中
阅读全文
封装 封装是面向对象的三个基本特征之一，将现实世界的事物抽象成计算机领域中的对象, 对象同时具有属性和行为（方法），这种抽象就是封装. 重要特性 数据隐藏。对象只对外提供与其它对象交互的必要接口,而将自身的某些属性和实现细节对外隐藏, 通过这种方式，对象对内部数据提供了不同级别的保护， 以防止程序中
阅读全文
摘要：
如果 使用的是 spa 的渲染模式：你可以使用 create 发送请求，这是在请求数据量不大的情况下，使用，如果不能保证这个数据，不会出现问题，建议在 mounted 中发送 如果 使用的是 ssr 的渲染模式；beforeCreate 和 created 会在服务端渲染的时候被调用，在 befor
阅读全文
如果 使用的是 spa 的渲染模式：你可以使用 create 发送请求，这是在请求数据量不大的情况下，使用，如果不能保证这个数据，不会出现问题，建议在 mounted 中发送 如果 使用的是 ssr 的渲染模式；beforeCreate 和 created 会在服务端渲染的时候被调用，在 befor
阅读全文
摘要：
const args = require('minimist')(process.argv.slice(2)) console.log(process.argv.slice(2)) console.log(args) // lijiaming jm-npm-package % node npm/np
阅读全文
const args = require('minimist')(process.argv.slice(2)) console.log(process.argv.slice(2)) console.log(args) // lijiaming jm-npm-package % node npm/np
阅读全文
摘要：
基本用法 文档链接: http://mikemcl.github.io/big.js/legacy/v6.0.x.html#dp yarn add big.js @types/big.js import { plus, minus, times, div } from "big.js"; // 加
阅读全文
基本用法 文档链接: http://mikemcl.github.io/big.js/legacy/v6.0.x.html#dp yarn add big.js @types/big.js import { plus, minus, times, div } from "big.js"; // 加
阅读全文
摘要：
vue2: props $emit vuex $attrs 和 $listeners provide 和 inject parent 和 children $refs $root .sync slot 全局事件总线 vue3: props $emit vuex pinia provide 和 inj
阅读全文
vue2: props $emit vuex $attrs 和 $listeners provide 和 inject parent 和 children $refs $root .sync slot 全局事件总线 vue3: props $emit vuex pinia provide 和 inj
阅读全文
摘要：
由于 JavaScript 的限制，Vue2 不能检测到以下数组的变动： 当你利用索引直接设置一个数组项时，例如： vm.items[indexOfItem] = newValue 当你修改数组的长度时，例如： vm.items.length = newLength 为了解决第一个问题，Vue 提供
阅读全文
由于 JavaScript 的限制，Vue2 不能检测到以下数组的变动： 当你利用索引直接设置一个数组项时，例如： vm.items[indexOfItem] = newValue 当你修改数组的长度时，例如： vm.items.length = newLength 为了解决第一个问题，Vue 提供
阅读全文
摘要：
一、CDN 是什么？ http 缓存是浏览器端缓存，cdn 是服务器端缓存。 举个例子来说明 cdn 的作用：cdn 就是代理。厂家给商家发货，你从商家买货，商家就是 cdn，很方便。 二、CDN 怎么缓存？ 和 Http 类似，客户端请求数据时，先从本地缓存查找，如果被请求数据没有过期，拿过来用，
阅读全文
一、CDN 是什么？ http 缓存是浏览器端缓存，cdn 是服务器端缓存。 举个例子来说明 cdn 的作用：cdn 就是代理。厂家给商家发货，你从商家买货，商家就是 cdn，很方便。 二、CDN 怎么缓存？ 和 Http 类似，客户端请求数据时，先从本地缓存查找，如果被请求数据没有过期，拿过来用，
阅读全文
摘要：
主要就是两个函数，在Function的原型上加上before与after，作用就是字面的意思，在函数的前面或后面执行，相当于无侵入把一个函数插入到另一个函数的前面或后面，应用得当可以很好的实现代码的解耦，js中的代码实现如下： // function dome() { // var a = 12 +
阅读全文
主要就是两个函数，在Function的原型上加上before与after，作用就是字面的意思，在函数的前面或后面执行，相当于无侵入把一个函数插入到另一个函数的前面或后面，应用得当可以很好的实现代码的解耦，js中的代码实现如下： // function dome() { // var a = 12 +
阅读全文
摘要：
更可靠：TS引入类型定义（进行类型检查）和编译器，可以避免JavaScript大多数runtime错误，更可靠，易维护； 更清晰：TS中显式类型声明可以提升代码可读性，代码校验可以全部交给编译器负责； 更广泛：TypeScript是JavaScript的超集，可以在TypeScript代码中混合使用
阅读全文
更可靠：TS引入类型定义（进行类型检查）和编译器，可以避免JavaScript大多数runtime错误，更可靠，易维护； 更清晰：TS中显式类型声明可以提升代码可读性，代码校验可以全部交给编译器负责； 更广泛：TypeScript是JavaScript的超集，可以在TypeScript代码中混合使用
阅读全文
摘要：
webpack 插件 是一个 函数，这个函数的原型上必须携带一个 apply 的方法，供给 webpack 使用，webpack 会调用 apply 并传入一个 compiler 关注核心：Compiler和Compilation 在开发Plugin时最常用的两个对象是Compiler和Compil
阅读全文
webpack 插件 是一个 函数，这个函数的原型上必须携带一个 apply 的方法，供给 webpack 使用，webpack 会调用 apply 并传入一个 compiler 关注核心：Compiler和Compilation 在开发Plugin时最常用的两个对象是Compiler和Compil
阅读全文
摘要：
1、数据库模型 mongodb-非关系型; mysql-关系型 2、存储方式 mongodb-以类JSON的文档的格式存储; mysql-不同引擎有不同的存储方式; 3、查询语句 mongodb-MongoDB查询方式(类似JavaScript的函数); mysql-SQL语句; 4、数据处理方式
阅读全文
1、数据库模型 mongodb-非关系型; mysql-关系型 2、存储方式 mongodb-以类JSON的文档的格式存储; mysql-不同引擎有不同的存储方式; 3、查询语句 mongodb-MongoDB查询方式(类似JavaScript的函数); mysql-SQL语句; 4、数据处理方式
阅读全文
摘要：
为什么根实例的data是一个对象？ new Vue()中只有一个data属性，共用该data。 为什么组件中的data必须是一个函数？ 因为如果data是一个对象，对象是引用类型，那复用的所有组件实例都会共享这些数据，就会导致修改一个组件实例上的数据，其他复用该组件的实例上对应的数据也会被修改。 如
阅读全文
为什么根实例的data是一个对象？ new Vue()中只有一个data属性，共用该data。 为什么组件中的data必须是一个函数？ 因为如果data是一个对象，对象是引用类型，那复用的所有组件实例都会共享这些数据，就会导致修改一个组件实例上的数据，其他复用该组件的实例上对应的数据也会被修改。 如
阅读全文
摘要：
从原型入手，Array.prototype.isPrototypeOf(obj); 也可以从构造函数入手，obj instanceof Array Object.prototype.toString.call(obj); Array.isArray()方法
阅读全文
从原型入手，Array.prototype.isPrototypeOf(obj); 也可以从构造函数入手，obj instanceof Array Object.prototype.toString.call(obj); Array.isArray()方法
阅读全文
摘要：
1. arr.filter(Boolean) 的结果是 [0, 1, 2, 3, -1, null, "", 3, 5, 7].filter(Boolean); 等同与 [0, 1, 2, 3, -1, null, "", 3, 5, 7].filter((item) => Boolean(item
阅读全文
1. arr.filter(Boolean) 的结果是 [0, 1, 2, 3, -1, null, "", 3, 5, 7].filter(Boolean); 等同与 [0, 1, 2, 3, -1, null, "", 3, 5, 7].filter((item) => Boolean(item
阅读全文
摘要：
1）代码层面的优化 v-if 和 v-show 区分使用场景 computed 和 watch 区分使用场景 v-for 遍历必须为 item 添加 key，且避免同时使用 v-if 长列表性能优化 事件的销毁 图片资源懒加载 路由懒加载 第三方插件的按需引入 优化无限列表性能 服务端渲染 SSR
阅读全文
1）代码层面的优化 v-if 和 v-show 区分使用场景 computed 和 watch 区分使用场景 v-for 遍历必须为 item 添加 key，且避免同时使用 v-if 长列表性能优化 事件的销毁 图片资源懒加载 路由懒加载 第三方插件的按需引入 优化无限列表性能 服务端渲染 SSR
阅读全文
摘要：
1）什么是中间层 就是前端—请求—> nodejs 请求 >后端 响应—>nodejs–数据处理—响应 >前端。这么一个流程，这个流程的好处就是当业务逻辑过多，或者业务需求在不断变更的时候，前端不需要过多当去改变业务逻辑，与后端低耦合。前端即显示，渲染。后端获取和存储数据。中间层处理数据结构，返回给
阅读全文
1）什么是中间层 就是前端—请求—> nodejs 请求 >后端 响应—>nodejs–数据处理—响应 >前端。这么一个流程，这个流程的好处就是当业务逻辑过多，或者业务需求在不断变更的时候，前端不需要过多当去改变业务逻辑，与后端低耦合。前端即显示，渲染。后端获取和存储数据。中间层处理数据结构，返回给
阅读全文
摘要：
需求讲解 画一个矩形，拖拽矩形的4个角可以将矩形缩放（缩小到顶点时，顶点需要固定），在矩形上按住拖动，可以移动该矩形的位置 <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" conten
阅读全文
需求讲解 画一个矩形，拖拽矩形的4个角可以将矩形缩放（缩小到顶点时，顶点需要固定），在矩形上按住拖动，可以移动该矩形的位置 <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" conten
阅读全文
摘要：
https://blog.csdn.net/weixin_33816300/article/details/91466271 1. 输出拷贝 vs 输出引用 // a.js let a = 1; let b = { num: 1 } setTimeout(() => { a = 2; b = { n
阅读全文
https://blog.csdn.net/weixin_33816300/article/details/91466271 1. 输出拷贝 vs 输出引用 // a.js let a = 1; let b = { num: 1 } setTimeout(() => { a = 2; b = { n
阅读全文
摘要：
Less是CSS预处理语言，扩展了CSS语言，增加了变量、Mixin、函数等特性，Less-loader的作用就是将less代码转译为浏览器可以识别的CSS代码。 // demo.less @base: #f938ab; .box-shadow(@style, @c) when (iscolor(@
阅读全文
Less是CSS预处理语言，扩展了CSS语言，增加了变量、Mixin、函数等特性，Less-loader的作用就是将less代码转译为浏览器可以识别的CSS代码。 // demo.less @base: #f938ab; .box-shadow(@style, @c) when (iscolor(@
阅读全文
摘要：
https://blog.csdn.net/MFWSCQ/article/details/108703828 Promise 对象是 JavaScript 的异步操作解决方案，为异步操作提供统一的接口。它起到代理作用（proxy），充当异步操作与回调函数之间的中介，使得异步操作具备同步操作的接口。P
阅读全文
https://blog.csdn.net/MFWSCQ/article/details/108703828 Promise 对象是 JavaScript 的异步操作解决方案，为异步操作提供统一的接口。它起到代理作用（proxy），充当异步操作与回调函数之间的中介，使得异步操作具备同步操作的接口。P
阅读全文
摘要：
1.点击按钮后创建一个Event实例 2.然后把事件放到事件队列中，让它等候处理 3.Event循坏线程处理这个事件 4.沿着DOM路径找到触发事件的元素 5.如果这个元素上有处理这个事件的默认行为，并且要在DOM事件阶段周期之前执行，就执行它的默认行为 6.捕获阶段 7.目标阶段 8.冒泡阶段 9
阅读全文
1.点击按钮后创建一个Event实例 2.然后把事件放到事件队列中，让它等候处理 3.Event循坏线程处理这个事件 4.沿着DOM路径找到触发事件的元素 5.如果这个元素上有处理这个事件的默认行为，并且要在DOM事件阶段周期之前执行，就执行它的默认行为 6.捕获阶段 7.目标阶段 8.冒泡阶段 9
阅读全文
摘要：
function fn(a, c) { console.log(a) var a = 123; console.log(a) console.log(c) function a() {} if(false) { var d = 678; } console.log(d) console.log(b)
阅读全文
function fn(a, c) { console.log(a) var a = 123; console.log(a) console.log(c) function a() {} if(false) { var d = 678; } console.log(d) console.log(b)
阅读全文
摘要：
created阶段的ajax请求与mounted请求的区别：前者页面视图未出现，如果请求信息过多，页面会长时间处于白屏状态 created 里面请求即可，请求响应时间长，应该由你的业务代码去处理这种异常， Vue 的框架层面不知道你的异步请求究竟什么时候结束， 不可能等待你的请求回来再继续渲染。 还
阅读全文
created阶段的ajax请求与mounted请求的区别：前者页面视图未出现，如果请求信息过多，页面会长时间处于白屏状态 created 里面请求即可，请求响应时间长，应该由你的业务代码去处理这种异常， Vue 的框架层面不知道你的异步请求究竟什么时候结束， 不可能等待你的请求回来再继续渲染。 还
阅读全文
摘要：
一、代码执行的错误捕获 1.try…………catch • 能捕获到代码执行的错误 • 捕获不到语法的错误 • 无法处理异步中的错误 • 使用try……catch包裹，影响代码可读性 2.window.onerror • 无论是异步还是非异步错误，onerror都能捕获到运行时错误 • onerrer
阅读全文
一、代码执行的错误捕获 1.try…………catch • 能捕获到代码执行的错误 • 捕获不到语法的错误 • 无法处理异步中的错误 • 使用try……catch包裹，影响代码可读性 2.window.onerror • 无论是异步还是非异步错误，onerror都能捕获到运行时错误 • onerrer
阅读全文
摘要：
转发链接： https://juejin.cn/post/6844903892547797006#comment
阅读全文
转发链接： https://juejin.cn/post/6844903892547797006#comment
阅读全文
摘要：
css样式表主要是样式属性的描述，写起来相当的费事，为此，CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。通俗的说，CSS预处理器用一种专门的编程语言，进行Web页面样式设计，然后
阅读全文
css样式表主要是样式属性的描述，写起来相当的费事，为此，CSS预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为CSS增加了一些编程的特性，将CSS作为目标生成文件，然后开发者就只要使用这种语言进行编码工作。通俗的说，CSS预处理器用一种专门的编程语言，进行Web页面样式设计，然后
阅读全文
摘要：
Promise 构造函数是同步的，而then 方法是异步的 如何证明？ const p = new Promise((res, rej) => { console.log('11111') // 1 res('bbbb') }) console.log('899090') // 2 p.then(r
阅读全文
Promise 构造函数是同步的，而then 方法是异步的 如何证明？ const p = new Promise((res, rej) => { console.log('11111') // 1 res('bbbb') }) console.log('899090') // 2 p.then(r
阅读全文
摘要：
盒子模型的概念： 在html中，把每一个元素都当做成一个盒子，拥有盒子的平面外形和空间 盒模型由内容（content）+内边距（padding）+边框（border）+外边距（margin）4部分构成 内容区域：你书写的内容或者子元素能够显示的区域 内边距：撑开内容与边框的距离 边框：元素的边框 外
阅读全文
盒子模型的概念： 在html中，把每一个元素都当做成一个盒子，拥有盒子的平面外形和空间 盒模型由内容（content）+内边距（padding）+边框（border）+外边距（margin）4部分构成 内容区域：你书写的内容或者子元素能够显示的区域 内边距：撑开内容与边框的距离 边框：元素的边框 外
阅读全文
摘要：
Vue源码解析，keep-alive是如何实现缓存的？: https://blog.csdn.net/xiaolinlife/article/details/108331068 keep-alive 组件是抽象组件，在对应父子关系时会跳过抽象组件，它只对包裹的子组件做处理，主要是根据LRU策略缓存组
阅读全文
Vue源码解析，keep-alive是如何实现缓存的？: https://blog.csdn.net/xiaolinlife/article/details/108331068 keep-alive 组件是抽象组件，在对应父子关系时会跳过抽象组件，它只对包裹的子组件做处理，主要是根据LRU策略缓存组
阅读全文
摘要：
https://learnku.com/articles/50523 静态作用域又叫做词法作用域，采用词法作用域的变量叫词法变量。词法变量有一个在编译时静态确定的作用域。词法变量的作用域可以是一个函数或一段代码，该变量在这段代码区域内可见（visibility）；在这段区域以外该变量不可见（或无法访
阅读全文
https://learnku.com/articles/50523 静态作用域又叫做词法作用域，采用词法作用域的变量叫词法变量。词法变量有一个在编译时静态确定的作用域。词法变量的作用域可以是一个函数或一段代码，该变量在这段代码区域内可见（visibility）；在这段区域以外该变量不可见（或无法访
阅读全文
摘要：
方案一：百分比布局 利用对属性设置百分比来适配不同屏幕，注意这里的百分比是相对于父元素 方案二：使用媒体查询 (CSS3 @media 查询) 方案三.rem 响应式布局 方案四.vw 响应式布局 方案五.flex 弹性盒子布局
阅读全文
方案一：百分比布局 利用对属性设置百分比来适配不同屏幕，注意这里的百分比是相对于父元素 方案二：使用媒体查询 (CSS3 @media 查询) 方案三.rem 响应式布局 方案四.vw 响应式布局 方案五.flex 弹性盒子布局
阅读全文
摘要：
转载：https://zhuanlan.zhihu.com/p/389009882 HTML方向 调用系统功能 使用<a>能快速调用移动设备的电话/短信/邮件三大通讯功能，使用<input>能快速调用移动设备的的图库/文件。 这些功能方便了页面与系统的交互，关键在于调用格式一定要准确，否则会被移动端
阅读全文
转载：https://zhuanlan.zhihu.com/p/389009882 HTML方向 调用系统功能 使用<a>能快速调用移动设备的电话/短信/邮件三大通讯功能，使用<input>能快速调用移动设备的的图库/文件。 这些功能方便了页面与系统的交互，关键在于调用格式一定要准确，否则会被移动端
阅读全文
摘要：
<html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width
阅读全文
<html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width
阅读全文
摘要：
一个 HTTP 报文通常报告两个部分：头部(head)和主体(body)，其中 body 可以为空，常见的 GET 请求就是这种情况。但当 body 不为空时，接收的一端需要知道它是什么类型的数据，采用什么编码，这时候就需要在 Content-Type 来指明 body 的人 MIME 类型。是否需
阅读全文
一个 HTTP 报文通常报告两个部分：头部(head)和主体(body)，其中 body 可以为空，常见的 GET 请求就是这种情况。但当 body 不为空时，接收的一端需要知道它是什么类型的数据，采用什么编码，这时候就需要在 Content-Type 来指明 body 的人 MIME 类型。是否需
阅读全文
摘要：
/** * 实现一个 Promise.allSettled 方法 * @param {*} list * @returns [ { status: 'fulfilled'| 'rejected', value(fulfilled) | reason(rejected) } ] */ function
阅读全文
/** * 实现一个 Promise.allSettled 方法 * @param {*} list * @returns [ { status: 'fulfilled'| 'rejected', value(fulfilled) | reason(rejected) } ] */ function
阅读全文
摘要：
function jmPromiseAll(list) { const result = []; let count = 0; return new Promise((reslove, reject) => { list.forEach(promise => { promise.then((res)
阅读全文
function jmPromiseAll(list) { const result = []; let count = 0; return new Promise((reslove, reject) => { list.forEach(promise => { promise.then((res)
阅读全文
摘要：
JS 天然支持并行请求，但与此同时会带来一些问题，比如会造成目标服务器压力过大，所以本文引入“请求调度器”来节制并发度。 class Scheduler { constructor(size) { this.size = size; this.stacks = []; this.count = 0;
阅读全文
JS 天然支持并行请求，但与此同时会带来一些问题，比如会造成目标服务器压力过大，所以本文引入“请求调度器”来节制并发度。 class Scheduler { constructor(size) { this.size = size; this.stacks = []; this.count = 0;
阅读全文
摘要：
<html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width
阅读全文
<html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width
阅读全文
摘要：
对虚拟DOM的理解？ 可以看作是一个使用javascript模拟DOM结构的树形结构 虚拟DOM主要做了什么？ 传统的DOM操作，对于复杂项目来说，是非常消耗性能的，对DOM的修改开销非常大，vdom：render virtual dom + diff + 必要的dom更新 和 DOM 操作比起来，
阅读全文
对虚拟DOM的理解？ 可以看作是一个使用javascript模拟DOM结构的树形结构 虚拟DOM主要做了什么？ 传统的DOM操作，对于复杂项目来说，是非常消耗性能的，对DOM的修改开销非常大，vdom：render virtual dom + diff + 必要的dom更新 和 DOM 操作比起来，
阅读全文
摘要：
!function (root, doc) { class Delegator { /* *@param 顶级选择器（代理者） */ constructor (selector) { this.root = document.querySelector(selector);//顶级dom this.
阅读全文
!function (root, doc) { class Delegator { /* *@param 顶级选择器（代理者） */ constructor (selector) { this.root = document.querySelector(selector);//顶级dom this.
阅读全文
摘要：
1. 标准盒子 布局时遵守块级元素单独占一行，行内元素一行可以布置多个元素。 2. 浮动布局 float。盒子脱离标准流，但还在文档或容器中占据位置。如果父盒子为标准盒子，则会一直浮动到最左边界或者最右边界。要浮动，全浮动。 3. 定位 相对定位：相对于自身的位置。 绝对定位：相对于最近一级相对定位
阅读全文
1. 标准盒子 布局时遵守块级元素单独占一行，行内元素一行可以布置多个元素。 2. 浮动布局 float。盒子脱离标准流，但还在文档或容器中占据位置。如果父盒子为标准盒子，则会一直浮动到最左边界或者最右边界。要浮动，全浮动。 3. 定位 相对定位：相对于自身的位置。 绝对定位：相对于最近一级相对定位
阅读全文
摘要：
一、栈和堆的区别 栈：其操作系统自动分配释放，存放函数的参数值和局部变量的值等。其操作方式类似于数据结构中的栈。简单的理解就是当定义一个变量的时候，计算机会在内存中开辟一块存储空间来存放这个变量的值，这块空间叫做栈，然而栈中一般存放的是基本数据类型，栈的特点就是先进后出(或者后进先出) 堆：一般由程
阅读全文
一、栈和堆的区别 栈：其操作系统自动分配释放，存放函数的参数值和局部变量的值等。其操作方式类似于数据结构中的栈。简单的理解就是当定义一个变量的时候，计算机会在内存中开辟一块存储空间来存放这个变量的值，这块空间叫做栈，然而栈中一般存放的是基本数据类型，栈的特点就是先进后出(或者后进先出) 堆：一般由程
阅读全文
摘要：
提高Web页面渲染速度的7个技巧: https://blog.csdn.net/Taobaojishu/article/details/117458077 作为前端你可能要知道如何加快页面渲染速度的几点知识: https://www.jianshu.com/p/424f835c599a 1. con
阅读全文
提高Web页面渲染速度的7个技巧: https://blog.csdn.net/Taobaojishu/article/details/117458077 作为前端你可能要知道如何加快页面渲染速度的几点知识: https://www.jianshu.com/p/424f835c599a 1. con
阅读全文
摘要：
var timer; var i = 1; timer = function () { i++; console.log(i); if (i 10) { timer = function () { console.log("终止运行"); } } setTimeout(timer, 3000); }
阅读全文
var timer; var i = 1; timer = function () { i++; console.log(i); if (i 10) { timer = function () { console.log("终止运行"); } } setTimeout(timer, 3000); }
阅读全文
摘要：
十种跨域解决方案 https://juejin.cn/post/6844904126246027278#heading-33
阅读全文
十种跨域解决方案 https://juejin.cn/post/6844904126246027278#heading-33
阅读全文
摘要：
题目要求 查询触发条件 搜索框敲击回车 点击“Search”按钮 查询中，显示“Loading” 查询无结果时，显示“查无结果” 滚动列表时，支持懒加载 <!-- page页面 --> <template> <div class="search-container"> <input type="te
阅读全文
题目要求 查询触发条件 搜索框敲击回车 点击“Search”按钮 查询中，显示“Loading” 查询无结果时，显示“查无结果” 滚动列表时，支持懒加载 <!-- page页面 --> <template> <div class="search-container"> <input type="te
阅读全文
摘要：
题目要求 左侧：宽度固定150px，高度自动撑开，和右侧同高 右侧：宽度自适应，高度自动撑开，和左侧同高 代码实现 <div class="container"> <div class="left"></div> <div class="right"></div> </div> body{ marg
阅读全文
题目要求 左侧：宽度固定150px，高度自动撑开，和右侧同高 右侧：宽度自适应，高度自动撑开，和左侧同高 代码实现 <div class="container"> <div class="left"></div> <div class="right"></div> </div> body{ marg
阅读全文
摘要：
/** * 版本比较 * @param {*} a * @param {*} b */ function compare(a, b) { let arr1 = a.split('.'); let arr2 = b.split('.') const maxLength = Math.max(arr1.
阅读全文
/** * 版本比较 * @param {*} a * @param {*} b */ function compare(a, b) { let arr1 = a.split('.'); let arr2 = b.split('.') const maxLength = Math.max(arr1.
阅读全文
摘要：
题目要求 实现一个方法sameNumbers，找出同时存在于两个数组的所有数字 需要处理异常传参，情况不限于： 未传入arr1或arr2 arr1或arr2不是数组 字符串格式的数字需要转为数字，如：'1'需先转化为1再进行查重比较 返回结果需要过滤所有非数字项 代码实现 // 思路：给 obj 新
阅读全文
题目要求 实现一个方法sameNumbers，找出同时存在于两个数组的所有数字 需要处理异常传参，情况不限于： 未传入arr1或arr2 arr1或arr2不是数组 字符串格式的数字需要转为数字，如：'1'需先转化为1再进行查重比较 返回结果需要过滤所有非数字项 代码实现 // 思路：给 obj 新
阅读全文
摘要：
webpack 打包时 hash 码是怎么生成的 webpack 生态中存在多种计算 hash 的方式： 1、输出的结果全部使用 hash 的情况 每个文件都具有相同的 hash 值，因为 hash 是基于我们使用的所有源文件生成的。 如果重新运行该构建而不更改任何内容，则生成的 hash 将保持不
阅读全文
webpack 打包时 hash 码是怎么生成的 webpack 生态中存在多种计算 hash 的方式： 1、输出的结果全部使用 hash 的情况 每个文件都具有相同的 hash 值，因为 hash 是基于我们使用的所有源文件生成的。 如果重新运行该构建而不更改任何内容，则生成的 hash 将保持不
阅读全文
摘要：
移动端适配解决方案 viewport（scale=1/dpr） <meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=no
阅读全文
移动端适配解决方案 viewport（scale=1/dpr） <meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1; minimum-scale=1; user-scalable=no
阅读全文
摘要：
Set 的用法 let mySet = new Set(); mySet.add(1); // Set [ 1 ] mySet.add(5); // Set [ 1, 5 ] mySet.add(5); // Set [ 1, 5 ] mySet.add("some text"); // Set [
阅读全文
Set 的用法 let mySet = new Set(); mySet.add(1); // Set [ 1 ] mySet.add(5); // Set [ 1, 5 ] mySet.add(5); // Set [ 1, 5 ] mySet.add("some text"); // Set [
阅读全文
摘要：
常用的 es6 语法有哪些？ let, const, class, import, export, export default, Promise, async, await, for await, Object.values,Object.kes, array.form array.reduce
阅读全文
常用的 es6 语法有哪些？ let, const, class, import, export, export default, Promise, async, await, for await, Object.values,Object.kes, array.form array.reduce
阅读全文
摘要：
什么是事件？ 事件可以理解为消息，信号，事件的工作过程中，必然会产生三个概念 1. 事件源 2.事件 3.事件目标，也就是说当 事件目标注册事件后，由事件源开始 ，发送事件信息，给到事件目标的 过程，称为事件的生命周期 DOM 中的事件机制 DOM 定义了为 Event 的事件接口，用来表示事件，我
阅读全文
什么是事件？ 事件可以理解为消息，信号，事件的工作过程中，必然会产生三个概念 1. 事件源 2.事件 3.事件目标，也就是说当 事件目标注册事件后，由事件源开始 ，发送事件信息，给到事件目标的 过程，称为事件的生命周期 DOM 中的事件机制 DOM 定义了为 Event 的事件接口，用来表示事件，我
阅读全文
摘要：
轻松理解webpack热更新原理：https://blog.csdn.net/chern1992/article/details/106893227/ webpack 热更新，基于浏览器和自定义服务，之间进行 websocket 通信，每次文件更新都会生成新的hash 后缀， 在把更新的文件代码，发
阅读全文
轻松理解webpack热更新原理：https://blog.csdn.net/chern1992/article/details/106893227/ webpack 热更新，基于浏览器和自定义服务，之间进行 websocket 通信，每次文件更新都会生成新的hash 后缀， 在把更新的文件代码，发
阅读全文
浙公网安备 33010602011771号