常见总结

JavaScript的数据类型 6种

object number function boolean undefined string

基本数据类型：数值型、字符串型和布尔型；Number String Boole

数组去重

最简单的还是用ES6的Set方法去重

https://www.cnblogs.com/mahmud/p/10283343.html

JavaScript设计模式浅析

http://blog.alanwu.site/2020/03/17/designMode/

性能优化和跨域的解决方法

什么是作用域链？

JavaScript 原型，原型链 ? 有什么特点？

1. 原型对象也是普通的对象，是对象一个自带隐式的 __proto__ 属性，原型也有可能有自己的原型，如果一个原型对象的原型不为 null 的话，我们就称之为原型链

2. 原型链是由一些用来继承和共享属性的对象组成的（有限的）对象链

原型与原型链

所有原型链的终点都是 Object 函数的 prototype 属性
每一个构造函数都拥有一个 prototype 属性，此属性指向一个对象，也就是原型对象
原型对象默认拥有一个 constructor 属性，指向指向它的那个构造函数
每个对象都拥有一个隐藏的属性 __ proto __，指向它的原型对象

Gulp

Gulp 就是为了规范前端开发流程，实现前后端分离、模块化开发、版本控制、文件合并与压缩、mock数据等功能的一个前端自动化构建工具。说的形象点，“Gulp就像是一个产品的流水线，整个产品从无到有，都要受流水线的控制，在流水线上我们可以对产品进行管理。”

另外，Gulp是通过task对整个开发过程进行构建。

Webpack

Webpack 是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过 loader的转换，任何形式的资源都可以视作模块，比如 CommonJs 模块、AMD 模块、ES6 模块、CSS、图片、JSON、Coffeescript、LESS 等

gulp严格上讲，模块化不是他强调的东西，他旨在规范前端开发流程。
webpack更是明显强调模块化开发，而那些文件压缩合并、预处理等功能，更像是附带的功能。

防抖和节流 https://www.jianshu.com/p/b7b698db8352

html:负责定义页面的内容

css:负责定义页面的样式

javascript:负责控制页面的行为

以上三种为前端学习的基本课程

jquery:javascript框架，javascript函数库，极大简化了javascript。

bootstrap:一个用于快速开发 Web 应用程序和网站的前端框架。

AngularJS: 是一个 JavaScript 框架。

JSON: 是存储和交换文本信息的语法.

Ajax: 可以用于创建快速动态的网页。AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

Angular 2:是一个开源的JavaScript框架

React: 是一个用于构建用户界面的 JAVASCRIPT 库。React主要用于构建UI .

LESS:是一个CSS预处理器，可以为网站启用可自定义，可管理和可重用的样式表。是一种动态样式表语言，扩展了CSS的功能

Vue.js ：是用于构建交互式的 Web 界面的库。

Node.js ：是运行在服务端的 JavaScript。

那么在移动端如何配置视口呢？简单的一个meta标签即可！

rem适配

举个例子：

//假设我给根元素的大小设置为14px
html{
    font-size：14px
}
//那么我底下的p标签如果想要也是14像素
p{
    font-size:1rem
}
//如此即可
复制代码

rem的布局不得不提flexible，flexible方案是阿里早期开源的一个移动端适配解决方案，引用flexible后，我们在页面上统一使用rem来布局。

W3C 标准盒模型：属性width,height只包含内容content，不包含border和padding

IE 盒模型：属性width,height包含border和padding，指的是content+padding+border

content-box（标准盒模型） border-box（IE盒模型）

ES6的新特性 http://blog.alanwu.site/2020/03/11/ES6/

let、var、const区别
箭头函数
解构赋值
模板字符串
Set、Map数据结构
Promise对象
Proxy

cookie与session

cookie保存在客户端（浏览器）；session保存在服务端（redis）
Session是由应用服务器维持的一个服务器端的存储空间，用户在连接服务器时，会由服务器生成一个唯一的SessionID,用该SessionID 为标识符来存取服务器端的Session存储空间

例子：

当客户端第一次请求登录服务器的时候，服务器随机下发一个字符串sessionId给浏览器，以cookie的形式保存在客户端。当下次登录的时候会带上这个cookie，从而识别你是谁。

cookie的优点：

