2017年08月_奔跑的前端er

原创 vue-router的使用及实现原理

前端路由是直接找到与地址匹配的一个组件或对象并将其渲染出来。改变浏览器地址而不向服务器发出请求有两种方式: 1. 在地址中加入#以欺骗浏览器，地址的改变是由于正在进行页内导航 2. 使用H5的window.history功能，使用URL的Hash来模拟一个完整的URL。当打包构建应用时，Javascript 包会变得非常大，影响页面加载。如果我们能把不同路由对应的组件分割成不同的代码块，然后当路

2017-08-29 21:35:40 70053 1

原创 vue的组件间通信

1.父组件传递数据给子组件父组件数据如何传递给子组件呢？可以通过props属性来实现2.子组件传递数据给父组件那么，如果子组件想要改变数据呢？这在vue中是不允许的，因为vue只允许单向数据传递，这时候我们可以通过触发事件来通知父组件改变数据，从而达到改变子组件数据的目的. 子组件：<template> <div @click="up"></div></template>methods:

2017-08-29 21:30:34 447

原创有趣的javascript API

如果想让自己的页面不停的刷新，可以添加一个script<script> setTimeout("self.location.reload()",1000);</script>

2017-08-27 12:27:16 369

原创图解offsetWidth等

图片源于：http://blog.csdn.net/lzding/article/details/46371609

2017-08-22 22:07:59 503

原创拼多多面试之--实现一个百度搜索框

写特效是检验能力的唯一标准，加油，把所有特效总结一下，你就是最胖的啦~~ 回顾一下面试官的要求先：实现一个百度的搜索框，要求实时根据输入的情况，显示下拉列表的内容。并且如果用户对输入进行删除的话，能够取消掉已经撤销的请求，只显示保留的信息。废话不多说，开始造轮子。

2017-08-22 21:53:59 1409

原创 CSS知识梳理之---margin

梳理完position，来到margin，每个知识点一个一个攻破啦~~ 虽然margin可以应用到所有元素，但display属性不同时，表现也不同 1. block元素可以使用四个方向的margin值 2. inline元素使用上下方向的margin值无效 3. inline-block使用上下方向的margin负值看上去无效Note：inline-block使用上下方向的margin负值只

2017-08-22 10:17:13 453

原创 CSS中position绝对定位和相对定位

我们先来看看CSS3 Api中对position属性的相关定义： static：无特殊定位，对象遵循正常

2017-08-21 22:12:09 585

