- 博客(78)
- 收藏
- 关注
RSS订阅原创 Vue中v-for为什么必须要key？为什么不能用index作为key？
首先要知道Vue以及React都使用了虚拟DOM，使我们可以不直接操作DOM元素，只操作数据便可以重新渲染页面。而他们都是通过diff算法来对比虚拟DOM前后的变化，从而更新节点。在交叉对比中，当新节点跟旧节点头尾交叉对比没有结果时，会根据新节点的key去对比旧节点数组中的key，从而找到相应旧节点（这里对应的是一个key => index 的map映射）。如果没找到就认为是一个新增节点。而如果没有key，那么就会采用遍历查找的方式去找到对应的旧节点。一种一个map映射，另一种是遍历查找。相比而言。.
2020-07-31 15:34:12
3369
原创 虚拟DOM和diff算法
虚拟DOM（Virtual dom），也就是我们常说的虚拟节点，它是通过JS的Object对象模拟DOM中的节点，然后再通过特定的render方法将其渲染成真实的DOM的节点。为什么要使用虚拟DOM呢，因为操作真实DOM的耗费的性能代价太高，频繁的操作DOM，会大量的造成页面的重绘和回流，出于性能优化的考虑，我们应该减少重绘和回流的操作。对虚拟节点的DOM操作，并不会触发重绘和回流，把处理后的虚拟节点映射到真实DOM上，只触发一次重绘和回流。我们都知道Vue是基于数据驱动的，数据变化之后，不会像jQue
2020-07-30 15:41:56
205
原创 require和import的区别
node编程中最重要的思想就是模块化，import和require都是被模块化所使用。遵循规范require 是 AMD规范引入方式import是es6的一个语法标准，如果要兼容浏览器的话必须转化成es5的语法调用时间require是运行时调用，所以require理论上可以运用在代码的任何地方import是编译时调用，所以必须放在文件开头本质require是赋值过程，其实require的结果就是对象、数字、字符串、函数等，再把require的结果赋值给某个变量import是解构过程，但是目
2020-07-30 14:31:19
416
原创 vue中通过v-for获取img src的问题
一开始我写法错误，想当然的认为应该是这样写：{ id:'1', src:'../assets/123.jpg') }但这样写我发现图片死活加载不出来，但是在网页调试中又看到路径是正确的，很疑惑。然后我就上网查原因，发现是src写法不正确，应该是下面这样写：{ id:'1', src:require("../assets/123.jpg") }...
2020-07-22 10:55:38
781
原创 前端命名规范（待完善）
项目命名全小写，用_隔开例： my_project_name文件命名小写开头、驼峰命名例：apiUtil.html目录命名全小写CSS命名1.位置属性(position, top, right, z-index, display, float等)2.大小(width, height, padding, margin)3.文字系列(font, line-height, letter-spacing, color- text-align等)4.背景(background..
2020-07-16 15:38:43
156
原创 Vue项目报错：Uncaught SyntaxError: Unexpected token ＜
这个是我在index.html中引入一些JS库文件时产生的错误，当时我的JS文件放在了src目录下，后面查阅相关资料发现，Vue引入静态文件时，不能放在src目录下，需要放在与之同级的目录下，例如static，因为src目录下的资源只能import或require。...
2020-07-15 16:22:37
2892
原创 VUE项目中引入JS文件的几种方法
在开发Vue项目的时候，有时需要使用一些非ES6格式的没有export的js库，可以有如下方法实现:1.在index.html页面使用script标签引入当然也可以使用cdn的地址。这样引入后的内容是全局的，可以在所有地方使用。<!DOCTYPE html> <html> <head> <title>Map</title> <meta charset="utf-8"> <meta
2020-07-15 15:15:14
66483
3
原创 一些好用的插件
主题插件Atom One Dark Theme好看的主题Atom One Light Theme护眼主题通用插件Bookmarks代码标记，方便查找指令：shift + cmd + kBracket Pair Colorizer 2相邻括号颜色不同，方便查找代码作用域范围，可以与任何主题使用Code Runner代码运行，支持大部分语言Code Spell Checker单词拼写提醒，错误单词纠正Debugger for Chrome调试必备Git Historygit提
2020-07-08 16:01:31
166
1
原创 Router-Link详解
<router-link>组件支持用户在具有路由功能的应用中点击导航。通过to属性指定目标地址，默认渲染为带有正确连接的<a>标签，可以通过配置tag属性生成别的标签。另外，当目标路由成功激活时，链接元素自动设置一个表示激活的css类名组件的属性有：to 、replace、 append、 tag、 active-class、 exact 、 event、 exact-active-class1、to（必选参数）：类型string/location表示目标路由的链接，该
2020-07-08 15:06:48
55175
3
原创 Sass在Vue项目中的使用
简介Sass 是一个 CSS 预处理器。Sass 是 CSS 扩展语言，可以帮助我们减少 CSS 重复的代码，节省开发时间。Sass 完全兼容所有版本的 CSS。Sass 扩展了 CSS3，增加了规则、变量、混入、选择器、继承、内置函数等等特性。Sass 生成良好格式化的 CSS 代码，易于组织和维护。Sass 文件后缀为 .scss。安装1. 安装依赖包vue的webpack项目中需要安装上node-sass、sass-loader和style-loadernpm install --
2020-07-08 14:17:54
552
原创 四种常见的登录方案
1.Cookie + Session 登录HTTP 是一种无状态的协议，客户端每次发送请求时，首先要和服务器端建立一个连接，在请求完成后又会断开这个连接。这种方式可以节省传输时占用的连接资源，但同时也存在一个问题：每次请求都是独立的，服务器端无法判断本次请求和上一次请求是否来自同一个用户，进而也就无法判断用户的登录状态。为了解决 HTTP 无状态的问题，Lou Montulli 在 1994 年的时候，推出了 Cookie。Cookie 是服务器端发送给客户端的一段特殊信息，这些信息以文本的方式存放在
2020-07-08 10:22:33
7369
1
原创 Java栈的基本操作
创建Stack<Integer> stack = new Stack<>(); 进栈stack.push(Object);//返回的是入栈的内容stack.add(Object);//返回的是true或false出栈stack.pop();//输出并删除栈顶元素stack.peek();//输出不删除栈顶元素判断栈是否为空stack.isEmpty(...
2020-04-04 16:41:18
332
原创 为什么H5中只需要规定doctype
html5不基于SGML（标准通用置标语言）,因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照他们应该的方式来运行）而HTML4.01基于SGML，所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。...
2019-02-24 15:55:55
499
原创 JS——合并两个有序数组
LEETCODE 88. 合并两个有序数组题目：给定两个有序整数数组 nums1 和 nums2，将 nums2 合并到 nums1 中，使得 num1 成为一个有序数组。说明:初始化 nums1 和 nums2 的元素数量分别为 m 和 n。 你可以假设 nums1 有足够的空间（空间大小大于或等于 m + n）来保存 nums2 中的元素。示例:输入: nums1 = [1,2,...
2019-02-17 17:28:01
1106
原创 懒加载
1.懒加载概念对于页面有很多静态资源的情况下（比如网商购物页面），为了节省用户流量和提高页面性能，可以在用户浏览到当前资源的时候，再对资源进行请求和加载。2.懒加载实现原理2.1监听onscroll事件判断资源位置首先为所有懒加载的静态资源添加自定义属性字段，比如如果是图片，可以指定data-src为真实的图片地址，src指向loading的图片。然后当资源进入视口的时候，将src属性值...
2019-02-16 19:10:36
97
原创 打乱数组
sort排序法（最简单）原理：利用sort用法：arr.sort(compareFunction)如果 compareFunction(a,b) 返回的值大于 0 ，则 b 在 a 的前边；如果 compareFunction(a,b) 返回的值等于 0 ，则a 、b 位置保持不变；如果 compareFunction(a,b) 返回的值小于 0 ，则 a 在 b 的前边。let...
2019-02-16 17:37:20
129
原创 移动端字体适配小结
rem首先，rem是相对根元素html字号的相对单位，一般默认字号是16px，那么1rem=16px1.先设置header里面的meta标签：<meta name="viewport" content="initial-scale=1,maximum-scale=1, minimum-scale=1">2.用JS来计算适应用户屏幕的根元素字号<script type=...
2019-02-15 11:04:34
2292
原创 js中各种长度的含义
offsetWidth //返回元素的宽度（包括元素宽度、内边距和边框，不包括外边距）offsetHeight //返回元素的高度（包括元素高度、内边距和边框，不包括外边距）clientWidth //返回元素的宽度（包括元素宽度、内边距，不包括边框和外边距）clientHeight //返回元素的高度（包括元素高度、内边距，不包括边框和外边距...
2019-02-15 09:46:26
440
原创 从一个无序，不相等的数组中，选取N个数，使其和为M实现算法
function getCombBySum(array,sum,tolerance,targetCount){ var util = { /* get combination from array arr: target array num: combination item length return: one array that c...
2019-02-14 23:48:39
2195
原创 async/await执行顺序面试题
async function async1 () { console.log('async1 start') await async2(); console.log('async1 end')} async function async2 () { console.log('async2')} console.log('script start') setTimeo...
2019-02-14 23:35:43
2550
5
原创 轮询、长轮询、长连接、WebSocket即时通讯的区别
1.轮询客户端定时向服务器发送请求，服务器接到请求后马上返回响应信息并关闭连接。优点：后端程序编写比较容易。缺点：请求中有大半是无用，浪费带宽和服务器资源。这种方式由于需要不断的建立http连接，严重浪费了服务器端和客户端的资源。实例：短轮询不适用于那些同时在线用户数量比较大，并且很注重性能的Web应用。适于小型应用。2.长轮询客户端向服务器发送请求，服务器接到请求后hold住连接，直...
2019-02-14 15:25:41
1881
1
原创 JS中的类型判断问题
if([]==false){console.log(1)};if({}==false){console.log(2)};if([]){console.log(3)}if([1]==[1]){console.log(4)}答：1 3== 是非严格比较操作符，false会转换为0，[]会转换成’’，{}会转换为"[object Object]"，空数组和0的值都是false，所以会输出1，...
2019-01-31 15:58:13
138
原创 引用网络图片，响应403的解决方法
在html的head标签中加上：<meta name="referrer" content="no-referrer" /> <!--可以让img标签预加载网络图片-->
2019-01-31 11:33:25
1078
原创 【Angular学习】(六)依赖注入
概念维基百科：在软件工程中，依赖注入是种实现控制反转用于解决依赖性设计模式。一个依赖关系指的是可被利用的一种对象（即服务提供端） 。依赖注入是将所依赖的传递给将使用的从属对象（即客户端）。该服务是将会变成客户端的状态的一部分。 传递服务给客户端，而非允许客户端来建立或寻找服务，是本设计模式的基本要求。示例介绍例如要构建一个汽车，出于简单考虑，只考虑三个部分：车身、车门和引擎。1.定义车身...
2019-01-29 10:28:15
338
原创 setTimeout()比setInterval()稳定的原因
setInterval()的问题使用setInterval()的问题在于，定时器代码可能在代码再次被添加到队列之前还没有完成执行，结果导致定时器代码连续运行好几次，而之间没有任何停顿。而javascript引擎对这个问题的解决是：当使用setInterval()时，仅当没有该定时器的任何其他代码实例时，才将定时器代码添加到队列中。这确保了定时器代码加入到队列中的最小时间间隔为指定间隔但是，这样...
2019-01-21 10:31:13
733
原创 【Angular学习】(五)HTTPClient
@angular/common/http 中的 HttpClient 类为 Angular 应用程序提供了一个简化的 API 来实现 HTTP 客户端功能。它基于浏览器提供的 XMLHttpRequest 接口。使用方法导入导入 HttpClientModule 模块import { BrowserModule } from "@angular/platform-browser";imp...
2019-01-18 14:43:35
881
原创 【Angular学习】(四)路由
理解官方定义：在用户使用应用程序时，Angular 的路由器能让用户从一个视图导航到另一个视图。使用安装需要先安装angular routernpm i --save @angular/routerbase href然后我们需要将 <base> 标签添加到我们的 index.html 文件中的<head>标签里。路由需要根据这个来确定应用程序的根目录。&l...
2019-01-14 16:20:33
198
原创 【Angular学习】(三)生命周期钩子
理解Angular提供了生命周期钩子，把这些关键生命时刻暴露出来，赋予我们在它们发生时采取行动的能力。可以将钩子函数理解为在合适的时候做合适的事情。官方给出的解释是：每个组件都有一个被 Angular 管理的生命周期。Angular 创建它，渲染它，创建并渲染它的子组件，在它被绑定的属性发生变化时检查它，并在它从 DOM 中被移除前销毁它。Angular 提供了生命周期钩子，把这些关键生...
2019-01-11 17:12:14
297
原创 【Angular学习】(二)指令
Angularjs通过指令来扩展HTML，指令带有前缀ng-。ng-app指令初始化一个 AngularJS 应用程序。ng-init指令初始化应用程序数据。这个指令一般较少使用。ng-model指令把元素数据值绑定到应用程序。&amp;amp;amp;amp;amp;lt;div ng-app=&amp;amp;amp;amp;quot;&amp;amp;amp;amp;quot; ng-init=&amp;a
2019-01-08 15:10:14
210
原创 【Angular学习】(一)项目环境
引入AngularJS是一个JavaScript框架，可以直接通过script引入&amp;amp;lt;script src=&amp;quot;https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js&amp;quot;&amp;amp;gt;&amp;amp;lt;/script&amp;amp;gt;通常放在&am
2019-01-02 17:14:52
125
原创 移动端适配之脚本的加载控制
我在写项目的时候，会把一些特效用script脚本加载进来，这样在网页上看起来就非常漂亮，但是放在移动端，不仅消耗性能，而且非常的丑。于是我经过学习，发现可以这样来控制是否加载script。拿我用的CDN上的蜂窝特效举例：<script src="canvas-nest.min.js" type="text/javascript"></script>这是一开始我的写...
2018-12-29 16:54:52
178
原创 记一次项目上线过程
以前嫌麻烦，自己写了很多小demo，却从未考虑过上线给其他人使用。后来有一个面试官告诉我，你身为开发，做出来的项目就是要给别人用的。于是后来我买了一个阿里云的学生服务器，也很便宜，一个月9.5。然后为我的博客买了一个域名，开始了学习上线之路。1.首先记得要把前端项目里面的baseURL加入线上环境的URL，这个操作可以用webpack提供的功能实现比如我的：const baseUrl = p...
2018-12-28 16:36:33
226
原创 如何在Vue项目中实现吸顶元素
我的思路就是判断合适的时候将这个元素的position设为fixed，那么这个合适的时机如何判断呢？我们可以计算页面滚动的距离。监听页面滚动状态在mounted回调中加入以下代码：mounted() { // handleScroll为页面滚动的监听回调 window.addEventListener('scroll', this.handleScroll); },在destr...
2018-12-26 15:13:00
2593
原创 图的最短路径-Dijkstra算法和Floyd算法
Dijkstra算法单源点最短路径问题Dijkstra算法主要用来解决单源点最短路径问题。给定带权有向图G=（V,E)，其中每条边的权是非负数。另外，还给定V中的一个顶点，称为源。现在要计算从源到所有其他各顶点的最短路径长度，这里路径的长度是指路径上各边权之和。这个问题通常称为单源最短路径问题（Single-Source Shortest Paths)。应用实例——计算机网络传输：怎样找到...
2018-12-26 15:02:00
733
原创 图的BFS和DFS算法
图图是一种灵活的数据结构，一般作为一种模型用来定义对象之间的关系或联系。对象由顶点（V）表示，而对象之间的关系或者关联则通过图的边（E）来表示。图可以分为有向图和无向图，一般用G=(V,E)来表示图。经常用邻接矩阵或者邻接表来描述一副图。在图的基本算法中，最初需要接触的就是图的遍历算法，根据访问节点的顺序，可分为广度优先搜索（BFS）和深度优先搜索（DFS）。下文都是对该例图进行操作：...
2018-12-26 11:25:54
302
原创 基于Vue.js+Koa+MySQL开发的个人博客
我的博客一直以来都想自己做一些个人项目, 于是想到了先做一个博客项目练练手。在GitHub上找了很多大神的开源博客项目来学习，慢慢的自己也完成了一个简单版本的博客，并部署上线。目前项目已经全部部署到服务器，但域名还在备案，因此只能先通过IP地址访问。线上地址前端项目后端项目因为我做的这个项目功能并不复杂，所以非常适合大家用来练手哦，如果觉得有帮助欢迎给个star，感谢！设计参照了h...
2018-12-23 00:49:41
1219
原创 TypeScript总结
TypeScript主要是为了解决JavaScript的弱类型和没有命名空间的特点。JS作为弱类型语言，好处就是编译的时候更简洁更灵活，但对于大型项目，强类型更有利，可以降低系统的复杂度，在编译时就发现类型错误。在语法上，TypeScript并没有摒弃JS语法，而是做成了JS的超集，因此任何JS语句在TypeScript下都是合法的。安装通过npm安装npm install -g type...
2018-12-18 10:39:35
1407
原创 浏览器内核总结
TridentMicrosoft公司浏览器内核，IE6、IE7、IE8（Trident 4.0）、IE9（Trident 5.0）、IE10（Trident 6.0）及许多品牌浏览器的内核。其中部分浏览器的新版本是“双核”甚至是“多核”，其中一个内核是Trident，然后再增加一个其他内核。GeckoFirefox内核，Netscape6开始采用的内核，后来的Mozilla FireFox(...
2018-12-15 01:05:37
103
原创 vue的生命周期
就是vue实例从创建到销毁的过程。创建前/后：beforeCreated：此时vue实例还没有挂载元素$ el，data也是undefinedcreated：vue实例的data有了，但是$ el没有。载入前/后：beforeMount：vue实例的$el和data都初始化了，但是还挂载在之前的虚拟DOM节点上，data.message还未替换。mounted：vue实例挂载完成，da...
2018-12-13 18:55:43
204
1
原创 vuex的使用详解
在SPA单页面组件的开发中 Vue的vuex和React的Redux 都统称为同一状态管理。简单的理解就是你在state中定义了一个数据之后，你可以在所在项目中的任何一个组件里进行获取、进行修改，并且你的修改可以得到全局的响应变更。vuex的五个对象state：存储状态。也就是变量；定义new Vuex.Store({ state: { allProducts: [...
2018-12-13 18:39:51
190
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人