BFC 布局方案
盒子不定宽高设置水平垂直居中
- 盒子设置绝对定位，使用translate(-50%,-50%)
- 弹性盒子 设置左右垂直居中
盒子定宽高设置水平垂直居中
- position结合margin设置水平垂直居中
左侧固定右侧自适应布局
- 左侧设置浮动，右侧设置margin-left值
- 左侧设置绝对定位，右侧设置margin-left值
右侧固定左侧自适应
- 右侧绝对定位，左侧设置margin-right
- 左侧设置margin-right 左侧做浮动，右侧右浮动
两侧固定中间自适应
- 圣杯布局 padding 设置float浮动 margin-left
- 双飞翼布局 margin float margin-left
- flex弹性盒子布局
app的类型有哪些？
NagtiveApp
- 原生APP就是利用Android、iOS平台官方的开发语言、开发类库、工具进行开发 Java,object-c
- 优点是应用性能上和交互体验上应该是最好的， 缺点就是开发成本，周期比较长
hybirdApp
- 即利用了原生APP的开发技术还应用了HTML5开发技术，是原生和HTML5技术的混合应用 比如小程序
WebApp
- 本质就是浏览器功能的叠加，用普通Web开发语言开发的，通过浏览器运行
响应式适配方案
-
百分比
- 利用设置百分比适配不同的屏幕，这个百分比主要是相对于父元素，只有width,height,padding,margin能设置，比如边框border，font-size是不能设置的。
-
媒体查询
- 设置不同屏幕宽度下宽度设置不同的css样式，比如不同的分辨率显示不同背景颜色，相对比百分比，对布局可以更加细化，但是可能需要在不同分辨率下都写一套css，IE6，7，8不支持媒体查询
-
flex弹性布局
- 利用 flex 属性来适配不同屏幕，根据屏幕自适应大小 -
rem布局
- 当前页面中元素的rem 单位的样式值都是针对于html 元素的font-size 的值进行动态计算的
- 所以我们可以通过媒体查询或者js动态赋值的方式，给html设置font-size的值
-
vw和vh
- 根据 PSD 文件宽度或高度作为标准，元素单位 px 转换为 vw 或 vh
- 比如font-size: 12px，PSD 文件宽度 375，转换公式 12 * 100 / 375，则样式改为font-size: 3.2vw 类似于rem方式的换算
常见的面试题讲解
1. px,em,rem的区别
- px像素（Pixel）。相对长度单位。像素px是相对于显示器屏幕分辨率而言的。
- em是相对长度单位。相对于当前对象内文本的字体尺寸。 1em=浏览器给文本设置默认font-size值
- rem 相对于html根元素字体大小，可以根据屏幕的变大变小自适应大小
- 如果只需要适配少部分手机设备，可使用px，如果需要适配多种机型，可使用rem
-
移动端meta属性解释
最重要的:
html <meta name = "viewport" content = "width = device-width, initial-scale = 1.0, minimum-scale=1.0,maximum-scale = 1.0, user-scalable = no" />- viewport
- width=device-width：宽度为设备宽度
- initial-scale: 初始的缩放比例 （范围从>0到 10 ）
- minimum-scale: 允许用户缩放到的最小比例
- maximum-scale: 允许用户缩放到的最大比例
- user-scalable: 用户是否可以手动缩放
- viewport
-
自适应和响应式有什么区别
- 自适应只是响应式当中的一个子集，也就是说响应式的开始形态是自适应
- 响应式与自适应的原理是相似的，都是检测设备，根据不同的设备采用不同的css，
- 响应式网站在不同的设备上看上去是不一样的，会随着设备的改变而改变模板样式、模块排版、展示样式。
- 自适应不会，所有的设备看起来都是一样的网站，不过是长度或者图片变小了，不会根据设备采用不同的展示样式
-
1像素问题
-
移动端CSS里面写了1px，实际上看起来比1px粗原因是:移动端window对象有个devicePixelRatio属性, 它表示设备物理像素和css像素的比例, 在retina屏的iphone手机上, 这个值为2或3, css里写的1px长度映射到物理像素上就有2px或3px那么长
-
媒体查询利用设备像素比例缩放
```css .border { border: 1px solid #999 } @media screen and (-webkit-min-device-pixel-ratio: 2) { .border { border: 0.5px solid #999 } } @media screen and (-webkit-min-device-pixel-ratio: 3) { .border { border: 0.333333px solid #999 } } ``` -
viewport + rem方案
- 利用viewport + rem + js 动态的修改页面的缩放比例，根据devicePixelRatio的不同大小，给viewport设置不同的content属性。
- 点透问题
- 移动web中给有重叠的两个元素都添加了点击事件，当触发上方的元素的时候同时也会透过该元素触发下面的元素。这就是点透，
然而这并不是我想要的效果。 - 可使用fastclick.js插件，直接引入到项目中即可，
- 移动端上下滑动卡顿不流畅现象
-
盒子添加一个属性 -webkit-overflow-scrolling: touch；
-webkit-overflow-scrolling控制元素在移动设备上面是否有滚动回弹效果，它可以设置成auto和touch -
禁止浏览器的默认行为，不然类似于微信滑动到底部的时候会和回弹的效果进行冲突
document.documentElement.addEventListener('touchmove',function(e){ e.preventDefault(); });
-
本地存储
-
localStorage
长期存储在本地，不会随着浏览器的关闭消失 5M左右 -
sessionStorage
暂时存储，浏览器关闭数据丢失 5M左右
localStoreage.setItem(key,value)localStorage.getItem(key);
localStorage.removeItem(key); -
storage和cookie的区别
存储在本地，cookie存储大小4kb左右，每个域名下存储的cookie个数有限制，cookie不够安全，不会存储敏感性的信息
document.cookie = “username=111”;做一个搜索，添加历史记录的案例，搜索商品关键字
1. 什么是HTML5？
简单点理解成为HTML 5 ≈ HTML4.0+CSS3+JS+API,是对html的第五次修订
2. HTML5和HTML区分
-
文档声明区别
HTML：超文本标记语言，一种纯文本类型的语言。
HTML5.0：文档声明HTML5方便书写，精简，有利于程序员快速的阅读和开发。 -
html5提供了一些语义化的标签
html：没有体现结构语义化的标签，如：<div id="nav"></div>
html5：添加了许多具有语义化的标签，如：<article>、<aside>、<audio>、<bdi>... -
绘图区别
HTML：指可伸缩矢量图形，用于定义网络的基于矢量的图形。
HTML5：HTML5的canvas元素使用脚本（通常使用JavaScript）在网页上绘制图像，可以控制画布每一个像素
3.H5新增哪些特性?
- 新增元素
- 绘画 canvas
- 用于媒介复回放的 video 和 audio 元素
- 语意化更好知的内容元素，比如 article、footer、header、nav、section;
- figure：是对多个元素进行组合并展示的元素，通常与 ficaption 联合使用。
- 表单控件 calendar、date、time、email、url、search,tel,number,color
- 新的技术道webworker, websocket, Geolocation;
- 内容元素，比如 article、footer、header、nav、section;
- 表单控件，calendar、date、time、email、url、search,number,color
- document.querySelector() document.querySelectorAll()
- localStorage，sessoinStorage，pushState，replaceState
4.HTML5有哪些优势?
- 跨平台性
- H5的最显著的优势在于跨平台性，用H5搭建的站点与应用可以兼容PC端与移动端、Windows与Linux、安卓与IOS，降低了开发难度，节约了开发时间和成本的投入。 - 即时更新
- webApp开发通过浏览器，可以即时更新 - 离线缓存
- 本地存储功能相比cookie来说空间更大一下，使用更方便 - 视频和音频的支持性
- 元素代码更清晰，语义性更强
5. 如何处理HTML5新标签的浏览器兼容问题
- 使用js判断如果小于IE9版本，把这些新标签放到数组中，然后通过js的document.createElement()创建节点
- 使用Google的html5shiv包
js的组成部分
- ES js解释器， ES6，7
let const 解构赋值， 箭头函数，Promise 等 - BOM 浏览地对象模型
- Navigator
- 日期对象 new Date()
- setTimeout setInterval()
- DOM 文档对象模型
- document.documentElement
- cookie ，DOM操作
数据类型判断和数据类型
4种数据类型判断
- typeof做数据类型判断
- instanceof
- constructor
- Object.prototype.toString.call(data)
‘[object String]’
基本数据类型：指的是保存在栈内存中简单的数据段，常见的基本数据类型有number，string，Boolean，undefined， symbol
对象数据类型：指的是保存在堆内存中的对象，意思是，保存的实际上只是一个指针，这个指针指向实际的值，常见的引用数据类型有object，function，
数据类型简单复习
-
js中的typeof返回哪些数据类型
- number string boolean undefined function object[null，数组，对象]
- typeof 变量只是声明未定义时，就是undefined
- null ,数组，对象 typeof检测返回的是一个对象 -
分别列举基本数据类型和引用数据类型及区别
- 基本数据类型数据是存储在栈中
- 引用数据类型数据存储在堆中，把存储的内存地址存储在栈中,地址指向堆中所对应的内容。 -
例举3种强制类型转换和2种隐式类型转换
- parseInt() parseFloat() Number() toString() 显示转换
- “1”+1 = “11” “10”-0 = 10 隐式转换
- 判断一个字符串是否是纯数字
- 正则表达式实现，
- isNaN()+Number数据类型转换 -
null 和undefined的区别
null
- null 代表 “空值”，代表一个空对象指针，使用typeof运算得到 “object” ，所以可以认为它是一个特殊的对象值
- null是javascript的关键字
- 当一个声明了一个变量未初始化时，得到的就是 undefined 使用typeof运算得到 “undefined”null == undefined //true null === undefined //false
数组常用方法
-
数组的方法以及属性
- indexOf() includes() push() pop() shift() unshift() join() reverse() sort() splice() slice() - filter() map() forEach() findIndex() find() every() some() includes(); -
split() join() 的区别
- split() 把一个字符串分割成数组
- join() 把一个数组拼接成字符串 -
清空数组你知道几种方法
- splice() splice(0,arr.length)
- 数组的长度length赋值为0
- 数组重新赋值为 [] -
什么是伪数组？如何转为真数组
- 伪数组，具有length属性，无法使用数组的方法，可以循环遍历，使用索引- 函数中的arguments - 通过getElementsByTagName() 等获取集合也是 - 特殊写法的对象，var obj = {} - Array.prototype.slice.call方法把它转换为真数组 Array from 方法 -
手写冒泡排序，选择排序，数组去重方法
字符串的常用方法
1. **字符串的属性**
- length 属性，返回字符串长度
```js
var myStr = "I,love,you,Do,you,love,me";
console.log(myStr.length);//25
```
2. 字符串的方法你还记得哪些?
- 基本函数
- trim() 清空字符串左右空格，一般提交数据，避免用户误输入，自动给他清楚空格使用
- charAt(index) 类似于 数组中的[]，通过下标访问字符串某个元素
```js
var myStr = "I,love,you,Do,you,love,me";
var theChar = myStr.charAt(8);// "o",同样从0开始
```
- indexOf(son) 从字符串开头查找，查找匹配字符串第一次出现的坐标，找不到返回-1
- lastIndexOf(son) 从字符串末尾查找，查找匹配字符串第一次出现的坐标，找不到返回-1
```js
var myStr = "I,Love,you,Do,you,love,me";
var index = myStr.indexOf("you"); // 7 ,基于0开始,找不到返回-1
var last_index = myStr.lastIndexOf("you"); // 14
```
- +，concat(str) 字符串拼接函数
```js
var str1 = "I,love,you!";
var str2 = "Do,you,love,me?";
var str = str1 + str2 + "Yes!";
//"I,love,you!Do,you,love,me?Yes!"
var str = str1.concat(str2);
//"I,love,you!Do,you,love,me?"
```
- 字符串整容函数
- split(分隔符) 字符串分割为数组,
```js
var myStr = "I,Love,You,Do,you,love,me";
var substrArray = myStr .split(",");
// ["I", "Love", "You", "Do", "you", "love", "me"];
```
- toLowerCase() 转换为小写字母
- toUpperCase() 转换为大写字母
```js
var myStr = "I,love,you,Do,you,love,me";
var lowCaseStr = myStr.toLowerCase();
//"i,love,you,do,you,love,me";
var upCaseStr = myStr.toUpperCase();
//"I,LOVE,YOU,DO,YOU,LOVE,ME"
```
- 字符串截取三姐妹花
- slice(start, end) 参数: 开始位置，结束位置 可以为负数
- substring(start, end) 参数，开始位置，结束位置 不可以为负数
- substr(start, length) 参数 开始位置，截取长度
```js
var myStr = "I,love,you,Do,you,love,me";
var subStr = myStr.slice(1,5);//",lov"
var subStr = myStr.substring(1,5); //",lov"
var subStr = myStr.substr(1,5); //",love"
```
- 字符串可使用正则的三个搜索匹配函数
- str.match(pattern) 结构返回一个数组
- str.search(pattern) 返回搜索的字符串第一次出现的位置
```js
var myStr = "I,love,you,Do,you,love,me";
var pattern = /love/g;
var result = myStr.match(pattern);//["love","love"]
```
- str.replace(parttern, rep)
```js
var myStr = "I,love,you,Do,you,love,me";
var replacedStr = myStr.replace(/love/g,"hate");
//"I,hate,you,Do,you,hate,me"
```
3. 解析url参数为对象
- 解析url地址参数，转换为对象
> 我们都知道get传递参数，是直接把参数以key,value的形式拼接到url地址后面的，那如果我们需要把当前url地址传递的全部转换为对象
应该怎么处理呢？
```js
//1. 定义一个url地址
var url = "http://www.xxx.net/x/x.html?id=898602B8261890349226&username=老张&age=39";
//2. 获取当前url的地址的参数,使用split()分割 ? 获取第二个元素
var url_params = url.split("?")[1];
//3. 把参数按照`&`进行分割成数组
var params = url_params.split("&");
//4. 定义一个空对象，循环遍历上述的数组，分割‘=’号
var $_request = new Object();
for(var i =0;i <params.length; i++){
var tmp = params[i].split("=");
$_request[tmp[0]] = params[1];// 这里的对象设置必须用[] 不能用点
}
console.log($_request);
```
总的来说，这个案例主要是用到了 字符串的split()分割函数，逐一把参数剥离出来然后拼接成对象
4. 字符串转驼峰案例
js对象.background-color =
比如 `border-bottom-color => borderBottomColor`
```js
var string = "border-bottom-color";
function topCase(str){
//1. 首先我们需要把字符串按照-分割
var arr = string.split('-');
//2. 分割完以后，把数组中的元素除了第一个元素外[下标从1开始]，首字母变成大写,
for(var i = 1; i< arr.length; i++){
arr[i] = arr[i].charAt(0).toUpperCase() + arr[i].substring(1);
}
//3. 把数组拼接成字符串，
return arr.join("");
}
topCase(string);
```
5. 查找字符串中出现最多的字符个数
找出给定的一个字符串中某个字符出现的次数字符和出现的次数，大家想一下思路，如何实现呢？
```js
//1. 定义空字符串
var string = "zhaochucichuzuiduodezifu";
//2. 定义一个空对象，循环统计字符出现的次数，按照字母:次数的方式存入到对象中
var obj = new Object();
for (var i = 0; i < string.length; i++) {
var char = string.charAt(i);
if (obj[char]) {
obj[char]++;
} else {
obj[char] = 1;
}
}
console.log(obj);
//3.定义max和maxChar分别存放最大数字和出现次数最多的字符
var max = 0,maxChar = null;
//4. 循环比较进行判断得出出现似乎最多的字符
for(var key in obj){
if(max < obj[key]){
max = obj[key];
maxChar = key;
}
}
console.log(maxChar,":",max);
```
总结： 这里面主要用到charAt函数和对象循环判断的知识点
6. 字符串加千分符
有些时候，我们会发现在一些金融类的网站上，有些金额每隔三位数字一个逗号，这种我们称之为千分符，那他是怎么实现的呢？今天我们来看一下
```js
//定义一个数字
var num = 13433023930239;
function qian(num){
//数字转换为字符串
var num = num.toString();
var str = "";//定义空字符串用于拼接
//从后往前遍历字符串
for(var i=num.length-1;i>=0;i--){
//下标为3的倍数就拼接一个，号，直接结束当前循环
if(i%3== 0 && i!=0){
str += num[i]+",";
continue;
}
str += num[i];
}
return str.split("").reverse().join("");//字符串反转案例
}
var n = qian(num);
console.log(n); //134,330,239,302,39
```
总结： 案例主要是用到了 toString(),split() reverse() join() 函数
touch事件
touch事件主要是针对移动端的事件，也就是移动端的屏幕触摸事件
- 首先 touch 包含三类事件，它们分别是：touchstart、touchmove、touchend 。
- touchstart：手指触摸到一个 DOM 元素时触发。
- touchmove：手指在一个 DOM 元素上滑动时触发。
- touchend：手指从一个 DOM 元素上移开时触发
。
DOM操作
-
查找，添加，删除
- 四种查找节点方法
- getElementById()
- getElementsByClassName()
- getElementsByTagName()
- getElementsByName()
- appChild() insertBefore()
- removeChild() remove()
- 创建，复制，替换，插入
- document.createElement() document.createTextNode()
- cloneNode(true), replace()
- DOM移动，简单拖拽效果
- mousedown mousemove mouseup
cookie的操作
- cookie就是一个存放数据的东西，存储量很小4kb，存放在客户端上和应用设备上。
- 应用场景
- 用户注册，用户登录，购物车。
- cookie的参数
- name,value, 域名，路径，过期时间，是否http，是否https
-
cookie如何操作
document.cookie = "username=liguah"; //设置内容 document.cookie//获取cookie的内容 -
cookie的设置，读取，删除操作函数封装
let cookies = { setCookie: function(name,value){ if(name=="" || value==""){ return false; } let time = new Date(); time.setTime(time.getTime()+3600*1000*7); document.cookie = `${name} = ${value};expires=${time.toGMTString()}`; }, getCookie: function(name){ let data = document.cookie.split(";"); let cookies = null; for(let val of data){ let tmp = val.split("="); if(name == tmp[0]){ cookies = tmp[1]; } } return cookies; }, removeCookie(name){ let cookies = this.getCookie(name); let time = new Date(); time.setTime(time.getTime()-1); document.cookie = `${name} = ${cookies};expires=${time.toGMTString()}`; } }
箭头函数和普通函数的区别
1. 箭头函数不能当做构造函数
2. 箭头函数的内的this指向 指向的是定义的环境 和普通函数不一样 react的时候咋们会用到
3. 箭头函数 没有arguments对象 可以用 ...rest 方式获取剩余参数
4. 变量提升
--
-
什么是IIFE
- IIFE mmediately Invoked Function Expression，意为立即调用的函数表达式,也就是函数声明的同时立即调用。 ```js function foo(num){ console.log(num) } foo(10); //IIFE (function foo(num){ console.log(num)//10 })(10) ``` 其实这种形式就相当于把一个匿名函数包裹在一个()中，让JS认为它不是一个函数声明，而是一个IIFE， 然后直接调用，类似于(函数体)(实参)这种形式调用即可。 -
IIFE有什么好处呢
- 那么为什么要用IIFE呢？如果只是为了立即执行函数，那显得有点鸡肋，其实IIFE是为了弥补js在作用域方面的问题，JS只有全局作用域（global scope）、函数作用域（function scope），从ES6开始才有块级作用域（block scope）。 通常我们认为函数封装是为了代码的复用，但是由于作用域的问题，我们经常发现只是用一次的函数，用来隔离作用域，避免污染全局作用域，那既然只使用一次，那么立即执行就好了，函数名都可以不用要了，所以就出现了IIFE。比如选项卡案例中获取循环中得到的i的值a ```js for(var i = 0;i<10;i++){ (function(m){ console.log(m);//0,1,2,3,4,5,6,7,8,9 })(i) } ``` -
js中caller和callee的区别
-
caller 返回一个调用当前函数的引用，如果顶层函数，返回null,
-
caller我们可以理解我正在给你打电话的人，谁给你打电话了，就是下面的test函数，所以caller显示就是test函数
var callerTest = function(){ console.log(callerTest.caller); } function test(){ callerTest(); } test() ;//输出function a() {callerTest();} callerTest() ;//输出null
-
-
callee 返回一个正在被执行函数的引用
-
callee是arguments对象的一个成员 表示对函数对象本身的引用 它有个length属性
```js var c = function(x,y) { console.log(arguments.length,arguments.callee.length,arguments.callee) } ; c(1,2,3) ; //输出3 2 function(x,y) {console.log(arguments.length,arguments.callee.length,arguments.callee)} ``` 总的来说caller返回调用当前函数的对象，callee返回当前正在被调用的函数对象
-
-
ajax
- 什么是ajax
ajax主要是用来实现客户端和服务端异步通信的效果，实现页面的局部刷新，ajax原生方式主要是通过XMLHttpRequest,ActiveObject(IE)对象来实现异步通信效果
早期的浏览器不能原生支持ajax，后来浏览器都提供了对ajax的原生支持
-
ajax的优势在哪儿
- 不需要插件的支持，可以直接被大多数主流的浏览器支持
- 提高web程序性能
- 传统模式提交数据是通过form表单，数据获取是通过页面刷新获取整页内容，ajax可以通过XMLHttpRequest对象向服务器请求希望提交的护具，按需请求。
- 提高用户体验
- 无需刷新页面即可更新数据
-
ajax在哪儿使用
- 用户登陆注册，检测用户数据重复
- 城市多级联动，可使用ajax
- 文本框实时搜索显示搜索记录
我们给大家演示一个文本框搜索的案例，使用jquery封装的ajax接口实现
```css
<style>
* {
padding: 0;
margin: 0;
list-style: none;
}
.container {
width: 500px;
margin: 80px auto;
}
.container>.inp {
width: 100%;
height: 30px;
border-radius: 3px;
border: #dddddd 1px solid;
}
.container>ul {
width: 100%;
background-color: #F0F0F0;
margin-top: 3px;
}
.container>ul>li {
width: 100%;
height: 50px;
line-height: 50px;
font-size: 14px;
text-indent: 20px;
}
.container>ul>li:hover{
color: #A00000;
}
</style>
```
```html
<div class="container">
<input type="text" class="inp" placeholder="输入内容">
<ul id="list">
</ul>
</div>
```
```js
$(".inp").bind("input",function () {
var arr = [];
$.ajax({
url: "http://yang.happyknowshare.cn/api/products",
type: "get",
async: true,
dataType: "json",
success: (res) => {
if(res.status == 200){
var data = res.data;
//过滤搜索函数
arr = data.filter((item,index)=>{
if(item.store_name.indexOf($(this).val()) > -1){
return true;
}
})
}
var html = ""
for(let val of arr){
html += `<li>${val.store_name.slice(0,20)}</li>`;
}
$("#list").html(html);
},
error: (error) => {
}
})
})
```
-
ajax基本写法分为几步
-
ajax原生请求主要分为创建对象, 初始化请求，设置header头(get可忽略)，设置回掉函数，发送请求send
var xhr =null;//创建对象 if(window.XMLHttpRequest){ xhr = new XMLHttpRequest(); }else{ xhr = new ActiveXObject("Microsoft.XMLHTTP"); } xhr.open(“方式”,”地址”,”标志位”);//初始化请求 xhr.setRequestHeader(“”,”);//设置 http 头信息 xhr.onreadystatechange =function(){}//指定回调函数 xhr.send();//发送请求
-
-
ajax的同步和异步
-
同步 就是阻塞的状态
- 张三叫李四一起去吃饭 = 浏览器请求服务器，直到服务器返回数据才显示页面，也就是在同一线程执行
-
异步 非阻塞的状态
-
张三叫李四吃饭，只是叫了一声，但是没有等他一块去吃饭 = 浏览器请求服务器信息，发送完请求后，浏览器接着去做自己的事情，比如显示页面，服务器返回数据以后通知浏览器，浏览器再去渲染页面数据，局部更新
-
jquery中ajax接口中
async属性表示同步异步，true为异步，false就是同步，默认为true，也就是异步操作
-
-
-
get和post的区别
传餐方式，长度，安全性，传输速度 请求缓存性- get传递参数显示在url地址中，post参数通过http消息formdata发送给服务器
- get提交的数据有长度限制，原因是因为特定的浏览器url有长度限制，而post请求一般没有长度限制
- get方式请求的数据会被缓存起来，所以相对来说不太安全，post相对来说安全一些
- 同等条件下get传输数据会比post快一些
-
JSON.stringify() 和 JSON.parse()
-
JSON.stringify() 把json对象转换成json字符串，返回一个JSON字符串
-
JSON.parse() 将json字符串转换成json对象。
代码实例:
var obj = {name: "张三", age: 28}; var json = JSON.stringify(obj);// 转换为json字符串 console.log(json);//'{"name":"张三","age":28}' var obj = JSON.parse(json); console.log(obj);// {name: "张三", age: 28}
-
-
eval()
-
eval()函数可计算某个字符串，并执行其中的javascript表达式或要执行的语句。
var nums = eval("1+1"); console.log(nums); // 2 -
eval() 也可以把json字符串解析为对象
var obj = {name: "张三", age: 28}; var json = JSON.stringify(obj);// 转换为json字符串 console.log(json);//'{"name":"张三","age":28}' // var obj = JSON.parse(json); var obj = eval('('+json+')'); console.log(obj);// {name: "张三", age: 28}不知道大家有木有注意到eval()还要用一对圆括号将字符串包起来,
加上圆括号的目的是迫使eval函数在处理JavaScript代码的时候强制将括号内的表达式（expression）转化为对象，而不是作为语句（statement）来执行。
-
-
XMLHttpRequest对象的常用方法和属性
-
常用的方法
- open() 初始化
- send() 发送请求
- setRequestHeader 设置请求头
-
常用的属性
- onreadystatechange 用于指定状态改变时所触发的事件处理器
- readyState 获取请求状态
- response 响应的内容
- responseText 获取服务端响应内容
- status http状态码
-
-
HTTP常见状态码有哪些
-
http状态码我们主要分为2xx,3xx,4xx,5xx常见的几类
- 200 请求成功
- 301 请求资源移动到新的url地址
- 403 客户端请求无权限，服务器拒绝请求
- 404 没有找到文件
- 500 服务器内部错误，一般是服务端代码有问题
- 502 网关错误，服务端返回无效响应
- 503 服务器性能问题导致，无法处理客户端请求
2** 请求成功，操作被接受并处理
3** 重定向
4** 客户端错误
5** 服务度错误
-
同源策略和跨域
- 什么是同源策略
同源策略是浏览器的一种约定，他是浏览器最核心也最基本的安全功能， 同源指的是，同协议,同域名，同端口
，同源策略的目的就是限制不同源的document或者脚本之间的相互访问，以免造成干扰和混乱。
- 为什么要有同源策略
-
如果没有同源策略，浏览器一些正常功能可能都会受到影响，ajax太灵活了，各种请求说法就发，如果没有同源策略的限制，发到哪里都行，只要你构造好参数和请求路径，那人人都是黑客了，这样会导致各种敏感数据的泄露。
-
那些带src属性的
<script><img><iframe><link>等标签是不需要遵守同源策略的，但是通过src加载的资源，浏览器限制了javascript的权限，不能进行各种的读写。从而，即使请求发了，敏感数据回来了， -
有了同源策略限制，A网站就无法随读取非同源的cookie，localStorage等数据，无法向非同源地址发送ajax请求
- 什么情况下发生跨域
-
当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域
当前url 被请求的url 是否跨域 原因 http://www.test.com/ http://www.test.com/index.html 否 同源（协议、域名、端口号相同） http://www.test.com/ https://www.test.com/index.html 跨域 协议不同（http/https） http://www.test.com/ http://www.baidu.com/ 跨域 主域名不同（test/baidu） http://www.test.com/ http://blog.test.com/ 跨域 子域名不同（www/blog） http://www.test.com:8080/ http://www.test.com:7001/ 跨域 端口号不同（8080/7001）
-
常见的解决跨域的方式有哪些
-
jsonp
- jsonp JSONP 是服务器与客户端跨源通信的常用方法。最大特点就是简单适用，兼容性好（兼容低版本IE），缺点是只支持get请求，不支持post请求。
-
服务端设置忽略跨域问题，主要是通过设置Access-Control-Allow-Origin属性
比如PHPheader("Access-Control-Allow-Origin: *"); header('content-type:application/json;charset=utf8'); -
vue中可使用 vue-resource 中jsonp请求方式
-
vue中使用axios，可以配置跨域，在/config/index.js中
'/api':{ target: "https://api.happyknowshare.cn/", changeOrigin: true, pathRewrite: { '^/api': '' }, }
-
jsonp对象
-
什么是jsonp
-
jsonp是数据格式json的一种使用模式，可以让网页跨域请求数据，利用的是script元素的开放策略，网页可以从其他来源动态产生的JSON数据，而这种使用模式就是所谓的 JSONP。
-
用jsonp抓到的数据并不是JSON，是任意的JS，使用js语法解析，而无法用JSON解析器解析。
-
JSONP 被称作是一种“让用户利用 script 元素注入的方式绕开同源策略”的方法
-
-
jsonp能解决什么问题
- jsonp的数据传输方式是利用了 script标签src属性中的链接可以访问跨域的js脚本 这一特性（其实是js语言设计的一大漏洞哈哈），通过src来调用接收服务器返回的js脚本而不是常规的json格式的数据，从而达到接收数据跨域访问的目的。
-
jsonp在哪里使用
- 在Jquery的api接口中使用，dataType设置为jsonp,
- 在script标签中通过src调用，需要传递callback回调函数
- 使用vue-resource插件中
this.$http.jsonp("url",{}).then(res=>{})d
-
jsonp原理
- jsonp 实现原理:主要是利用动态创建 script 标签请求后端接口地址，然后 传递 callback 参数，后端接收 callback，后端经过数据处理，返回 callback 函数 调用的形式，callback 中的参数就是json
- 浏览器兼容性比较好，但是只支持get请求
-
jsonp如何使用案例展示
- 请求百度的搜索接口地址，可集合上面完成一个百度搜索的功能
$.ajax({ url: "https://sp0.baidu.com/5a1Fazu8AA54nxGko9WTAnF6hhy/su", data:{ wd: 1, }, dataType:"jsonp", jsonp: "cb", success: (res)=>{ console.log(res); } })
3765
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
