2018年08月_斷了De弦

原创 vue的生命周期

所有的生命周期钩子自动绑定 this 上下文到实例中，因此你可以访问数据，对属性和方法进行运算。这意味着你不能使用箭头函数来定义一个生命周期方法 (例如 created: () => this.fetchTodos())。这是因为箭头函数绑定了父上下文，因此 this 与你期待的 Vue 实例不同，this.fetchTodos 的行为未定义。1、beforeCreate 在实...

2018-08-17 14:55:25 195

原创 js的垃圾回收机制

JavaScript具有自动垃圾收集机制，也就是说执行环境会负责管理代码执行过程中的内存。这种垃圾回收机制的原理其实很简单：找出那些不再继续使用的变量，然后释放其占用的内存。为此，垃圾收集器会按照固定的时间间隔，周期地执行这一操作。1、标记清除法最常用的垃圾收集方式。垃圾收集器在运行的时候会给存储在内存中的所有变量都加上标记，然后它会去掉环境中的变量以及被环境中的变量引用的变量的标记。而在...

2018-08-17 11:09:00 234

转载 CDN加速

CDN概况CDN的全称是Content Delivery Network，即内容分发网络。CND加速主要是加速静态资源，如网站上面上传的图片、媒体，以及引入的一些Js、css等文件。CND加速需要依靠各个网络节点，例如100台CDN服务器分布在全国范围，从上海访问，会从最近的节点返回资源，这是核心。CND服务器通过缓存或者主动抓取主服务器的内容来实现资源储备。下面这张图...

2018-08-16 19:39:06 9380

原创浏览器页面渲染过程

浏览器渲染页面的一般过程：1.浏览器解析html源码，然后创建一个 DOM树。在DOM树中，每一个HTML标签都有一个对应的节点，并且每一个文本也都会有一个对应的文本节点。DOM树的根节点就是 documentElement，对应的是html标签。2.浏览器解析CSS代码，计算出最终的样式数据。构建CSSOM树。对CSS代码中非法的语法它会直接忽略掉。解析CSS的时候会按照如下顺序来定义优...

2018-08-16 16:51:30 4827

转载 Flex布局

采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。原文：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html...

2018-08-16 16:17:46 138

转载 node.js

简单的说 Node.js 就是运行在服务端的 JavaScript。Node.js 是一个基于Chrome JavaScript 运行时建立的一个平台。Node.js是一个事件驱动I/O服务端JavaScript环境，基于Google的V8引擎，V8引擎执行Javascript的速度非常快，性能非常好。教程：http://www.runoob.com/nodejs/nodejs-tut...

2018-08-16 16:07:46 167

转载 Sass和Less

什么是Sass和Less？ Sass和Less都属于CSS预处理器，那什么是 CSS 预处理器呢？ CSS 预处理器定义了一种新的语言，其基本思想是，用一种专门的编程语言，为 CSS 增加了一些编程的特性，将 CSS 作为目标生成文件，然后开发者就只要使用这种语言进行CSS的编码工作。转化成通俗易懂的话来说就是“用一种专门的编程语言，进行 Web 页...

2018-08-16 15:40:12 1065

原创 ES6 解构赋值

一我们为什么要使用解构在学习ES6新的特性解构赋值之前，我们先来看看为什么要使用解构，以前如果我们需要获取对象或者数组里面的数据，并且把它们存入数组，需要写很多代码。如下const person = { name: 'little bear', age: 18, sex: '男'}let age = person.agelet name = person.namel...

2018-08-16 15:32:00 226

原创 css中的单位

尺寸单位描述 % 百分比 in 英寸 cm 厘米 mm 毫米 em 1em 等于当前的字体尺寸。 2em 等于当前字体尺寸的两倍。例如，如果某元素以 12pt 显示，那么 2em 是24pt。在 CSS 中，em 是非常有用的单位，因为它可以自动适应用户所使用的字体。 ex 一个 e...

2018-08-16 15:01:47 365

转载 TCP协议中的三次握手四次挥手

方案TCP建立连接为什么是三次握手，而不是两次或四次？TCP，名为传输控制协议，是一种可靠的传输层协议，IP协议号为6。顺便说一句，原则上任何数据传输都无法确保绝对可靠，三次握手只是确保可靠的基本需要。举个日常例子，打电话时我们对话如下：一、TCP报文格式 TCP报文格式图：上图中有几个字段需要重点介绍下：（1）序号：Seq序号，占32位，...

