Essentric_

原创 JavaScript数组的最佳实践

扩展运算符数组是复合的数据类型，直接复制的话，只是复制了指向底层数据结构的指针，而不是克隆一个全新的数组const a1 = [1, 2];// 写法一const a2 = [...a1];// 写法二const [...a2] = a1;扩展运算符提供了数组合并的新写法。const arr1 = ['a', 'b'];const arr2 = ['c'];con...

转载 快速排序（Quicksort）的Javascript实现

快速排序（Quicksort）的Javascript实现排序算法（Sorting algorithm）是计算机科学最古老、最基本的课题之一。要想成为合格的程 序员，就必须理解和掌握各种排序算法。目前，最常见的排序算法大概有七八种，其中"快速排序"（Quicksort）使用得最广泛，速度也较快。"快速排序"的思想很简单，整个排序过程只需要三步：（1）在数据集之中，选择一...

原创 HTTP状态码详解

目录 HTTP 状态码 1xx消息HTTP 状态码 2xx成功HTTP 状态码 3xx重定向HTTP 状态码 4xx客户端错误HTTP 状态码 5xx服务器错误HTTP 状态码 1xx消息这一类型的状态码，代表请求已被接受，需要继续处理。这类响应是临时响应，只包含状态行和某些可选的响应头信息，并以空行结束。由于HTTP/1.0协议中没有定义任何1xx状态码，所以除非...

转载 JavaScript字符串转数字的5种方法及其陷阱

String转换为Number有很多种方式，一下列举五种parseInt(num); // 默认方式 (没有基数)parseInt(num, 10); // 传入基数 (十位数)parseFloat(num) // 浮点数Number(num); // Number 构造器~~num //按位非num / 1 // 除一个数num * 1 // 乘一个数num - 0 // ...

原创 JavaScript中的caller和callee

caller 返回一个调用当前函数的引用（caller就是给你打电话的人，谁给你打电话，谁就调用了你），在浏览器中，如果调用当前函数的是window，则返回null；function fn() { console.log(fn.caller);}fn(); // window调用了fn,返回null;function fn() { console.log...

原创 原生JS实现事件委托

什么是事件委托？ 它还有一个名字叫事件代理，JavaScript高级程序设计上讲：事件委托就是利用事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。举个栗子： 有三个同事预计会在周一收到快递。为签收快递，有两种办法：一是三个人在公司门口等快递；二是委托给前台MM代为签收。前台MM收到快递后，她会判断收件人是谁，然后按照收件人的要求签收，甚至代为付款。这种方案还有一个优...

原创 图片随鼠标无限旋转实例

HTML代码： <div class="box"> <img src="timg.jpg" id="image" style="width: 400px;height: 300px;"> </div>CSS代码： .box{ width: 400px; hei

原创 数组去重

function fn (arr) { var arrNew = []; for (var i = 0; i < arr.length; i++) { // indexof() 判断arrNew中是否存在arr[i],若不存在则返回-1 if(arrNew.indexOf(arr[i]) == -1){ // 若不存在则...

原创 多行文字垂直居中

单行文字垂直居中单行文字垂直居中比较简单，只需将 line-height 属性值与其父元素的 height 属性值设为相等即可。如下所示：.text{ line-height: 20px; height: 20px;}多行文字垂直居中 HTML代码：<div class="content"><span class="text"&am

原创 图片垂直水平居中

效果预览： HTML代码：<div class="container middle"> <a href="#"> <img src="timg.jpg" class="show"> </a></div>CSS代码：.container{/* 此容器的

转载 Flex布局

内容引用自阮一峰大神的博客：http://www.ruanyifeng.com/blog/Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex 布局。 Webkit 内核的浏览器，必须加上-webkit前缀。 注意，设为 Flex 布局以后，子元素的float、clear和vertical-alig...

原创 解决Ajax跨域请求的三种方式

如何解决跨域问题什么叫跨域： 主机、协议、端口三者有任何一个不同即为跨域 1. JSONP 　　JSONP是JSON with Padding的略称。它是一个非官方的协议，它允许在服务器端集成Script tags返回至客户端，通过javascript callback的形式实现跨域访问（这仅仅是JSONP简单的实现形式）。　　 2. 添加响应头，允...

原创 学习git笔记

一，git历史：Linus在1991年创建了开源的Linux，因为Linux是开源的，所以Linux的壮大是靠全世界热心的志愿者参与的，这么多人在世界各地为Linux编写代码，那么就要考虑如何管理这些代码，Linux最开始是手工的方式合并代码。但是随着Linux发展不断壮大，代码也越来越多，人工合并的方式不再现实，同时社区的弟兄们也对这种方式表达了强烈不满。于是Linus选择了一个商业的版本控...

原创 浏览器兼容性问题整理

一：不同浏览器的标签默认的外边距和内边距不同。问题症状：随便写几个标签，不加样式控制的情况下，各自的margin 和padding差异较大。解决方案：这个是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的CSS文件开头都会用通配符*来设置各个标签的内外边距为0。二：块属性标签float后，又有横向的margin情况下，在IE6中显示的margin比设置的大。问题症状:  常见症状是IE6中后...

转载 JS基础知识思维导图

原创 JS原型链详细图解

__proto__ 和 prototype 的关系：__proto__ 是每个对象都有的属性；prototype是构造函数的属性；他们指向的是同一个对象。例如：function F(){};var f = new F();f.__proto__ === F.prototype  //true...

原创 解决Angular设置路由时，地址栏出现"!"的问题

AngularJS升级到了1.6版本后，默认视图链接中显示“#!/..”即多出一个“！”。解决方法一：在a标签的href属性中添加一个“！”：解决方法二：修改视图链接的默认显示：...

原创 js事件驱动模型图解