
前端学习
文章平均质量分 78
xiaoxiezZ
这个作者很懒,什么都没留下…
展开
-
echarts-website构建过程
echarts-website构建过程echarts-website构建过程原创 2021-12-02 19:15:48 · 588 阅读 · 0 评论 -
npx的使用与npm
介绍What is NPMWhat is npxHow to use npx原创 2021-10-14 16:55:27 · 1679 阅读 · 0 评论 -
控制台调试小技巧
文章目录Console.log打印的内容是什么?console打印引用类型与值类型的区别关于控制台的小技巧console的基本类型占位符console.tableconsole.timeconsole.countconsole.traceconsole.assertconsole.groupconsole.dirconsole.dirxmlconsole.memoryconsole.clear()监听事件基本类型和引用类型基本类型引用类型简单赋值与对象引用的区别Console.log打印的内容是什么?原创 2021-06-10 18:20:15 · 840 阅读 · 1 评论 -
Vue-loader Scoped CSS
源码跟踪判断当前SFC对象样式块中是否有scoped属性, 并插入用于 query 中, 顺带一提, 每个单文件组件被解析后, 都会生成对应组件ID, ID主要以生产/开发环境做区分, 通过文件路径+源码或是文件路径的值作为哈希特征值的形式生成, 如下:// vue-loader/index.jsconst id = hash(isProduction (shortFilePath + '\n' + source) : shortFilePath)const hasScoped = descrip原创 2021-01-21 18:30:28 · 316 阅读 · 1 评论 -
微前端学习指引
文章目录微前端的核心价值微前端说明书这可能是你见过最完善的微前端解决方案qiankun--一套完整的微前端解决方案微前端的核心价值微前端的核心价值技术栈无关应用之间不应该有任何直接或间接的技术栈、依赖、以及实现上的耦合在通信机制的设计与选择上,尽量基于浏览器原生的CustomEvent api目标方案上跟使用ifrme做微前端一样简单,同时又解决了iframe带来的各种体验上的问题。微前端说明书微前端说明书这可能是你见过最完善的微前端解决方案这可能是你见过最完善的微前端解决方案蚂原创 2021-01-14 14:28:29 · 155 阅读 · 0 评论 -
Javascript 身份证号转字符串为什么不对
问题描述从数据库(Mongodb)中取的身份证号是lang类型,需要转换成字符串类型。拿到这个需求的时候没有多想,上来就是toString,+'',类似:var idCardNo = 110105199805241789;var idString = idCardNo + '';// 或者 var idString = idCardNo.toString();console.log(idString,typeof(idString));// 110105199805241800 string原创 2020-12-15 18:04:07 · 779 阅读 · 4 评论 -
V8 7.x-8.x主要性能提升
最新chrome版本Chrome:87.0.4280.66 (正式版本) (64 位) (cohort: 87_66_Win)修订版本:fd98a29dd59b36f71e4741332c9ad5bda42094bf-refs/branch-heads/4280@{#1432}操作系统:Windows 10 OS Version 1909 (Build 18363.1198)JavaScript:V8 8.7.220.25从Chrome40以后的版本开始,设置了V8引擎的版本一直跟随Chrome原创 2020-11-19 19:10:19 · 606 阅读 · 0 评论 -
Node.js 12.x-15.x 新特性
Node.js 15.x主要的新功能有:AbortControllerAbortController接口表示一个控制器对象,允许开发者根据需要中止一个或多个 Web请求,Node.js 15 加入了 AbortController 的一个实验性实现。AbortController 是一个全局实用工具类,可根据 AbortController Web API在选定的基于 Promise 的 API 中取消发出的请求信号。const ac = new AbortController();ac.sig原创 2020-11-15 22:27:44 · 1534 阅读 · 0 评论 -
Node.js 的 require 方法中的文件查找策略
模块加载优先级Node.js 的 require 方法中的文件查找策略如下:由于 Node.js 中存在 4 类模块(原生模块和3种文件模块),尽管 require 方法极其简单,但是内部的加载却是十分复杂的,其加载优先级也各自不同。如下图所示:尽管原生模块与文件模块的优先级不同,但是都会优先从文件模块的缓存中加载已经存在的模块。原生模块的优先级仅次于文件模块缓存的优先级。require方法在解析文件名之后,优先检查模块是否在原生模块列表中,以http模块为例,尽管在目录下存在一个http/ht原创 2020-11-03 15:45:44 · 531 阅读 · 0 评论 -
Vue 的 keep-alive组件
keep-alive为每个页面做keep-alive,识别是基于vue文件的name:// name: 'router-name' 该name用于<keep-alive>,必须设置// contr-manage为例export default { name: 'contr-manage', //该name必设,用于keep-alive compontents: {FunTree, Pagination}, data() {}, methods: {},原创 2020-10-12 09:09:17 · 177 阅读 · 1 评论 -
v-model绑定的数据为什么会报undefined
开发遇到一个神奇的bug,v-model绑定data里的数据,竟然报undefined,代码大概这样:<el-form ref="form" :model="formData"> <el-form-item label="姓名"> <el-input v-model="formData.name"></el-input> </el-form-item> <el-form-item label="手机号">原创 2020-09-27 10:01:00 · 6066 阅读 · 0 评论 -
CSS选择器总结
常用的选择器原创 2020-09-14 19:27:15 · 174 阅读 · 0 评论 -
提升前端性能-技术方案设计
浏览器性能体系的建立可以分为以下几个部分:现状评估和建立指标技术方案执行结果评估和监控现状评估和建立指标要想做好性能优化,正确地评估现状和建立指标是最关键的一步,它又往往是会被轻视的一步。性能问题可以分成很多方面,最重要的几个点是:页面加载性能动画与操作性能内存、电量消耗而这三部分中页面加载性能跟用户流失率是强关联的,而用户流失率,正是业务看重的指标。因此,优化的重点在页面加载性能上。技术方案在浏览器的大致工作过程中,我们必须理解几件事:从域名到IP地址,需要DNS协原创 2020-09-06 10:31:50 · 673 阅读 · 0 评论 -
跨域问题解决方案×3
跨域问题解决从两个方面,一是被调用方,二是调用方。假设被调用方是b.com,调用方是a.com(1)从被调用方解决,支持跨域。在APACHE/NGINX服务器上,基于HTTP协议,在返回响应头部增加指定字段,告诉浏览器,我允许被跨域调用。这种方式下,浏览器上会有b.com的URL。如通过在server端增加Filter的解决方案:让所有的请求都通过filter,给头部增加字段。(2)从调用方解决,隐藏跨域。通过代理服务器,把浏览器请求的域名转换过去,浏览器看到的域名都是a.com。带Cooki原创 2020-08-30 20:59:51 · 399 阅读 · 0 评论 -
事件循环、异步更新与Vue.nextTick()
文章目录JS的事件循环宏任务和微任务Vue的异步更新队列process.nextTickVue.nextTick()用法JS的事件循环JS是单线程的,Node在处理I/O的时候也是单线程的,好处就是没有线程的切换和数据共享的问题。但实际上在系统底层非阻塞的I/O解决方案,只有Network I/O部分:linux底层使用epoll,windows下使用IOCP。文件等操作则没有很好的系统解决方案,为了模拟实现非阻塞的I/O方案,Node在libuv层启用了一个线程池,用于调用系统的阻塞式I/O。实际上原创 2020-08-20 16:59:40 · 472 阅读 · 0 评论 -
由浅入深了解“一个浏览器是如何工作的”
文章目录浏览器的工作过程HTTP协议格式Method阶段三浏览器的工作过程浏览器首先使用 HTTP 协议或者 HTTPS 协议,向服务端请求页面;把请求回来的 HTML 代码经过解析,构建成 DOM 树;计算 DOM 树上的 CSS 属性;最后根据 CSS 属性对元素逐个进行渲染,得到内存中的位图;一个可选的步骤是对位图进行合成,这会极大地增加后续绘制的速度;合成之后,再绘制到界面上。HTTP协议格式MethodGETPOSTHEADPUTDELETECONNECT原创 2020-08-09 18:23:45 · 198 阅读 · 1 评论 -
CSS选择器
CSS选择器css选择器分类简单选择器:针对某一特征判断是否选中元素复合选择器:连续写在一起的简单选择器,针对元素自身特征选择单个元素复杂选择器:由(空格), >, ~, +, ||等符号连接的复合选择器,根据父元素或前序元素检查单个元素选择器列表:由逗号分隔的复杂选择器,表示“或”的关系参考资料W3SchoolCSS选择器参考手册30个你必须熟记的CSS选择器CSS选择器笔记...原创 2020-08-02 22:35:18 · 194 阅读 · 0 评论 -
HTML部分
语义标签- 增强可读性- 便于团队的开发和维护- 适合机器阅读,搜索引擎检索(SEO),支持读屏软件,根据文章自动生成目录等。- 错误地使用语义标签,会给机器阅读造成混淆、增加嵌套,给css编写加重负担。...原创 2020-07-26 21:41:01 · 169 阅读 · 0 评论 -
Javascript语句
文章目录Javascript语句普通语句语句块循环语句while 和 do while循环for in循环for of 循环和for await of循环try语句和throw语句debugger语句声明型语句let和constclass声明函数声明Javascript语句普通语句[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ltykgDdz-1595208603169)(en-resource://database/7050:1)]语句块语句块就是一对大括号,再同原创 2020-07-20 09:31:26 · 161 阅读 · 0 评论 -
重学前端-模块一Javascript 10-15讲
模块一Javascript 10-15讲源代码的输入Javascript源代码的输入可以分类为:WhiteSpace 空白字符LineTerminator 换行符Comment 注释Token 词:IndentifierName标识符名称,典型案例是我们使用的变量名。包括关键字。Punctuator 符号,使用的运算符和大括号等符号。NumericLiteral 数字直接量,即数字StringLiteral 字符串直接量,就是单引号或双引号引起来的直接量。Template 字符串模板,原创 2020-07-13 09:00:14 · 238 阅读 · 0 评论 -
重学前端-模块一Javascript 1-9讲
文章目录关于类型的细节为什么有的编程规范要求用 void 0 代替 undefined?字符串有最大长度吗?0.1 + 0.2 ≠ 0.3 ?ES6 新加入的 Symbol 是个什么东西?为什么给对象添加的方法能用在基本类型上?Javascript对象Javascript执行Javascript词法关于类型的细节关于Javascript的类型,各种文档介绍的已经很全面了,也是前端开发人员最熟悉的概念之一,但如果对下面的几个问题还有犹豫,说明对于类型这部分知识点,还是有遗漏部分的。为什么有的编程规范要求原创 2020-07-05 19:47:34 · 331 阅读 · 0 评论 -
HTML开发规范
文章目录HTML代码规范一般规则一般样式规则通用格式规则一般元规则HTMLHTML样式规则HTML格式规则HTML代码规范参考google HTML代码规范。一般规则一般样式规则[Protocol]尽可能使用HTTPS用于嵌入式资源。除非图像不能通过HTTPS获得,否则对于图像和其他媒体文件,样式表和脚本应始终使用HTTPS。<!--不推荐:省略协议--><script src="//ajax.googleapis.com/ajax/libs/jquery/3.4.0/j翻译 2020-07-05 18:31:46 · 439 阅读 · 0 评论 -
字典序问题
问题描述(笔试题,记不太清了只有基本描述):假设有n个问题, 问题的名字(name),给出参与的人数(X)和答对的人数(Y),难度系数分为三个等级,定义:0%<=Y/X<=30% 难度为530%<=Y/X<60% 难度为46%<=Y/X<=100% 难度为3输入:n(接下来有n个数据)name X Y输出:对问题进行字典排序 难度系数样例输入:3math 100...原创 2018-04-04 15:13:36 · 357 阅读 · 0 评论 -
正则表达式常用表达式及操作
1) test 检查指定的字符串是否存在var data = “123123″;var reCat = /123/gi;alert(reCat.test(data)); //true//检查字符是否存在 g 继续往下走 i 不区分大小写2) exec 返回查询值var data = “123123,213,12312,312,3,Cat,cat,dsfsdfs,”;var reCat = ...转载 2018-04-04 14:20:58 · 294 阅读 · 0 评论 -
HTML文件中文乱码
HTML出现乱码的原因很多,与编辑器和浏览器等都有关系,出现乱码首先要找到问题所在。1. 常见编码:(1)utf-8:(8-bit Unicode Transformation Format)是一种针对Unicode的可变长度字符编码,又称万国码。由Ken Thompson于1992年创建。现在已经标准化为RFC 3629。UTF-8用1到4个字节编码UNICODE字符。用在网页上可以同一原创 2017-10-26 17:18:36 · 6500 阅读 · 0 评论 -
sizeof()用法总结
sizeof()功能:计算数据空间的字节数1.与strlen()比较 strlen()计算字符数组的字符数,以"\0"为结束判断,不计算为'\0'的数组元素。 而sizeof计算数据(包括数组、变量、类型、结构体等)所占内存空间,用字节数表示。2.指针与静态数组的sizeof操作 指针均可看为变量类型的一种。所有指针变量的sizeof 操作结果均为转载 2017-09-19 10:35:05 · 630 阅读 · 0 评论 -
JS闭包的定义和使用
闭包的问题一直没搞太清楚,努力搞明白中……前置知识:作用域和作用域链。概述: 闭包:是指有权访问另一个函数作用域中的变量的函数。 创建闭包的常见方式就是在一个函数的内部创建另一个函数。在另一个函数中,内部定义的函数会将包含函数(即外部函数)的活动对象添加到它的作用域中。function ceatComparisionFunction(propertyName){ return ...原创 2018-04-12 16:12:51 · 1007 阅读 · 0 评论 -
原型链继承
原型链(前置知识:原型对象,构造函数): 每个构造函数都有一个原型对象,原型对象都包含一个指向构造函数的指针,而实例都包含一个指向原型对象的内部指针。那么,如果让原型对象等于另一个类型的实例,此时的原型对象将包含一个指向另一个原型的指针,相应地,另一个原型中也包含着一个指向另一个构造函数的指针。假如另一个原型又是另一个类型的实例,以上关系依然成立,如此层层递进就构成了实例与原型的链条。就是所...原创 2018-04-12 17:32:35 · 260 阅读 · 0 评论 -
创建一个 ul 节点,并绑定 10 个 li 子节点,显示在 body 的第一个节点前
var dul=document.createElement("ul"); dul.id="dul"; var ulText=document.createTextNode("ulText"); dul.appendChild(ulText); //循环创建10个li节点,并添...原创 2018-04-26 11:03:04 · 1547 阅读 · 0 评论 -
transform:translate(-50%,-50%)定位实现百分比居中
HTML代码<div id="translateTest"></div>CSS代码#translateTest{ position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 30%; height: 30%; bac...原创 2018-05-07 16:56:56 · 8549 阅读 · 3 评论 -
画一个最大的正方形
HTML代码 <div id="square"></div>CSS代码#square{ width: 100%; height: 100vw; background-color: green; }跟浏览器宽度一样大的动态正方形。原创 2018-05-07 18:51:28 · 672 阅读 · 0 评论 -
作用域和作用域链
作用域:作用域有两种,一种是全局作用域,对应全局变量;另一种是局部作用域,对应的是局部变量。最外层函数定义的变量拥有全局作用域,对任何内部函数来说,都是可以访问的。局部作用域一般只在固定的代码片段内可以访问,函数外部是访问不到的。闭包有权访问另一个函数作用于中的变量,在闭包函数执行时,会将它的外部函数的对象添加到它的作用域中。ES6之前没有块级作用域,JavaScript的...原创 2018-09-14 15:14:19 · 341 阅读 · 0 评论 -
面试问题整理-HTML
目录 1.标签的作用?2.标准模式和兼容模式的区别?3.对浏览器内核的理解?4.常见的浏览器及其内核?5.对HTML语义化的理解?6.cookies,sessionStorage和localStorage 的区别?7.行内(内联)元素有哪些?块级元素有哪些?空(void)元素有那些?8.页面导入样式时,使用link和@import有什么区别?9.HTML5新...原创 2018-10-09 13:31:08 · 301 阅读 · 0 评论 -
VS Code 不能识别json文件类型
问题描述:正常情况下,vscode新建json文件是支持的,也不用下载额外的插件。昨天配置launch.json时发现无代码颜色了,而且测试发现json的功能也实现不了了。新建json文件也是无代码高亮的……卸载、删注册表、重装仍未解决。解决方法:出现这个问题的原因是vscode自动检测文件类型失效,且默认的文件类型不正确。解决步骤:"ctrl+shift+p"搜索"se...原创 2019-07-24 11:11:10 · 11664 阅读 · 3 评论 -
当你在浏览器中输入 google.com 并且按下回车之后发生了什么?
当你在浏览器中输入 google.com 并且按下回车之后发生了什么?这个仓库试图回答一个古老的面试问题:当你在浏览器中输入 google.com 并且按下回车之后发生了什么?不过我们不再局限于平常的回答,而是想办法回答地尽可能具体,不遗漏任何细节。目录按下"g"键回车键按下产生中断[非USB键盘](Windows)一个WM_KEYDOWN 消息被发往应用程转载 2017-09-25 09:52:57 · 1405 阅读 · 0 评论