qq_36262295的博客

原创 微信小程序http请求封装

啊

原创 渲染几万条数据不卡住页面

setTimeout(() => { // 插入十万条数据 const total = 100000; // 一次插入的数据 const once = 20; // 插入数据需要的次数 const loopCount = Math.ceil(total / once); let countOfRender = 0; const ul = document.querySelector('ul'); // 添加数据的方法 function add() { c

原创 js图片懒加载

可以给img标签统一自定义属性data-src='default.png'，当检测到图片出现在窗口之后再补充src属性，此时才会进行图片资源加载。function lazyload() { const imgs = document.getElementsByTagName('img'); const len = imgs.length; // 视口的高度 const viewHeight = document.documentElement.clientHeight; // 滚动

原创 js上拉加载

window.addEventListener('scroll', function() { const clientHeight = document.documentElement.clientHeight; const scrollTop = document.documentElement.scrollTop; const scrollHeight = document.documentElement.scrollHeight; if (clientHeight + scrollTo

原创 数组去重

数组去重 const arr = [1, 1, '1', 17, true, true, false, false, 'true', 'a', {}, {}]; 1. const res1 = Array.from(new Set(arr)) 2. 两层for循环 + splice 每删除一个树，j--保证j的值经过自加后不变。同时，len--，减少循环次数提升性能 let ten = arr.length; for (let i = 0; i < arr.length -

原创 人资面试

1.公司地址必须记得清楚 大厦名字 上一家公司2.公司性质：是自主研发还是外包，外包公司或者是自主研发但是也在接外包的工作/活，如果是自主研发，主要研发什么产品，自己负责什么模块外包：开发模式驻场开发盈利模式：外包项目盈利自主研发可能是平台上的盈利或者其他3.怎么拿到这个项目： 招标，投标，中标之后就拿到项目立项，上层领导商讨甲方提需求，产品说明会，当我们拿到项目后立项，产品经理（项目经理）会开会讲需求，问问题：pc端兼容问题，技术上用什么框架？细节上：逻辑上哪个状态到哪个状态怎么处

原创 promise并发限制

整体采用递归调用来实现：最初发送的请求数量上限为允许的最大值， 并且这些请求中的每一个都应该在完成时继续递归发送 ，通过传入的索引来确定了urls里面具体是那个URL ，保证最后输出的顺序不会乱，而是依次输出。 function multiRequest(urls = [], maxNum) { // 请求总数量 const len = urls.length; // 根据请求数量创建一个数组来保存请求的结果 const result = new Arr..

原创 数组扁平化

数组扁平化1. let a = arr.flat(Infinity) console.log(a); 2. let a = JSON.stringify(arr).replace(/\[|\]/g, '').split(","); console.log(a); 3. let a = JSON.parse("[" + JSON.stringify(arr). replace(/\[|\]/g, "") + "]"); console.log(a); 4. let

原创 JavaScript类型检测和转换

数据类型检测基本数据类型和函数类型检测使用typeoftypeof variable === 'string'typeof variable === 'number'typeof variable === 'boolean'typeof variable === 'undefined'typeof variable === 'function'引用类型检测variable instanceof Objectvariable instanceof RegExpvariable insta

原创 阿里巴巴图标库引入方法

先登录，点击购物车，添加至项目fontcss引入点击fontcss提示有新的icon来袭，点击更新代码生成新的地址，浏览器输入新地址，出来的代码复制，进入一个css文件里面，引入至全局css,html标签处直接使用类名即可unicode和symbol...

原创 link与@import的区别

@import是 CSS 提供的语法规则，只有导入样式表的作用；link是HTML提供的标签，不仅可以加载 CSS 文件，还可以定义 RSS、rel 连接属性等加载页面时，link标签引入的 CSS 被同时加载；@import引入的 CSS 将在页面加载完毕后被加载@import是 CSS2.1 才有的语法，故只可在 IE5+ 才能识别；link标签作为 HTML 元素，不存在兼容性问题。可以通过 JS 操作 DOM ，插入link标签来改变样式；由于DOM方法是基于文档的，无法使用@import的.

原创 用css实现已知或者未知宽度的垂直水平居中

/ 1.wraper {position: relative;.box {position: absolute;top: 50%;left: 50%;width: 100px;height: 100px;margin: -50px 0 0 -50px;}}// 2.wraper {position: relative;.box {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%

原创 js基础面试题

function Foo() { getName = function () { console.log(1) } return this}Foo.getName = function () { console.log(2) }Foo.prototype.getName = function() { console.log(3) }var getName = function () { console.log(4) }function getName() { console.log(5

原创 script标签的defer和async区别

async 和 defer 虽然都是异步的，不过还有一些差异，使用 async 标志的脚本文件一旦加载完成，会立即执行；而使用了 defer 标记的脚本文件，需要在 DOMContentLoaded 事件之前执行。

原创 BFC

BFC定义BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。block-level box:display 属性为 block, list-item, table 的元素，会生成 block-level box。并且参与 block fomatting context；inline-level box:disp

原创 正则regexp

1、.匹配任意除换行符“\n”外的字符； 2、* 表示匹配前一个字符0次或无限次； 3、+或 * 后跟？表示非贪婪匹配，即尽可能少的匹配，如 *？重复任意次，但尽可能少重复； 4、 .*? 表示匹配任意数量的重复，但是在能使整个匹配成功的前提下使用最少的重复。 5、 如：a.*? b匹配最短的，以a开始，以b结束的字符串。如果把它应用于aabab的话，它会匹配aab和ab。 let str1 = 'aababvc' str1.replace(/(a.*?b)/g, ($0, $1..

原创 微信小程序抽离组件模板template和include

include和template有何不同呢?include：和原来页面一样,打比方来说就是页面分离专用template：模板,调用页面数据填充数据 template可以随意改变吗?模板如果被随便改变，那就不叫模板了! 命名？建议模板命名：xxxx-template.wxml建议页面模块命名:xxxx-module.wxml include可以导入数据吗?include不能！它只能做页面分离时作用import<!-- 引入hello.wxml中name为hello的模板 -

原创 微信小程序父子传值

父页面传给子组件是通过标签传递的在父页面的index.json文件中引入子组件Demo//父页面的index.json{"usingComponents":{"Tabs":"../../components/Demo/Demo"}}父页面使用子组件Demo<!-- 父页面的index.wxml --><Demo></Demo>12父页面的index.js文件中定义变量//父页面的index.jsdata:{ num:10, text:"父

原创 webpack配置项目

一、项目初始化npm init -ynpm install --save-dev webpacknpm install webpack-cli -D创建 webpack.config.js文件 在文件中输入代码：let path=require("path") //引用node核心模块 => 路径module.exports={ mode:"production", //打包后文件模式 两种 => development production entry:'

原创 redux图解流程

原创 vue源码解析图

原创 webpack笔记

https://mp.csdn.net/console/article包配置搜索npmjs.com/package/html-webpack-plugin__dirname代表当前文件的绝对路径npm list -g --depth 0第一章 webpack五个核心概念entryoutputloaderpluginsmode第二章 webapck开发环境的基本配置创建配置文件打包样式资源打包html资源打包图片资源打包其他资源devserver开发环境配置第三章 w

原创 动态规划

2021-3-16日计数有多少种方式走到右下角有多少种方法宣传k个数使得和是sum求最大最小值从左上角走到右下角路径的最大数字和最长上升子序列长度3.求存在性取石字游戏，先手是否必胜能不能选出k个数使得和是sum你有3种硬币，分别是2, 5, 7元买一本书需要27元如何使用最少的硬币，组合正好够27元动态规划，状态确定状态需要2个意识最后一步子问题最后一步虽然我们不知道最优策略是什么但是最优策略肯定是K枚硬币a1 + a2…+ak=27;所以一定有一枚硬币ak

原创 我的css笔记

12月份教学周期CSS3c3选择器p~div选中p后面的diva[href="http"] 链接是a[href^="http"] 链接开头是a[href$="http"] 链接结尾是input[type="text"] 类型是ul li:first-child{父级里面的第一个子元素}ul li:last-child{父级里面的最后一个子元素}ul li:nth-child(evev){偶数li}ul li:nth-child(odd){奇数li}ul li:nth-child(3n+

原创 H5笔记

H5新标签HTML5 提供了定义页面不同部分的新语义元素：article元素规定独立的自包含内容。文章可以用article标签包裹。aside:元素页面主内容之外的某些内容（比如侧栏）。header:规定页面的头部main：规定页面的主体部分footer:规定页面的页脚部分section：类似div，对页面分块nav:定义页面的导航mark:定义强调的文本figure:规定独立的流内容（图像、图表、照片、代码等等）。figcaption: 定义 元素的标题。details:规

原创 js笔记啊

基础var 声明一个变量，临时存储数据的载体数据类型 计算机识别的数据格式Elements 基础原理~~~标签元素Network网络Sources 来源Performance 性能Application 应用，应用程序Security 安全性，保证Audits 审计Memory 记忆，内存alert()浏览器警告弹出框console.log(控制台 日志)document.write()网页的内容中打印输出的内容基本数据类型 原始值Number、Stirng、Boolea

原创 手写promise

基本搭建 let p = new Promise((resolve, rejected) => { resolve("hello"); }); // 因为new的时候传了一个回调函数 function Promise(executor) { // executor是形参 //这个函数是executor的实参 // (resolve, rejected) => {resolve("hello");}

原创 cache manifast

其中第一行的 CACHE MANIFEST 标识是一定要有的，而 CACHE / NETWORK / FACKBACK 都是可选的。如果没有写标识，则默认缓存，CACHE 就不用说了，缓存；NETWORK 指不想缓存的页面，比如登陆页等；FALLBACK 是指当没有响应时的替代方案，比如我想请求某个页面，但这个页面的服务器挂了，那么，我可以显示另外一个指定的页面，文件结构如下：<html manifest="path/to/NAME.manifest">网站怎么优化精灵图，懒加载，减少h

原创 基数排序

let arr = [777, 322, 17, 666, 33, 555, 333, 3, 54, 13, 36, 0,]; 基数排序 多关键字排序 假如有一张工资表，要求，按照薪资排序， 年龄相同的员工按照年龄排序 radixSort(arr, 10) function radixSort(arr, maxDigit) { let counter = []; let radix = 0; let maxnum...

原创 桶排序

let arr = [0, 17, 33, 5, 3, 54, 9, 13, 36, 11, 1, 2, 3,]; bucketSort(arr, 10); function bucketSort(arr, maxDigit) { let counter = []; // 初始化桶，分了10个桶 maxDigit=10 for (let i = 0; i < maxDigit; i++) { counter...

原创 算法复杂度分析

O(1)我们把一些简单的操作比如加减乘除打印等，为1个运行单位1个for循环O(n)2个for循环O(n ^ 2)循环减半O(logn)O(1) < O(logn) < O(n) < O(nlogn)

原创 [object module]

这是应为webpack配置使用的es6导入导出语法规则<img src={require('../../assets/images/logo512.png')} />在图片规则options里面关掉esmodule规则esModule: false或者直接使用import导入，而不是require导入import imgURL from '../../assets/images/logo512.png'; <img src={imgURL} />或者试试降低file

原创 vue react img标签引入图片的几种方式

reactimport imgURL from './../images/photo.png';<img src={imgURL } /><img src={require('./../images/photo.png')} />vueimport imgURL from './../images/photo.png';<img :src="imgURL" /><img :src="require('./../images/photo.png')