- 博客(249)
- 收藏
- 关注
RSS订阅原创 RIPv1和RIPv2的区别和相同点
协议RIPv1RIPv2网络层次应用层（基于UDP520端口）应用层（基于UDP520端口）路由算法Bellman算法Bellman算法路由类型有类（不支持VLSM和CIDR）无类（支持VLSM和CIDR）管理距离120120度量值跳数跳数更新方式广播更新（255.255.255.255）组播更新（224.0.0.9）...
2019-10-28 16:08:39
4117
原创 转义字符
转义字符含义\0空格\'单引号\"双引号\\反斜杠\n换行\r回车\v垂直制表符\t水平制表符\b退格\f换页\uXXXXunicode码\u{X} ... \u{XXXXXX}unicode码...
2019-10-24 01:11:06
474
原创 onload、DOMContentLoaded、$(document).ready(fn)、$(document).load(fn)
特性onloadDOMContentLoaded$(document).ready(fn)$(document).load(fn)执行时机页面全部加载完才会执行DOM结构加载完毕就能执行DOM结构加载完毕就能执行页面全部加载完才会执行简写无无$(fn)或$().ready(fn)无执行次数可以使用addEventListener定义多个函数...
2019-10-04 18:30:17
380
1
原创 HTTP首部
通用字段作用Cache-Control控制缓存的行为Connection浏览器想要优先使用的连接类型，比如 keep-aliveDate创建报文时间Pragma报文指令Via代理服务器相关信息Transfer-Encoding传输编码方式Upgrade要求客户端升级协议Warning在内容中可能存在错误请求...
2019-10-03 12:36:12
160
原创 JS类型转换
首先我们要知道，在JS中类型转换只有三种情况，分别是：转换为布尔值转换为数字转换为字符串原始值转换目标结果null、undefined布尔值falsestring布尔值除了空串''其他都转为truenumber布尔值除了NaN、-0、0其他都转为truesymbol布尔值true引用数据类型布尔值truenull、...
2019-09-23 15:29:16
106
原创 JavaScript 详说事件流（冒泡、捕获、传播、委托）
事件流事件流描述的是从页面中接收事件的顺序。标准DOM事件流存在三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。事件捕获：当触发事件时，浏览器会从根节点开始由外到内进行事件传播，即点击了子元素，如果父元素也绑定了对应事件的话，会先触发父元素绑定的事件。事件冒泡：与事件捕获恰恰相反，事件冒泡的顺序是由内到外进行事件传播，直到根节点。无论是事件捕获还是事件冒泡，它们都有一个共同的行为，就...
2019-09-11 16:26:24
200
原创 MVC和MVVM
MVCMVC是Model View Controller的缩写。从名字可以看出它由三部分组成：Model、View和Controller。Model代表业务逻辑模型（并非数据模型）。View是视图，用来显示用户交互界面。Controller是控制器，用来调节Modle和View的交互。在MVC中，Controller和其他部分之间的通信都是双向的。而View和Model之间没有任何通...
2019-09-06 01:20:51
100
转载 并发和并行区别秒懂
你吃饭吃到一半，电话来了，你一直到吃完了以后才去接，这就说明你不支持并发也不支持并行。你吃饭吃到一半，电话来了，你停了下来接了电话，接完后继续吃饭，这说明你支持并发。 （不一定是同时的）你吃饭吃到一半，电话来了，你一边打电话一边吃饭，这说明你支持并行。并发的关键是你有处理多个任务的能力，不一定要同时。并行的关键是你有同时处理多个任务的能力。 所以我认为它们最关键的点就是：是否是『同...
2019-09-03 23:20:51
298
原创 数组常用方法
Array.from(arrayLike[, mapFun[, thisArg]]) 方法从一个类似数组或可迭代对象中创建一个新的，浅拷贝的数组实例。Array.from('foo') // ["f", "o", "o"]Array.from([1, 2, 3], x => x + x) // [2, 4, 6]Array.isArray(obj) 用于确定传递的值是否是一个 Arr...
2019-09-03 20:03:13
164
原创 Scss基本用法
变量sass使用$符号来标识变量。变量有作用域，外部不能引用内部变量。在声明变量时可以引用其他变量。变量名可以与CSS中的属性名和选择器名称相同，推荐使用中划线分隔。$border-width: 1px;$border: $width solid black;div { border: $border;}//编译后div { border: 1px solid blac...
2019-09-02 15:22:49
1006
转载 网格布局grid
Grid 布局则是将容器划分成"行"和"列"，产生单元格，然后指定"项目所在"的单元格，可以看作是二维布局。基本概念采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项目"（item）。容器里面的水平区域称为"行"（row），垂直区域称为"列"（column）。行和列的交叉区域，称为"单元格"（cell）。正常情况下，n行和m列会产生n x m个...
2019-08-30 02:06:37
287
原创 CSS3新增了哪些特性
边框:border-radius：为元素添加圆角边框，border-radius 属性是一个简写属性，用于设置四个 border-*-radius 属性；border-radius: 10px;/* 等价于 */border-top-left-radius: 10px;border-top-right-radius: 10px;border-bottom-right-radius: 1...
2019-08-28 02:02:03
2648
原创 多媒体查询@media
定义使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。@media not|only mediatype and (expressions) { /* CSS代码写在这里 */}/* 示例 *//* only去掉效果一样 */@media only screen and (max-width:...
2019-08-27 01:34:35
1422
原创 正则表达式
//语法一let reg = new RegExp("正则表达式", "匹配模式");//语法二let reg = /正则表达式/匹配模式;匹配模式含义g全局匹配模式i忽略大小写m允许多行匹配元字符含义\d匹配数字\D匹配任意非数字的字符\s匹配空格\S匹配任意非空格的字符\w匹配字母或数字...
2019-08-26 21:15:17
127
原创 页面导入样式时，使用link和@import有什么区别？
用法区别：<!-- link用法 --><head> <link rel="stylesheet" href=""></head><!-- @import用法一 --><head> <style type="text/css"> @import url(); </style>&l...
2019-08-26 15:54:04
149
转载 vue中的render函数介绍
render函数是什么简单的说，在 vue 中我们使用模板HTML语法组建页面的，使用 render 函数我们可以用js语言来构建DOM。因为vue是虚拟DOM，所以在拿到template模板时也要转译成VNode的函数，而用render函数构建DOM，vue就免去了转译的过程。当使用render函数描述虚拟DOM时，vue提供一个函数，这个函数是就构建虚拟DOM所需要的工具。官网上给他起了...
2019-08-26 12:47:11
231
原创 vue中的VNode
VueJS的虚拟DOM是基于开源Snabbdom的。前端发展很多年，直到出现了虚拟DOM，才可以从操作DOM解脱出来。JQuery的出现，简化了操作DOM的过程，但是还是摆脱不了操作DOM。而虚拟DOM的目的是，使用虚拟节点代替真实节点，所有操作都发生在虚拟节点，然后通过diff算法对比新旧两棵虚拟DOM，计算出更新真实DOM的最少操作，由框架代替用户执行这些操作，所以用户可以把大量的精力放...
2019-08-26 12:34:15
10359
原创 HTTPS
HTTP协议存在两个主要的安全缺陷：数据明文传送不对数据进行完整性检测为了增强Web的安全性，HTTPS协议被提出，以解决HTTP协议中的安全性问题。
2019-08-22 22:00:27
115
原创 如何通过JS获取元素宽高
方法一：DOM节点.offsetWidth/offsetHeight作用：获取到的是内容区域（content） + 内边距（padding） + 边框（border）的值，输出一个数字。 <style type="text/css"> div{ width: 100px; height: 100px; ...
2019-08-22 03:19:31
1938
转载 ES6——Promise 对象
所谓Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。Promise对象有以下两个特点。对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfill...
2019-08-17 18:23:58
109
原创 try-catch语句
try-catch 语句，作为 JavaScript 中处理异常的一种标准方式。基本的语法如下所示：try{ // 可能会导致错误的代码} catch(error){ // 在错误发生时怎么处理} 如果 try 块中的任何代码发生了错误，就会立即退出代码执行过程，然后接着执行 catch 块。此时，catch 块会接收到一个包含错误信息的对象。即使你不想使用这个错误对象，也要给它...
2019-08-17 01:15:40
72943
2
转载 ES6——Generator 函数的语法
Generator 函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同。Generator 函数有多种理解角度。语法上，首先可以把它理解成，Generator 函数是一个状态机，封装了多个内部状态。执行 Generator 函数会返回一个遍历器对象，也就是说，Generator 函数除了状态机，还是一个遍历器对象生成函数。返回的遍历器对象，可以依次遍历 Generator ...
2019-08-16 21:55:07
142
原创 vue-cli3.0项目的安装、创建和启动
要安装vue-cli3.0，请使用以下命令之一：npm install -g @vue/cli# ORyarn global add @vue/cli您可以使用此命令检查您是否具有正确的版本（3.x）：vue --version要创建新项目，请运行：vue create hello-world系统将提示您选择预设。您可以选择基本Babel + ESLint设置附带的默认预设，...
2019-08-14 13:58:38
3580
转载 vuex直接修改state 与 用dispatch／commit来修改state的差异
使用 vuex 修改 state 时，有两种方式：可以直接使用 this.$store.state.变量 = xxx；this.$store.dispatch(actionType, payload) 或者this.$store.commit(commitType, payload)共同点：能够修改state里的变量，并且是响应式的（能触发视图更新）不同点：若将 vue 创建...
2019-08-14 01:12:49
1593
原创 vue组件间的通信
父组件向子组件传值1.父组件parent代码如下： <template> <div class="parent"> <h2>{{ msg }}</h2> <son psMsg="父传子的内容:叫爸爸"></son> <!-- 子组件绑定psMsg变量--> </div...
2019-08-12 16:08:22
72
转载 插槽slot
Vue 将 <slot>元素作为承载分发内容的出口。它允许你像这样合成组件：<navigation-link url="/profile"> Your Profile</navigation-link>然后你在 <navigation-link> 的模板中可能会写为：<a v-bind:href="url" class=...
2019-08-12 15:48:01
152
转载 一个axios的简单教程
axios是什么Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。axios作用axios主要是用于向后台发起请求的，还有在请求中做更多可控功能。从浏览器中创建 XMLHttpRequests从 node.js 创建 http 请求支持 Promise API拦截请求和响应转换请求数据和响应数据取消请求自动转换 JSON 数据客...
2019-08-12 12:37:34
175
转载 cookie、localStorage和sessionStorage区别
特性CookielocalStoragesessionStorage数据的生命期一般由服务器生成，可设置失效时间，如果在浏览器端生成Cookie，默认是关闭浏览器后失效除非被清除，否则永久保存仅在当前会话下有效，关闭页面或浏览器后被清除存放数据大小4K左右一般为5MB一般为5MB与服务器端通信每次都会携带在HTTP头中，如果使用cookie保存过多...
2019-08-12 12:12:51
108
转载 五分钟搞懂Vuex
vuex 是一个专门为vue.js应用程序开发的状态管理模式。这个状态我们可以理解为在data中的属性，需要共享给其他组件使用的部分。也就是说，是我们需要共享的data，使用vuex进行统一集中式的管理。vuex中，有默认的五种基本的对象：state：存储状态（变量）；getters：对数据获取之前的再次编译，可以理解为state的计算属性。我们在组件中使用$sotre.getters...
2019-08-11 23:53:38
112
转载 前端性能优化之缓存技术
缓存一直以来都是用来提高性能的一项必不可少的技术 ， 利用这项技术可以很好地提高web的性能。 缓存可以很有效地降低网络的时延，同时也会减少大量请求对于服务器的压力。 接下来这篇文章将会详细地介绍在web领域中缓存的一些知识点和应用。从HTTP协议开始说起由于整个网络服务都是基于http协议 的，因此先来介绍一下HTTP协议当中定义的缓存机制。HTTP协议主要是通过请求头当中的一些字段来和服务...
2019-08-11 16:55:25
220
转载 服务器端性能优化之CDN
什么是CDNCDN (Content Delivery Network) 可直译成内容分发网络。CDN的本质仍然是利用缓存技术缓存， 解决的是如何将数据快速可靠从源站传递到用户的问题。用户获取数据时，不需要直接从源站获取，通过CDN对于数据的分发，用户可以从一个较优的服务器获取数据，从而达到快速访问，并减少源站负载压力的目的。CDN部署静态内容：JavaScript脚本、CSS样式表、图片、图...
2019-08-11 15:37:21
230
转载 一分钟理解什么是REST和RESTful
从事web开发工作有一小段时间，REST风格的接口，这样的词汇总是出现在耳边，然后又没有完全的理解，您是不是有和我相同的疑问呢？那我们一起来一探究竟吧！就是用URL定位资源，用HTTP描述操作。知乎大神Ivony有句话说的好：URL定位资源，用HTTP动词（GET,POST,DELETE,DETC）描述操作。咱们不解释REST是哪几个单词的首字母，说了也不知道，翻译成中文就是表现层状态转移...
2019-08-11 15:24:49
161
转载 Babel下的ES6兼容性与规范
ES6标准发布后，前端人员也开发渐渐了解到了es6，但是由于兼容性的问题，仍然没有得到广泛的推广，不过业界也用了一些折中性的方案来解决兼容性和开发体系问题，但大家仍很疑惑，使用ES6会有哪些兼容性问题。兼容性问题现状针对ES6的新特性兼容性问题，目前解决的方案是使用语法解析转换工具将es6语法转化为大部分浏览器识别的es5语法，通用的转化方案有babel，traceur，jsx，typescr...
2019-08-11 14:52:54
782
转载 JS十大排序算法
冒泡排序function maopao(arr){ var length = arr.length, num; for(var i = 0; i < length; i++){ for(var j = 0; j < length - i - 1; j++){ if(arr[j] > arr[j + 1])...
2019-08-11 14:21:37
208
转载 Vue生命周期
每个Vue实例在被创建之前都要经过一系列的初始化过程，这个过程就是vue的生命周期。首先贴一张Vue文档给出的生命周期图示，并添加了一些注释：Vue2.0的生命周期钩子一共有10个，同样结合官方文档作出了下表：生命周期钩子详细beforeCreate在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。c...
2019-08-10 22:38:47
151
原创 JS实现继承的七种方法
原型链function Parent(){ this.age = 23; }Parent.prototype.getAge = function(){ return this.age; }; function Child(){ this.name = "xd"; } //继承了 Parent Child.prototype = new Parent(...
2019-08-10 16:02:47
149
转载 ES6——Class 的继承 笔记
Class 可以通过extends关键字实现继承，这比 ES5 的通过修改原型链实现继承，要清晰和方便很多。class ColorPoint extends Point { constructor(x, y, color) { super(x, y); // 调用父类的constructor(x, y) this.color = color; } toString(...
2019-08-10 03:46:29
109
转载 ES6——Class 笔记
通过class关键字，可以定义类。class Point { constructor(x, y) { this.x = x; this.y = y; } toString() { return '(' + this.x + ', ' + this.y + ')'; }}//等同于function Point(x, y) { this.x =...
2019-08-10 01:21:38
114
原创 实现两边定宽，中间自适应布局（三栏布局）的七种方法
浮动法 <style type="text/css"> html,body{ height: 100%; margin: 0; } div{ height: 100%; } .left{ backgr...
2019-08-09 05:49:02
233
原创 如何判断一个变量是数组还是对象
这里的对象指的是纯粹对象，所谓"纯粹的对象"，就是该对象是通过"{}“或”new Object"创建的。instanceofinstanceof运算符用于测试构造函数的prototype属性是否出现在对象的原型链中的任何位置。var obj = {},arr = [];obj instanceof Array //falseobj instanceof Object //truea...
2019-08-09 02:45:11
167
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人