sh435367384的博客

原创 聊聊lframe

尽管现在前端各种框架层出不穷，但在目前有些场景下还是需要使用到iframe，并且很多大网站中还是会有它的痕迹。今天总结下iframe的一些知识。什么是iframe概念iframe是用于标记一个内联框架。简单来说，iframe就是一个html标签。对于外层的页面来说，iframe是一个普通元素，对于内部而言，它又是个完整的页面。属性由于iframe既能设置宽高，并且也能像普通文本一样不换行...

原创 原生js实现轮播图效果

转载 数据可视化工具D3js &Highcharts&Echarts

首先先说一下Canvas和Svg的区别Canvas:基于像素单个html,类似于在画布上画画Echarts基于Canvas画图Svg:基于对象模型多个图形元素高保真 即放大也不会失真echarts先大体了解一下echarts的历史： echarts是百度公司前端开发的一个图表库。 支持柱状图、饼状图、k线图、map图、热导向图、折线图 主要采用canvas画图。官方网站：http://echar...

原创 等分四栏布局

实现四栏等宽，中间设置一定间隙的自适应布局：一：利用浮动（注：如果多加一个元素就会换下一行）1.代码如下：<style type="text/css"> *{ margin:0; padding:0; } .clearfix:after {　　　　 content: "";//添加内容为空 height: 0;//内...

原创 单页面应用

什么是 SPASPA 是 Single Page App 的缩写。意思是“单页面应用”。指的不是本地应用，而是网站。传统的网站都是多页面的，每次点击一个链接就会打开一个新的页面。但是 SPA 是“单页面”的，意思是一旦我打开这个网站，这个“页面”就会一次性的下载到本地。SPA 页面给用户最直观的一个感受是，每次点击一个链接，页面是不会刷新的。所以用户体验更接近于本地应用，舒适感提高很多。需要注意的...

原创 用js判断数据类型

javascript中有六种数据类型：string；boolean；Array；Object；null;undefined。如何检测这些数据类型呢，总结方法如下：一：使用typeof方法 var fn = function(n){ console.log(n); } var str = 'string'; var arr = [1,2,...

原创 前端路由的实现方式

在讲前端路由之前，先说下后端路由，以及为什么出现了前端路由。 后端路由： 浏览器在地址栏中切换不同的url时，每次都向后台服务器发出请求，服务器响应请求，在后台拼接html文件传给前端显示，java web中的jsp就是如此实现的。常用的后台MVC模式的基本路由处理流程：浏览器输入一个url请求，从中找到Controller和Action的值，将请求传递给Controller处理，Controll...

原创 js拖拽之四：右下角拖拽改变元素大小

原理：当oDiv2移动时，将ev.clientX-差值+oDiv2的宽度赋给oDiv.style.left<style> #div1{ width:200px; height:200px; background-color: red; position:relative; top:50%; left:50%; } #div2{ width...

原创 js拖拽之三：碰撞切换颜色

原理图：代码实现：<style> #div1{ width:50px; height:50px; background-color: black; position:absolute; top:0; left:0; } #div2{ width:200px; height:200px; background-color:...

原创 js拖拽之二：实现拖动元素上下左右改变元素大小

具体原理参考js拖拽一<script> var oDiv = document.getElementById("div1"); oDiv.onmousedown = function(ev){ //鼠标按下时保存当前鼠标的位置和元素的offset之间的差值 ev = ev||event; var disX = ev.clientX - oDiv....

原创 js拖拽之一：实现简单的元素拖拽

先介绍一下实现元素拖动需要的坐标属性。offsetLeft、offsetTop 和 clientX、clientYoffsetLeft \ offsetTop 用在dom节点中，可以返回当前元素距离某个父辈元素左边缘的距离    ps. （1）如果父辈元素中有定位的元素，那么就返回距离当前元素最近的定位元素边缘的距离。           （2）如果父辈元素中没有定位元素，那么就返回相对于body...

转载 详解链式调用setTimeout()与setInterval()的区别

使用 setTimeout()和 setInterval()创建的定时器可以用于实现有趣且有用的功能。执行时机是不能保证的，因为在页面的生命周期中，不同时间可能有其他代码在控制 JavaScript 进程。在页面下载完后的代码运行、事件处理程序、Ajax 回调函数都必须使用同样的线程来执行。实际上，浏览器负责进行排序，指派某段代码在某个时间点运行的优先级。有关于js的单线程请点击：浏览器的多进程可...

原创 从输入URL过程到页面加载过程完善前端体系结构（未完结，后续会有补充）

前几天将部分内容拿出来单独学习，今天再将内容系统地整合到一块1. 从浏览器接收url到开启网络请求线程（这一部分可以展开浏览器的机制以及进程与线程之间的关系）这里请参考浏览器的多进程以及js异步编程2. 开启网络线程到出发一个完整的http请求（这一部分涉及到dns查询，tcp/ip请求，五层因特网协议栈等知识）这里请参考DNS查询，tcp/ip请求3. 从服务器接收到请求到对应后台接收到请求（这...

原创 有关cookie

1.session机制采用的是在服务器端保持状态的方案，而cookie机制则是在客户端保持状态的方案，cookie又叫会话跟踪机制。打开一次浏览器到关闭浏览器算是一次会话。HTTP协议是一种无状态协议，在数据交换完毕后，服务器端和客户端的链接就会关闭，每次交换数据都需要建立新的链接。此时，服务器无法从链接上跟踪会话。cookie可以跟踪会话，弥补HTTP无状态协议的不足。2.cookie的分类：c...

原创 浏览器缓存机制详解

浏览器缓存机制详解　　对于浏览器缓存，相信很多开发者对它真的是又爱又恨。一方面极大地提升了用户体验，而另一方面有时会因为读取了缓存而展示了“错误”的东西，而在开发过程中千方百计地想把缓存禁掉。那么浏览器缓存究竟是个什么样的神奇玩意呢？什么是浏览器缓存：　　简单来说，浏览器缓存就是把一个已经请求过的Web资源（如html页面，图片，js，数据等）拷贝一份副本储存在浏览器中。缓存会根据进来的请求保存输...

原创 从开启网络线程到发出一个完整的http请求

每次网络请求时都需要开辟单独的线程进行，譬如如果URL解析到http协议，就会新建一个网络线程去处理资源下载因此浏览器会根据解析出得协议，开辟一个网络线程，前往请求资源步骤：开启网络线程到发出一个完整的http请求这一部分主要内容包括：dns查询，tcp/ip请求构建，五层因特网协议栈等等DNS查询得到IP1.域名组成： 这是中央电视台用于手法电子邮件的计算机的域名，它由三个标号组成，其中标号co...

原创 浏览器的多进程

区分浏览器多进程和js单线程进程和线程的主要差别在于它们是不同的操作系统资源管理方式。进程有独立的地址空间，一个进程崩溃后，在保护模式下不会对其它进程产生影响，而线程只是一个进程中的不同执行路径。线程有自己的堆栈和局部变量，但线程之间没有单独的地址空间，一个线程死掉就等于整个进程死掉，所以多进程的程序要比多线程的程序健壮，但在进程切换时，耗费资源较大，效率要差一些。但对于一些要求同时进行并且又要共...

原创 观察者模式和与发布订阅模式的区别

这两天面试问到了这个问题，下来就重点学习了一下1.观察者模式：在软件设计中是一个对象，维护一个依赖列表，当任何状态发生改变自动通知它们。举个例子：假设我正在找一份软件工程师的工作，对“XX公司”很感兴趣。所以我就联系了他们的HR，给了他我的联系电话。他保证如果有任何职位空缺都会通知你。这里还有几个候选人也你一样很感兴趣。所以职位空缺大家都会知道，如果你回应了他们的通知，他们就会联系你面试。所以，以...

原创 HTTP再次学习详解

一.TCP/IP的分层管理1.分层：分为应用层，传输层，网络层，数据链路层应用层：决定了向用户提供应用服务时通信的活动（HTTP协议也处于该层）传输层：提供处于网络连接中的两台计算机之间的数据传输，在该层有两个性质不同的协议，分别是TCP和UDPTCP和UDP（用户数据报协议）的区别1、TCP面向连接（如打电话要先拨号建立连接）;UDP是无连接的，即发送数据 之前不需要建立连接2、TCP提供可靠...

原创 ES6学习总结之Promise

一个 Promise 对象可以理解为一次将要执行的操作（常常被用于异步操作），使用了 Promise 对象之后可以用一种链式调用的方式来组织代码，让代码更加直观。而且由于 Promise.all 这样的方法存在，可以让同时执行多个操作变得简单。接下来就来简单介绍 Promise 对象。在 Promise 对象当中有两个重要方法————resolve 和 reject。resolve 方法可以使 P...

原创 ES6学习总结之数组循环方法

数组循环之前循环:(1)for(let i = 0; i<arr.length; i++){}(2)whileES6新增循环方法1.arr.forEach():用来代替普通for循环,接收两个参数（循环的回调函数，this的指向（可选，用的比较少））无返回值例：之前let arr = ['apple','banana','orange'];for(let i = 0;i<arr.len...

原创 ES6学习总结之函数变化（函数默认参数，扩展运算符，箭头函数）

函数变化1.函数默认参数：之前：function show(a,b){a = a||"欢迎您"; //默认参数为“欢迎您”b = b||"小明"； //默认参数为"小明"console.log(a,b);}show("welcome","xaioming"); //welcome xiaomingshow(); //欢迎您 小明ES6:function show(a=‘欢...

原创 ES6学习总结之解构赋值及字符串模板

解构赋值 （*非常有用，特别在做数据交互时ajax）1.将右边数据导入左边，相当于给左边数据起的别名例1：let [a,b,c] = [12,5,6]console.log(a,b,c); //12,5,6注意:左右两边，解构格式保持一致let [a,[b,c]] = [12,[5,6]];2.解构json例2：let json={name:'abc',age:18,job:'a...

原创 ES6学习总结之变量声明

let和var,const1.let:只在块级作用域中有效(1)不存在变量提升；(2)不可和var在同一个作用域下同时声明；（如果同时，会抛出语法错误）；(3)for循环，for里面是父级作用域，即for(var i=0;i<3;i++){var i='abc';console.log(i)} //打印3次abc,这两个i是在不同作用域下定义的2.var:存在变量声明，被提升到函...

原创 前端中的一些编码

一.各浏览器对于字符编码别名支持的宽泛程度存在差异根据 HTML4.01 规范中的描述，服务端应该提供给用户端文档的字符编码（character encoding）信息，最直接的方式为通过 HTTP 协议中的 "Content-Type" 头字段的 "charset" 将文档的字符编码告诉用户端。例如以下 HTTP 头声明了字符编码为 ISO-8859-1：Content-Type: text/h...

原创 CSS3学习总结二

六：边距折叠外边距折叠：相邻的两个或多个外边距 (margin) 在垂直方向会合并成一个外边距（margin），尽量少用margin-top.七.内联与块级标签1、行内标签与块标签区别html中的标签默认主要分为两大类型，一类为块级元素，另一类是行内元素，许多人也把行内称为内联，所以叫内联元素，其实就是一个意思。为了很好的布局，必须理解它们间的区别，区别如下：行内块标签当元素的样式display为...

原创 CSS3学习总结一

目录------------一.选择器；二、特殊性（优先级）；三.文本相对长度单位；四.盒子模型；五.利用CSS画图一.选择器；1.ID选择器：以#开始，引用时使用id，如id="div1"2.类选择器：以.开始，使用class属性引用，可以有多个，如class="cls1 cls2 cls3"3.标签选择器：以标签名称开始，如p,span,div,*4.伪类选择，a:hover，a:link，a...

原创 html5新特性

一.语义特性（Semantic） 1.优点：(1) 提升可访问性；            (2) SEO；              (3) 结构清晰，利于维护；2.一些常用语义化标签：< title></title>：简短、描述性、唯一（提升搜索引擎排名）。         搜索引擎会将title作为判断页面主要内容的指标，有效的title应该包含几个与页面内容密...

原创 Git入门安装及简单使用

一.简介git是一种版本控制器或者说是在团队开发时，管理代码用的软件二.安装Window: http://git-for-window.github.io下载软件，双击，一路‘next’，安装完成三.使用1.新建文件夹作为自己的仓库进入文件夹右击鼠标出现 git Bash Here 点击进入如下界面：（注：不是 git GUI Here）先配置自己的信息，在命令行如下指令，user.name和...

原创 Gulp入门安装及应用三

我们接着昨天的继续（4）css文件压缩安装：命令行输入：cnpm install --save-dev gulp-minify-css使用：var gulp = require('gulp'); //导入gulp模块 重要minifyCss = require('gulp-minify-css');gulp.task('minify-css',function(){ gulp.src('...

原创 Gulp入门安装及应用二

gulp的使用：1.建立gulpfile.js文件var gulp = require('gulp'); //导入gulp模块 重要gulp.task('default',function(){ //default：任务名 console.log('hello.world');})2.运行gulp任务 gulp 任务名3.gulp API（1）gulp.src() ...

原创 Gulp入门安装及应用一

安装gulp的目的gulp是前端开发项目构建构建工具，在开发过程中使用gulp可以避免重复的机械劳动，大大提高开发效率，比如：文件合并，文件拷贝，less编译，css压缩， js压缩，图片压缩等。gulp常用地址：gulp官方网址：http://gulpjs.comgulp插件地址：http://gulpjs.com/pluginsgulp 官方API：https://github.com/gul...

原创 排序算法之快速排序

一.昨天说了冒泡排序，今天看看一个高效的排序方法二.排序思想:（从小到大排序）分析：1、找基准（一般是以中间项为基准）2、遍历数组，小于基准的放在left，大于基准的放在right3、递归三.解析（1）随便找一个数作为基准 (我是用0位置的数作为基准),我在这里找的是数组的中间值，然后从右向左开始找比它小的数,如果找到就交换位置.第一次的中间值为4；（2）然后将基准值删掉，这时数组中就剩[3,2,...

原创 js执行机制

一.JS代码虽然是单线程的，但是浏览器是多线程的所以人们就想到可以调用浏览器的API，把需要异步运行的代码扔给浏览器。等到浏览器运行完，再塞回来js线程中，然后继续运行 (异步的原理）。二.事件循环：JS 会创建一个类似于 while (true) 的循环，每执行一次循环体的过程称之为 Tick。每次 Tick 的过程就是查看是否有待处理事件，如果有则取出相关事件及回调函数放入执行栈中由主线程执行...

原创 排序算法之冒泡排序

一.讲这个之前呢，先说个几个评述算法优劣术语的说明稳定：如果a原本在b前面，而a=b，排序之后a仍然在b的前面；不稳定：如果a原本在b的前面，而a=b，排序之后a可能会出现在b的后面；内排序：所有排序操作都在内存中完成；外排序：由于数据太大，因此把数据放在磁盘中，而排序通过磁盘和内存的数据传输才能进行；时间复杂度: 一个算法执行所耗费的时间。空间复杂度: 运行完一个程序所需内存的大小。二.冒泡排序...

转载 http协议

一.HTTP协议是Hyper Text Transfer Protocol（超文本传输协议）的缩写,是用于从万维网（WWW:World Wide Web ）服务器传输超文本到本地浏览器的传送协议。HTTP是一个基于TCP/IP通信协议来传递数据（HTML 文件, 图片文件, 查询结果等）。HTTP是一个属于应用层的面向对象的协议，HTTP协议工作于客户端-服务端架构为上。浏览器作为HTTP客户端通...

原创 前端面试基础

一.alt和title相同点：他们都会飘出一个小浮层，显示文本内容。不同点：1.alt只能是元素的属性，而title即可以是元素的属性也可以是标签，例如:<title>标题</title>。2.alt属性则是用来指定替换文字，只能用在img、area和input元素中（包括applet元素），用于网页中图片无法正常显示时给用户提供文字说明使其了解图像信息。注意，alt是替代...

转载 垃圾回收机制

原理http://www.jb51.net/article/75292.htm 找到不再被使用的变量，然后释放其占用的内存，但这个过程不是时时的，因为其开销比较大，所以垃圾回收器会按照固定时间间隔周期性的执行IE6的垃圾回收是根据内存分配量运行的，当环境中存在256个变量、4096个对象、64k的字符串任意一种情况的时候就会触发垃圾回收器工作， 不再使用的变量也就是生命周期结束的变量，当然只可...

原创 闭包那些事儿

闭包一：概念是指有权访问另一个函数作用域中的变量的函数。创建一个闭包的常见方式：就是在一个函数内部创建另一个函数。利用了javascript函数内部可以直接读取全局变量，但是在函数外部无法读取函数内部的局部变量。闭包可以简单理解成“定义在一个函数内部的函数“。二.闭包的用途闭包可以用在许多地方。它的最大用处有两个，一个是前面提到的可以读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中，不...

原创 浏览器渲染

浏览器渲染：概念：页面渲染就是浏览器将html代码根据CSS定义的规则显示在浏览器窗口中的这个过程为什么要了解浏览器加载、解析、渲染这个过程？一.目的：了解浏览器如何进行加载，可以在引用外部样式文件，外部js时，将他们放到合适的位置，使浏览器以最快的速度将文件加载完毕。了解浏览器如何进行解析，可以在构建DOM结构，组织css选择器时，选择最优的写法，提高浏览器的解析速率。了解浏览器如何进行渲染，明...