1.了解vue和react吗?介绍一下。
vue和react都是主流的框架。
vue : 脚手架vue-cli、路由vue-router、状态管理工具vue-vuex。
react : 脚手架react-cli、路由react-router、状态管理工具react-redux。
二者区别:
1、生命周期不同。
2、模板和JSX。写法不同,react:HTML 语言直接写在 JavaScript 语言之中,不加任何引号,这就是 JSX 的语法,它允许 HTML 与 JavaScript 的混写;Vue.js 使用了基于 HTML 的模版语法。
3、状态管理机制不同。vuex redux
2.说一下vue动态路由。
而能传递参数的路由模式,由于可以传递参数,所以其对应的路由数量是不确定的,故称之为 动态路由。那么动态路由如何传递参数?
路由传参: path: '/detail/:id',
<router-link :to ="{params :{id:1}}" > <div>首页</div> </router-link>
如何把参数读取出来?路由参数是被设置到 this.$route.params 中的,想取到这个值,用 this.$route.params.id 就可以了。
3.你认为react 中setState是同步还是异步的?
setState 只在合成事件和钩子函数中是“异步”的,在原生事件和 setTimeout 中都是同步的。
合成事件:就是react 在组件中的onClick等都是属于它自定义的合成事件
原生事件:比如通过addeventListener添加的,dom中的原生事件
4.react中如何立马拿到最新的数据?
首先react得setdata更新数据是异步的 。
这点我们上课讲过的,也演示过,(setdata之后,在后面输出得到的还是旧数据)
如果想拿到新数据有两种方法:
1.加一个settimeout
2.setdata方法第一个参数是对象,第二个参数是一个回调函数callback,在回调函数中可以拿到最新数据(#字棋)游戏有讲过
5.vue双向绑定,以及原理。 (vue的响应式原理)
v-model : Object.defineProperty()
它可以允许我们对象设定getter、setter、从而可以劫持用户对对象属性的取值和赋值。
6.发布订阅者模式、观察者模式
发布订阅模式:指的是希望接收通知的对象(Subscriber)基于一个主题通过自定义事件订阅主题,被激活事件的对象(Publisher)通过发布主题事件的方式通知
观察者模式定义:Subject维持一系列它的对象Observer,当有关状态发生变更时Subject对象则会通知一系列Observer对象进行更新。
7.了解vuex吗?详细描述下。
它是vue的状态管理工具。
state:存储数据的状态
mutation: 存储数据状态的同步方法
action: 存储数据的异步方法
module: 模块的管理
8.vue store 的特点。
store存储的数据和方法是全局的,在任一组件和页面中都能调用。
9.三次握手知道吗?说一下。
1.客户端发送了一个Tcp报文到服务器,表示客户端想要和服务端建立连接。
2.服务端接收到客户端的请求,返回客户端报文,询问客户端是否准备好
3.客户端再次响应服务端一个报文,表示我已经准备好
10.了解浏览器重绘和回流吗?
当render tree中的一部分(或全部)因为元素的规模尺寸,布局,隐藏等改变而需要重新构建。这就称为回流。每个页面至少需要一次回流,就是在页面第一次加载的时候。
当render tree中的一些元素需要更新属性,而这些属性只是影响元素的外观,风格,而不会影响布局的,比如background-color。则就叫称为重绘。
注:回流必将引起重绘,而重绘不一定会引起回流
11.了解防抖和节流吗?讲讲?具体项目中怎么实现的。
加一个延时器setTimeOut(),在延时器例发起请求,再一段时间内如果再次请求就清除延时器。
例子:(输入框、下拉刷新)
12.原型、构造函数、new实例之间的关系。
1、构造函数的prototype所指的就是它关联的原型对象,而原型对象可以通过构造器constructor来寻找与自身关联的构造函数,所以就有M.prototype.conctructor===M。
2、构造函数可以new一个实例对象
13.你了解的vue指令有哪些?
v-model :双向绑定
v-bind:单向绑定
v-on: 时间绑定 可以缩写为@
v-show :显示隐藏
v-if :条件渲染
v-for :遍历(列表渲染)
14.判断一个数据的类型的方法?(最好还是一下子全答完)
typeof()
instanceof: 判断一个实例是否是某个对象的
constructor:constructor是prototype对象上的属性,指向构造函数。
15.会数组去重吗?怎么实现?
遍历去重
遍历数组、判断是否相同,删除后一个。
set方法
var arr = [1,2,2,3,4] // 需要去重的数组
var set = new Set(arr) // {1,2,3,4}
var newArr = Array.from(set) // 再把set转变成array
console.log(newArr) // [1,2,3,4]
16.ES6新特性说一下?
箭头函数
结构赋值
...对象展开运算符
let / const
set方法
17.你说一下let和const。
let和const都是块级作用域,定义一个局部变量
let 常用于定义变量
const常用于定义一个常量
18.你说一下箭头函数,及其特点。
箭头函数是ES6的新特性,它的特点有:
1、this指向:它没有this指向,它指向箭头函数外的对象
2、箭头函数没有原型属性
3、箭头函数不能当做构造函数,不能使用new命令
19.margin 外边距重叠怎么处理?
给其父标签添加一个css样式:overflow:hidden
20.说一下flex布局。
弹性布局的方向
弹性布局的主轴、侧轴以及布局
21.vue生命周期
Vue 实例从创建到销毁的过程,就是生命周期。
也就是从开始创建、初始化数据、编译模板、挂载DOM-渲染、更新-渲染、卸载等一系列的过程,我们称这是 Vue 的生命周期。
beforeCreate , created , beforeMount ,mounted ,beforeUpdate,updated,activated,deactivated,beforeDestroy,destroyed
22.深拷贝,浅拷贝,以及他们的区别。
1、浅拷贝会改变原数组或者对象;深拷贝不会改变原数组或者对象。
2、浅拷贝的例子:遍历数组arr1,将arr[i]依次赋值给空数组arr2,改变arr2中的值,arr1会随之改变
3、深拷贝的例子:
JSON.stringfy JSON.parse
Object.assign
递归
23.MVVM框架是什么?
MVVM是Model-View-ViewModel的缩写
Model代表数据模型,负责业务逻辑和数据封装
View代表UI组件,负责界面和显示
ViewModel监听模型数据的改变和控制视图行为,处理用户交互,简单来说就是通过双向数据绑定把View层和Model层连接起来。
在MVVM架构下,View和Model没有直接联系,而是通过ViewModel进行交互,我们只关注业务逻辑,不需要手动操作DOM,不需要关注View和Model的同步工作。
24.prototype和__proto__的关系是什么?
prototype和__proto__都指向原型对象,但是又有些不同
1、任意一个函数(包括构造函数)都有一个prototype属性,指向该函数的原型对象
2、任意一个构造函数实例化的对象,都有一个__proto__属性,可通过Object.getPrototypeOf()标准方法访问该属性
25.meta viewport原理是什么?
该meta标签的作用是让当前viewport的宽度等于设备的宽度,同时不允许用户手动缩放。
26.域名收敛是什么?
(1)域名收敛:就是将静态资源放在一个域名下。减少DNS解析的开销。
域名收敛多用与移动端,提高性能,因为dns解析是是从后向前迭代解析,如果域名过多性能会下降,增加DNS的解析开销。
(2)域名发散:是将静态资源放在多个子域名下,就可以多线程下载,提高并行度,使客户端加载静态资源更加迅速。
域名发散是pc端为了利用浏览器的多线程并行下载能力。
27.float和display:inline-block的区别是什么?
float和display:inline-block都可以使元素排为一行,二者的区别是
Float需要清除浮动,display:inline-block还需要设置纵向对齐方式
28.前端优化策略列举
1、压缩CSS代码
2、图片懒加载
3、减少HTTP请求
29.首屏、白屏时间如何计算?
数据未加载出来,
responseStart - navigationStart
30.解释一下闭包
当一个函数的返回值是另一个函数,而返回的那个函数如果调用了其复函数内部的其他变量,如果返回的这个函数在外部被执行,就产生了闭包。
31.解释一下作用域链
函数内部A可以用外部全局的变量,这个函数A内的函数B也可以用函数A内部的变量,这样就形成了一个作用域链。
32.ajax如何实现,readyState的五种状态的含义?
(1) 创建XMLHttpRequest对象,也就是创建一个异步调用对象. (2) 创建一个新的HTTP请求,并指定该HTTP请求的方法、URL及验证信息. (3)设置响应HTTP请求状态变化的函数. (4)发送HTTP请求. (5)获取异步调用返回的数据. (6)使用JavaScript和DOM实现局部刷新.
readyState属性五种状态的含义:
0 - (未初始化)还没有调用send()方法
1 - (载入)已调用send()方法,正在发送请求
2 - (载入完成)send()方法执行完成,已经接收到全部响应内容
3 - (交互)正在解析响应内容
4 - (完成)响应内容解析完成,可以在客户端调用了
33.jsonp如何实现?
手动插入一个script标签,为script的src属性制定一个跨域请求的URL,script可以拿到外部资源。
34.怎么处理跨域?
1、配置服务器代理
2、设置请求头
3、JSOP
35.restful的method解释?
36.get和post的区别?
1、get请求的数据放在url后面,post请求放在请求体中
2、get请求是不安全的,post请求是不安全的
37.事件模型解释
38.编写一个元素拖拽的插件
39.CSS,JS代码压缩,以及代码CDN托管,图片整合
(1)CSS,JS 代码压缩:可以应用gulp的gulp-uglify,gulp-minify-css模块完成;可以应用webpack的 UglifyJsPlugin压缩插件完成。
(2)内容分发网络(CDN):是一个经策略性部署的整体系统,包括分布式存储、负载均衡、网络请求的重定向和内容管理4个要件。主要特点有:本地Cache加速,镜像服务,远程加速,带宽优化。关键技术有:内容发布,内容路由,内容交换,性能管理。
(3)图片整合:减少网站加载时间的最有效的方式之一就是减少网站的HTTP请求数。实现这一目标的一个有效的方法就是通过CSS Sprites——将多个图片整合到一个图片中,然后再用CSS来定位。缺点是可维护性差。
40.如何利用webpack把代码上传服务器以及转码测试?
可以使用gulp +webpack来实现。
41.项目上线流程是怎样的?
(1)模拟线上的开发环境
(2)模拟线上的测试环境
(3)可连调的测试环境
(4)自动化的上线系统
(5)适合前后端的开发流程
42.工程化怎么管理的?
gulp打造前端工程化方案,同时引入webpack来管理模块化代码,大致分工如下:
gulp:处理html压缩/预处理/条件编译,图片压缩,精灵图自动合并等任务
webpack:管理模块化,构建js、css。
43.webpack 和 gulp的对比, webpack打包文件太大怎么办?
1、Gulp侧重于前端开发的整个过程 的控制管理(像是流水线);Webpack有人也称之为模块打包机
2、可以从去除不必要的插件,提取第三方库,代码压缩,代码分割,设置缓存 几个方面着手优化。
44.不想让别人盗用你的图片,访问你的服务器资源该怎么处理?
(1) 设置Referer
(2) 签名URL
45.精灵图和base64如何选择?
css精灵,用于一些小的图标不是特别多,一个的体积也稍大,比如大于10K (这个没有严 格的界定)。
base64,用于小图标体积较小(相对于css精灵),多少都无所谓。
字体图标,用于一些别 人做好的图标库(也有少数自己去做的)用起来比较方便,他的图标只能用于单色,图标用 只能于一种颜色。
46.webpack怎么引入第三方的库?
首先,配置一个entry入口文件,然后new 一个 HtmlWebpaekPlugin,通过script标签把第三方库引入进来
47.如果线上出现bug,git怎么操作?
方法1:在当前主分支修改bug,修改完bug后提交修改;
方式2:拉一个新分支,充分利用了git特性先暂存一下工作空间改动;
48.用过Nginx吗?都用过哪些?
nginx是一个高性能的HTTP和反向代理服务器。
常使用场景:(1) 反向代理(2) 网站负载均衡
49.UI Web View 和 JavaScript之间是怎么交互的?
好像是IOS,了解过,不过
50.混合开发桥接api是怎么调用的,需要引入类库嘛?调用的对象是什么?
51.说一下你对支付,推送(远程,本地)的理解
52.什么是代理和通知,写一下他们基本的实现方
53.UIViewController的生命周期
54.rem布局字体太大怎么处理?
使用注意:html字体大小被设置为100px,所以1rem=100px;使用时14px=0.14rem,都是小数。iPhone6基础上预览设计
55.如何调用原生的接口?
56.微信支付怎么做?说说流程
57.混合开发的注意点
58.说说你对手机平台的安装包后缀的理解
59.谈谈你对Socket编程的理解,及实现原理,Socket之间是怎么通讯的
即时通信
不需要请求,服务器主动给客户端发送数据
60.WEB应用从服务器主动推送Data到客户端有哪些方式?
1. html5 websocket
2. WebSocket 通过 Flash
3. XHR长时间连接
4. XHR Multipart Streaming
5. 不可见的Iframe
6. <script>标签的长时间连接(可跨域)
61.简述Node.js的适用场景?
RESTFUL restful API、实时聊天、客户端逻辑强大的单页APP,具体的例子比如说:本地化的在线音乐应用,本地化的在线搜索应用,本地化的在线APP等。
62.什么是HTTPS,做什么用的呢?如何开启HTTPS?
HTTPS协议是由SSL+HTTP协议构建的可进行加密传输、身份认证的网络协议要比http协议安全 。
第一步,生成并提交CSR(证书签署请求)文件
第二步,CA机构进行验证
第三步,CA机构颁发证书
63.你们原来公司如何发送的新消息推送?
64.如何用NodeJS搭建中间层?
65.vue与react的对比,如何选型?从性能,生态圈,数据量,数据的传递上,作比较
66.vue slot是做什么的?
插槽。如果想在组件中添加内容,可以设置插槽。
插槽 分为 无名插槽和有名插槽。
67.vue和angular的优缺点以及适用场合?
vue
优点: 1. 简单:官方文档很清晰,比 Angular 简单易学。
2. 快速:异步批处理方式更新 DOM。
3. 组合:用解耦的、可复用的组件组合你的应用程序。
4. 紧凑:~18kb min+gzip,且无依赖。
5. 强大:表达式 & 无需声明依赖的可推导属性 (computed properties)。
6. 对模块友好:可以通过 NPM、Bower 或 Duo 安装,不强迫你所有的代码都遵循 Angular 的各种规定,使用场景更加灵活。
缺点:
1. 影响度不是很大:google了一下,有关于Vue.js多样性或者说丰富性少于其他一些有名的库。
2. 不支持IE8
3. 新生儿:Vue.js是一个新的项目,没有angular那么成熟。
应用场景:小型应用
angularJS:
优点:
1. 是一个比较完善的前端框架,包含服务,模板,数据双向绑定,模块化,路由,过滤器,依赖注入等所有功能;
2. ng模块化比较大胆的引入了Java的一些东西(依赖注入),能够很容易的写出可复用的代码,对于敏捷开发的团队来说非常有帮助。味着他有一个坚实的基础和社区支持。
3. 模板功能强大丰富,自带了极其丰富的angular指令。
4. 自定义指令,自定义指令后可以在项目中多次使用。
5. angularjs是互联网巨人谷歌开发,这也意味着他有一个坚实的基础和社区支持。
缺点:
1. 文档例子非常少, 官方的文档基本只写了api, 一个例子都没有, 很多时候具体怎么用都是google来的, 或直接问misko,angular的作者.
2. angular 入门很容易 但深入后概念很多, 学习中较难理解
3. DI 依赖注入 如果代码压缩需要显示声明.
4. 对IE6/7 兼容不算特别好, 就是可以用jQuery自己手写代码解决一些.
5. 指令的应用的最佳实践教程少, angular其实很灵活, 如果不看一些作者的使用原则,很容易写出 四不像的代码, 例如js中还是像jQuery的思想有很多dom操作
应用场景:在大型超大型web应用开发上。
React
优点:
1.速度快:在UI渲染过程中,React通过在虚拟DOM中的微操作来实现对实际DOM的局部更新。
2. 跨浏览器兼容:虚拟DOM帮助我们解决了跨浏览器问题,它为我们提供了标准化的API,甚至在IE8中都是没问题的。
3.模块化:为你程序编写独立的模块化UI组件,这样当某个或某些组件出现问题是,可以方便地进行隔离。
4.单向数据流:Flux是一个用于在JavaScript应用中创建单向数据层的架构,它随着React视图库的开发而被Facebook概念化。
5.同构、纯粹的javascript:因为搜索引擎的爬虫程序依赖的是服务端响应而不是JavaScript的执行,预渲染你的应用有助于搜索引擎优化。
6.兼容性好:比如使用RequireJS来加载和打包,而Browserify和Webpack适用于构建大型应用。它们使得那些艰难的任务不再让人望而生畏。
缺点:
React本身只是一个V而已,并不是一个完整的框架,所以如果是大型项目想要一套完整的框架的话,基本都需要加上ReactRouter和Flux才能写大型应用。
应用场景:个性化需求、中型应用
68.vue路由实现原理?
前端路由是直接找到与地址匹配的一个组件或对象,并将其渲染出来。
69.你们vue项目是打包了一个js文件,一个css文件,还是有多个文件?
根据vue-cli脚手架规范,一个js文件,一个CSS文件。
70.vue遇到的坑,如何解决的?
输入框抖动
加延时器防抖
71.vue的双向绑定的原理,和angular的对比?
Object.defineproperty()
通过设置对象属性的setter方法、getter方法来对对象取值和赋值
72.vue-cli,脚手架
1.nodemodules文件夹:模块包
2.packjson.js 配置文件
3.app.vue 主页面
4.main.js 入口文件
5.router.js配置路由
7.store.js配置数据状态管理
8.src文件夹:view页面、components组件、store(数据的状态、同步、异步方法)
73.Vue里面router-link在电脑上有用,在安卓上没反应怎么解决?
换成a标签,或者通过点击事件js跳转