1.极高的扩展性和可用性 2.通过良好的编程，控制保存在cookie中的session对象的大小。 3.通过加密和安全传输技术（SSL），减少cookie被破解的可能性。 4.只在cookie中存放不敏感数据，即使被盗也不会有重大损失。 5.控制cookie的生命期，使之不会永远有效。偷盗者很可能拿到一个过期的cookie。

cookie的缺点：

1.cookie数量和长度的限制。每个domain最多只能有20条cookie，每个cookie长度不能超过4KB，否则会被截掉。 2.安全性问题。如果cookie被人拦截了，那人就可以取得所有的session信息。即使加密也与事无补，因为拦截者并不需要知道cookie的意义，他只要原样转发cookie就可以达到目的了。 3.有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用。

Cookie、sessionStorage、localStorage的区别

共同点：都是保存在浏览器端，并且是同源的

Cookie：cookie数据始终在同源的http请求中携带（即使不需要），即cookie在浏览器和服务器间来回传递。而sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存。cookie数据还有路径（path）的概念，可以限制cookie只属于某个路径下,存储的大小很小只有4K左右。（key：可以在浏览器和服务器端来回传递，存储容量小，只有大约4K左右）

sessionStorage：仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持，localStorage：始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据；cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。（key：本身就是一个回话过程，关闭浏览器后消失，session为一个回话，当页面不同即使是同一页面打开两次，也被视为同一次回话）

localStorage：localStorage 在所有同源窗口中都是共享的；cookie也是在所有同源窗口中都是共享的。（key：同源窗口都会共享，并且不会失效，不管窗口或者浏览器关闭与否都会始终生效）

补充说明一下cookie的作用：

保存用户登录状态。例如将用户id存储于一个cookie内，这样当用户下次访问该页面时就不需要重新登录了，现在很多论坛和社区都提供这样的功能。 cookie还可以设置过期时间，当超过时间期限后，cookie就会自动消失。因此，系统往往可以提示用户保持登录状态的时间：常见选项有一个月、三个月、一年等。

跟踪用户行为。例如一个天气预报网站，能够根据用户选择的地区显示当地的天气情况。如果每次都需要选择所在地是烦琐的，当利用了cookie后就会显得很人性化了，系统能够记住上一次访问的地区，当下次再打开该页面时，它就会自动显示上次用户所在地区的天气情况。因为一切都是在后台完成，所以这样的页面就像为某个用户所定制的一样，使用起来非常方便定制页面。如果网站提供了换肤或更换布局的功能，那么可以使用cookie来记录用户的选项，例如：背景色、分辨率等。当用户下次访问时，仍然可以保存上一次访问的界面风格。

特性	cookie	localStorage	sessionStorage	indexDB
数据生命周期	一般由服务器生成，可以设置过期时间	除非被清理，否则一直存在	页面关闭就清理	除非被清理，否则一直存在
数据存储大小	4K	5M	5M	无限
与服务端通信	每次都会携带在 header 中，对于请求性能影响 cookie在浏览器和服务器间来回传递	不会自动把数据发给服务器，仅在本地保存	不会自动把数据发给服务器，仅在本地保存	不参与

特性

localStorage

sessionStorage

indexDB

数据生命周期

一般由服务器生成，可以设置过期时间

除非被清理，否则一直存在

页面关闭就清理

除非被清理，否则一直存在

数据存储大小

无限

与服务端通信

每次都会携带在 header 中，对于请求性能影响

cookie在浏览器和服务器间来回传递

不会自动把数据发给服务器，仅在本地保存

不参与

重要的是多刷题，可以看剑指offer，leetcode！

样式优先级

!important > 内联 > id > class > tag

CSS3有哪些新特性？

参考答案

1. CSS3实现圆角（border-radius），阴影（box-shadow），

2. 对文字加特效（text-shadow、），线性渐变（gradient），旋转（transform）

3. transform:rotate(9deg) scale(0.85,0.90) translate(0px,-30px) skew(-9deg,0deg);// 旋转,缩放,定位,倾斜

4. 增加了更多的CSS选择器多背景 rgba

5. 在CSS3中唯一引入的伪类是 ::selection.

6. 媒体查询，多栏布局

7. border-image

#parent:after{

content:".";

height:0;

visibility:hidden;

display:block;

clear:both;

}

new操作符具体干了什么呢?

参考答案

1. 创建一个空对象，并且 this 变量引用该对象，同时还继承了该函数的原型

2. 属性和方法被加入到 this 引用的对象中

3. 新创建的对象由 this 所引用，并且最后隐式的返回 this