2018-08-16 12:08:29 204

原创 TCP/IP四层模型与OSI参考模型

TCP/IP四层模型：1.链路层（数据链路层/网络接口层）：包括操作系统中的设备驱动程序、计算机中对应的网络接口卡2.网络层（互联网层）：处理分组在网络中的活动，比如分组的选路。3.运输层：主要为两台主机上的应用提供端到端的通信。4.应用层：负责处理特定的应用程序细节。网络层与运输层的区别：　　在TCP/TP协议族中，　　网络层IP提供的是一种不可靠的服务。它...

2018-08-16 11:24:46 8370

原创进程和线程的区别

进程是具有一定独立功能的程序关于某个数据集合上的一次运行活动,进程是系统进行资源分配和调度的一个独立单位。线程是进程的一个实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位。进程和线程的关系：（1）一个线程只能属于一个进程，而一个进程可以有多个线程，但至少有一个线程。（2）资源分配给进程，同一进程的所有线程共享该进程的所有资源。（3）处理机分给线程，...

2018-08-15 18:09:20 140

转载返回顶部js插件的编写

【1】锚点　　使用锚点链接是一种简单的返回顶部的功能实现。该实现主要在页面顶部放置一个指定名称的锚点链接，然后在页面下方放置一个返回到该锚点的链接，用户点击该链接即可返回到该锚点所在的顶部位置<body style="height:2000px;"><div id="topAnchor"></div><a href="#topAnchor&quot

2018-08-15 18:02:54 223

转载 js原型链

只要是对象就有原型, 并且原型也是对象, 因此只要定义了一个对象, 那么就可以找到他的原型, 如此反复, 就可以构成一个对象的序列, 这个结构就被成为原型链JS中原型链，说简单也简单。首先明确：函数（Function）才有prototype属性，对象（除Object）拥有__proto__。首先，我画了一张图。所谓原型链，指的就是图中的proto这一条指针链！原型链的顶层...

2018-08-15 17:16:00 1248

转载基本的排序算法

我们通常所说的排序算法往往指的是内部排序算法，即数据记录在内存中进行排序。排序算法大体可分为两种：一种是比较排序，时间复杂度O(nlogn) ~ O(n^2)，主要有：冒泡排序，选择排序，插入排序，归并排序，堆排序，快速排序等。另一种是非比较排序，时间复杂度可以达到O(n)，主要有：计数排序，基数排序，桶排序等。常见比较排序算法的性能如下：冒泡排序：依次比较相邻两个元素...

2018-08-14 17:58:19 557

转载 vue的双向数据绑定实现原理

vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式来实现的，那么vue是如果进行数据劫持的，我们可以先来看一下通过控制台输出一个定义在vue初始化数据上的对象是个什么东西。var vm = new Vue({ data: { obj: { a: 1 } }, created: function () {...

2018-08-09 16:41:08 352

MVCMVC全名是Model View Controller，是模型(model)－视图(view)－控制器(controller)的缩写，一种软件设计典范，用一种业务逻辑、数据、界面显示分离的方法组织代码，将业务逻辑聚集到一个部件里面，在改进和个性化定制界面及用户交互的同时，不需要重新编写业务逻辑。MVC被独特的发展起来用于映射传统的输入、处理和输出功能在一个逻辑的图形化用户界面的结构中。...

2018-08-09 12:05:29 422

转载集成ajax上传技术大文件/超大文件前端切割上传，后端进行重组

概念　　js新的技术中增加了File对象（实际上就是blob的具体化的一个东西），设计规范参考这里2个 File API 规范和 FileSystem API 规范　　后台二进制文件重组　　　　1. 创建空的文件流　　　　2. 读取临时存储切割文件的文件夹，获得所有文件路径切记：一定要按顺序进行排序，否则组合文件将会错误　　　　3. 按顺序将切割小文件读取成二进制流，写...

2018-08-09 10:50:59 2045

转载 js前端文件下载

一、HTML与文件下载如果希望在前端侧直接触发某些资源的下载，最方便快捷的方法就是使用HTML5原生的download属性，例如：<a href="large.jpg" download>下载</a>具体介绍可参考我之前的文章：“了解HTML/HTML5中的download属性”。但显然，如果纯粹利用HTML属性来实现文件的下载（而不是浏览器打开或浏览），...

2018-08-09 10:37:52 17564 1

转载 js的数据类型

基本类型ECMScript中有5种简单的数据类型（也称为基本数据类型）：Undifined,Null,Boolean,Number和String。还有一种复杂数据类型——Object。typeof操作符可以检测给定变量的数据类型var message="dd";console.log(message);//'String'引用类型Object,Array,Date,RegE...

2018-08-08 21:59:13 240

转载 webpack打包js

Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析，然后将这些模块按照指定的规则生成对应的静态资源。在代码实践之前，先说一写webpack的基础知识。1、为什要使用WebPack现今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法模块化，让我们可以把复...

2018-08-08 20:31:08 422

原创 js数组去重

// 借助新数组通过indexOf方判断当前元素在数组中的索引如果与循环的下标相等则添加到新数组中var arr = [1,23,1,1,1,3,23,5,6,7,9,9,8,5];function rep(arr) { var ret = []; for (var i = 0; i < arr.length; i++) { if (arr.index...

2018-08-08 20:27:27 201

原创 js数组的基本操作

shift:删除原数组第一项，并返回删除元素的值；如果数组为空则返回undefined，改变原数组。var a = [1,2,3,4,5]; var b = a.shift(); //a:[2,3,4,5] b:1 unshift:将参数添加到原数组开头，并返回数组的长度，改变原数组注:在IE6.0下测试返回值总为undefined，FF2.0下测试返回值为7，所以这个方法的...

2018-08-08 20:21:28 163

转载 css实现未知大小的块状元素垂直水平居中

思路：子元素绝对定位，距离顶部 50%，左边50%，然后使用css3 transform:translate(-50%; -50%)优点：高大上,可以在webkit内核的浏览器中使用缺点：不支持IE9以下不支持transform属性<!DOCTYPE html><html lang="en"><head> <meta charset=...

2018-08-08 19:57:01 358

转载 https与http的区别

超文本传输协议HTTP协议被用于在Web浏览器和网站服务器之间传递信息，HTTP协议以明文方式发送内容，不提供任何方式的数据加密，如果攻击者截取了Web浏览器和网站服务器之间的传输报文，就可以直接读懂其中的信息，因此，HTTP协议不适合传输一些敏感信息，比如：信用卡号、密码等支付信息。　　为了解决HTTP协议的这一缺陷，需要使用另一种协议：安全套接字层超文本传输协议HTTPS，为了数据传输的安...

2018-08-08 16:43:05 249

转载 CSS世界的结界——BFC

BFC的定义BFC 全称为 block formatting context，中文为“块级格式化上下文”。关于 BFC 各种特性什么的，说起来很啰嗦，而我喜欢用“ CSS 世界的结界”这种称谓概括BFC 的特性。“结界”这个词大家应该都理解的，指通过一些特定的手段形成的封闭空间，里面的人出不去，外面的人进不来，具有极强的防御力。 BFC 的特性表现如出一辙。大家请记住下面这个表现原则：如果...

2018-08-08 16:05:22 1498

原创 js跨域资源共享

同源策略同源策略是浏览器的一个安全功能，不同源的客户端脚本在没有明确授权的情况下，不能读写对方资源。只要协议、域名、端口有任何一个不同，都被当作是不同的域。跨域资源共享1、CORS基本思想：使用自定义的HTTP头部让浏览器与服务器进行沟通，从而决定请求或相应是否成功，还是失败。CORS原理：只需要向响应头header中注入Access-Control-Allow-Origin，...

2018-08-07 17:52:49 918

原创 js执行环境、作用域、作用域链、变量提升、函数提升

1.执行环境（execution context）　　执行环境定义了变量和函数有权访问的其他数据，决定了他们各自的行为。每个执行环境都有与之对应的变量对象（variable object），保存着该环境中定义的所有变量和函数。我们无法通过代码来访问变量对象，但是解析器在处理数据时会在后台使用到它。　　执行环境有全局执行环境（也称全局环境）和函数执行环境之分。执行环境如其名是在运行和执行代码...

2018-08-07 16:25:40 229

转载 css中的选择器及优先级

CSS3 选择器在 CSS 中，选择器是一种模式，用于选择需要添加样式的元素。"CSS" 列指示该属性是在哪个 CSS 版本中定义的。（CSS1、CSS2 还是 CSS3。）选择器名称例子例子描述 CSS .class 类选择器 .intro 选择 class="intro" 的所有元素。 1 #id id 选择器 ...

2018-08-07 15:08:22 174

原创 html圆角按钮的实现

1、使用css3的boborder-radius 属性border:2px solid;border-radius:25px;2、使用图片作为<a></a>标签背景图a{ display:inline-block; line-height:40px; text-decoration:none; background:...

2018-08-07 11:55:43 16043

转载单页应用SPA

spa指的是single page application，就是只有一张Web页面的应用。单页应用程序 (SPA) 是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。浏览器一开始会加载必需的HTML、CSS和JavaScript，所有的操作都在这张页面上完成，都由JavaScript来控制。因此，对单页应用来说模块化的开发和设计显得相当重要。优点： 1.分离前...

2018-08-07 11:26:03 480

转载 jquery设置ajax请求的默认请求方式

定义和用法jQuery.ajaxSetup() 方法设置全局 AJAX 默认选项。语法jQuery.ajaxSetup(name:value, name:value, ...)示例设置 AJAX 请求默认地址为 "/xmlhttp/"，禁止触发全局 AJAX 事件，用 POST 代替默认 GET 方法。其后的 AJAX 请求不再设置任何选项参数：$.ajaxSetup(...

2018-08-07 11:12:45 6694

原创 js事件委托（事件代理）的原理

事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件，是对“事件处理程序过多”问题的解决方案。在一个复杂的web应用程序中，如果对每个可单击的元素都添加事件处理程序，那么结果会有数不清的代码用于添加事件处理程序。此时，可以使用事件委托技术解决这个问题。使用事件委托，只需在DOM树中尽量最高的层次上添加一个事件处理程序。Event对象提供了一个属性叫target，可以...

2018-08-07 10:56:11 1368

转载 css清除浮动的方法

清除浮动其实主要解决的就是高度塌陷问题，具体在此不再赘述~~~那些年我们一起清除过的浮动（大佬博客，写的挺不错）1、添加额外的标签通过在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>，其他标签br等亦可优点：通俗易懂，容易掌握缺点：添加无意义的空标签，有违结构与表现的分离，不利于后期维护2、父元素设置 ov...

2018-08-06 22:13:28 157

转载 js中的异步编程

简介JS语言的执行环境是“单线程”。所谓单线程，就是一个时间只能完成一个任务，如果有多个任务，就必须排队。“单线程”的坏处是：只要有一个任务耗时很长，后面的任务就必须排队等待，会拖延整个程序的执行。为了解决这个问题，JS的任务执行模式分为两种：同步（synchronous）和异步(asynchronous)。同步模式就是上面提到的，后面的任务等待前面的任务完成后，才能执行。程序...

2018-08-06 17:02:00 161

原创 js 链式调用

链式调用举例：jQuery中的$(ele).show().find(child).hide()实现方法1.方法体内返回对象实例自身(this)var Obj = { a: 1, func: function(){ this.a += 1; return this }}Obj.func().func();console.lo...

2018-08-06 16:50:26 725

转载 ES6 promise理解

Promise 的含义Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象。ES5实现：https://www.cnblogs.com/malingyang/p/6535805.htmlPromise实现串行调用，判断多个图片异步加载完成：Prom...

2018-08-06 16:23:57 1139

转载 css position属性

定义和用法position 属性规定元素的定位类型。说明这个属性定义建立元素布局所用的定位机制。任何元素都可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。默认值： static 继承性： no 版本： CSS2 JavaScript 语法： object.style.pos...

2018-08-03 22:11:11 288

转载 css display

定义和用法display 属性规定元素应该生成的框的类型默认值： inline 继承性： no 版本： CSS1 JavaScript 语法： object.style.display="inline" 最常见的值值描述 none 此元素不会被显示。 block 此元素将显示为块级元素，此元素前后会带有换行符。 i...

2018-08-03 22:01:34 253

转载 css盒模型

基本概念盒模型的组成由里向外内容(content)+填充(padding)+边框(border),外边距(margin)盒模型是有两种标准的，一个是标准模型，一个是IE模型。从上面两图不难看出在标准模型中，盒模型的宽高只是内容（content）的宽高，而在IE模型中盒模型的宽高是内容(content)+填充(padding)+边框(border)的总宽高。css如何设...

2018-08-02 18:15:33 117

空空如也

空空如也