Haley_Guo-优快云博客

转载 CSS实现三栏布局，左右宽度固定，中间宽度自适应

假设高度一定，请写出三栏布局，左右宽度300px，中间自适应。首先要写好整个页面的布局： <style> html * { padding: 0; margin: 0; } .layout { margin-top: 20px; }...

2018-08-02 17:21:55 538

转载 js原生实现getElementsByClassName()

前言：document.getElementsByClassName这个方法只能在ie8以上的浏览器使用，也就是说getElementsByClassName是在支持html5的浏览器下才能执行。为了让ie9以下的浏览器能够支持这个方法于是自己写了个getElementsByClassName脚本方法让浏览器也能够像jquery那样拿到Class就能获取对象。function getE...

2018-06-01 16:46:32 3280

转载 TCP/IP协议体系结构以及主要协议

TCP/IP协议体系结构以及主要协议在说TCP/IP协议体系结构之前我们首先来看看最早用的OSI七层参考模型，自底向上依次是物理层、数据链路层、网络层、传输层、会话层、表示层、应用层。下图则为由OSI七层参考模型到TCP/IP体系结构产生过程。 TCP/IP体系结构的优点：（1）简化了计算机网络的结构，由原来的七层编导现在的四层，但是其功能并没有减少。（2）每一层即独立又有联系，...

2018-05-31 17:30:34 11934

转载 WebSocket介绍和使用nodejs+socket.io搭建服务器和客户端

WebSocket介绍与原理 WebSocket protocol 是HTML5一种新的协议。它实现了浏览器与服务器全双工通信(full-duplex)。一开始的握手需要借助HTTP请求完成。 ——百度百科目的：即时通讯，替代轮询网站上的即时通讯是很常见的，比如网页的QQ，聊天系统等。按照以往的技术能力通常是采用轮询、Comet技术解决。HTTP协议是非持久化的，单向的...

2018-05-30 10:29:31 9073

转载常见的浏览器兼容性问题与解决方案——CSS篇

1、不同的浏览器的标签默认的外补丁和内补丁不同问题症状：随便写几个标签，不加样式控制的情况下，各自的margin和padding差异较大。碰到频率：100%解决方案：初始化CSS的默认样式，*{margin:0;padding:0}。也可以使用其他网站的初始化代码。备注：这个是最常见的也是最容易解决的一个浏览器兼容性问题。2、块属性标签float后，又有横行的margin情...

2018-05-25 17:58:39 285

转载 JS原生拖拽和input联想和自动补全

js原生实现拖拽，并改变容器的背景色//var _origin = {x: div1.offsetLeft, y:div1.offsetTop}var _newele = document.createElement('div')var div1Style = getComputedStyle(div1)var dropFlag = 0, dragFlag = 0div1.a...

2018-05-23 21:11:15 883

转载 js闭包及垃圾回收机制和引起内存泄漏的操作

JS的垃圾回收机制了解吗?Js具有自动垃圾回收机制。垃圾收集器会按照固定的时间间隔周期性的执行。JS中最常见的垃圾回收方式是标记清除。工作原理：是当变量进入环境时，将这个变量标记为“进入环境”。当变量离开环境时，则将其标记为“离开环境”。标记“离开环境”的就回收内存。工作流程：垃圾回收器，在运行的时候会给存储在内存中的所有变量都加上标记。去掉环境中的变量以及被环境中的变量引...

2018-05-18 12:02:06 1846

原创 js数组和对象的拷贝方法

数组的复制浅拷贝1.使用=进行浅拷贝var arr=[1,2,3];var arr1=arr;console.log(arr);//[1, 2, 3]console.log(arr1);//[1, 2, 3]arr[1]=4;console.log(arr);//[1, 4, 3]console.log(arr1);//[1, 4, 3]复制的是引用，两个数组指向同一个...

2018-05-15 11:15:17 380

转载 LRU缓存的js实现

LRU缓存原理：LRU（Least recently used，最近最少使用）算法根据数据的历史访问记录来进行淘汰数据，其核心思想是“如果数据最近被访问过，那么将来被访问的几率也更高”。实现最常见的实现是使用一个链表保存缓存数据，详细算法实现如下：新数据插入到链表头部；每当缓存命中（即缓存数据被访问），则将数据移到链表头部；当链表满的时候，将链表尾部的数据丢弃。...

2018-05-11 16:22:04 4377

转载从输入url到页面展示发生了什么

刚开始写这篇文章还是挺纠结的，因为网上搜索“从输入url到页面展示到底发生了什么”，你可以搜到一大堆的资料。而且面试这道题基本是必考题，二月份面试的时候，虽然知道这个过程发生了什么，不过当面试官一步步追问下去的，很多细节就不太清楚了。　　最近刚好也在看http协议相关的东西，所以想对这个话题来个深入的总结，本文的目的是通过输入url之后发生的事情来做知识的总结和扩展。所以文章可能会很杂。总...

2018-05-09 17:43:20 590

转载 JavaScript深入之bind的模拟实现

JavaScript深入之bind的模拟实现一句话介绍 bind: bind() 方法会创建一个新函数。当这个新函数被调用时，bind() 的第一个参数将作为它运行时的 this，之后的一序列参数将会在传递的实参前传入作为它的参数。(来自于 MDN )由此我们可以首先得出 bind 函数的两个特点：返回一个函数可以传入参数返回函数的模拟实现从第一个特点开始，我们举个例子...

