The_upside_of_down-CSDN博客

原创 Vue学习笔记之vue-router路由懒加载

现如今，前端项目中SPA已成为主流。但是单页应用在vue项目启动时会出现短暂的空白，也就是vue项目存在首次加载缓慢的问题。懒加载懒加载也叫延迟加载，即在需要的时候进行加载，随时用，随时加载。为什么会出现懒加载？像vue这种单页应用，如果没有应用懒加载，运用webpack打包后的文件将会异常的大，造成进入首页时，需要加载的很多内容，由于加载时间过长，就会出现短暂的空白即白屏，即使是...

2019-11-22 21:07:37 264

原创 Vue学习笔记——Vue-router

现如今，单页面应用（SPA）已经成为前端应用的主流形式。在大型单页应用中最显著的一个特点之一就是采用前端路由系统，通过改变URL，在不重新请求页面的情况下，更新页面视图。“更新页面视图但不请求页面”是目前前端路由原理的核心之一，目前在浏览器环境中这一功能的实现主要有两种方式：利用URL中的hash（‘#’）利用history interface 在HTML5中新增的方法模式参数在...

2019-11-22 20:53:29 179

原创 JavaScript学习笔记之面向程序设计（OOP）

一、基于原型的继承function Person(name,age){ this.name = name; this.age = age; } Person.prototype.hi = function () { console.log('Hi,my name is'+this.name+",I am "+this.age+"years...

2019-11-22 18:52:40 157

原创 CSS学习笔记之布局

一、什么是布局？简单来说就是HTML页面的整体结构或骨架，类似于传统报纸或杂志中的排版。布局不是某个技术内容，而是一种设计思想。二、什么是居中布局？一个元素在页面中呈现居中效果，分为水平居中、垂直居中、水平垂重居中。水平居中布局。 // div结构<div class = "parent"> <div class = "child">css布...

2019-11-22 16:07:08 205

原创 JavaScript学习笔记之函数概述

一、函数调用方法直接调用：foo(); 对象方法：o.method(); 构造器：new Foo(); call/apply/bind：func.call(o);二、创建函数的方式函数声明 function add(a,b){ //内容} 函数表达式 var add = function(a,b){} //赋值函数表达式(function(){...

2019-11-21 22:10:51 138

原创 JavaScript学习笔记之数据类型

一、基本数据类型number string boolean null undefined二、复杂数据类型object 其中object包含了function、date、array等三、隐式转换通常情况下‘+’起到拼接作用，‘-’号起到转换为数值的作用。巧用+/-规则转换类型。例如：num-0转换为数值，num+''转换为字符串类型。等于和严格等于。四、包装对象...

2019-11-21 12:43:19 127

原创 Electron学习笔记及实战

一、什么是Electron？使用js、html和css构建跨平台的桌面应用基于Chromium浏览器和Node.js 开源项目跨平台：生成兼容Mac、Windows和Linux二、谁在使用？Visual Studio Code GitHub Desktop 等三、通过Electron能学到什么？夯实前端开发基础-HTML，JS,CSS 深入浅出Node.js 深入...

2019-11-20 19:14:54 402

JS中需要通过document.querySelector("#demo")来获取dom节点，然后再获取这个节点的值。在vue中，我们不用获取dom节点，元素绑定ref之后，直接通过this.$refs即可调用，这样可以减少获取dom节点的消耗。ref介绍：ref被用来给元素或者子组件注册引用信息。引用信息将会注册在父组件的$refs对象上。如果在普通的DOM元素上使用，引用指向就是DOM元素...

2019-11-19 11:18:11 844

原创 Sass学习笔记

一、sass是什么？传统的css是一种单纯的描述性样式文件，没有变量，也没有条件语句。在开发过程中，难免有些麻烦，因此有了CSS预处理器，Scss便是其中之一。二、基本用法。【1】定义变量sass允许使用变量，所有变量以$开头。$blue: #ddd;div { color: $blue;}如果变量需要镶嵌在字符串之中，就必须要写在#{}之中。$side...

2019-11-18 23:03:17 128

原创 forEach循环里头使用splice()遇到的坑

1、循环arr数组，将item为1的元素从数组中删除。let arr = [1,1,2];arr.forEach((item,index,arr) =>{ if(item == 1 ) { arr.splice(index,1)}})console.log(arr); //[1,2]2、结果：循环之后打印[1,2]，还有一个1无法删除。3、原因分析： ...

2019-11-18 22:45:03 1115

原创 JS事件代理（事件委托）

基本概念事件代理，又称之为事件委托。是js中常用绑定事件的常用技巧。顾名思义：“事件代理”就是把原本需要绑定在子元素的响应事件（click、keydown.....）委托给父元素，让父元素担当事件监听的职务。事件代理的原理就是DOM元素的事件冒泡。举个例子：比如一个宿舍的同学快递同时到了，一种方法就是一个一个去取，还有一种方法就是把这件事情委托给宿舍长，让一个人去拿所有的快递，然后再根...

2019-11-18 22:28:48 367

原创 vue中v-for和v-if优先级

v-for和v-if同时使用，有一个先后运行的优先级，v-for比v-if优先级更高，这就说明在v-for每次的循环赋值中每一次调用v-if的判断，所以不推荐v-if和v-for在同一个标签中同时使用。解决方法：1、ul和li搭配使用，或者是渲染父级标签下的子标签。<ul v-if = "state"> <li v-for = "(item,id) in list"...

2019-11-18 21:34:51 878

转载 JS错误处理机制-try、catch、finally和throw

一、JS遇到错误当js引擎执行js程序时，会发生各种错误。1、可能是语法错误，通常是程序员造成的编码错误或者错别字。2、可能是拼写错误或语言中缺少的功能（可能由于浏览器的差异）。3、可能是由于来自服务器或用户的错误输出而导致的错误。4、可能是由于许多其他不可预知的因素。二、JS抛出错误当错误发生时，当事情出问题时，js引擎通常会停止执行，并抛出一个错误消息。使用th...

2019-11-18 21:11:10 693

原创 Vue.proxyTable是什么？

在vue项目中的config文件夹下的index文件中有一个proxyTable节点。proxyTable是vue-cli脚手架在开发模式下，为我们提供的一个跨域的代理中转服务器服务。它是基于http-proxy-middleware插件的。为什么会有proxyTable存在？在我开发我的毕业设计：一个基于vue+springboot的手机交易网站的时。因为我采用前后端分离，前端用...

2019-11-18 20:06:57 1338

原创 FOO和Foo.getName

function Foo(){ getName = function() { console.log(1); }; return this; } Foo.getName = function () { console.log(2); }; Foo.prototype.getNa...

2019-11-15 11:17:08 384

原创输入一个数组若满足a[i]+a[j]=a[k]，返回true。

function search(arr) { for(var i = 0; i < arr.length; i++){ var left = arr[i]; for(var j = i+1; j < arr.length; j++){ var right = arr[j]; ...

2019-11-14 22:47:19 501

原创 cookie和session的区别

cookie机制、session机制cookie机制采用的是在客户端保持状态的方案，而session机制采用的是在服务器端保持状态的方案。1、cookie数据存放在客户的浏览器上，session数据放在服务器上。2、cookie不是很安全，别人可以分析存放在本地的cookie并进行cookie欺骗，考虑到安全隐患应当使用session。3、session会在一定时间内保存在服务器上...

2019-11-14 22:28:31 100

原创 fetch源码分析学习笔记

// 一些功能的检测var support = { searchParams: 'URLSearchParams' in self, //queryString处理函数 iterable: 'Symbol' in self && 'iterator' in Symbol, blob: 'FileReader' in self &&...

2019-11-12 19:26:33 559 1

原创 "npm run dev" 和 "npm run build"的区别

关于"npm run dev"和"npm run build"的区别├─build│ ├─build.js│ ├─check-versions.js│ ├─dev-client.js│ ├─dev-server.js│ ├─utils.js│ ├─vue-loader.conf.js│ ├─webpack.base.conf.js│ ├─web...

2019-11-04 22:26:03 7355

原创 JS中为什么要减少DOM操作？

曾经比较流行的jquery框架主要优点之一：出色的DOM操作的封装。但是，目前流行的框架中基本上都摒弃了DOM操作的方法。主要原因大致上都是在说要减少dom层的操作，原因是因为dom操作慢。那么dom操作为什么慢？这就要提及浏览器渲染页面，浏览器分为：渲染引擎和js引擎。渲染引擎工作： 1、解析HTML代码，生产DOM tree。 2、解析CSS...

2019-11-04 21:13:15 786

原创 ES6新特性

如上图所示，ES6体系目前涵盖了ES2015、ES2016、ES2017、ES2018、ES2019。另需注意的是ES6更新的内容主要分为以下几点：1、表达式：声明、解构赋值；2、内置对象：字符串扩展、数值扩展、对象扩展、数组扩展、函数扩展、正则扩展、Symbol、Set、Map、Proxy、Reflect；3、语句与运算：Class、Module、Iterator；4、异...

2019-11-04 20:46:16 239

原创 var、const和let的区别

var和let/const区别：1、块级作用域。2、不存在变量提升。3、暂时性死区。4、不可重复声明。5、let、const声明的全局变量不会挂载顶层对象下面。const命令需要注意两个注意点：1、const声明之后必须马上赋值，否则会报错。2、const简单类型一旦声明就不能再更改，复杂类型（数组，对象等）指针指向的地址不能更改，内部数据可以更改。块级作用域：...

2019-10-18 16:14:40 220

原创解析查询字符串参数

// 解析查询字符串参数 function getQueryStringArgs() { //取得查询字符串并去掉开头的问号 var qs = (location.search.length > 0 ?location.search.substring(1): " "), //保存数据的对象 args ...

2019-10-17 22:37:55 324

原创闭包与变量

作用域链的这种配置机制引出了一个值得注意的副作用，即闭包只能取得包含函数中任何变量的最后一个值。闭包所保存的是整个变量对象，而不是某个特殊的变量。function createFunctions() { var result = new Array(); for(var i = 0; i<10; i++){ result[i] = fu...

2019-10-17 21:59:35 194

原创创建对象

虽然Object构造函数或对象字面量都可以用来创建单个对象，但是这些方式有明显的缺点：使用同一个接口创建很多对象，会产生大量的重复代码。工厂模式工厂模式抽象了创建具体对象的过程，因js中无法创建类，因此用函数来封装以特定接口创建对象的细节。 // 工厂模式 function createPerson(name,age,job){ var o = new ...

2019-10-17 17:05:41 170

原创变量、作用域和内存问题

基本类型：boolean、null、undefined、number、string。基本类型指的是简单的数据段。可操作保存在变量中的实际的值。引用类型：array。指哪些可能由多个值构成的对象。引用类型的值是保存在内存中的对象。而js不允许直接访问内存中的位置，也就是说不能直接操作对象的内存空间。在操作对象时，实...

2019-10-16 21:10:01 153

原创二进制中1的个数

实现一个函数，输入一个整数，输出该数的二进制表示1的个数。例如9的二进制数位1001，则1的个数为2。因为js中有一个toString()属性可以将十进制转换为任意进制的数，因此我们使用toString(2)将整数转换为二进制数。代码实现如下：function str(n){ var m = n.toString(2); var count = 0; ...

2019-09-10 23:48:12 156

原创求1~n中1的个数

输入一个整数，求1~n这n个数的十进制表示1的个数。将n的十进制的每一位单独拿出讨论，每一位的值记为weight。1、个位假若n=534。534的个位从0~9变化了53次，这53我们记为round。因为weight为4>0。因此第54轮为0~4，因此1出现了count=round+1。若weight为0，则出现count=round。2、十位与个位类似，但不同点在于从...

2019-09-10 23:25:18 498

原创求一个数组的连续子数组的最大和

输入一个整型数组，数组中有正有负。数组中的一个或多个整数组成一个子数组。求所有子数组的和的最大值，要求时间复杂度为O(n)。首先，根据题意，可能我们都会想到枚举数组中所有的子数组的和。我们都知道一个长度为n的数组，总共有n(n+1)/2个子数组。计算出所有子数组的和需要O(n^2)时间。我们先来举例分析下数组的规律，给出一个数组{1,-2,3,10，-4,7,2，-5}。步骤操...

2019-09-10 22:00:37 423

原创 CSS学习笔记——定位

刚入门CSS时，对于定位的几个属性很迷。今天得空学习之后，写写心得。定位常用于布局，利用定位可以将元素精确的摆放到任何位置。定位的属性：static、relative、absolute和fixed。1、static是默认值，存在于正常流之中，不能使用便宜属性（top、right、bottom、left）；2、相对定位：relative。与静态定位（static）一样，不会脱离正常流，也...

2019-09-10 17:58:34 913

原创实现页面加载进度条

2019-09-09 13:23:27 1333

原创图片懒加载、预加载

一、什么是懒加载？懒加载突出一个“懒”字，就是延迟的意思，所以懒加载说白了就是延迟加载的意思。二、为什么要懒加载？懒加载是一种网页性能优化的方式，它能极大的提升用户体验。就比如说图片，图片是一直影响网页性能的元凶。如果每次进入页面就请求所有的图片资源，那么有可能等图片加载完，用户早已经走了。所以，我们需要懒加载，进入页面的时候，只请求可视区域的图片资源。三、懒加载实现的原理由于...

2019-09-09 12:45:03 337

原创 HTTP学习笔记

一、HTTP协议HTTP协议有3个特征：持久连接、管道化以及无状态。持久连接：在HTTP的早期版本中，一次HTTP通信完成后就会断开连接，下一次再重新建立连接。在请求资源不多的情况下时，并不会有什么影响。但随着HTTP的普及，请求的资源会越来越大，例如一个HTML文件中可能会包含多个CSS文件、JS文件等。如果还是这样操作，势必会造成巨大的通信开销。因此，在HTTP1.1版本中提出了持久连...

2019-09-09 00:26:00 173

原创 CSS单位

CSS中单位很多，%、px、em、rem，以及比较新的vw，vh等。每个单位都有特定的用途。CSS布局时PC端和移动端会有差异，此时我们就会想到怎样让其兼容，就要讲到页面适配。页面适配：指的是同样的布局，在不同大小的屏幕上怎么进行缩放、控制间距、宽高、字号等大小。页面适配的方式：使用px，结合Media Query进行阶梯式的适配；使用%，按百分比自适应布局；使用rem，结合h...

2019-09-05 14:48:24 145

原创 input 的type属性

input元素可根据type属性的值分为文本、日期、数值和按钮等。文本关键字关键字功能 hidden 隐藏元素，可存储不让用户看见和编辑的数据 text 只能输入单行文本，并且文本中的换行符会自动消除 tel 可输入电话号码格式的文本，但与Email和url类型不同，不会强制执行特定的验证机制。 password 遮盖单行文本，一般用于密码输...

2019-09-05 13:15:26 315

原创 defer VS async

浏览器输入url到页面呈现的过程中，在浏览器层面，浏览器首先要加载资源，这里包括css资源，js资源，这些资源是附属于在html上面的。浏览器首先要形成DOM树，然后加载css资源与对应的样式，解析后一起合成Render Tree。如果过多的javascript资源加载浏览器需要解析及执行js，同时对Dom进行调整势必会阻塞dom的渲染，因此建议在body的末尾加载javascript。jav...

2019-09-05 12:11:18 181

转载 Flex布局

Flex布局十分灵活，只要学会基本的几个css属性，基本上就可以写出简洁优雅复杂的页面布局。Flex布局基本概念在flex容器中默认存在两条轴，水平主轴（main axis）和垂直的交叉轴（cross axis）。在容器中的每个单元块称之为flex item，每个项目占据的主轴空间为（main size），占据的交叉轴空间为（cross size）。需要注意的是：不能先入为主认为宽...

2019-09-05 11:42:34 151

原创浅谈CSS中display中常用的三属性

display中常用的三属性有：block、inline以及inline-block。 display：block 1、block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。 2、block元素可以设置width，height属性。块级元素即使设置了宽度，仍然是独占一行。...

2019-09-03 21:03:40 555

原创 CSS学习笔记——margin

一、margin入门css时，大部分人都是从css盒模型中的各个属性开始学习的。盒模型属性中有一margin元素。margin：盒子周围的透明区域，它会将其他元素从盒子内容中推开。CSS1中规范了margin的四种属性：margin-top、margin-right、margin-bottom、margin-left。二、margin重叠CSS1规范了定义了margin以及垂直ma...

2019-09-03 15:32:26 326

原创 CSS3学习笔记——过渡

一、CSS3过渡CSS3的过渡功能像是一种黄油，通过一些CSS的简单动作触发样式平滑过渡。W3C标准中描述的transition功能很简单：CSS3的transition允许CSS的属性值在一定时间区间内平滑过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并平滑地以动画效果改变css的属性值。二、如何创建简单的过渡在以往WEB中的动画都是依赖于JavaScri...

2019-09-01 19:35:38 223

空空如也

空空如也