1.页面最上层的右边导航用float：right
其中的li float：left 就可以并排
例如 登录 | 注册的|可以直接用
2.vue中的slot组件
就是外部调用时 标签中的内容 如果没有内容就使用自己的默认内容
3.vue-axios
功能特性
1、在浏览器中发送 XMLHttpRequests 请求
2、在 node.js 中发送 http请求
3、支持 Promise API
4、拦截请求和响应
5、转换请求和响应数据
6、取消请求
7、自动转换 JSON 数据
8、客户端支持保护安全免受 CSRF/XSRF 攻击
安装 axios
$ npm install axios
在要使用的文件中引入axios
import axios from ‘axios’
GET请求
// 向具有指定ID的用户发出请求
axios.get(’/user?ID=12345’)
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
// 也可以通过 params 对象传递参数
axios.get(’/user’, {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
POST请求
axios.post(’/user’, {
firstName: ‘Fred’,
lastName: ‘Flintstone’
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
GET 和POST的区别
1.GET向服务器获取数据 POST向服务器发送数据
2.GET请求会被缓存，POST请求默认不缓存
3.GET请求所有参数包装在url中明文显示 不安全
POST的url中只有路径 相对安全 可以用于发送用户隐私数据
4.POST提交的数据比GET大
https://www.cnblogs.com/Juphy/p/7073027.html
4.vue的生命周期
特别值得注意的是created钩子函数和mounted钩子函数的区别
每个钩子函数都在啥时间触发
beforeCreate
在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。
created
实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
beforeMount
在挂载开始之前被调用：相关的 render 函数首次被调用。
mounted
el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。
beforeUpdate
数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
updated
由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。
该钩子在服务器端渲染期间不被调用。
beforeDestroy
实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed
Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。
5.，：slides 和:inv是什么语法
:slides 是 v-bind:slides的缩写，是将slides属性绑定到组件的方法。
:slides=“slides” 这里引号里的slides 对应的是 组件data里的值
假如这样，这里的slides就是字符串slides
如果你要在属性里使用组件的属性，就必须用v-bind或者：来绑定
6.i++ 和i+1的区别
i++为递增并赋值给i ， i + 1只递增
7.为什么要尽量避免使用iframe框架
网站设计使用Iframe缺点一：得罪搜索引擎“蜘蛛”
网站设计使用Iframe最大的弊端就是得罪了搜索引擎的“蜘蛛”，当蜘蛛访问Iframe布局的网站时，它只会看到框架，框架里面的内容是看不到的，也就无法按照顺序解读页面，会认为这个网站是个死站点，以后绝不会再来了。
网站设计使用Iframe缺点二：链接导航问题
使用Iframe布局必须保证正确设定导航链接，否则，被链接的页面呈现在导航框架内，让浏览者无法退后，只能离开。
网站设计使用Iframe缺点三：分散访问者注意力
Iframe布局的网站除了有时会让浏览者迷惑，分散注意力之外，还会给浏览者带来浏览麻烦，滚动条会使Iframe布局混乱，让浏览者望而止步。
所以iframe通常会用在后台页面的构建
8.ES6 rest参数
rest和arguments的区别
1.rest参数只包括那些没有给出名称的参数 而arguments包括所有的参数
2.arguments不是真正的数组 没用数组的slice map这些方法 而rest是数组实例
*rest参数后面不能再有别的形参
函数对象的length属性是形式参数的个数； 所以函数的length属性不包括形参
(function(a) {}).length // 1
(function(...a) {}).length // 0
(function(a, b, ...c)).length // 2
9.什么是尾调用
指某个函数的最后一步是调用另一个函数。
function f(x){
return g(x);
}
上面代码中，函数f的最后一步是调用函数g，这就叫尾调用。
以下两种情况，都不属于尾调用。
// 情况一
function f(x){
let y = g(x);
return y;
}
// 情况二
function f(x){
return g(x) + 1;
}
上面代码中，情况一是调用函数g之后，还有别的操作，所以不属于尾调用，即使语义完全一样。情况二也属于调用后还有操作，即使写在一行内。
尾调用不一定出现在函数尾部，只要是最后一步操作即可。
function f(x) {
if (x > 0) {
return m(x)
}
return n(x);
}
上面代码中，函数m和n都属于尾调用，因为它们都是函数f的最后一步操作。
转自http://www.ruanyifeng.com/blog/2015/04/tail-call.html
尾调用实现的优化
function f() {
let m = 1;
let n = 2;
return g(m + n);
}
f();
// 等同于
function f() {
return g(3);
}
f();
// 等同于
g(3);
如果函数g不是尾调用，函数f就需要保存内部变量m和n的值、g的调用位置等信息。但由于调用g之后，函数f就结束了，所以执行到最后一步，完全可以删除 f() 的调用记录，只保留 g(3) 的调用记录
尾调用优化 即指保存内层函数的调用记录，大大节省内存
尾递归
函数调用自身即为递归 生成成千上百个调用记录 非常消耗内存 容易出现栈溢出的错误
但对于尾递归来说，由于只存在一个调用记录，所以永远不会发生"栈溢出"错误。
function factorial(n) {
if (n === 1) return 1;
return n * factorial(n - 1);
}
factorial(5) // 120
上面代码是一个阶乘函数，计算n的阶乘，最多需要保存n个调用记录，复杂度 O(n) 。
如果改写成尾递归，只保留一个调用记录，复杂度 O(1) 。
function factorial(n, total) {
if (n === 1) return total;
return factorial(n - 1, n * total);
}
factorial(5, 1) // 120
10.深拷贝和浅拷贝
浅拷贝只复制指向某个对象的指针 新旧对象共用同一块内存 修改会相互影响
深拷贝会另外创造一个一模一样的对象，新对象跟原对象不共享内存，修改新对象不会改到原对象。
object.assign属于浅拷贝 a对象直接等于b对象 也是浅拷贝 但是对象如果只有一层可以用Object.assign（{}， anotherObj）;
深拷贝实现方式
手动复制将某个属性赋给另外一个对象的
如果只有一层可以用Object.assign
用JSON.stringify将对象转为字符串 再用JSON.parse转回来
Object.create方式 var newObj = Object.create(oldObj);
jquery中有个$.extend的方式 var newObj = $.extend(true,{}, oldObj)
loadsh中有个_.cloneDeep(oldObj)
参考https://www.cnblogs.com/Chen-XiaoJun/p/6217373.html
forEach数组专利
arr.forEach(function(item) {
console.log(arr[item]);
}
for in 得到的是对象的key或者数组的下标 不推荐循环数组。。。！！！！
for (let key in obj){
xxx
}
for of 数组对象字符串都可以
12 . map set array object
set和数组很类似 但是元素不能重复 使用场景：数组去重
weakSet和set差不多 元素只能是对象 只是对对象地址的引用，不检测对象是否被垃圾回收机制回收， 没有clear方法 不能遍历
map和对象很类似 但对象的key只能是字符串 而map的key可以是任何类型
weakMap 的key必须是对象
增
…
13.类class
class声明和函数声明最大的区别是函数声明会提升 而class声明不会
class中也有get set 关键字 对某个属性设置存值函数和取值函数，拦截该属性的存取行为；
class的静态方法：类中定义的方法都会被实例继承，但是加上static关键字就表明这个方法不会被实例继承，而是通过直接通过类调用；可以被子类继承
class Foo {
static classMethod() {
return 'hello';
}
}
Foo.classMethod() // 'hello'
var foo = new Foo();
foo.classMethod()
// TypeError: foo.classMethod is not a function
父类的静态方法， 可以被子类继承。
class Foo {
static classMethod() {
return 'hello';
}
}
class Bar extends Foo {}
Bar.classMethod(); // 'hello'
参考http://blog.csdn.net/qq_30100043/article/details/53542966
.
14.module.exports 、exports、 export 和export default 的区别
1、首先上是用法上的不同
module.exports和exports的用法是后面加一个等号，再接具体的导出
module.exports=…
exports=…
export和export default的用法是后面直接接具体的导出，没有等号
export …
export default …
2、exports其实是module.exports的引用
在nodejs中，每一个js文件都被看成是一个模块，所以，nodejs会为每一个js文件生成一个module对象，这个module对象会有一个exports属性，并且这个exports属性是一个空对象，即
module={
exports:{}
}
同时还有一个exports对象，引用的是module的exports属性，
exports=module.exports
3、export和exports的区别
这两个看起来很容易混淆，因为实在太像了。但是二者是完全不同的概念。
export是es6引入的语法，用于导出模块中的变量，对象，函数，类。对应的导入关键字是import。
exports是一个对象，不是语法。具体的含义在第二点已经说明。
4、export和export default的区别
export和export default都是es6的导出语法。
二者的区别有以下几点：
export default在一个模块中只能有一个，当然也可以没有。export在一个模块中可以有多个。
export default的对象、变量、函数、类，可以没有名字。export的必须有名字。
export default对应的import和export有所区别
比如
// test.js
export default const a = 1;
export const a = 1;
对应的import分别是
import a from ‘test’
import {a} from ‘test’
export对应的import必须加上{}
import时取别名的区别
二者都可以在import的时候取别名。但格式不同。
比如把导入的a取名为b
// export default对应的取别名方式
import b from ‘test’
// export对应的取别名方式
import {a as b} from ‘test’
参考http://blog.csdn.net/caixiaowang/article/details/73441659
15.请求头中的 “Content-Type”: "application/x-www-form-urlencoded"是什么意思
application/x-www-form-urlencoded
这应该是最常见的 POST 提交数据的方式了。浏览器的原生 form 表单，如果不设置 enctype 属性，那么最终就会以 application/x-www-form-urlencoded 方式提交数据。
16.各种x 、y
screenX/Y：鼠标位置相对于屏幕的坐标
pageX/Y：相对于文档边缘（包含滚动条距离）
clientX/Y：相对于当前页面且不包含滚动条距离
offsetX/Y：相对于当前元素（块或行内块），除safari外不包含边框。
X/Y：与clientX/Y相同，firefox不支持
参考https://www.cnblogs.com/xulei1992/p/5659923.html
17.getComputedStyle
getComputedStyle是一个可以获取当前元素所有最终使用的CSS属性值。返回的是一个CSS样式声明对象([object CSSStyleDeclaration])，只读。
getComputedStyle与style的区别
我们使用element.style也可以获取元素的CSS样式声明对象，但是其与getComputedStyle方法还有有一些差异的。
只读与可写
正如上面提到的getComputedStyle方法是只读的，只能获取样式，不能设置；而element.style能读能写，能屈能伸。
获取的对象范围
getComputedStyle方法获取的是最终应用在元素上的所有CSS属性对象（即使没有CSS代码，也会把默认的祖宗八代都显示出来）；而element.style只能获取元素style属性中的CSS样式。因此对于一个光秃秃的元素<p>，getComputedStyle方法返回对象中length属性值（如果有）就是190+(据我测试FF:192, IE9:195, Chrome:253, 不同环境结果可能有差异), 而element.style就是0。
参考http://www.zhangxinxu.com/wordpress/2012/05/getcomputedstyle-js-getpropertyvalue-currentstyle/
18.什么是MVVM模式？
最常见的客户端架构有三种：
MVC: Model-View-Controller
MVP: Model-View-Presenter
MVVM: Model-View-ViewModel
在 MVC 里面，Model 是数据模型；View 是视图或者说就是界面需要去展示的东西；Controller 是用来控制Model的读取、存储，以及如何在 View上 展示数据，更新数据的逻辑控制器。
VC 到 VM 的转变
一个 VC 在包含了大量的业务逻辑后，代码就会变得特别的臃肿、不易阅读和修改。于是后来就慢慢延伸出了 MVP 和 MVVM 模式。MVP 这里我们就跳过了，直接讲 MVVM 模式。MVVM 模式顾名思义是由 Model、View 和 ViewModel（下称 VM ）组成，之前的 VC 变成了 VM。怎么来理解 VM 呢？
对于一个 Model ，比如我们要存储和显示一个人的信息，这个人具有姓名、年龄、性别这三个属性。这个Model的伪代码如下：
class Person {
String name;
int age;
int gender;
}
Model 的数据模型，和我们的业务需求或者说业务实体（Entity）是一一映射关系。而 ViewModel 顾名思义，就是一个 Model of View，它是一个 View 信息的存储结构，ViewModel 和 View 上的信息是一一映射关系。
以一个软件的登陆场景为例子，假设这个登录界面上有如下逻辑：
用户名输入框
密码输入框
登陆按钮，点击登陆按钮按钮置灰，显示 loading 框
登陆成功，页面触发跳转
登陆失败，loading 框消失，在界面上显示错误信息
错误信息可以分为两种情况： 1、密码错误；2、没有网络
那么我们下面来定义这样一个 ViewModel：
class LoginViewModel {
String userId;
String password;
bool isLoading;
bool isShowErrorMessage;
String errorMessage;
}
界面初始化
由于 LoginView 和 LoginViewModel 是映射关系，也称为绑定关系，那么 LoginViewModel 是怎样的数据，View 就按照怎样的数据来进行显示。界面第一次打开时，整个 LoginViewModel 的初始值为：
{
userId： ‘’,
password: ‘’,
isLoading: false,
isShowErrorMessage: false,
errorMessage: ‘’
}
那么此时界面为：
用户名输入框显示为空白字符串
密码输入框显示为空白字符串
loading 框因为 isLoading = false，所以不显示
错误信息框 因为 isShowErrorMessage = false，所以不显示
错误信息框里面的文字为空白字符串
触发登陆
接下来，用户输入用户名和密码，点击登录按钮，在登陆事件里面触发网络通信逻辑，同时设定 isLoading = true，伪代码如下：
function onLoginButtonClick() {
request(url, …);
loginViewModel.isLoading = true;
}
此时 LoginViewModel 的值为：
{
userId： ‘this is user id’,
password: ‘this is password’,
isLoading: true,
isShowErrorMessage: false,
errorMessage: ‘’
}
随着 isLoading 值的变化，因为 ViewModel 和 View 存在绑定关系，那么此时界面动态变化为：
用户名输入框显示为刚刚输入的字符串
密码输入框显示为刚刚输入的字符串
因为isLoading = true，所以显示 loading 框
因为isLoading = true，登陆按钮置灰，不可点击
错误信息框 因为 isShowErrorMessage = false，所以不显示
错误信息框里面的文字为空白字符串
登录失败
接下来我们假设登陆失败，服务器返回密码错误，那么此时在服务器逻辑的相应代码里面我们去设定 isLoading = false，isShowErrorMessage = true，以及对应的errorMessage，伪代码如下：
request(url, {
success: function() {
…
},
fail: function(err) {
if(err.code == 1000) { // 假设1000表示密码错误
loginViewModel.isLoading = false;
loginViewModel.isShowErrorMessage = true;
loginViewModel.errorMessage = '密码错误';
}
}
})
此时 LoginViewModel 的值为：
{
userId： ‘this is user id’,
password: ‘this is password’,
isLoading: false,
isShowErrorMessage: ture,
errorMessage: ‘密码错误’
}
接下来依然是触发界面变化，根据绑定关系重新更新显示内容：
用户名输入框显示为刚刚输入的字符串
密码输入框显示为刚刚输入的字符串
因为isLoading = false，隐藏 loading 框
因为isLoading = false，登陆按钮置为正常，可以点击
因为 isShowErrorMessage = true，显示错误信息框
错误信息框里面的文字为“密码错误”
重新登录
用户修改密码后，重新点击登陆按钮：
function onLoginButtonClick() {
loginViewModel.isLoading = true;
loginViewModel.isShowErrorMessage: false,
request(url, …);
}
到这里相信大家都会知道了，错误提示框消失，显示 loading 框，登陆按钮置灰。
所以这就是 MVVM 模式的神奇之处，让你不要去关心如何去显示登录框，如何去置灰一个按钮，如何去显示错误提示框又如何去隐藏它等等。当然，这里说的“不关心”并不代表不需要知道这些，完全不处理这些逻辑，只是在架构上给你一种更清晰，更简单的原则，那就是：
**“当任何外部事件发生时，永远只操作 ViewModel 中的数据”**
这里外部事件主要指界面点击、文字输入、网络通信等等事件。因为绑定关系的存在，ViewModel 变成啥样，界面就会自动变成啥样。
单向绑定与双向绑定
所谓“单向绑定”就是 ViewModel 变化时，自动更新 View
所谓“双向绑定”就是在单向绑定的基础上 View 变化时，自动更新 ViewModel
参考http://blog.csdn.net/binglan520/article/details/71107807
19.关于像素
PPI表示每英寸的像素点，PPI越高，像素点越多
viewport表示移动设备上用来显示网页的区域，一般比移动设备浏览器的可视区域大
em相对于父元素的大小来变化
rem相对于根元素也就是html标签来进行变化
逻辑分辨率pt和屏幕尺寸相关 也就是视觉上的尺寸 简单上是这么理解 长度相关
物理分辨率 px 简单理解为像素点 不是长度相关单位
DPR(设备像素比) = 物理像素px / 逻辑像素pt
(在Retina屏的iphone上，DPR为2，1个css像素相当于2个物理像素)
为什么Retina需要二倍图显示？
因为他的DPR是 2 然后他的initial-scale设置为0.5 想要图片最佳显示就需要二倍图
20.实现页面居中
.wrapper {
border: 1px solid #ff0000;
width: 400px;
height: 500px;
background: #ffffff;
position: absolute;
top: 50%;
left: 50%;
margin-top: -250px;
margin-left: -200px;
}
- 实现两个相连的输入框 整体有圆角
第一个的border-radius： 3px 3px 0 0；
第二个0 0 3px 3px
22.flex的属性
flex盒子模型图了解一下
flex-direction 定义元素在主轴的排列方向 row column
flex-wrap让盒子里的元素在必要的时候拆行 wrap拆行 no-wrap不拆行 wrap-reverse拆行时倒着排列
设置为wrap-reverse后
flex-flow是flex-direction和flex-wrap的组合属性
例如 flex-flow： row wrap
justify-content 在主轴上的对齐方式
space-between 伸缩项目两边碰 中间部分平均分
space-around 伸缩项目平均分 剩余部分两边碰
也有flex-start flex-end center属性值
align-items 定义元素在交叉轴上的排列模式
默认flex-start
center
align-content类似于justify-content 控制在交叉轴上的对齐方式
flex子元素属性 order控制排列位置
.flex-container {
display: flex;
flex-direction: column;
}
.flex-item:nth-child(1) {
order:3;
}
.flex-item:nth-child(2) {
order:1;
}
.flex-item:nth-child(3) {
order:-1;
}
.flex-item:nth-child(4) {
order:0;
}
order越小就越靠前
flex-grow 的意思已经很明显了，就是索取父容器的剩余空间，默认值是0
.flex-container {
display: flex;
}
.flex-item {
flex-grow: 1;
}
.flex-item:nth-child(1) {
flex-grow: 2;
}
.flex-item:nth-child(2) {
flex-grow: 1;
}
.flex-item:nth-child(3) {
flex-grow: 1;
}
flex-shrink默认为1 设置为0表示不收缩
.flex-container {
display: flex;
width: 300px;
}
.flex-item:nth-child(1) {
width: 100px;
}
.flex-item:nth-child(2) {
width: 200px;
}
.flex-item:nth-child(3) {
width: 150px;
flex-shrink: 0;
}
第三个子元素会让前俩收缩
flex-basis
子容器设置了flex-basis或者width，那么在分配空间之前，他们会先跟父容器预约这么多的空间，然后剩下的才是归入到剩余空间
总结 通过上面的分析，我们就可以得出这样几个结论：
1、剩余空间＝父容器空间－子容器1.flex-basis/width - 子容器2.flex-basis/width - …
2、如果父容器空间不够，就走压缩flex-shrink，否则走扩张flex-grow；
3、如果你不希望某个容器在任何时候都不被压缩，那设置flex-shrink:0；
4、如果子容器的的flex-basis设置为0(width也可以，不过flex-basis更符合语义)，那么计算剩余空间的时候将不会为子容器预留空间。
5、如果子容器的的flex-basis设置为auto(width也可以，不过flex-basis更符合语义)，那么计算剩余空间的时候将会根据子容器内容的多少来预留空间。
参考https://www.cnblogs.com/ghfjj/p/6529733.html
flex属性整合了flex-grow flex-shrink flex-basis
flex： 1 其实就是设置了flex-grow： 1
align-self 子元素自己决定自己在交叉轴上的对齐方式
23.想达到flex布局每行只显示两个
主要设置
display：flex；
flex-direction： row；
flex-wrap： wrap；
justify-content： space-around；
flex子元素
width： 45%
...
24.font awesome 字体图标库
网址http://fontawesome.dashgame.com/
使用方法
你可以用 标签把 Font Awesome 图标放在任意位置。
找到需要使用的图标的class名
如 <i class="fa fa-graduation-cap"></i> 就可以使用啦
> ;代表 >
< ; 代表 <
26.绝对定位和相对定位
relative是相对与自身的，并没有脱离文档流，这时候用top,left,bottom,right均可，而absolute是脱离文档流，absolute是相对于自己最近的父元素来做绝对定位，如果父元素没有相对定位（relative)那么你的absolute就是相对于body来定位的。
position：fixed是相当于屏幕定位
27.关于图片居中
如果你要图片作为背景而居中的话，可以写成这样:background:url(bb.jpg) center center no-repeat;如果你是要把图片作为内容放到html里，用text-align:center这句应该可以居中的。这个是内容居中
28.jquery中对css的操作
jQuery CSS 操作函数
CSS 属性 描述
css() 设置或返回匹配元素的样式属性。
height() 设置或返回匹配元素的高度。
offset() 返回第一个匹配元素相对于当前视口的相对偏移的位置。
offsetParent() 返回最近的定位祖先元素。
position() 返回第一个匹配元素相对于父元素的位置。
scrollLeft() 设置或返回匹配元素相对滚动条左侧的偏移。
scrollTop() 设置或返回匹配元素相对滚动条顶部的偏移。
width() 设置或返回匹配元素的宽度。
.index（）
获得第一个匹配元素相对于其同胞元素的 index 位置。
例如$(selector).index()
29.实现底部栏
html：
<footer>
<div class="footer-icon icon-active">
<a href="#">
<i class="fa fa-user-o fa-lg icon-active"></i>
</a>
<span>我的</span>
</div>
<div class="footer-icon">
<a href="#">
<i class="fa fa-camera fa-lg"></i>
</a>
<span>相机</span>
</div>
<div class="footer-icon">
<a href="#">
<i class="fa fa-calendar fa-lg"></i>
</a>
<span>日历</span>
</div>
<div class="footer-icon">
<a href="#">
<i class="fa fa-bolt fa-lg"></i>
</a>
<span>其他</span>
</div>
</footer>
css：
footer{
position: fixed;
bottom: 0;
width: 100%;
height: 54px;
display: flex;
text-align: center;
font-size: 12px;
border-top: 1px solid #ccc;
background: #fff;
align-items: center;
}
....
30.实现轮播图
html
<div class="inner ">
<div class="innerwraper"><img src="img/banner1.jpg" alt="" /></div>
<div class="innerwraper"><img src="img/banner2.jpg" alt="" /></div>
<div class="innerwraper"><img src="img/banner3.jpg" alt="" /></div>
<div class="innerwraper"><img src="img/banner4.jpg" alt="" /></div>
<div class="innerwraper"><img src="img/banner1.jpg" alt="" /></div>
</div>
<div class="left-arrow"><</div>
<div class="right-arrow">></div>
<div class="pagination">
<span class="active"></span>
<span></span>
<span></span>
<span></span>
</div>
值得注意的是有四张轮播图 但是需要五个div 最后一张的图和第一张是相同的
css：
.inner {
width: 9999px;
position: relative;
top:0;
left: 0;
}
.innerwraper {
width: 6.4rem;
float: left;
}
.innerwraper img {
width: 100%;
}
.left-arrow {
position: absolute;
left: 10px;
top:40%;
color: #fff;
font-weight: 800;
line-height: 20px;
font-size: 20px;
}
.right-arrow {
position: absolute;
right: 10px;
top:40%;
color: #fff;
font-weight: 800;
line-height: 20px;
font-size: 20px;
}
.left-arrow , .right-arrow {
border: 1px solid #666666;
background: #666666;
opacity: .5;
}
.pagination {
position: absolute;
bottom:10px;
width: 100%;
text-align: center;
}
.pagination span {
display: inline-block;
width: .16rem;
height: .16rem;
background-color: #9aa499;
border-radius: 50%;
cursor: pointer;
}
.pagination .active {
background-color: #fff;
width: .20rem;
height: .20rem;
}
js：
var $left_arrow = $('.left-arrow'),
$right_arrow = $('.right-arrow'),
$pagination = $('.pagination span'),
$inner = $('.inner'),
imgWidth = $('.innerwraper img').eq(0).width(),
index = 0,
flag = true
;
/*
** 导航切换
*/
$pagination.on('click', function (event) {
index = $pagination.index($(this));
selectPic(index);
//手动切换的时候就清除自动播放的timer
clearInterval(timer)
})
/*
** 点击箭头切换
*/
$left_arrow.on('click', function () {
index--;
if(index < 0) {
index = 3
}
selectPic(index);
clearInterval(timer);
})
$right_arrow.on('click', function () {
index++;
if (index %4 ===0) {
index = 0;
}
selectPic(index);
clearInterval(timer);
})
function selectPic(num) {
clearInterval(timer);
$pagination.eq(num).addClass('active').siblings().removeClass('active');
// 自动播放
if (num % 4 === 0) {
$pagination.eq(0).addClass('active').siblings().removeClass('active');
}
$inner.stop().animate({
left: -num * imgWidth
}, 1000, function () {
//点击切换图片效果后三秒再开始自动播放
timer = setInterval(go, 3000);
//自动播放检查是否到最后一张
if (index %4 ===0) {
index = 0;
$inner.css('left', '0px');
}
})
}
/*
** 自动播放
*/
function autoGo(flag) {
if (flag) {
timer = setInterval(go, 3000);
}
}
autoGo(flag)
function go() {
index++;
selectPic(index)
}
31.zepto
zepto和jquery的异同
同 ： API相似 而zepto的文件更小
异：1.zepto有触摸事件例如tap swiper 不支持ie浏览器
2.添加id时jquery不会生效 而zepto生效
(function($) {
2 $(function() {
3 var $insert = $('<p>jQuery 插入</p>', {
4 id: 'insert-by-jquery'
5 });
6 $insert.appendTo($('body'));
7 });
8 })(window.jQuery);
9 // <p>jQuery 插入<p>
10
11 Zepto(function($) {
12 var $insert = $('<p>Zepto 插入</p>', {
13 id: 'insert-by-zepto'
14 });
15 $insert.appendTo($('body'));
16 });
3.width()和height()的区别：Zepto由盒模型(box-sizing)决定，用.width()返回赋值的width，用.css(‘width’)返回加border等的结果；jQuery会忽略盒模型，始终返回内容区域的宽/高(不包含padding、border)。
4.Zepto无法获取隐藏元素宽高，jQuery 可以。
5.zepto的.offset（）（相对于文档的偏移）返回{top,left,width,height}；jQuery返回{top,left,}。
32.swiper
一个页面中引用多个Swiper可以给每个Swiper加上ID或Class区分，要保留默认的类名swiper-container
HTML
33.doctype的意义
1.让浏览器以标准模式渲染
2.让浏览器知道元素的合法性
34.html xhtml html5的关系
html属于sgml
xhtml属于xml，是htm基于xmll严格化的结果
而h5不属于sgml也不属于xml 比xml要宽松
35.html5有什么变化
1.新的语义化元素 header footer article等等
2.表单增加新的属性 例如autocomplete placeholder等等
3.新的api 本地存储indexdb 音频video audio 图像canvas svg 实时通信websocket 离线缓存等等
4.嵌套规则变化 例如a标签某些情况可以嵌套块级元素了 以前是不允许的
36.em和i的区别
em具有强调的意思
而i仅仅是斜体
在h5中不推荐使用i 一般只有做字体图标的时候用
37.语义化的意义
1.开发者容易理解
2.软件容易理解结构 （例如读屏软件）
3.有利于seo
38.哪些元素可以自闭合
input br img meta link
39.html和dom的关系
dom是有html解析而来
js可以操作dom
40.property和attribute区别
attribute是写在html中的属性
property是js中的特性
**41.form的作用 **
可以直接提交表单
便于浏览器保存表单
第三方库可以进行表单验证和提取到整体的值
42.图片下面有空白间隙
形成原因:img是内联元素 所以也是遵循基线对齐 离底线有间隙
解决办法： 设置vertical-align：bottom 或者把img设置为块级元素
43.把图片转为base64编码的好处
减少http请求
适用于小图片
44.css实现三角形
待补充！！！！！！
45.css hack
是用来兼容ie的 难理解 难维护
46.表单美化
<style>
.haha input {
display: none;
}
.haha input + label {
background: url("./checkbox1.png") left center no-repeat;
background-size: 20px 20px;
padding-left: 20px;
}
.haha input:checked + label {
background: url("./checkbox2.png") left center no-repeat;
background-size: 20px 20px;
padding-left: 20px;
}
</style>
</head>
<body>
<div class="haha">
<input type="checkbox" id="haha" />
<label for="haha">hah</label>
</div>
首先把原生的input设置为display：none
然后替换一下背景图
结果如图
47.实现下列border
.c2{
width:400px;
height: 200px;
border:30px solid transparent;
border-image:url(./border.png) 30 round;
}
.c3{
width:400px;
height: 200px;
border-bottom:30px solid red;
border-left:30px solid transparent;
border-right:30px solid transparent;
}
48.css优先级
计算权重决定
行内样式 +1000
id选择器 +100
class、伪类、属性选择器 + 10
标签 、伪元素选择器+ 1
！important优先级最高
如果权重相同 后写的生效
49.雪碧图的作用
减少http请求 提高加载性能
50.自定义字体
在新的 @font-face 规则中，您必须首先定义字体的名称（比如 myFirstFont），然后指向该字体文件。
如需为 HTML 元素使用字体，请通过 font-family 属性来引用字体的名称 (hoverTreeFont).
css
@font-face {
font-family: "IF";
src: url("./IndieFlower.ttf");
}
.custom-font{
font-family: IF;
}
html
<div class="custom-font">你好 Hello World</div>
结果如图
自定义字体的使用场景
1.放在banner或者slogan这种地方
2.作为字体图标
51.伪元素和伪类的区别
伪类表示的是状态 例如hover link
伪元素是真的有这个元素 例如before after
伪类用单冒号 伪元素双冒号 当然before after也简写为单冒号了
52.如何实现两栏或者三栏的布局
方法一
display：table
html：
div class="table">
<div class="table-row">
<div class="left table-cell">
左
</div>
<div class="center table-cell">中</div>
<div class="right table-cell">
右
</div>
</div>
</div>
css
.table{
margin-top:20px;
display: table;
width:800px;
height:200px;
}
.table-row{
display: table-row;
}
.table-cell{
vertical-align: center;
display: table-cell;
}
.center {
background-color: yellow;
}
.left{
background:red;
}
.right{
background:blue;
}
方法二 float
<style>
.container{
width:800px;
height:200px;
}
.left{
background:red;
/* float:left; */
/* height:100%; */
width:200px;
position: absolute;
height:200px;
}
.right{
background:blue;
float:right;
width:200px;
height:100%;
}
.middle{
margin-left:200px;
margin-right:200px;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
左
</div>
<div class="right">
右
</div>
<div class="middle">
中间
</div>
</div>
</body>
方法三：display：inline-block
<style>
.container{
width:800px;
height:200px;
font-size:0;
}
.left{
font-size:14px;
background:red;
display: inline-block;
width:200px;
height:200px;
}
.right{
font-size:14px;
background:blue;
display: inline-block;
width:200px;
height:200px;
}
.center {
font-size:14px;
background:yellow;
display: inline-block;
width:200px;
height:200px;
}
</style>
</head>
<body>
<div class="container">
<div class="left">
左
</div>
<div class="center">中</div>
<div class="right">
右
</div>
</div>
</body>
方法四
display：flex
flex： 1即可
53.inline-block间距
产生的原因： 空白字符
解决方法 ： 标签写一起不留空格 不推荐
字体设为0
更多方法请戳 http://www.zhangxinxu.com/wordpress/2012/04/inline-block-space-remove-去除间距/
54.浮动
如何清除浮动：
方法一： 通过伪元素after
.clearfix:after{
display: block;
content:'';
clear: both;
height:0;
}
方法二
给父元素添加overflow：hidden
为什么要清除浮动 ：设置浮动会脱离文档流 造成父容器高度塌陷
什么是BFC
BFC全称是块级格式化下文 ，是一个独立的布局环境，在一个BFC中，块级盒子和行内盒子都会垂直的沿着各自的父元素边框排列
怎么创建BFC
1.float不为none
2.position不为static和relative
3.display的值为 inline-block flex inline-flex table-cell等等
4.overflow不为visible
55.PC端和移动端适配
添加meta name=viewport…
使用媒体查询
使用rem
在设计上采用 1.隐藏一部分内容
2.折行 pc端横向展示 移动端纵向展示
3.自适应的样式
56如何用几个div画一个xxxx.
用box-shadow加伪元素before after
57.如何产生不占空间的边框
box-shadow 不设置模糊值
outline也可以
box-sizing：border-box
58.将一个图片裁剪成指定的形状
如图
主要是用了clip-path
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.container{
width: 400px;
height: 300px;
border: 1px solid red;
background:url(./panda.jpg);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
padding:10px;
/* clip-path: inset(100px 50px); */
/* clip-path: circle(50px at 100px 100px); */
/* clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%, 10% 10%, 40px 10px); */
clip-path: url(#clipPath);
/* background-size: cover; */
transition:clip-path .4s;
}
.container:hover{
/* clip-path: circle(80px at 100px 100px); */
}
</style>
</head>
<body>
<div class="container">
你好，我是熊猫
</div>
<svg>
<defs>
<clipPath id="clipPath">
<!-- <circle cx="60" cy="60" r="50" fill="#34538b" /> -->
<polygon stroke="#979797" points="0.4921875 81.2070313 92.640625 81.2070313 121.601562 0.21875 153.648437 81.2070313 247.390625 80.7734375 173.394531 140.496094 200.308594 227.09375 121.601562 172.71875 53.4960937 227.09375 80.859375 140.496094"></polygon>
</clipPath>
</defs>
</svg>
</body>
</html>
59.用css3实现半圆 扇形
原理是设置border-radius的值
半圆
div {
width:100px;
height:50px;
border-radius:50px 50px 0 0;
background:red;
}
通过修改值可以完成不同方向的半圆
扇形
.circle{
border-width: 100px;
border-radius: 100px;
border-color: red transparent transparent transparent;
border-style: solid;
width: 0;
height:0;
}
改变border-color可以达到不同方向的扇形
60.背景图
实现居中 background-position ：center
不重复 background-repeat： no-repeat
大小 background-size
61.如何实现3d效果
设置perspective：500px
transform-style：preserve-3d
然后设置transform ：translate 啊 scale啊 rotate啊等等
62.实现动画的方式
第一种transition 过渡动画
第二种keyframes 关键帧动画
63.过渡动画和关键帧动画的区别
过渡动画需要有状态变化
关键帧动画不需要 ，而且关键帧动画控制更精细
64.如何实现逐帧动画
使用关键帧动画 然后加上steps（1，start）；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
.container{
width: 100px;
height: 100px;
border: 1px solid red;
background: url(./animal.png) no-repeat;
animation: run 1s infinite;
animation-timing-function: steps(1);
}
@keyframes run{
0%{
background-position: 0 0;
}
12.5%{
background-position: -100px 0;
}
25%{
background-position: -200px 0;
}
37.5%{
background-position: -300px 0;
}
50%{
background-position: 0 -100px;
}
62.5%{
background-position: -100px -100px;
}
75%{
background-position: -200px -100px;
}
87.5%{
background-position: -300px -100px;
}
100%{
background-position: 0 0;
}
}
</style>
</head>
<body>
<div class="container">
</div>
</body>
</html>
65.css动画的性能
性能不差 某些情况比js动画要好
66.常见的预处理器
sass less
67.预处理器的作用
帮助更好的组织css代码
提高代码复用率
提升可维护性
68.预处理器的能力
嵌套 反映层级
变量和计算 减少重复代码
extend和mixin
sass中循环
import css模块化
69.预处理器优缺点
优点：提高代码复用率和可维护性
缺点：需要编译 有学习成本
70.bootstrap的优缺点
优点：代码结构合理 现成样式可以直接用
缺点：体积大 想要特定的样式 需要覆盖原有样式 甚至是修改源码
71.bootstrap如何实现的响应式
原理其实是媒体查询 在不同分辨率下有不同的class
72.如何处理css模块化
1.使用less sass等预处理器
2.使用postCss插件
3.webpack处理css（css-loader和style-loader）
73.postcss作用
取决于装了哪些插件
autoprefixer作用是为 CSS 中的属性添加浏览器特定的前缀
cssnext 负责把这些新特性转译成当前浏览器中可以使用的语法。
74.css modules是做什么的怎么用
解决类名冲突的问题 在html中使用编译过不会冲突的类名
使用postcss或者webpack等构建工具进行编译
75.为什么要使用js引用、加载css
js作为入口 管理资源有优势
将组件的结构、样式、行为封装到一起，增强内聚
webpack可以做更多处理
76.回到顶部的老做法
<div id="topback"></div>
<a class="back-up-btn btn btn-default btn-lg" href="#topback" aria-label="返回顶部">
<span class="glyphicon glyphicon-menu-up" aria-hidden="true"></span>
</a>
77.bs查漏
.container自动会居中
.container 类用于固定宽度并支持响应式布局的容器。
.container-fluid 类用于 100% 宽度，占据全部视口（viewport）的容器,自动实现响应式。
导航条
bs官方文档
<nav class="navbar navbar-default">
<div class="container-fluid">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Link <span class="sr-only">(current)</span></a></li>
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-left">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Submit</button>
</form>
<ul class="nav navbar-nav navbar-right">
<li><a href="#">Link</a></li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Action</a></li>
<li><a href="#">Another action</a></li>
<li><a href="#">Something else here</a></li>
<li role="separator" class="divider"></li>
<li><a href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
添加.hidden-xs 可以在xs分辨率下直接隐藏
自己编写一个导航栏
<section class="pages-nav hidden-xs">
<div class="container">
<ul>
<a href="#fcg"><li class="fcg on"><span>栅格系统</span></li></a>
<a href="#fwx"><li class="fwx"><span>内联表单</span></li></a>
<a href="#fjp"><li class="fjp"><span>焦点状态</span></li></a>
<a href="#fpz"><li class="fpz"><span>按钮</span></li></a>
<a href="#fds"><li class="fds"><span>字体图标</span></li></a>
<a href="#fdl"><li class="fdl"><span>按钮组</span></li></a>
<a href="#jm"><li class="jm"><span>导航条</span></li></a>
<a href="#sm"><li class="sm"><span>缩略图</span></li></a>
</ul>
</div>
</section>
css
.pages-nav {
width:100%;
height:58px;
background:#f0fcff;
border-bottom:1px solid #e5e5e5;
border-top:1px solid #e5e5e5;
}
.pages-nav li {
width: 12.5%;
float: left;
line-height:58px;
font-size:16px;
text-align: center;
}
.pages-nav li:hover,
.pages-nav ul .on {
color:#ef200d;
background:url(../images/nav-h_03.png) center 95% no-repeat ;
}
jquery实现的平缓回到顶部的效果
$('a').click(function(){
$('html, body').animate({
scrollTop: $($(this).attr('href')).offset().top
}, 500);
return false;
});
78.jQuery中$(’.classname’).get(0);$(’.classname’).eq(0); $(’.classname’)[0]三者的区别
$(’.li-test’).get(0)和$(’.li-test’)[0]返回的是DOM对象，而$(’.li-test’).eq(0)返回的是JQuery对象。
79.简述js的继承机制
核心机制是原型链！！
80.解释以下名词
xhr：XMLHttpRequest 对象的一个实例
jsonp：用于解决主流浏览器的跨域数据访问的问题
cors：允许当前域（domain）的资源（比如html/js/web service）被其他域（domain）的脚本请求访问的机制
81.事件冒泡和事件捕获简述
事件冒泡：当事件在某个元素上触发，会依次向父级元素传递，直到document
事件捕获： 事件从document开始，传递到精确的元素
**82.使用Ajax同时发送三个请求1.html，2.html，3.html。待三个请求同时结束并返回后，执行某个函数ab。 **
！！！！！待补充
83.避免表单重复提交
1.将提交按钮变为不可点击状态
function dosubmit() {
//获取表单提交按钮
Var btnSubmit = documen.getElementById(“sumit”);
//将表单提交按钮设置为不可用，可以避免用户再次点击提交按钮进行提交
btnSubmit.disabled = “disabled”;
//返回true让表单可以提交
return true;
}
2.POST/Redirect/Get设计模式 简单说就是用户提交一个表单后 执行一个客户端的重定向 跳转到提交成功的页面
3.在数据库添加唯一字段，防止出现重复数据 最有效
参考https://blog.csdn.net/myhuashengmi/article/details/52694077
84.var person = new Person() 与 var person = Person()的区别
如果函数返回值为常规意义上的值类型（Number、String、Boolean）时，new函数将会返回一个该函数的实例对象，而如果函数返回一个引用类型（Object、Array、Function），则new函数与直接调用函数产生的结果等同。
85.http1.0和http1.1区别
http1.0 使用的非持久链接 一个tcp连接只传输一个web对象
http1.1默认使用持久链接 一个tcp连接可以传送多个http请求和相应 减少建立和关闭连接的消耗和延迟
http1.0不支持host请求字段
1.1支持 WEB浏览器可以使用主机头名来明确表示要访问服务器上的哪个WEB站点
86.服务端渲染和客户端渲染
相同之处：渲染本质都是字符串拼接
不同：
服务端渲染性能消耗在服务端，访问人数多了可以使用缓存部分数据避免重复渲染
客户端渲染性能消耗在数据更新后，页面如何更新节省资源
服务端seo更好 不好之处在于前端更新了 后端也要改
客户端seo差
87.常见的行内元素 块元素 空元素
常见块元素(block element) address - 地址 blockquote - 块引用 center - 居中对齐块 dir - 目录列表 div - 常用块级容器，也是css layout的主要标签 dl - 定义列表 fieldset - form控制组 form - 交互表单 h1 - 大标题 h2 - 副标题 h3 - 3级标题 h4 - 4级标题 h5 - 5级标题 h6 - 6级标题 hr - 水平分隔线 isindex - input prompt menu - 菜单列表 noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容） noscript - 可选脚本内容（对于不支持script的浏览器显示此内容） ol - 排序表单 p - 段落 pre - 格式化文本 table - 表格 ul - 非排序列表（无序列表）
常见行内元素(inline element) a - 锚点 abbr - 缩写 acronym - 首字 b - 粗体(不推荐) bdo - bidi override big - 大字体 br - 换行 cite - 引用 code - 计算机代码(在引用源码的时候需要) dfn - 定义字段 em - 强调 font - 字体设定(不推荐) i - 斜体 img - 图片 input - 输入框 kbd - 定义键盘文本 label - 表格标签 q - 短引用 s - 中划线(不推荐) samp - 定义范例计算机代码 select - 项目选择 small - 小字体文本 span - 常用内联容器，定义文本内区块 strike - 中划线 strong - 粗体强调 sub - 下标 sup - 上标 textarea - 多行文本输入框 tt - 电传文本 u - 下划线 var - 定义变量 可变元素 可变元素由上下文语境来决定是块元素还是内联元素[1] 。 applet - java applet button - 按钮 del - 删除文本 iframe - inline frame ins - 插入的文本 map - 图片区块（map） object - object对象 script - 客户端脚本 空元素 由于HTML元素的内容是开始标签与结束标签之间的内容。而某些 HTML 元素具有空内容。（empty content），那些含有空内容的HTML元素，就是空元素。空元素[2] 是在开始标签中关闭的。 例子
就是没有关闭标签的空元素。
88.区分html和h5
DOCTYPE声明的方式是区分HTML和HTML5标志的一个重要因素，此外，还可以根据新增的结构、功能元素来加以区分。
89.h5的离线缓存怎么使用，工作原理
离线存储就是将一些资源文件保存在本地，在离线情况下可以继续访问web应用，同时通过一定的手法(更新相关文件或者使用相关API)，可以更新、删除离线存储等操作;
原理：HTML5的离线存储是基于一个新建的.appcache文件的，通过这个文件解析离线存储资源，这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示。
90.cdn缓存是什么
就是在不同的地点缓存内容，然后将用户的请求定向到最近的缓存服务器上
91.水平居中和垂直居中
垂直居中
垂直居中div{ background: red; width: 100px; height: 200px; position: absolute; top: 50%; left: 50%; margin-left: -50px; margin-top: -100px; /*transform: translate(-50%,-50%);*/ }
*92.css3新特性
圆角 盒阴影 文字阴影 渐变 transform的xxxxx
新增的伪类选择器 ：checked ：nth-child ：enable ：disabled
93.ajax的原理 平时怎么发送请求
通过XMLHttpRequest/ActiveXObject新建Ajax请求 通过onreadystatechange注册回调函数 使用open、setRequestHeader、send结合发送请求
平常发送网络请求：用next做同构应用时，使用isomorphic-fetch发送请求，如果只是客户端发送请求时，使用axio
94.css哪些样式可以继承
font-size,font-weight,line-height,color,
95.排序
https://juejin.im/post/57dcd394a22b9d00610c5ec8
96.数据类型
JS有几种数据类型,其中哪些的基本数据类型有哪些!
七种数据类型
Boolean
Null
Undefined
Number
String
Symbol (ECMAScript 6 新定义)
Object
其中5种为基本类型:string,number,boolean,null,undefined
Object 为引用类型,
Symbol是新出来的特殊数据类型,可以传入值或者对象且唯一!
97. http和https区别
我只是粗浅的回答了下…
HTTP相对于 HTTPS来说,速度较快且开销较小(没有 SSL/TSL) 对接,默认是80端口;
HTTP容易遭受域名劫持,而HTTPS相对来说就较为安全但开销较大(数据以加密的形式传递),默认端口为443..
HTTP是明文跑在 TCP 上.而HTTPS跑在SSL/TLS应用层之下,TCP上的
98.事件委托机制
http://www.ruanyifeng.com/blog/2014/10/event-loop.html
事件委托指的是，不在事件的发生地设立监听函数，而是在事件发生地的父元素或者祖先元素设置监听器函数，这样可以大大提高性能，因为可以减少绑定事件的元素
99.自己实现一个bind方法
参考https://blog.csdn.net/smallsun_229/article/details/80298147
Function.prototype.mybind = function (context) {
if (typeof this !== "function") {
throw new Error(this + "is not a function");
}
var self = this;
var args = [];
for (var i = 1, len = arguments.length; i < len; i++) {
args.push(arguments[i]);
}
var fbound = function () {
var bindArgs = Array.prototype.slice.call(arguments);
self.apply(this instanceof self ? this : context, args.concat(bindArgs));
}
fbound.prototype = Object.create(self.prototype);
//返回的函数不仅要和 被调函数的函数体相同，也要继承人家的原型链
return fbound;
}
100.模块化
es6编译用babel 模块化可以用webpack或者roll up没用过可以提一下就说是见过
101.class和普通构造函数的区别
101es6的新功能
let/const
模板字符串
解构赋值
块级作用域
箭头函数
函数默认参数
101.原型如何使用
写一下jquery和zepto源码中使用原型的部分
插件扩展机制
给
.fn..defaults上；
用户在调用时可传入设定值以便覆盖默认值。
102.异步
单线程：同一时间只能做一件事
原因：避免dom冲突
解决办法：异步 —事件轮询 event loop、
同步代码，直接执行
异步函数先放在异步队列
待同步代码执行完后，轮询执行异步队列的函数
什么时候放入异步队列
立即放入 定时器时间设置为0
等待一段时间放入 定时器设了延迟
ajax请求成功后放入
jqurey deffered是jquery最先提出的解决异步的方式
ajax1.5前后的区别
如何简单的封装使用dtd 开放封闭原则
说明promise和deffered的区别
dtd两类api
一类 dtd.resolve dtd.reject 主动触发
二类 dtd.then dtd.fail dtd.done 被动监听
不能混用
所以使用promise进行隔离 promise只有被动监听 没有主动触发
Promise状态变化
三种 pending 加载中 fulfilled 成功 rejected失败
只有两种变化pending到fufilled或者到rejected
对于异常的捕获可以最后统一使用catch进行捕获 不管是程序运行错误还是逻辑错误
promise的问题
1.语法
2.如何捕获异常
error和reject的两种
通过catch
3.多个串联–链式操作
4.promise.all和.race
5.promise标准 —状态变化、then函数
asycn和await es7提案中
使用await必须有async标识
await后面必须跟上promise实例
需要安装babel-polyfill
并不是取代了promise 而且还使用了promise，完全同步的写法。没有回调函数。
任何写法的改变 都改变不了js的单线程、异步的本质
103.虚拟dom
virtual dom是vue和react的核心
问题：
vdom是什么？为什么存在？
虚拟dom ，用js模拟dom结构， dom变化的对比放在js层来做，提高重绘性能
dom操作影响性能，减少dom操作，而不是推到重来 （例如dom.html（‘’）） vdom可以解决这个问题
基本的dom
js模拟的dom
vdom如何应用？核心api是什么？
patch函数两种情况 初次渲染 和 后续渲染
如何使用 可以拿snabbdom的例子
snabbdom是vdom开源库
diff算法
什么是diff算法
是linux的基础命令
在命令行使用diff a.text b.text 会返回两个文件的区别 （linux
window 下面 可以使用 git diff
vdom为什么要使用diff算法
dom操作耗费性能，必须减少dom操作
找出本次dom需要更新的节点更新，其他不更新
这个找出的过程就需要diff算法
diff算法实现流程
diff实现 patch(container, vnode) patch(vnode, newVnode)
核心逻辑 createElement 和updateChildren
103.MVVM和vue
MVC
用户操作view 例如点击按钮 按钮事件controller 修改model model同步到view中
如何理解MVVM
model （数据模型对应data）+ view（视图对应的html） + viewmodel （微创新 是view和model的桥梁 对应new Vue实例）
viewmodel示意图
如何实现MVVM (vue三要素）
响应式 ：vue如何监听到data的每个属性变化
模板引擎： vue的模板如何解析 ，指令如何处理
渲染： vue的模板如何渲染成html 以及渲染过程
是否阅读过vue的源码
使用jquery和使用vue的区别
1.vue数据和视图的分离，解耦（开放封闭原则）
2.vue以数据驱动视图，只关心数据变化 ，dom操作被封装
vue如何实现响应式
什么是响应式？
1.修改data属性后，vue立即监听到； 关键是defineProperty
2.data属性被代理到vm上
vue如何解析模板
模板是什么？
本质是字符串 ，
有逻辑v-if 、v-for等，用js实现
转化为html渲染页面，必须用js实现，只有js能处理逻辑和渲染html
最重要的就是转换为js render函数
render函数
with函数尽量不要使用！！！
_c创建标签
directive指令
标签中有空白文本节点
vue的整个实现流程
1.解析模板成一个render函数
2.响应式开始监听
3.首次渲染，显示页面，且绑定依赖
为什么 监听get不是set？
data中有很多属性，有些会被用到，有些不会，
被用到的属性走get，不会用到的不会走get，
未走get的属性，set也无需关心，
避免不必要的重复渲染
4.data属性变化，触发render
104.hybrid
hybrid是什么？为什么用hybrid
hybrid即混合，前端和客户端混合开发，需要前端和客户端开发人员共同完成，也会涉及到server端
为什么
使用hybrid可以快速更新迭代（无需app审核）
体验流畅
减少开发成本和沟通成本，双端公用一套代码
webview
是app中的一个组件 可以没有
用于加载h5页面，即小型浏览器内核
file hybrid用的file协议
file协议和http（s）协议区别
file ：本地文件，快
http（s）：网络加载，，慢
file：//绝对路径
不是所有场景都适合hybrid开发
使用NA：体验要求极致。变化不频繁（如首页）
使用hybrid：体验要求高，变化频繁（如新闻详情页）
使用h5：体验无要求，不常用（如举报、反馈）
hybrid和h5的比较
hybrid优点
1.体验更好，和NA一致
2.可以快速迭代，无需审核
缺点：
开发成本高，测试比较麻烦
运维成本也高。
适用场景
hybrid：产品的稳定功能，体验要求高，迭代频繁，例如新闻详情页
h5： 不常用的功能，例如反馈建议页、
新闻详情页用hybrid，前端如何获取内容？
不能用ajax，第一跨域，第二速度慢
客户端获取新闻内容 ，然后js通讯拿到内容，再渲染
js访问客户端，传递参数和回调函数，
客户端通过回调函数返回内容
105.获取音乐播放的真实地址
qq音乐：
点击页面中的播放按钮，会在新页面的播放器里播放该音乐。在新页面中打开开发者工具的网络探测，重新刷新页面，会发现相关请求如下：
这个格式开头的就是真正的地址
http://dl.stream.qqmusic.qq.com/C400000YU69H3N55rZ.m4a?vkey=927C721D272189FED484EF874A8D646C6B13C
网易云音乐：
第一步打开网易云音乐，随便找到一首歌，播放，复制网址的ID，
例如：杨钰莹的心雨，网址是：
http://music.163.com/#/song?id=317151
很明显，ID是317151
那么，这首歌的真实地址就是：
http://music.163.com/song/media/outer/url?id=317151.mp3
这个地址不会失效的；
这就得到一个下载公式：
http://music.163.com/song/media/outer/url?id=ID数字.mp3
把上面红色部分ID数字换成网易云播放页面的id即可。