@[TOC]前端面试
[写在前面]
优秀的前端面试经验-1
- VUE实现原理 MVVM原理
- 基础概念–Object.defineProperty()
1-1 首先vue采取的是mvvm,与mvc不同的是采取数据双向绑定。同时注意vue是不兼容低版本的,为什么不兼容,就要谈到Object.defineProperty()
1-2 如何实现双向数据绑定—采取数据劫持与发布订阅模式
1-3 平常我们创建属性的时候直接[对象.属性],利用Object.defineProperty()则要写成[Object.defineProperty(对象,‘属性名’,{属性设置})]
- 属性值1-删除属性[configurable:ture]
- 属性值2-可写属性[writeable:true]
*一般用set方法替换这个- 属性值3-枚举属性[enumerable:ture]
- 属性值4-属性值[value=‘xxx’]
*一般用get方法替换这个- 数据劫持-Observe(data)
2-1 Vue方法支持数据劫持,理解如何劫持自己新创一个方法进行数据劫持内部逻辑
2-2 数据劫持的本质是将[data:{a:1}]这个转化为[Object.defineProperty(对象,‘属性名’,{属性设置})],最后通过他的属性设置获取数据(前面谈到的1),实现劫持
2-3 而[data:{a:1}]可以像这样[data:{a:{a:1}}]递归下去,所以,需要在新创Observe中递归调用observe(newData),这样的递归成为数据代理
2-4 通过上面的学习,理解为什么在VUE中不能新增不存在的属性,因为没有对应的get,set方法,不能实现数据劫持
2-5 而所谓的VUE可以深度响应就是指每次在div中新建一个对象时会自动增加数据劫持
补充:this是当前获取对象实例,就是大括号里面的对象- 编译-Compile
- 使用JQuery操作DOM 截图来源
- Ajax实现步骤
- ajax异步请求指在本地客户端在像服务器请求数据的时候,中间有个ajax引擎,它的作用是不把客户端的全部请求交付给服务器,而是进行筛选,一部分例如数据请求交给服务器,另外一部分例如数据校验和数据处理则由引擎代为执行
- Ajax请求一共有如下几步:
2-1. 新建XMLHttpRequest 对象,用于进行异步操作,语法为
var xmlHttpRequest = new XMLHttpRequest();
2-2. 新建HTTP请求,用来确定哪个URL进行相对应的异步操作获取数据,语法为 XMLHttpRequest.open(method,URL,flag,name,password)
2-3. 判断request.state的状态,一共有五种状态,从0-4,分别为创建,初始化[使用open属性建议HTTP请求],请求数据[使用send属性发送数据],返回数据,完成请求。只有当status=4时,才证明拿到了数据
2-4. 但这时调用过程完毕,但不表明调用成功,需要再判断status=200?,只有是的时候才表明拿到了数据[使用responseText/responseXml属性拿到数据]
2-5. 上面的四步都属于初始化,这一步开始发出HTTP请求[使用open属性建议HTTP请求]
2-6. 将获取到的数据进行表单的刷新。在script中写函数,通过更新表单对象的value值进行表单数据的刷新
- 什么是CSS reset
不同的浏览器对于HTML的默认样式有着不同的分别,例如对于缩进操作,UC浏览器默认缩进,火狐采用padding,IE采用margin。为了解决开发的兼容性问题,采用CSS reset将默认样式全部覆盖
- 什么是CSS预处理
CSS文件的编写是复杂的,css预处理器设计了一种新的编程语言,使得css文件更加容易维护,更容易理解。关于css预处理器的好处总结为以下几点:
- 模块化,将一块大的分割,形成树形,根节点称为入口文件,其他节点称为模块节点,而入口文件依赖于好多个模块文件。这样做使得css可以像编程功能代码一样,可以实现复用,分层,函数依赖等,享受程序开发的便利。
- 选择器的使用,基础的选择器有id 类 元素三种。每块代码都会有很多的标签,id及class的设置,预处理器可以进行选择符的嵌套,这样的话css的编写和html的编写有结构上的统一,有利于整理思路。
- 变量的使用,使得可读性更高(例如:将一样的颜色用同一变量代替),而且还可以利用函数进行简单的计算(例如:颜色加深,可以使用darken($color, 20%)),
- 现在的不足:html文件中需要加载css文件,所以需要将写好的源码进行编译,而这需要额外的付出。
- 对于js你平常用什么框架?
- 框架是什么?框架就是js连接HTML与css时的固定规范,这样可以保证好多的js连接的有条理性。
- 其次明确前端框架与前端库的区别。框架是一套完整的体系,要开发时需要完全整个体系标准走,而库就是方法和函数的集合,如何取用它,在于我们。
- 常用的js前端框架有:VueJS,AngularJS,ReactJS(=react+react-route+react-redux ),bootstrop-CSS,Jsoup-后台
3.1 VueJS
1). 框架是嵌入式的,可以再网页的某个模块弄,也可以在网页的全局使用
2). 常用的属性有:1.v-text:显示文本信息,只会显示冒号后的message,不会显示两个标签体中间的内容,等价于{{message}}—data
2.v-html:和上一个文本信息的区别是v-html会将下面定义的HTML语句进行解析—data
3.v-on:为元素绑定事件,可以简写成@—methods
补充,可以限制在进行某些操作时调用对应的函数,具体的参考https://cn.vuejs.org/v2/api/#v-on,如:@keyup.enter 按下回车键时调用
同时,对于基础的@click里面还可以进行传参操作
4.v-show:根据表达式的真假,切换元素的显示与隐藏,true显示,false隐藏,通过操作display来实现,操作的是样式,当需要频繁操作时用v-show—methods
5.v-if:根据表达式的真假切换显示状态,操作DOM树,切换不频繁时用v-if—methods
6.v-bind:设置元素的属性,一般格式为v-bind:属性=" “,而其中的v-bind是可以忽略的,写成:属性=” “,
7.v-for:根据数据生成列表结构
8.v-model:获取表单中的值(双向数据绑定,说的是改变v-model或后面”"里定义的,都会同时改变没有改的一方)3.2 AngularJS
3.3 ReactJS
- 常用的库有:druid,jQuery,react,axios
4.1 axios
1). 使用:
通过document.querySeletor(".get").onclick = function(){
axios.get(地址?key=value&key2=values).then(function(response){},function(err){})}
2). axios是一个强大的网络请求库,其中get和post的语法格式是这样的
axios.get(地址?key=value&key2=values).then(function(response){},function(err){})
axios.post(地址,{key:value,key2:values}).then(function(response){},function(err){})
其中地址是固定的,例子有:
get http://autumnfish.cn/api/joke/list 随机笑话 而key,即请求参数为num,后面的value只能为数字
post http://autumnfish.cn/api/user/reg 用户注册 而key,即请求参数为username,后面的value只能为字符串4.2 jQuery
1). 是一个库,对于js原生代码的二次封装,jq对象可以通过直接调用方法实现相应的功能
2). jQuery的操作流程是,导入jq包,获取唯一jq对象,通过对象调用需要的方法
3). 唯一的jQuery对象我们就是 $ 来表示
4). 常用的方法:
var value = . t r i m ( .trim( .trim((“选择器”).val())------------检查input输入是否为空
注:因为在JQuery中的each遍历中,没有break、continue方法。如果想跳出循环或continue,只能以return false、return true代替。但return false是跳出整个each循环,return true仅仅是跳出本次循环。
$(“选择器”).attr(“属性名”) ------------获取容器的属性值
$(“按钮id”).click(function() ------------按钮按下,调用函数
[about axios]
<!-- 官网提供的 axios 在线地址 -->
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
[about vue]
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
- js有哪些数据类型呢?这些数据类型,哪些是引用类型的呢
- js基本的数据类型有Object,undefined,null,number,Boolean,bigint,string,symbol,其中bigint与symbol为ES6新增部分
- Object为引用类型,它下面包含常用的function,array,date,math,RegExp五种数据类型
- 关于数据类型主要掌握不同类型之间的转换工作,而这需要见我的另一篇文章
- 关于其中引用数据类型
4.1 function
- 方法定义是,形参的类型不用写,返回值的类型不用写因为都是var
- 方法名是一个对象,重名会覆盖,不会报错
- 在JS中,方法的调用只与方法的名称有关,与实际参数列表无关
- 在方法声明中有一个隐藏的内置对象argument(数组),封装这个数组内所有的实际参数值
- 属性length指形参的个数
4.2 Array
- join(参数):将数组中的元素按照指定的分隔符拼接成为字符串,默认是逗号
- push() 向数组的末尾添加一个或更多元素,并返回新的长度
- 属性length指数组的长度
- JS中,数组元素的类型可变
- JS中,数组的长度可变
4.3 Date
- toLocaleString(),返回当前电脑上的地区的时间格式
- getTime(),获取毫秒值,返回当前如期对象描述的时间到1970年1月1日零点的毫秒之差
4.4 Math
- Math对象不用创建,直接使用,这是不同于其他四个的,其他四个都要new来创建
- 方法
- random() 返回0-1之间的随机数(0,1)
- ceil(x) 对数进行向上舍入
- floor(x) 对数进行向下舍入
- round(x) 对数进行四舍五入操作,返回整数
- 属性 PI指π
4.5 RegExp
- 正则表达式构成
- 单个字符[]
- 如[a] [ab] [a-zA-Z0-9_]
- \d:单个数字字符[0-9]
- \w:单个单词字符[a-zA-Z0-9_]
- 量词符号
- ?:表示出现0次或1次
- :表示出现0次或多次
- +:出现1次或多次
- {m,n}:表示m<=num<=n
- 如:\w*
- 符号
- 开始符号:^
- 结束符号:$
- 正则表达式地使用
- 创建有两种方式
- var reg = new RegExp(“正则表达式”)------- 如(“^\w{6,12}$”)
- var reg = /正则表达式/ ------- 如/^\w{6,12}$/
- 常用方法为:test(参数),验证指定字符串是否符合正则定义的规范,返回true或false
- 对于文件的请求,有时候http的请求效率会很慢,怎么办呢?
使用文件合并,比如将多个小文件合并成大文件,或者将该嵌入的内容嵌入到html,css sprites等等,减少http请求数
- 浏览器可以并行下载多少个资源?
一般就是6个,如果的IE6就只有两个了
- 前端主要学习那几块?
html + css + javascript + nodejs
- define和require区别
define和require在依赖处理和回调执行上都是一样的,不一样的地方是define的回调函数需要有return语句返回模块对象,这样define定义的模块才能被其他模块引用;require的回调函数不需要return语句。
- 服务器发送请求后浏览器端做的动作
- 客户端根据URL,进行DNS域名解析,
- 然后根据IP地址,请求报头,向浏览器发出请求,请求的例如HTML,JS,CSS。
- 浏览器收到请求后响应报头。
- 客户端(本地)根据收到的文件,建立内部数据结构,例如HTML的DOM树,CSS 的样式规则,JS的对象属性表,
- 最后渲染出界面。