- 博客(50)
- 收藏
- 关注
RSS订阅原创 Promise.all和Promise.race
一、Pomise.all的使用Promise.all可以将多个Promise实例包装成一个新的Promise实例。同时，成功和失败的返回值是不同的，成功的时候返回的是一个结果数组，而失败的时候则返回最先被reject失败状态的值。具体代码如下：let p1 = new Promise((resolve, reject) => {resolve(‘成功了’)})let p2 = new Promise((resolve, reject) => {resolve(‘success’)
2021-08-25 12:38:20
105
原创 npm与npx的区别
npmnpm是Node.js的软件包管理器，其目标是自动化的依赖性和软件包管理。这意味着，可以在package.json文件中为项目指定所有依赖项（软件包），当需要为其安装依赖项时，只要运行npm install就可以。npxnpx是执行Node软件包的工具，它从 npm5.2版本开始，就与npm捆绑在一起。npx的作用：1.默认情况下，首先检查路径中是否存在要执行的包（即在项目中）；2.如果存在，它将执行；3.若不存在，意味着尚未安装该软件包，npx将安装其最新版本，然后执行它；上文已说
2021-08-07 18:55:32
366
转载 Performance — 前端性能监控利器
属性timing （PerformanceTiming）从输入url到用户可以使用页面的全过程时间统计，会返回一个PerformanceTiming对象，单位均为毫秒按触发顺序排列所有属性：(更详细标准的解释请参看：W3C Editor's Draft)navigationStart:在同一个浏览器上下文中，前一个网页（与当前页面不一定同域）unload 的时间戳，如果无前一个网页 unload ，则与 fetchStart 值相等unloadEventStart:前一个网页（与当前页面同域）u
2021-01-28 14:09:45
103
原创 Vue 项目打包部署总结
使用Vue做前后端分离项目时，通常前端是单独部署，用户访问的也是前端项目地址，因此前端开发人员很有必要熟悉一下项目部署的流程与各类问题的解决办法了。Vue项目打包部署本身不复杂，不过一些前端同学可能对服务器接触不多，部署过程中还是会遇到这样那样的问题。本文介绍一下使用nginx服务器代理前端项目的方法以及项目部署的相关问题，内容概览：图片一、准备工作——服务器和nginx使用准备一台服务器我的是ubuntu系统，linux系统的操作都差不多。没有服务器怎么破？如果你只是想体验一下，可以尝试各
2020-12-11 19:16:48
115
原创 Vue通过build打包后 打开index.html页面是空白的
最近在build打包vue项目遇到了几个问题，如下：1、npm run build打包项目之后，我们通常是把dist文件里面被压缩后的static文件跟index.html提交到服务器，但最近发现直接打开index.html页面是空白的，还会报几个错，找不到页面路径。原因：找到config文件下index.js，全局搜索assetsPublicPath，结果是 assetsPublicPath：’ / ’ 默认为根目录，而index.html和static是在同一级目录下，因此，解决方法就是 asset
2020-12-11 14:20:39
818
原创 关于promise中reject和catch的问题
一、reject后的东西，一定会进入then中的第二个回调，如果then中没有写第二个回调，则进入catch
2020-11-25 17:38:10
806
转载 vue slot-scope和v-slot
vue中插槽的使用一、什么是插槽官方解释：元素作为组件模板之中的内容分发插槽，传入内容后slot 元素自身将被替换。插槽就是子组件中的提供给父组件使用的一个占位符，用 表示，父组件可以在这个占位符中填充任何模板代码，如 HTML、组件等，填充的内容会替换子组件的标签。相当于组件的一块HTML模板，这块模板显示不显示、以及怎样显示由父组件来决定。Slot 是 Vue组件的一个重要机制，它使得完全解耦的组件之间可以灵活地被组合。二、插槽的迭代变迁在2.5中，引入了slot-scope直接在slot
2020-11-09 15:11:33
723
转载 javascript怎么判断对象是否为空？
1、使用for…in… 遍历属性进行判断这是最常见的方法，如果为真则“不是空对象”，否则是空对象function isEmptyObj(data) {for(var item in data) {return false;}return true;};var obj = {};if (isEmptyObj(obj)){console.log(“对象为空”);}else {console.log(“对象不为空”);}2、通过 JSON.stringify() 方法判断将对象转化为
2020-09-28 16:28:58
358
转载 package.json和package-lock.json的区别
node项目下面有一个package-lock.json文件，和package.json文件，扒一扒这两个的区别，其实package-lock就是锁定安装时的包版本号，需要上传到git上，以保证其他人在install时候，大家的依赖版本相同。官方文档：这个package-lock.json 是在 npm install时候生成一份文件，用以记录当前状态下实际安装的各个npm package的具体来源和版本号.跟package.json的区别在于（举个栗子）：“dependencies”: {“@ty
2020-09-28 16:27:18
234
原创 离线安装VSCode（Visual Studio Code）插件
离线安装步骤访问Marketplace找到对应插件页面。 按照官方我能直接下载插件吗？的回复，找到插件的对应开发者、插件名和版本号生成下载链接，然后下载。 Microsoft.VisualStudio.Services.VSIXPackage改名为${publisher}.${extension name}.${version}.vsix。 在vscode中选择左侧扩展按钮，点击扩展列表右上方菜单（三个点），选择从VSIX安装。链接模板如下：http://${publisher}.gallery
2020-07-11 15:59:45
690
原创 为什么说HTTP协议是无状态的
无状态指的是任意一个Web请求必须完全与其他请求隔离，当请求端提出请求时，请求本身包含了相应端为相应这一请求所需的全部信息。无状态无状态协议是指协议对务处理没有记忆能力。缺少状态意味着如果后续处理需要前面的信息，则它必须重传，这样可能导致每次连接传送的数据量增大。另一方面，在服务器不需要先前信息时它的应答就较快。Http协议不像建立了socket连接的两个终端，双方是可以互相通信的，http的客户端只能通过请求服务器来获取相关内容或文件信息。http协议这种特性有优点也有缺点，优点在于解放了服务.
2020-06-28 14:00:47
631
原创 如何实现一个组件封装?
js前端组件的封装方法定义一个类类中增加一个方法body中定义一个dom节点脚本中把dom节点和类定义结合起来 , 实现特定的组件功能vue组件封装建立组件的模板，先把架子搭起来，写写样式，考虑你的组件的基本逻辑然后在引用得组件中 用import引入组件通过component定义组件名称在把组件以标签的形式写出来。父子组件之间的传值react组件封装创建一个react文件 , 搭建模板把组件内的内容写清楚使用export 把组件曝光使用import把组件导入.
2020-06-20 13:23:18
1587
原创 vue3.0新特性
vue3.0的设计目标更小 更快 加强TypeScript支持 加强API设计一致性 提高自身可维护性 开放更多底层功能具体可以从以下方面来理解1，压缩包体积更小当前最小化并被压缩的 Vue 运行时大小约为 20kB（2.6.10 版为 22.8kB）。Vue 3.0捆绑包的大小大约会减少一半，即只有10kB！2，Object.defineProperty -> ProxyObject.defineProperty是一个相对比较昂贵的操作，因为它直接操作对象的属性，颗粒
2020-06-20 13:12:48
2509
原创 xss和csrf的区别
xss和csrfxss跨站脚本攻击，指攻击者在网页上注入恶意的客户端代码，通过恶意脚本对客户端网页进行篡改，从而在用户浏览网页时， 对客户端浏览器进行控制或获取用户隐私数据的方式防范：httpOnly防止截取cookie、用户输入检查、用户输出检查、利用CSP（浏览器的内容安全策略）csrf跨站请求伪造，劫持受信任用户向服务器发送非预期请求的方式。防范：验证码、referer check、增加token验证...
2020-06-16 17:35:07
192
原创 前端模块化：CommonJS,AMD,CMD,ES6
模块化的开发方式可以提高代码复用率，方便进行代码的管理。通常一个文件就是一个模块，有自己的作用域，只向外暴露特定的变量和函数。目前流行的js模块化规范有CommonJS、AMD、CMD以及ES6的模块系统。参见阮一峰老师的文章 module-loader 。一、CommonJSNode.js是commonJS规范的主要实践者，它有四个重要的环境变量为模块化的实现提供支持：module、exports、require、global。实际使用时，用module.exports定义当前模块对外输出的接口（
2020-06-16 16:22:57
162
原创 js中常用事件
鼠标事件/*onclick：点击某个对象时触发ondblclick：双击某个对象时触发onmouseover：鼠标移入某个元素时触发onmouseout：鼠标移出某个元素时触发onmouseenter：鼠标进入某个元素时触发onmouseleave：鼠标离开某个元素时触发onmousedown：鼠标按下时触发onmouseup：鼠标抬起时触发onmousemove：鼠标被移动时触发onwheel：鼠标滚轮滚动时触发oncontextmenu：点击鼠标右键时触发*/键
2020-06-14 21:52:38
268
原创 Object.keys( )与 for in 区别
for in 一般用于对象的遍历:let obj = { a:1, b:2,}for(let key in obj){ console.log(key) }// a// bObject.keys() 方法会返回一个由一个给定对象的自身可枚举属性组成的数组，数组中属性名的排列顺序和使用 for…in 循环遍历该对象时返回的顺序一致 。let obj = { a:1, b:2,}console.log(Object.keys(obj))/
2020-05-15 14:47:39
852
原创 js对象的深拷贝
首推的方法简单有效，JSON.stringfy()和JSON.parse()即可搞定。但是这种简单粗暴的方法有其局限性。当值为undefined、function、symbol 会在转换过程中被忽略。。。所以，对象值有这三种的话用这种方法会导致属性丢失。var syb = Symbol('obj');var person = { name :'tino', say: function(){ console.log('hi'); }, ok: syb, un: u
2020-05-15 14:20:58
120
转载 axios中的qs介绍
首先qs是一个npm仓库所管理的包,可通过npm install qs命令进行安装.地址: https://www.npmjs.com/package/qsqs.parse()、qs.stringify()qs.parse()将URL解析成对象的形式const Qs = require('qs');let url = 'method=query_sql_dataset_data&am...
2020-04-22 15:52:41
235
原创 js中的自执行匿名函数 (function(){})()
阅读目录JS函数有两种命名方式 1、声明式 2、函数表达式 产生的原因 自执行匿名函数正文回到顶部JS函数有两种命名方式1、声明式声明式会导致函数提升，function会被解释器优先编译。即我们用声明式写函数，可以在任何区域声明，不会影响我们调用。function XXX(){}2、函数表达式函数表达式我们经常使用，而函数...
2020-04-17 10:36:14
73
转载 使用Vue的nextTick引发的执行顺序之争
开端在Vue中有一个nextTick方法，偶然一天，我发现不管代码的顺序如何，nextTick总是要比setTimeout先要执行。同样是排队，凭什么你nextTick就要比我快？开局一道题，内容全靠编。（在node下运行，答案在文末给出。）new Promise((resolve) => { console.log(1); proce...
2020-04-16 17:26:19
1417
2
转载 深入理解JavaScript执行（单线程的JS）
一、介绍随着js不断深入，你可能会慢慢的好奇，用了这么久的js，却不知道这js在浏览器怎么被执行的，很尴尬，哈哈。所以，我查阅很多资料来总结JS的执行过程，也分享出来，和大家一起学习。本篇主要讲单线程的JS涉及的名词：JS引擎，单线程，执行栈，执行上下文（execution context）二、JS引擎JS引擎是浏览器的重要组成部分，主要用于读取并执行js。就是这家伙执...
2020-04-16 17:24:39
121
转载 彻底弄懂 JavaScript 执行机制
不论你是javascript新手还是老鸟，不论是面试求职，还是日常开发工作，我们经常会遇到这样的情况：给定的几行代码，我们需要知道其输出内容和顺序。因为javascript是一门单线程语言，所以我们可以得出结论：javascript是按照语句出现的顺序执行的看到这里读者要打人了：我难道不知道js是一行一行执行的？还用你说？稍安勿躁，正因为js是一行一行执行的，所以我们以为js都是这样的：...
2020-04-16 16:32:02
62
原创 js原型链
var M = function(){}var o = new M()M.prototype === o.__proto__ trueM.prototype.__proto_ === Object.prototypetrueObject.prototype.__proto__ = null 表示再没有上级的原型对象 ...
2020-04-16 15:32:03
79
转载 vue的双向绑定原理及实现
使用vue也好有一段时间了，虽然对其双向绑定原理也有了解个大概，但也没好好探究下其原理实现，所以这次特意花了几晚时间查阅资料和阅读相关源码，自己也实现一个简单版vue的双向绑定版本，先上个成果图来吸引各位：代码： 效果图：是不是看起来跟vue的使用方式...
2020-04-15 15:53:17
105
1
原创 数组去重
var arr = [2,0,1,9,1,0,2,1];复制代码indexOfvar arr = [2,0,1,9,1,0,2,1];var a_arr = [];for(let i=0;i<arr.length;i++){ if(a_arr.indexOf(arr[i]) == -1){ a_arr.push(arr[i]); }}con...
2020-04-14 10:31:33
68
转载 简单介绍下重绘和回流（Repaint & Reflow），以及如何进行优化
先来看下浏览器的渲染过程从上面这个图上，我们可以看到，浏览器渲染过程如下：1、解析HTML，生成DOM树，解析CSS，生成CSSOM树2、将DOM树和CSSOM树结合，生成渲染树(Render Tree)3、Layout(回流):根据生成的渲染树，进行回流(Layout)，得到节点的几何信息（位置，大小）4、Painting(重绘):根据渲染树以及回流得到的几...
2020-04-14 10:07:01
261
转载 怎么让一个div水平垂直居中
<div class="parent"> <div class="child"></div></div>复制代码1）使用position + transform，不定宽高时.parent{ position: relative;}.child{ position: absolute; left: 5...
2020-04-14 09:42:12
202
原创 Vue-给对象新增属性（使用Vue.$set()）,根据索引值修改数组
在开发过程中，我们时常会遇到这样一种情况：当vue的data里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性，如果更新此属性的值，是不会更新视图的。根据官方文档定义：如果在实例创建之后添加新的属性到实例上，它不会触发视图更新。当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的属性，并使用 Object...
2020-04-09 11:19:42
2064
1
原创 Class 与 Style 如何动态绑定？
Class 可以通过对象语法和数组语法进行动态绑定：对象语法：data: {isActive: true,hasError: false}复制代码数组语法：data: {activeClass: ‘active’,errorClass: ‘text-danger’}复制代码Style 也可以通过对象语法和数组语法进行动态绑定：对象语法：data: {active...
2020-04-09 11:00:57
537
转载 SCSS 教程
Sass是成熟、稳定、强大的CSS预处理器，而SCSS是Sass3版本当中引入的新语法特性，完全兼容CSS3的同时继承了Sass强大的动态功能。特性概览CSS书写代码规模较大的Web应用时，容易造成选择器、层叠的复杂度过高，因此推荐通过SASS预处理器进行CSS的开发，SASS提供的变量、嵌套、混合、继承等特性，让CSS的书写更加有趣与程式化。变量变量用来存储需要在CSS中复用的信息，例如...
2020-04-03 15:03:41
84
原创 Scss 与 Sass 是什么,他们的区别在哪里？
Scss 与 Sass异同Sass 和 Scss 其实就是同一种东西，我们平时都称之为 Sass，两者之间不同之处主要有以下两点：1.文件扩展名不同，Sass 是以“.sass”后缀为扩展名，而 Scss 是以“.scss”后缀为扩展名。2.语法书写方式不同，Sass 是以严格的缩进式语法规则来书写，不带大括号({})和分号(????，而 Scss 的语法书写和我们的CSS 语法书写方式非常类似。...
2020-04-03 14:59:01
1305
转载 CSS 性能优化还有哪些方法？
CSS 必须通过一个相对复杂的管道，就像 HTML 和 JavaScript一样，浏览器必须从服务器下载文件，然后进行解析并将其应用于DOM。由于优化程度极高，这个过程通常非常快——对于不基于框架的小型 web 项目，CSS通常只占总资源消耗的一小部分。框架打破了这种平衡。包括一个 JavaScript GUI 堆栈，如 jQuery UI，可以观察 CSS, JS 和 HTML大小逐渐的变大。...
2020-04-03 10:01:33
338
转载 前端性能优化
优化的目的优化的目的在于让页面加载的更快，对用户操作响应更及时，为用户带来更好的用户体验，对于开发者来说优化能够减少页面请求数，能够节省资源。前端优化的方法有很多种，可以将其分为两大类，第一类是页面级别的优化如http请求数，内联脚本的位置优化等，第二类为代码级别的优化，例Javascript中的DOM 操作优化、CSS选择符优化、图片优化以及 HTML结构优化等等。优化哪些？那么我们需要...
2020-04-02 17:43:21
92
转载 一次完整的 Web 请求和渲染过程以及如何优化网页
本文主要介绍访问一个网站时的流程，页面渲染过程，包括其中涉及到的概念。以及，我们如何去优化前端页面，让它访问速度更快。（critical rendering path最佳渲染路径）打开浏览器，输入URLDNS解析完成TCP握手发送HTTP请求接收HTTP响应结果浏览器解析HTML，CSS构建对象模型，DOM tree 和 CSSOM tree，组成render tree浏览器渲染...
2020-04-02 16:21:26
369
转载 完整的一次 HTTP 请求响应过程
因特网无疑是人类有史以来最伟大的设计，它互联了全球数亿台计算机、通讯设备，即便位于地球两端的用户也可在顷刻间完成通讯。可以说『协议』是支撑这么一个庞大而复杂的系统有条不紊运作的核心，而所谓『协议』就是通讯双方所必须遵守的规则，在这种规则下，不同的数据报可能被解析为不同的响应动作。简而言之，『协议』就是指如果发送和接收方按照这个规则进行数据报文的发送，即可在基本的数据传输之上得到某些特殊的功能或...
2020-04-02 11:13:35
119
转载 HTTP协议简单介绍以及常用协议端口
1.url用于表示任意资源的位置2.url详解协议+主机名称+目录结构+文件名称完整格式：????/:@:/:?#scheme:协议，方案，常见的协议：http/httpsuser:用户名pwd:密码host:主机，（127.0.0.1/localhost）port:端口号（80）path:路径，资源在服务器上的存放位置params:参数query:查询字符串frag:锚点3...
2020-04-02 11:06:45
886
转载 tcp的3次握手 4次挥手
首先我们来看耳熟能详的『三次握手』，这基本上是 TCP 的代名词了，无论懂不懂具体原理的人，提到 TCP，基本上都是知道『三次握手』的。而本身，TCP 的三次握手就是为了确保通讯双方能够稳定的建立连接并完成数据报文的请求与响应动作，至于为什么是三次握手而不是四次五次，这是一个哲学问题，这里就不做讨论了。第一步：客户端向服务端发送一份特殊的 TCP 报文，该报文并不包含应用层的数据，是一份特殊...
2020-04-02 11:02:59
68
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人