var obj = {};

obj.__proto__ = Base.prototype;

Base.call(obj);

如何解决跨域问题?

1. jsonp（jsonp 的原理是动态插入 script 标签）

2. document.domain + iframe

3. window.name、window.postMessage

4. 服务器上设置代理页面

对Node的优点和缺点提出了自己的看法？

优点：

1. 因为Node是基于事件驱动和无阻塞的，所以非常适合处理并发请求，因此构建在Node上的代理服务器相比其他技术实现（如Ruby）的服务器表现要好得多。

2. 与Node代理服务器交互的客户端代码是由javascript语言编写的，因此客户端和服务器端都用同一种语言编写，这是非常美妙的事情。

缺点：

1. Node是一个相对新的开源项目，所以不太稳定，它总是一直在变。

2. 缺少足够多的第三方库支持。看起来，就像是Ruby/Rails当年的样子（第三方库现在已经很丰富了，所以这个缺点可以说不存在了）。

ajax 的过程是怎样的

参考答案

1. 创建XMLHttpRequest对象,也就是创建一个异步调用对象

2. 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息

3. 设置响应HTTP请求状态变化的函数

4. 发送HTTP请求

5. 获取异步调用返回的数据

6. 使用JavaScript和DOM实现局部刷新

请解释一下 JavaScript 的同源策略。

参考答案

概念：

同源策略是客户端脚本（尤其是Javascript）的重要的安全度量标准。它最早出自Netscape Navigator2.0，其目的是防止某个文档或脚本从多个不同源装载。

这里的同源策略指的是：协议，域名，端口相同，同源策略是一种安全协议，指一段脚本只能读取来自同一来源的窗口和文档的属性。

为什么要有同源限制：

我们举例说明：比如一个黑客程序，他利用Iframe把真正的银行登录页面嵌到他的页面上，当你使用真实的用户名，密码登录时，他的页面就可以通过Javascript读取到你的表单中input中的内容，这样用户名，密码就轻松到手了。

Ajax 是什么？Ajax 的交互模型？同步和异步的区别？如何解决跨域问题？

参考答案

Ajax 是什么：

1. 通过异步模式，提升了用户体验

2. 优化了浏览器和服务器之间的传输，减少不必要的数据往返，减少了带宽占用

3. Ajax 在客户端运行，承担了一部分本来由服务器承担的工作，减少了大用户量下的服务器负载。

Ajax 的最大的特点：

1. Ajax可以实现动态不刷新（局部刷新）

2. readyState 属性状态有5个可取值： 0 = 未初始化，1 = 启动， 2 = 发送，3 = 接收，4 = 完成

Ajax 同步和异步的区别:

1. 同步：提交请求 -> 等待服务器处理 -> 处理完毕返回，这个期间客户端浏览器不能干任何事

2. 异步：请求通过事件触发 -> 服务器处理（这是浏览器仍然可以作其他事情）-> 处理完毕

ajax.open方法中，第3个参数是设同步或者异步。

Ajax 的缺点：

1. Ajax 不支持浏览器 back 按钮

2. 安全问题 Ajax 暴露了与服务器交互的细节

3. 对搜索引擎的支持比较弱

4. 破坏了程序的异常机制

5. 不容易调试

解决跨域问题：

1. jsonp

2. iframe

3. window.name、window.postMessage

4. 服务器上设置代理页面

js对象的深度克隆代码实现

参考答案

function clone(Obj) {
    var buf;   
    if (Obj instanceof Array) {
        buf = [];  // 创建一个空的数组
        var i = Obj.length;
        while (i--) {
            buf[i] = clone(Obj[i]);
        }
        return buf;
    } else if (Obj instanceof Object){
        buf = {};  // 创建一个空对象
        for (var k in Obj) {  // 为这个对象添加新的属性
            buf[k] = clone(Obj[k]);
        }
        return buf;
    }else{
        return Obj;
    }
}

posted @ 2020-03-15 14:02 丑萌嘞阅读(156) 评论(0) 编辑收藏举报

刷新页面返回顶部

酱兔子

常见总结

JavaScript的数据类型 6种

原型与原型链

Gulp

Webpack

rem适配

ES6的新特性 http://blog.alanwu.site/2020/03/11/ES6/

cookie与session

Cookie、sessionStorage、localStorage的区别

参考答案

参考答案

参考答案

参考答案

参考答案

参考答案

公告