函数介绍

向数组末尾添加值

push
说明：向数组的末尾添加一个或多个元素，并返回新的长度 代码：

1
2
3
4
5

let array=[11,22];
let arrayChange=array.push("333");
console.log(arrayChange)
//返回的结果就是数组改变后的长度：3
console.log(arrayChange.length)//undefined

阅读全文

不同标签页间的通讯，本质原理就是去运用一些可以 共享的中间介质，因此比较常用的有以下方法:

通过父页面window.open()和子页面postMessage
异步下，通过 window.open(‘about: blank’) 和 tab.location.href = ‘*’

设置同域下共享的localStorage与监听window.onstorage
重复写入相同的值无法触发
会受到浏览器隐身模式等的限制

设置共享cookie与不断轮询脏检查(setInterval)
借助服务端或者中间层实现

##目前常见的存储方式为以下三种：

• Cookie
• web存储 (locaStorage和seesionStorage)
• IndexedDB

共同点：都是保存在浏览器端、且同源的
区别：

1. typeof

可以判断数据类型，它返回表示数据类型的字符串（返回结果只能包括 number,boolean,string,function,object,undefined）；
可以使用 typeof 判断变量是否存在（如 if(typeof a!=”undefined”){…}）；
Typeof 运算符的问题是无论引用的对象是什么类型 它都返回 object

1
2
3

typeof {}; // object
typeof [1, 2]; // object
typeof /\s/; //object

阅读全文

之前有讲过数组去重的方法，今天说一下如何判断是否为空数组和数组的一些方法。话不多说直接上代码！

如何判断一个变量是不是数组：

使用 Array.isArray 判断，如果返回 true, 说明是数组；
使用 instanceof Array 判断，如果返回 true, 说明是数组；
使用 Object.prototype.toString.call 判断，如果值是 [object Array], 说明是数组；
通过 constructor 来判断，如果是数组，那么 arr.constructor === Array. (不准确，因为我们可以指定 obj.constructor = Array)

1
2
3
4
5
6
7
8
9
10
11
12
13

function fn() {
  console.log(Array.isArray(arguments)); //false; 因为 arguments 是类数组，但不是数组
  console.log(Array.isArray([1, 2, 3, 4])); //true
  console.log(arguments instanceof Array); //fasle
  console.log([1, 2, 3, 4] instanceof Array); //true
  console.log(Object.prototype.toString.call(arguments)); //[object Arguments]
  console.log(Object.prototype.toString.call([1, 2, 3, 4])); //[object Array]
  console.log(arguments.constructor === Array); //false
  arguments.constructor = Array;
  console.log(arguments.constructor === Array); //true
  console.log(Array.isArray(arguments)); //false
}
fn(1, 2, 3, 4);

阅读全文

Ajax 全称是 asynchronous javascript and xml，并不是新的编程语言，可以说是已有技术的组合，主要用来实现客户端与服务器端的异步通信效果，实现页面的局部刷新，从而创建快速动态网页的技术。

Ajax 过程

• 创建 XMLHttpRequest 对象,也就是创建一个异步调用对象
• 创建一个新的 HTTP 请求,并指定其请求的方法、URL 及验证信息
• 设置响应 HTTP 请求状态变化的函数
• 发送 HTTP 请求
• 获取异步调用返回的数据
• 使用 JavaScript 和 DOM 实现局部刷新

阅读全文

1、webpack 介绍

当我们打开webpack 中文文档首页时，最底下的几个大字让一切变得简单，我就觉得它很牛逼，很不简单。官网上的 webpack 概念：webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)，显然 webpack 是一个项目静态模块打包器。不过后面还有一句就是：当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。这个的意思就是 webpack 会自动分析你的项目结构，各个的模块依赖关系，然后打包成相应的 bundle，至于模块就理解为一个 js 文件为一个模块，css 也是一样。

2、创建 webpack 项目

1.新建文件夹，名为 webpackdemo，创建 src 文件夹并且包含 app.js； 2.打开终端进入 webpackdemo 文件夹，输入 npm init,执行完了会出现 package.json 文件； 3.安装 webpack 和 webpack-cli，输入 npm i webpack webpack-cli -D 4.在 package.json 中添加

阅读全文

在实际项目当中，用户登录网站输入账号密码，当用户选择记住密码的时候，下次自动填充表单的背景变成了黄色，影响了视觉体验。这个是可以修改的。下面给出方案：

1
2
3
4
5
6
7
8
9
10
11
12
13
14

// 方法1

input:-webkit-autofill, textarea:-webkit-autofill, select:-webkit-autofill {
  background-color: #fff; // 设置成元素原本的颜色
  background-image: none;
  color: rgb(0, 0, 0);
}

// 方法2

input:-webkit-autofill 
{
  -webkit-box-shadow: 0px 0 3px 100px #ccc inset; // 背景色
}

1. 盒模型

页面渲染时，dom 元素所采用的 布局模型。可通过box-sizing进行设置。根据计算宽高的区域可分为：

• content-box (W3C 标准盒模型)
• border-box (IE 盒模型)
• padding-box
• margin-box (浏览器未实现)

box-sizing: content-box（W3C盒子模型）：元素的宽高大小表现为内容的大小。
box-sizing: border-box（IE盒子模型）：元素的宽高表现为内容 + 内边距 + 边框的大小。背景会延伸到边框的外沿。
IE5.x和IE6在怪异模式中使用非标准的盒子模型，这些浏览器的width属性不是内容的宽度，而是内容、内边距和边框的宽度的总和。

2. BFC

块级格式化上下文，是一个独立的渲染区域，让处于 BFC 内部的元素与外部的元素相互隔离，使内外元素的定位不会相互影响。

• IE下为 Layout，可通过 zoom:1 触发

阅读全文

Http 缓存机制作为 web 性能优化的重要手段，对于从事 Web 开发的同学们来说，应该是知识体系库中的一个基础环节。
但是对于很多前端同学来说，仅仅只是知道浏览器会对请求的静态文件进行缓存，但是为什么被缓存，缓存是怎样生效的，却并不是很清楚。
在此，我会尝试用简单明了的文字，像大家系统的介绍HTTP缓存机制，期望对各位正确的理解前端缓存有所帮助。

1. 浏览器缓存基本认识

它分为强缓存和协商缓存：
1.浏览器在加载资源时，先根据这个资源的一些http header判断它是否命中强缓存，强缓存如果命中，浏览器直接从自己的缓存中读取资源，不会发请求到服务器。比如某个css文件，如果浏览器在加载它所在的网页时，这个css文件的缓存配置命中了强缓存，浏览器就直接从缓存中加载这个css，连请求都不会发送到网页所在服务器；

阅读全文