原创图片懒加载的几种实现

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title><style>body{ margin: 0;}ul{ margin: 0; padding: 0; list-style: none;}img{ border: none;

2017-08-19 13:15:52 272

原创一劳永逸的flex布局

实现水平垂直居中的方式：水平居中，垂直居中，flex布局，水平垂直居中方式总结，大全

2017-08-19 11:56:10 521

原创图解链表反转算法实现

使用p和q两个指针配合工作，使得两个节点间的指向反向，同时用r记录剩下的链表。p=head;q=head.next;head.next=null;进入循环：第一次循环r=q.next;q.next=p;p=q;q=r;第二次循环r=q.next;q.next=p;p=q;q=r;参考链接：http://blog.csdn.net/feliciafay/article/details/684

2017-08-19 10:54:25 287

原创 BFC原理以及外边距合并

对一个元素设置css，首先需要知道这个元素是block还是inline类型。而BFC就是用来格式化块级盒子。 - Formatting Context：指页面中一个渲染区域，并且拥有一套渲染规则，他决定了其子元素如何定位，以及与其他元素的相互关系和作用。 - BFC：块级格式化上下文，它是指一个独立的块级渲染区域，只有Block-level Box参与，该区域拥有一套渲染规则来约束块级盒子的布局

2017-08-17 17:29:03 618

原创面试中的一些代码实现

解析URL function getUrlParameter(){ var url=location.search; var obj=new Object(); if(url.indexOf("?")!=-1){ var str=url.substr(1);

2017-08-16 21:48:44 304

原创前端排序算法总结

JS简单实现排序算法归并排序function merge(left, right) { var result = []; while(left.length > 0 && right.length > 0) { if(left[0] < right[0]) { result.push(left.shift()); }

2017-08-16 21:11:54 1831 1

原创 CSS布局方式总结

一、显示（display） 1.1 盒模型（box-model） 1.2 行内元素（inline）+块元素（block） 1.3 行内块元素（inline-block） 1.4 flex 1.5 none 二、位置（position）三、补充 3.1 浮动（float） 3.2 层叠（z-index） 3.3 溢出

2017-08-16 14:06:47 2011 2

原创前端黑客之XSS、CSRF

XSS：跨站脚本，发生在目标网站中目标用户的浏览器层面上，当用户浏览器渲染整个HTML文档的过程中出现了不被预期的脚本指令并执行时，XSS就会发生。绝大多数XSS攻击都会采用嵌入一段远程或者第三方域上的脚本资源。任何安全问题都有“输入”的概念，很多时候输入的内容长度是有限制的。真正的XSS攻击弹出窗无意义。一般会注入类似这样做的好处：攻击代码容易控制 XXS类型

2017-08-09 22:41:47 472

原创 javascript设计模式-(发布-订阅模式)

var salesOffices={};//定义售楼处salesOffices.clientList=[];//缓存列表，存放订阅者的回调函数salesOffices.listen=function (fn) {//增加订阅者 this.clientList.push(fn);//订阅的消息添加进缓存列表};salesOffices.trigger=function(){//发布消息

2017-08-09 19:09:17 291

原创 Visual DOM && diff算法实现

使用document.CreateElement 和 document.CreateTextNode创建的就是真实节点。分析diff比较只会在同层级进行, 不会跨层级比较。 <div>  <p>  <b> aoy </b>  <sp

2017-08-09 15:59:04 2356

原创 Ajax实现原理详解

Ajax与传统web应用的不同传统的javascript编程中，若想得到服务器端数据或文件上的信息，或者发送客户端信息到服务器，需要建立一个html 的form，然后GET或者POST数据到服务器端，用户需要单击submit按钮来发送或者接受数据信息，然后等待服务器响应请求，页面重新加载。因为服务器每次都会返回一个新的页面，所以传统的web应用可能很慢，而且交互不太好。实用ajax技术，就可以

2017-08-09 09:10:44 243

原创 HTTP前端协议

HTTP工作原理 HTTP协议定义Web客户端如何从Web服务器请求Web页面，以及服务器如何把Web页面传送给客户端。HTTP协议采用了请求/响应模型。客户端向服务器发送一个请求报文，请求报文包含请求的方法、URL、协议版本、请求头部和请求数据。服务器以一个状态行作为响应，响应的内容包括协议的版本、成功或者错误代码、服务器信息、响应头部和响应数据。 * HTTP 请求/响应的步骤*

2017-08-08 23:54:09 2348

原创几种跨域方式总结

同源策略（SOP）只有双方在协议、主机和端口号都完全匹配的情况下，才可以被授权访问。JSONP1、通过脚本元素加载JSON（HTML脚本元素是可以规避SOP检查的），返回JSON对象，然后供页面使用。 2、通过回调函数替代全局变量的方式来传递JSON对象。需要在加载<script type="text/javascript"> window.callback=function (dat

2017-08-08 23:32:32 434

原创 JS的编程实现

写一个能遍历对象和数组的forEach实现function forEach(obj,fn) { var key if(obj instanceof Array){ obj.forEach(function(item,index){ fn(index,item) }) } else { for(key in

2017-08-08 19:55:22 201

原创 javascript中的异步和单线程

异步：异步和同步的最大区别在于有没有阻塞程序运行何时需要异步需要等待情况等待过程不能像alert一样前端异步使用场景 - 定时任务：setTimeout、setInterval - 网络请求：ajax请求、动态加载 - 事件绑定ajax请求代码示例console.log('start')$.get('./data1.json',function(data1){

2017-08-08 19:52:30 261

原创 javascript中的原型（链）和继承

写一个原型链继承的例子封装一个DOM查询function Elem(id){ this.elem=document.getElementById(id)}Elem.prototype.html=function(val){ var elem=this.elem if(val){ elem.innerHTML=val return this

2017-08-08 19:31:21 375

原创理解DOM事件流的三个阶段

当点击一个按钮，事实上你还同时点击了按钮所有的父元素。事件流所描述的就是从页面中接受事件的顺序。因为有两种观点，所以事件流也有两种，分别是事件冒泡和事件捕获。现行的主流是事件冒泡。事件冒泡事件冒泡即事件开始时，由最具体的元素接收（也就是事件发生所在的节点），然后逐级传播到较为不具体的节点。简述事件冒泡流程DOM树形结构事件冒泡阻止冒泡冒泡的应用<!DOCTYPE html><html

2017-08-08 17:26:37 1298

原创 CSS常考布局的实现方式

首先给出基本的HTML结构<div id="wrap"> <div id="sidebar" style="height:240px;">固定宽度区</div> <div id="content" style="height:340px;">自适应区</div></div><div id="footer">后面的一个DIV，以确保前面的定位不会导致后面的变形</div>方法一固定宽度区浮

2017-08-08 16:42:51 314

原创 javascript面试考点

typeof运算符typeof：function、object、string、boolean、undefined、number。 typeof只能区分值类型的类型，引用类型只能区分出函数来，其余对象，数组类型全部为object。在javascript中函数的地位非常高。变量计算==运算符会试图进行类型转换 if语句会将后面的语句类型转换逻辑运算&&、||：10&&0—>0,”||’abc

2017-08-07 20:02:14 565

原创 javascript中零散的知识点

类型ECMAScript语言类型包括Undefined、Null、Boolean、String、Number、Objectjavascript有七种内置类型：空值（null）、未定义（undefined）、布尔值（boolean）、数字（number）、字符串（string）、对象（object）、符号（symbol），除对象外，其他统称“基本类型”。我们可以通过typeof运算符来查看值的类型

2017-08-07 19:36:28 236

原创 javascript中的this词法

this的绑定规则this是在运行时进行绑定的，它的上下文取决于函数调用时的各种条件。this的绑定和函数声明的位置没有任何关系，只取决于函数的调用方式。当一个函数被调用时，会创建一个活动记录（执行上下文），这个记录会包含函数在哪里被调用（调用栈）、函数的调用方法、传入的参数等信息。this就是记录其中的一个属性，会在函数执行的过程中用到。绑定规则1. 默认绑定最常用的函数

2017-08-07 18:58:06 327

原创 this词法

ES6中this的使用简介：var obj={ id:"awesome", cool:function coolFn() { console.log(this.id); }};var id="not awesome";obj.cool();setTimeout(obj.cool, 100);直接访问obj.cool会访问对象的方法，而调用setTimeout之后cool(

2017-08-07 16:49:33 233

原创你不知道的JS---作用域和闭包

立即执行函数表达式var a=2;(function foo() { var a=3; console.log(a);})();console.log(a);函数被包含在一个括号内部，因此成为了一个表达式，通过末尾加上另外一个括号可以立即执行这个函数。闭包的定义当函数可以记住并访问所在的词法作用域时，就产生了闭包，即使函数是在当前词法作用域之外执行。

2017-08-07 16:13:18 255

原创 vue双向绑定原理

vue的最核心的功能有两个，一是响应式的数据绑定系统，二是组件系统。实现数据绑定的做法有以下几种：发布者-订阅者模式（backbone.js）脏值检查（Angular.js）数据劫持（vue.js）发布者订阅者模式：一般通过sub，pub的方式实现数据和视图的绑定更新一、访问器属性访问器属性是对象的一种特殊属性，它不能直接在对象中设置，而必须通过defineProper

2017-08-07 09:51:46 370

caoxinhui521的博客