酱子

左侧A盒子，右侧F盒子用flex布局B/C/D竖着排列，右侧3个div分别用伪元素分别做3根横线，F盒子设置。竖线，这样一拼接就感觉像是一个思维导图了，理论先这样，但是还没有想到B盒子的左侧横线和F盒子竖线交叉之后，上面圆圈多余的部分怎么去除。有这么个需求，按照层级关系，把表格放在思维导图上，我第一时间想到用插件，但是找了好久都没有找到比较合适的插件，决定自己手写一个。模拟数据 带有层级关系的格式，id是唯一的，这样做为了后期可能操作表格的时候方便找到唯一的表格。刚开始的做法是直接设置子集的。

新建一个vue2项目，在components里面新建一个longpress.vue文件设置按钮 指令，3000是毫秒参数-- 单位毫秒 : 3000 -- > < button v - longpress : 3000 = "longpress" > 长按 < / button > < / div > < / template > < script > export default {return {};console . log("长按指令生效--" , e);

js数字处理：保留几位小数,最大值,最小值function checkDigit(val) { // 调用案例 checkDigit({ number: " 1f发1,a.g5.1A62ag84", max: 100, min: -1 ,len: 2 }) let { number: number = "", // 需要校验的数字； len: len = "all", // 保留小数点后几位( 都保留传'all' ) max: max = 9999999, // 最大值

element-ui upload 组件 上传多个文件，只调用一次接口element-ui upload 组件 要是一次上传多个文件，会自动请求多次，而现在想要上传多个文件放在一个请求里，可以把多个文件 fileList 合并在一个FormData里面，利用防抖策略，上传多个文件后，只调用最后一次debounce() 去调用上传接口<template> <div> <div class="dragUpload"> <el-upload

main.js// 在路由拦截里面设置：路由切换的时候，当前页面的请求还未请求完 全部中断请求router.beforeEach(async (to, from, next) => { window.GlobalCancelReq = function (val = false) { if (!val) { if (window._axiosPromiseArr === undefined) { window._axiosPromiseArr = []

Promise 存在的意义：异步问题同步化解决方案 只是顺便解决了回调地狱问题 <script> let p = new Promise((resolve, reject) => { setTimeout(() => { console.log('晚上好2'); }) }) p.then((res) => { console.log(res); }) console.

问：对象里根据value排序？ let obj = { 小明: 60, 小红: 48, 大白: 59, 小李: 70, 大王: 80, 小吴: 78 } →→→ 展开答案 let obj = { 小明: 60, 小红: 48, 大白: 59, 小李: 70, 大王: 80, 小吴: 78 } obj.arr = [] // 不增加新变量了，直接在obj里面加个 arr数组

问题描述：后台返回给前端的时间(ywDate)是无序的，有的营销部门周 可能是断断断续续的需求：1.本部门没有的日期(snDate) 但在其他部门有，就需要把其他部门的时间日期(ywDate) 填充到这个部门 并设置(sale)为 02.在部门里面 按照时间 从小到大的顺序排序// 后台返回的代码var obj = { 营销一部: [ { ywDate: '2020年 第1周', sale: 50 }, { ywDate: '2021年 第14周',

简单粗暴地理解js原型链–js面向对象编程原型链理解起来有点绕了，网上资料也是很多，每次晚上睡不着的时候总喜欢在网上找点原型链和闭包的文章看，效果极好。不要纠结于那一堆术语了，那除了让你脑筋拧成麻花，真的不能帮你什么。简单粗暴点看原型链吧，想点与代码无关的事，比如人、妖以及人妖。1）人是人他妈生的，妖是妖他妈生的。人和妖都是对象实例，而人他妈和妖他妈就是原型。原型也是对象，叫原型对象。2）人他妈和人他爸啪啪啪能生出一堆人宝宝、妖他妈和妖他爸啪啪啪能生出一堆妖宝宝，啪啪啪就是构造函数，俗称造人。3）

zepto源码注释 /* Zepto v1.0-1-ga3cab6c - polyfill zepto detect event ajax form fx - zeptojs.com/license */ ; (function (undefined) { if (String.prototype.trim === undefined) // fix for iOS 3.2 String.prototype.trim = function () {

怎样成长？那么，什么才是成长？答案只有一个，【学习】。不断的学习。所以这个问题应该是，如何学习才能成为一个优秀的web前端工程师。1、肯定是要大量的写代码，因为你看书只能让你懂。但你懂了之后，依然是做不出来 什么东西的。为什么呢？因为你没有实践，你看我也明白飞机的原理，我能开飞机吗？不能。2、多看经典的。网上确实有很多的教程，不是说它们不好，而说它们不够系统。你在网上看了很多篇教程...

01-构造函数和实例对象的关系02-仅仅用构造函数创建对象的问题03-构造函数和原型的关系04-使用原型解决内存浪费问题05-构造函数-原型-实例对象三角关系06-原型链...

伪类 太监 1.一个冒号 2.可以有多个 3.可在前 或在后 4.基于DOM，不产生新对象 (太监不能生育) 伪类: 状态类：:link :visited :hover :active :focus 结构类：:first-child :last-child :nth-child :nth-of...

腾讯清凉云服务器 安装宝塔登录 教程买了一个轻量云服务器 练手的，安装了一个宝塔面板 操作方便些进入服务器，点击更多 管理重置一下系统的密码：充值完密码后 点击登录弹出 远程登录命令窗口 ，输入命令：su root输入刚刚重置的密码安装宝塔：命令：yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.

一、在前端中有一些事件会频繁的触发容易造成页面卡顿，例如：window 的 resize、scrollmousedown、mousemovekeyup、keydowninput 的 input 事件二、防抖的原理答：不管触发多少次事件，都会等到事件触发 **n 秒后 **才会执行，如果在事件触发的 n 秒内 又触发了这个事件，那么就以新的事件的时间为准重新计算，总之，就是要等你触发事件 n 秒内 不再触发事件，我才会执行，一般用在用户表单输入实时搜索上// 第一版// 缺点：函数的 th

谈谈对js数据类型转化的看法转化类型的方法有typeof 底层是二进制直接在计算机底层基于数据类型的值(二进制)进行检测typeof null == ‘object’null的在计算机存储的二进制 000 ，对象储存在计算机中都是以000开头的二进制存储，null也是，所以检测出来结果是’object’typeof 普通对象/数组对象/正则对象/日期对象 都是 ‘object’instanceof 检测当前实例是否属于这个类的instanceof 为了解

SSR服务端渲染 非常易懂主要内容：vue服务端渲染安装vue cli31、首先卸载旧版本（如果事先安装了vue cli1.x或者vue cli2.x，要先卸载掉）npm uninstall vue-cli -g2、安装Vue clinpm install -g @vue/cli3、安装Vue2.xxvue create demo 选择2.x4、安装 express、vue-server-renderernpm install express vue-server-render

【一听就懂】 堆栈是个啥？入栈： 没有数据的时候，栈顶和栈底是重合的，当需要存数据的时候，栈顶向上挪，把数据放在栈顶栈底之间-叫入栈(压栈)出栈： 当需要取数据的时候，把数据复制一份到cpu寄存器，把栈顶的数据向下挪 (出栈后数据已经被当作垃圾了)堆栈里面的数据能不能上下调换位置？不行，堆栈的数据，类比 弹夹，子弹相当于数据，一颗一颗子弹子弹压入弹夹，子弹先入后出，堆栈的数据不能上下调换位置。cpu执行过程cpu执行的过程就是把机器码拿过来分析出这句机器码是干嘛的，该计算的计算，该取数据的取数据

<script> sleep = (time = 1000) => { return new Promise((resolve) => { setTimeout(() => { resolve() }, time) }) } sleeps = (time = 1000) => { ...

webpack 性能优化开发环境性能优化生产环境性能优化开发环境性能优化优化打包构建速度HMR – 一个模块发生变化，会重新打包这个模块（而不是打包所有模块）提升构建速度优化代码调试source-map – 一种提供源代码到构建后代码映射技术(如果构建后代码出错，通过映射可以追踪源代码错误)生产环境性能优化优化打包构建速度oneOf – 前面找到了后面的就不用找了babel缓存 – 优化打包构建速度,babel结果会缓存起来,第二次打包速度会快些多进程打包 –

commonJs规范，ES6规范 区别 和使用commonJs规范：exports module.exportsrequire()ES6规范：export export default {}import xxx from './components'import { xxx } from './components'@import " "

深入浏览器解析渲染构建dom将HTML解析成许多Tokens将tokens解析成object将object组合成一个DOM树构建cssom解析CSS文件，并构建出一个CSSOM树构建renderTree(渲染树)结合DOM和CSSOM构建出一颗Render树layout计算出元素相对于viewport的相对位置5.paint将renderTree转换成像素，显示在屏幕上...

手写forEach <script> let arr = [ { name: '吴江1', age: 10 }, { name: '吴江2', age: 12 }, { name: '吴江3', age: 14 }, ]; let obj = { name: 'wj', age: 14 }; let objs = {}; //

function adds(...args) { let nums = args.reduce((pre, cur) => pre + cur, 0) return function fn(...ar) { nums = nums + ar.reduce((pre, cur) => pre + cur, 0) adds = nums return fn } }; ad...

前端技术清单最后更新：2019/10/09 新增内容 (diff) >>学习文章的知识往往是碎片化的。而前端涉及到的面很广，这些知识如果不进行有效梳理，则无法相互串联、形成体系。因此，我结合工作体会将抽象出了一些前端基础能力，并将看过、写过的一些不错的文章进行整理，形成了一份（纯）前端技术清单。不论你是正在自学前端，还是对前端某些技术熟练掌握但某些还未涉足，我都希望这份清单能帮助你 review 一些前端的基础能力。0. 年度报告1. 基础拾遗1.1. JavaScript

html2canvas 生成图片 以及出现白边问题解决办法：我在写demo的时候，pc端调试正常，但是到了移动端图片底部就会出现 一条白边，我的解决办法就是：backgroundColor: “#ff2e46”, 设置背景色就行了。整体代码实现思路：加载的时候判断是pc还是移动端：pc端展示保存按钮，移动端隐藏保存按钮。然后把要变成图片的页面的id (box)传到 html2canvas 里面，html2canvas会把box的页面转化为base64地址，重新赋值img，与此同时要把我们自己设置

最新rem适配H5 750设计稿代码，比较严谨，项目中可直接使用，很简单方便 <script> //简单版 // function fontSize() { // let widths = document.documentElement.clientWidth; // 屏幕宽度 // let font = widths / 750 * 100; // 1rem == 100px // document.documentElement.st

Super One Dark Theme 主题One Monokai Theme 主题TabOut tab跳出 括号Auto Rename Tag 自动重命名成对的HTML/XML标记Beautify 格式化Path Intellisense 自动补全路径Bracket Pair Colorizer 这个扩展允许匹配的括号用颜色标识Chinese (Simplified) 中文插件className 代码补全Code Runner 代码一键运行，支持超过40种语言code se

1.vue优点？答：轻量级框架：只关注视图层，是一个构建数据的视图集合，大小只有几十 kb ；简单易学：国人开发，中文文档，不存在语言障碍 ，易于理解和学习；双向数据绑定：保留了 angular 的特点，在数据操作方面更为简单；组件化：保留了 react 的优点，实现了 html 的封装和重用，在构建单页面应用方面有着独特的优势；视图，数据，结构分离：使数据的更改更为简单，不需要进行逻辑代码的修改，只需要操作数据就能完成相关操作；虚拟DOM：dom 操作是非常耗费性能的， 不再使用原生的 d

01、问：ES6是什么，为什么要学习它，不学习ES6会怎么样?答：ES6是新一代的JS语言标准，对分JS语言核心内容做了升级优化，规范了JS使用标准，新增了JS原生方法，使得JS使用更加规范，更加优雅，更适合大型应用的开发。学习ES6是成为专业前端正规军的必经之路。不学习ES6也可以写代码打鬼子，但是最多只能当个游击队长。02、问：ES5、ES6和ES2015有什么区别?答：ES2015特指在2015年发布的新一代JS语言标准，ES6泛指下一代JS语言标准，包含ES2015、ES2016、ES2017

1.代码： <script> // -------111--------- var a = 12; var b = a; b = 13; console.log(a); // -------222--------- var a = { n: 12 }; var b = a; b['n'] = 13; console.log(a.n);

typeof 运算符对基本数据类型的运算：typeof 'str' // 'string'typeof NaN // 'number'typeof 1 // 'number'typeof true // 'boolean'typeof undefined // 'undefined'typeof Symbol() // 'symbol'typeof null // 'object'null作为一个基本数据类型为什么会被typeof运算符识别为object类型呢？这是因为javascrip

小小面试题a的值var a ;if(a){ console.log('aa') let a = 20} else { console.log('bb') let a = 30}console.log(a)删除span 标签 <div id="box"> box <span>span</span> </div> <script> var box = document.querySelector(