2018-05-08 20:29:01 204

原创 js实现拖拽

分析： 1.鼠标按下，拖拽开始；鼠标移动，拖拽进行；鼠标抬起，拖拽结束（三个事件） 2.被拖动元素与鼠标之间的位置在拖动过程中始终不变，利用这个原理，被拖动元素的位置(?,?)就是鼠标的左（上）点坐标-鼠标与被拖动元素顶点之间的相对距离如图：注意：onmousemove应该是在onmousedown发生时进行，不然不需要点击也能拖动了。被拖动元素能被拖放，它必须是绝对定位。用户...

2018-04-28 16:26:10 283

原创 HTML条件注释用法诠释

HTML条件注释用法诠释注释内容以样式为例，如下：1、支持所有IE浏览器2、支持非IE浏览器<!--[if !IE]>&lt

2018-04-27 10:05:08 1531

转载用原生js实现一个new方法

首先写一个父类方法(包含参数name,age)：function Person(name,age){ this.name = name; this.age = age;}new一个Person的实例p1做研究对比var p1 = new Person("Richard", 22);//此时p1包含name、age属性，同时p1的__proto__指向Pers...

2018-04-26 21:47:42 993

原创 js设计模式

工厂模式工厂模式常用于创建对象，工厂模式类似于现实生活中的工厂可以产生大量相似的商品，去做同样的事情，实现同样的效果;这时候需要使用工厂模式。简单的工厂模式可以理解为解决多个相似的问题;这也是她的优点，比如如下代码：/** * 工厂模式 */function CreatePerson(name,age,sex) { var obj = new Object(); ...

2018-04-26 20:59:56 381

原创 promise处理回调以及Async/Await替代promise的六大理由

简要介绍：ES6中，可以通过promise来处理回调函数，回调函数经常用于异步操作中，间接来说，可以通过promise优化异步操作。1.什么是JS中的回调函数？回调函数是作为参数传递给另外一个函数，并且该回调函数在函数主体执行完后再执行。2.常见的回调函数以及存在的缺陷常见的回调函数：我们在jquery的ajax请求中，可以看到回调的身影，经典的封装后的ajax请求就是...

2018-04-24 20:14:03 3505

转载 React还是Vue？

原文链接：React or Vue: Which Javascript UI Library Should You Be Using? | Codementor 作者：Anthony Gore 译者：sunny 转载需提前联系译者，未经允许不得转载。本文首发于前端指南2016年，React巩固了它JavaScript web框架之王的地位。在这一年里，Web和...

2018-04-24 16:54:40 568

原创 js原型链和继承

一，原型链在使用New方法初始化函数的时候（详细点击查看new的深度理解）得到的新对象的proto属性会指向函数对象的原型对象，而函数对象的原型对象又继承至原始对象。所以呈现以下结构：function fn(){};var test = new fn();把这个有proto串起来的直到Object.prototype.proto为null的链叫做原型链。原型链实际上就是js中...

2018-04-24 11:03:01 156

原创 CSS实现垂直水平居中的6种方式

一：绝对定位+left,top,right,bottom 0+margin:autodiv绝对定位水平垂直居中【margin:auto实现绝对定位元素的居中】，兼容性：,IE7及之前版本不支持　　　　div{ width: 200px; height: 200px; background: green; ...

2018-04-24 10:25:59 353

原创 H5新特性总结

H5新特性总结本文为汇总网上的不同帖子的内容：H5新标签本地存储离线web应用css3地理定位新标签1.声明html5:万维网的核心语言、HTML规范的第五次重大修改。HTML5是HTML标准的下一个版本 HTML5简化了很多细微的语法，例如doctype的声明： HTML4的声明：&amp;lt;!DOCTYPE HTML PUBLIC &quot;-//W...

2018-04-23 12:26:37 2490

1、快速排序的基本思想：快速排序使用分治的思想，通过一趟排序将待排序列分割成两部分，其中一部分记录的关键字均比另一部分记录的关键字小。之后分别对这两部分记录继续进行排序，以达到整个序列有序的目的。2、快速排序的三个步骤： (1)选择基准：在待排序列中，按照某种方式挑出一个元素，作为 “基准”（pivot） (2)分割操作：以该基准在序列中的实际位置，把序列分成两个子序列。此时，在基准左边的元素都...

2018-04-16 11:39:27 999

原创初识Java web 投票项目

包的含义和作用：(Domain):实体 voter,user(Servlet):拦截器(1)(2)(1)Login: 收到来自login.jsp页面的表单提交的http请求，将用户名和密码封装成voter的属性，并调用UserService，判断用户名和密码是否错误，错误，就提示错误信息，并重定向回login.jsp；成功，用户名存到session，重定向到succ

2018-01-22 17:42:22 592

原创 VueJS环境搭建

1.安装nodejs，安装npm，使用npm命令行工具安装vue.js命令为：npm install-g vue-cli2.新建一个webpack类型的vue项目，命令如下：3.在项目目录下，用命令跑这个项目3.在项目目录下，用命令跑这个项目4.访问http://localhost:8080/得到如下页面...

2018-01-08 11:05:00 331

Haley_Guo的博客