面试题

第一章

• 1.float布局和flex弹性布局
  float布局：浮动元素会脱离文档流，使用浮动技术后，还要清除浮动的影响。并且还要精确计算实现等距分隔。
  flex弹性布局：不但可以实现多个块元素共存于一行，而且对父元素没有不好的影响，同时实现子元素等距分隔，弹性布局会自动计算。
• 2.说说scss
  scss是css预编译语言，就是说通过scss写的代码最终都会被编译成 css 再使用。其目的是为了更快、更结构的编写 css 文件，都能使用 变量、运算符、判断、方法等等。
  scss 需要大括号{}和分号;
  变量：$变量名: 变量值
  嵌入字符串：#{变量}，可以插入任意东西的，比如变量，方法等等，高级用法。
  @import：导入
• 3.将一个盒子旋转45度

<div id="demo"></div>
#demo{
	width: 100px;
	height: 50px;
	background-color: skyblue;
	transform: rotate(45deg);
}

• 4.H5的新增特性
  内容元素：header，nav，section，article，aside，footer
  表单控件：date，time，email，url，search
  控件元素：webworker，websockt
  性能较差元素：frame
  绘画：canvas，用于媒体回放：video和audio，本地离线缓存：localStorage（长期存储数据）和sessionStorage（暂时存储数据）
• 5.数组的常用方法
  //末尾添加arr.push()，
  //末尾删除arr.pop()，
  //开头添加arr.unshift()，
  //开头删除arr.shift()，
  //合并数组arr.concat(arr1)，//将这个数组拼接到原数组形成一个新数组arr.concat([7])
  //截取莫一段 0 <= start < 2，到新数组arr.slice(0,2)，
  //删除莫一段 从下标0开始，删除1个，原数组arr1.splice(0,1)，
  //判断所有参数是否满足条件，如果有就返回truearr.every(r => r % 2 === 0)，
  //用于删除操作，过滤出满足条件的元素，返回一个新的数组arr.filter(r => r > 2)，
  //返回第一个arr.find(r => r > 1)，
  //判断是否有一个满足条件，如果有返回truearr.some(r => r > 2)，
  //遍历数组每个元素,数字操作arr.forEach(r => {r = r * 20})，
  //循环原数组每个元素，返回到一个新的数组arr.map(r => ({ age: r * 20 }))，
  //统计或累加操作，叠加器，a指的是上一次结果 ,b指的是下一个arr.reduce((a, b) => a + b)，
  //将数组拼成字符串arr.join(",")，
  //返回这个元素在这个数组的下标arr.indexOf(2)，
  //这个数组是否包含2arr.includes(2)，
  //将一个对象变成数组var obj = {0:"Simba",1:"Yiwei",length:2} console.log(Array.from(obj))，
• 6.给数组对象添加属性

        //在arr数组的每一个对象中添加link：banana
        let arr=[
            {name:'xyz',age:20},
            {name:'LM',age:20}
        ]
        let newArr=arr.map(add=>{
            return {...add,like:'banana'}
        })
        console.log(newArr)

• 7.给Jquery扩展一个方法
• 8.怎么设置Ajax的请求头

$.ajax({
 		beforeSend: function (XMLHttpRequest) {
            XMLHttpRequest.setRequestHeader("token", "eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiIxOD.....");
        },
	});

$.ajax({
 		headers: {
             'token':'token_value'
         },
	});

• 9.说说Vue的生命周期

做初始化工作，执行beforeCreate钩子函数（如果有），初始化data数据，执行created钩子函数（如果有），判断是否传el选项，如果没有传则等到实例vm主动调用$mount()再继续执行，如果传el在判断是否传template模块选项，如果没有传template则将el对应容器的所有内容当成template，将template通过rendar函数编译成vdom虚拟DOM树，执行beforMount钩子函数（如果有），将虚拟DOM替换掉el容器中的旧内容（把真正的HTML覆盖掉旧模块），执行mounted钩子函数（如果有），当data数据发生改变时先走beforeUpdate vdom更新完DOM后走updated，当组件切换或者跳转路由时，调用beforeDestroy钩子函数（如果有），解除事件绑定销毁组件，执行destroyed钩子函数（如果有）。

• 10.v-if和v-show的区别
  v-if通过控制dom节点的存在与否来控制元素的显隐；只判断一次，如：购物车如果为空则显示一张图，
  v-show用于判断display样式，block为显示，none为隐藏；频繁切换，如轮播图。
• 11.如果绑定事件只触发一次怎么设置

<button id="btn3">登录</button>

$("#btn3").one('click',function(){
	alert('jQuey的one函数，第1次点击');
});

• 12.v-on可以绑定多个方法吗
  可以的，例如：

<input type=“text” @input=“onInput” @focus=“onFocus” @blur=“onBlur” />

• 13.浏览器离线缓存的几种方式
  http缓存，websql，indexDB，cookie，localstorage，sessionstorage，application cache，cacheStorage，flash缓存
• 14.路由懒加载
  懒加载简单来说就是延迟加载或按需加载，即在需要的时候的时候进行加载。
  1.异步组件定义为返回一个 Promise
  const Foo = () => Promise.resolve({ /* 组件定义对象 */ })
  2.可以使用动态 import
  const Foo = () => import(’./Foo.vue’)
• 15.动态路由
• 16.导航守卫
  你可以使用 router.beforeEach 注册一个全局前置守卫：

router.beforeEach((to, from, next) => {
  // ...
})

to: Route: 即将要进入的目标 路由对象
from: Route: 当前导航正要离开的路由
next: Function: 一定要调用该方法来 resolve 这个钩子。
全局后置钩子

router.afterEach((to, from) => {
  // ...
})

• 17.Vue和传统的网页开发有什么区别
  前端框架zhidao，这种框架的开发可以把前后台完全分离，前端人员只负责前端开发，服务端人员负责服务端开发。vue有自己的请求处理方式，现在前后端都是用rest风格，前后台版只在接口上有交集，代码上完全独立。还有就是Vue同权angualrjs类似都是用我们所谓的MVC或者称为MVVC的方式，是的前端代码也区分出model，controller and view层，代码做到更好的控制和流畅
• 18.SPA单页面的实现原理
  • 浏览器的url地址发生变化，但是其实并没有发送请求，也没有刷新整个页面
  • 根据我们配置的路由信息，每次点击切换路由，会切换到不同的组件显示，类似于选项卡功能的实现,但是同时url地址栏会变化