微信小程序
1.简单描述一下微信小程序的相关文件类型
(1).wxml模板文件,是框架设计的一套标签语言,结合基础组件,事件系统,可以构建出页面的结构
(2).wxss样式文件,是一套样式语言,用于描述wxml的组件样式
(3).js脚本逻辑文件,逻辑处理网络请求
(4).json配置文件,小程序设置,如页面注册,页面标题及tabBar
(5).app.json整个小程序的全局配置,包括
- pages:所有文件路径
- 网络设置(网络超时时间)
- 界面表现(页面注册)
- window(背景色、导航样式、默认标题)
- 底部tab等
(6).app.js监听并处理小程序的生命周期函数,声明全局变量
(7).app.wxss全局配置的样式文件
2.请谈谈wxml和标准的html的异同
(1).都是用来描述页面的结构
(2).都由标签、属性等构成
(3).标签名字不一样,且小程序标签更少,单一标签更多
(4).多了一些wx:if这样的属性以及{{}}这样的表达式
(5).wxml仅能在微信小程序开发者工具中预览,而html可以在浏览器内预览
3.请谈谈wxss和css的异同
(1).都是用来描述页面的样子
(2).wxss具有css大部分的特性,也做了一些扩充和修改
(3).wxss新增了尺寸单位,wxss在底层支持新的尺寸单位rpx
(4).wxss仅支持部分css选择器
(5).wxss提供了全局的样式与局部样式
(6).wxss不支持window和dom文档流
4.小程序和vue写法的区别
(1).遍历的时候
- 小程序:wx:for=“lists”
- vue:v-for=“item in lists”
(2).调用data模型(赋值)的时候
- 小程序:(调用)this.data.item (赋值)this.setData({item:1})
- vue:(调用)this.item (赋值)this.item=1
5.小程序页面间有哪些传递数据的方法
(1).使用全局变量实现数据传递
(2).页面跳转或重定向时,使用url带参数传递数据
(3).使用组件模板template传递参数
(4).使用缓存传递参数
(5).使用数据库传递数据
6.请谈谈小程序的生命周期函数
(1).onLoad()页面加载时触发,只会调用一次,可获取当前路径中的参数
(2).onShow()页面显示/切入前台时触发,一般用来发送数据请求
(3).onReady()页面初次渲染完成时触发,只会调用一次,代表页面已经可以和视图层进行交互
(4).onHide()页面隐藏/切入后台时触发,如底部tab切换到其他页面或小程序切入后台等
(5).onUnload()页面卸载时触发,如redirectTo或naviguteBack到其他页面时
jquery
1.jquery库中的$()是什么
$()函数是jquery()函数的别称,$()函数用于将任何对象包裹成jquery对象,接着就会被允许调用定义在jquery对象上的多个不同的方法。你可以将一个选择器字符串传入$()函数,它会返回一个包含所有匹配的DOM元素数组的jquery对象
2.如何找到所有html select标签的选中项
$(‘[name=selectname]:selected’)
3.$(this)和this关键字在jquery中有何不同
$(this)返回一个jquery对象,你可以对它调用多个jquery方法,比如用text()获取文本,用val()获取值等等,而this代表当前元素,它是JavaScript关键词中的一个,表示当前的DOM元素,不能对它调用jquery方法
4.jquery怎么移除标签onclick属性
获得a标签的onclick属性:$(“a”).attr(“onclick”)
删除onclick属性:$(“a”).removeAtter(“onclick”)
设置onclick属性:$(“a”).attr(“onclick”,“test()”)
5.jquery有几种选择器
(1).基本选择器:#id class element *
(2).层次选择器:parent>child prev+next prev~siblings
(3).基本过滤选择器: :first :last :not :even :odd :eq :gt :lt
(4).内容过滤选择器: :contains :empty :has :parent
(5).可见性过滤选择器: :hidden :visible
(6).属性过滤选择器:
[attribute] [attribute=value] [attribute!=value] [attribute^=value]
[attribute$=value] [attribute*=value]
(7).子元素过滤选择器: :nth-child :first-child :last-child :only-child
(8).表单选择器: :input :text :password :radio :checkbox :submit 等
(9).表单过滤选择器: :enabled :disabled :checked :selecred
6.jquery中的Delegate()函数有什么作用
delegate()会在以下两种情况下使用到:
(1).如果你有一个父元素,需要给其下的子元素添加事件,这时你可以使用delegate()了,代码如下:
(2).当元素在当前页面中不可用时,可以使用delegate()
7.$(document).ready()方法和window.onload有什么区别
(1).window.onload方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行
(2).$(document).ready()方法可以在DOM载入时就对其进行操作,并调用执行绑定函数
JavaScript
1.javascript的事件流模型都有什么
事件流描述的是从页面接收事件的顺序,DOM结构是树形结构,当从页面的某一个元素触发了某个事件,事件会从最顶层的window对象开始,向下传播到目标元素,途径的祖先节点都会触发对应的事件,如果当前节点的该事件绑定了事件处理函数的话,则会执行该函数,当事件达到目标元素并执行绑定函数(如果有绑定的话)后,事件又会向上传播window元素,途径的祖先节点都会触发对应的事件(如果绑定事件处理函数的话)
事件流包含三个阶段:
事件捕捉阶段:事件开始由顶层对象触发,然后逐级向下传播,直到目标的元素
处于目标阶段:处于绑定事件的元素上
事件冒泡阶段:事件由具体的元素先接收,然后逐级向上传播,直到不具体的元素
2.BOM对象有哪些,列举window对象
(1).window对象,js的最顶级对象,其他的BOM对象都是window对象的属性
(2).document对象,文档对象
(3).location对象 ,浏览器当前URL信息
(4).navigator对象,浏览器本身信息
(5).screen对象,客户端屏幕信息
(6).history对象,浏览器访问历史信息
3.请简述AJAX及基本步骤
AJAX即"Asynchronous Javascript And Xml"(异步JavaScript和Xml),是指一种创建交互式网页应用的网页开发技术。通过在后台与服务器进行少量数据交换,AJAX可以使网页实现异步更新,这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新
AJAX基本步骤:
(1).初始化ajax对象 var xhr-new xmlHttpRequest()
(2).连接地址,准备数据 xhr.open(“方式”,“地址”,是否异步)
(3).发送请求
(4).接收数据(正在接收,尚未完成) xhr.οnlοad=function(){}
(5).接收数据完成 xhr.send()
4.HTTP状态消息200 302 304 403 404 500分别表示什么
200:请求成功,请求所希望的响应头或数据体将随此响应返回
302:请求的资源临时从不同的URL响应请求,由于这样的重定向是临时的,客户端应当继续像原有的地址发送以后的请求,只有在Cache-Control或Expires中进行了指定的情况下,这个响应才是可以缓存的
304:如果客户端发送了一个带条件的get请求且该请求已被允许,而该文档的内容(自上次访问以来或者根据请求的条件)并没有改变,则服务器应当返回这个状态码,304响应禁止包含消息体,因此始终以消息头后的第一个空行结尾
403:服务器已经理解请求,但是拒绝执行它
404:请求失败,请求所希望得到的资源未被服务器上发现
500:服务器遇到了一个未曾预料的状况,导致了它无法完成对请求的处理。一般来说,这个问题都会在服务器的源代码出现错误时出现
5.GET和POST的区别,何时使用POST
区别:
GET一般用于查询数据,使用URL传递参数,由于浏览器对地址栏长度有限,所以对get方式所发送的信息的数量也有限制,同时浏览器会有记录(历史记录、缓存)中保留请求地址的信息,包括地址后面的数据,get只能发送普通格式(url编码格式)的数据
POST一般用于向服务器发送数据,对所发送的数据的的大小理论上没有限制,浏览器会缓存记录地址,但是不会记录post提交的数据,post可以发送纯文本、url编码格式、二进制格式的字符串,形式多样,在以下的情况中,会使用POST请求:
(1).以提交为目的请求(类似于语义化,get表示请求,post表示提交)
(2).发送私密类数据(用户名、密码),因为浏览器缓存记录特性
(3).向服务器发送大量的数据(数据大小限制区别)
(4).上传图片文件时(数据类型区别)
6.js中字符操作函数
方法 | 作用 |
---|---|
concat() | 将两个或多个字符的文本组合起来,返回一个新的字符串 |
indexOf() | 返回字符串中一个子串第一次出现的位置的索引,如果没有匹配上,返回-1 |
charAt() | 返回指定位置的字符 |
lastindexOf() | 返回字符串中第一个子串最后一次出现的索引,如果没有匹配项,返回-1 |
substr() | 返回string的startpost位置,长度为length的字符串 |
slice() | 从下标为start开始截取,到下标end处结束(不包含end),并返回一个新的字符串 |
replace() | 用来查找匹配一个正则表达式的字符串,然后使用新的字符串代替匹配的字符串 |
split() | 通过将字符串划分成子串,将一个字符串做成一个字符串数组 |
lenght() | 返回字符串的长度,所谓字符串的长度是指其包含的字符的个数 |
toLowerCase() | 将整个字符串转换成小写字母 |
toUpperCase() | 将整个字符串转成大写字母 |
7.js中数组常用的方法
方法 | 作用 |
---|---|
push() | 后增,可向数组后添加一个新的元素,并返回数组的长度 |
unshift() | 前增,首部添加,并返回长度,改变原数组 |
pop() | 后删,返回被删除的元素,改变原数组 |
shift() | 删除首部元素,返回被删除的元素,改变原数组 |
splice() | 对数组进行删除修改,返回被删除的元素组成的数组,改变原数组 |
concat() | 合并两个或多个数组,返回新数组,不会改变元原数组 |
slice() | 剪切,返回start到end(不包括)之间的元素组成的数组,不改变原数组 |
join() | 用来将数组转换为字符串,不改变原数组,返回转换后的字符串 |
sort() | 按ascil排序,改变原数组,返回排序后的数组 |
reverse() | 颠倒顺序,返回颠倒元素顺序后的数组,改变原数组 |
indexOf() | 查找某元素在数组中的位置,若存在,返回第一个位置的下标,否则返回-1 |
lastindexOf() | 和indexOf相同,区别在于从尾部向首部查询 |
includes() | 若不使用下标,一般通过includes()方法代替indexOf() |
filter() | 过滤,返回数组中满足条件的元素组成的新数组,原数组不变 |
find() | 找到数组中第一次满足条件的元素并返回,若找不到则返回undefined,不改变原数组,和filter()方法的区别在于:filter返回值是满足条件的元素组成的数组,一般在需要使用找到的元素时,用find()方法 |
map() | 根据需求格式化数组,返回格式化后的数组,原数组不变 |
every() | 对数组的每一项都运行给定的函数,若存在,每一项true返回true,否则返回false |
some() | 对数组的每一项都运行给定的函数,若存在一项或多项返回true,否则返回false |
forEach() | 遍历整个数组,中途不能中断 |
8.怎样添加、移除、移动、复制、创建和查找节点
(1).创建:createElement()
(2).添加:appendChild()
(3).移除:removeChild()
(4).查找:
- 通过标签名称,获取的是数组 document.getElementsByTagName()
- 通过元素的Name属性的值 document.getElementsByName()
- 通过元素id,唯一性 document.getElementById()
- 通过元素class document.getElementsByClass()
- 查找元素,唯一性 document.querySelector()
- 查找元素,获取的是数组 document.querySelectorAll()
9.写出3个使用this的典型应用
(1).在html元素事件属性中使用,如:
<input type="button" onclick="showInfo(this)" value="点击">
(2).构造函数
function Animal(name,color){this.name=name}
(3).input点击,获取值
<input type="button" id="text" value="点击">
var btn=document.getElementById("text")
btn.onclick=function(){alert(this.value);}
10.js中call和apply的区别
定义:
apply:调用一个对象的一个方法,用另一个对象替换当前对象
B.apply(A,arguments); //A对象应用B对象的方法
call:调用一个对象的一个方法,用另一个对象替换当前对象
B.call(A,args1,args2); //A对象调用B对象的方法
相同点:
- 方法的含义是一样的,即方法的功能是一样的
- 第一个参数的作用是一样的
不同点:
两者传入的列表形式不一样,call可以传入多个参数,apply只能传入两个参数,所以其第二个参数往往是作为数组形式传入
11.闭包是什么,有什么特性,对页面有什么影响
闭包就是能够读取其他函数内部变量的函数,使得函数不被GC回收,如果使用过多闭包,容易导致内存泄漏
闭包的本质就是在一个函数内部创建另一个函数,它有3个特性:
- 函数嵌套函数
- 函数内部可以引用函数外部的参数和变量
- 参数和变量看不会被垃圾回收机制回收
好处:
- 保护函数内的变量安全,实现封装,防止变量流入其他环境变量发生命名冲突
- 在内存中维持一个变量,可以做缓存(但是用多了同时也是一项缺点,消耗内存)
- 匿名自执行函数可以减少内存消耗
坏处:
- 其中一点上面已经有体现了,就是被引用的私有变量不能被销毁,增大了内存消耗,造成了内存泄漏,解决办法是可以在使用完变量后手动为它赋值为null
- 其次由于闭包涉及到了跨域访问,所以会导致性能损失,我们可以通过把跨域作用域变量存储在局部变量中,然后直接访问局部变量,来减轻对执行速度的影响
12.js的正则表达式
13.let和const命名的区别和用法
let的用法:
(1).let在全局环境中生命的话就是全局变量,在局部环境中声明就是局部变量(在{}内有效,{}外是无效的)
(2).let只能先声明,再进行调用;var可以先调用再声明
(3).在相同的作用域中let声明的变量是不可以重置的,也就是不可以重复的声明,但是var可以对之前声明的变量进行重置
let和const的区别:
(1).let在声明的时候可以不用初始化,const在声明的时候必须要初始化
(2).const声明的变量是不可以修改的,但是这不是绝对意义上面的不可以修改,注意const定义的常量的值不可以再进行赋值修改的,但是const定义的数组和对象是可以进行添加和修改其中的元素的,最最重要的是定义的数组和对象是不可以重新赋值的,let定义的变量的值是可以修改的
相同点:
(1).在相同的作用域中,都是不可以进行重复声明的,不可以重置声明
(2).用let、const声明的全局变量不归window所有
14.例举至少3种强制类型转换和2种隐式类型转换
(1).强制类型转换:明确嗲平庸内置函数,强制把一种类型的值转换为另一种类型。强制类型转换主要有:Boolean、Number、String、parseInt、ParseFloat
(2).隐式类型转换,在使用算术运算时,运算符两边的数据类型可以是任意的,比如,一个字符串可以和数字相加,之所以不同的数据类型之间可以做运算,是因为JavaScript引擎在运算之前会悄悄的把他们之间进行了隐式类型转换,隐式类型转换主要有:+ - == !
css
1.link和@import的区别
两者都是外部引用css的方式,但存在一定的区别:
(1).link是XHTML标签,除了能够加载css,还可以定义RSS等其他事务,而@import属于css范畴,只可以加载css
(2).link引用css时,在页面加载时同时加载;@import需要页面完全载入以后再加载
(3).link是XHML标签,无兼容问题;@import则是在css2.1提出的,低版本的浏览器不支持
(4).link支持使用JavaScript控制DOM改变样式;而@import不支持
2.介绍一下标准的css的盒子模型,与低版本的盒子模型有什么区别?
标准盒子模型:宽度=内容的宽度(content)+border+padding+margin
低版本IE盒子模型:宽度=内容宽度(content+border+padding)+margin
用来控制元素的盒子模型的解析模式,默认为content-box
content-box:w3c的标准盒子模型,设置元素的height/width属性指的是content部分的高/宽
border-box:IE传统盒子的模型,设置元素的height/width属性指的是border+padding+content部分的高/宽
3.css选择器有哪些?哪些属性可以继承?优先级?
相邻选择器 | 通配符 | 子选择器 | 属性选择器 |
后代选择器 | 伪类选择器 | css选择器 | id选择器 |
类选择器 | 标签选择器 |
(部分)可以继承的属性:font-size font-family color
不可以继承的属性:border padding margin width height
优先级(就近原则):!important >id>class>tag //important比内联优先级高
4.css3有哪些新特性
background-image
background-origin:content-box/padding-box/border-box
background-size
background-repeat
word-wrap
对长的不可分割单词换行 word-wrap:break-word
文字阴影:text-shadow:5px 5px 5px #FF0000;(水平阴影,垂直阴影,模糊距离,阴影颜色)
font-face属性:定义自己的字体
圆角(边框半径):border-radius
边框图片:border-image: url(border.png) 30 30 round
盒阴影:box-shadow:10px 10px 5px #888
媒体查询:定义两套css,当浏览器的尺寸变化时会采用不同的属性
5.px和em的区别
px和em都是长度单位,区别是px的值是固定的,计算比较容易,em的值不是固定的,并且em会继承父级元素的字体大小
浏览器的默认字体高都是16px,所以未经调整的浏览器都符合:1em=16px,那么12px=0.75em,10px=0.625em
6.一般来说,针对不同的浏览器写不同的css,就是css Hack
IE浏览器Hack一般又分为三种,条件Hack、属性级Hack,选择符Hack,例如
(1).条件Hack
<!--[if IE]>
<style>
.test{
color:red;
}
</style>
<![end if]-->
(2).属性Hack
.tast{
color:#0909; /* For IE8 */
*color:#f00; /* For IE7 and earlier */
_color:#ff0; /* For IE6 and earlier */
}
(3).选择符Hack
*html .test{ color:red; } /* For IE6 and earlier */
*+html .test{ color:$ff0; } /* For IE7 */
vue
1.vue的特点
(1).国人开发的一个轻量级框架
(2).双向数据绑定,在数据操作方面更为简单
(3).视图、数据、结构分离,不需要进行逻辑代码的修改,只需要操作数据就能完成相关的操作
(4).组件化,方便封装和复用
(5).虚拟DOM:dom操作是非常耗费性能的,不再使用原生dom操作节点,极大解放dom操作
2.vue父子组件是如何传值的
(1).父组件向子组件传值
通过属性绑定(v-bind:)的形式,把需要传递给子组件的数据传递到子组件内部
子组件在props数组中定义一下,就可以使用定义好的数据了
-
组件中的props中的数据都是父组件传递给子组件的
-
props中的数据无法重新赋值
(2).子组件向父组件传值
子组件创建并监听自定义事件,在事件函数里面执行¥emit函数,通过emit把想传的值传给父组件,父组件在子组件上监听emit定义的事件名称并绑定自身函数,在函数的参数中接收子组件传递的参数
3.v-show和v-if指令的共同点和不同点
共同点:都能控制元素的显示和隐藏
不同点:实现本质方法不同
v-show本质就是通过控制css中的display设置为none,控制隐藏,只会编译一次;v-if是动态的向dom树内添加或删除DOM元素,若初始值为false,就不会编译了,而且v-if不停的销毁和创建比较消耗性能
总结:如果要频繁的切换某节点,使用v-show(切换开销较小,初始开销较大)。如果不需要频繁的切换某节点,使用v-if(初始渲染开销较小,切换开销比较大)
4.说出几种常用的vue指令和它的用法
(1).v-bind:将data中的数据作为某个元素的值,属性可以是内置的,也可以是自定义的
(2).v-model:在表单元素上创建双向数据绑定,它会根据控件类型自动选取正确的方法来更新元素
(3).v-for:列表渲染,类似于foeeach循环
(4).v-if:根据当前变量的值决定显示还是隐藏当前元素
(5).v-show:作用和v-if一样,只是v-show是通过style的display来达到效果,v-if是通过操作DOM树删除渲染元素
5.vue-loader是什么?使用它的用途有哪些?
vue文件的一个加载器,将template/js/style转换成js模板
用途:js可以写es6、style样式、scess、less、template可以写jade
6.单页面应用和多页面应用区别及优缺点
单页面应用(SPA),通俗一点说就是指只有一个主页面的应用,浏览器一开始要加载所有必须的html、js、css,所有页面内容都包含在这个所谓的主页面中。但在写的时候,还是会分开写(页面片段),然后在交互的时候由路由程序动态载入
多页面(MPA),就是指一个应用中有多个页面,页面跳转时是整页刷新
单页面的优点:用户体验好、快,内容的改变不需要重新加载整个页面,基于这一点spa对服务器压力较小,前后端分离;页面效果会比较炫酷(比如切换页内容时的专场动画)
单页面的缺点:不利于seo;导航不可用,如果一定要导航,需要自行实现前进后退
7.简述一下vue常用的修饰符和作用
.stop:等同于Javascript中的event.sropproagation(),防止事件冒泡
.prevent:等同于Javascript中的event.preventDefault(),防止执行的行为(如果事件可取消,则取消该事件,而不停止事件的进一步传播)
.captare:与事件冒泡的方向相反,事件捕捉由外到内
.self:只会触发自己范围内的事件,不包含子事件
.once:只会触发一次
8.对MVVM开发模式的理解
MVVM分为model view viewModel三者
model:代表数据模型,数据和业务逻辑都在model层中定义
view:代表VI视图,负责数据的展示
viewmodel:负责监听model中的数据的改变并且控制视图的更新,处理用户交互操作
model和view并无直接关联,而是通过viewmodel来进行联系的,model和viewmodel之间有着双向数据绑定的联系。因此当model中的数据改变时会触发view层的刷新,view中由于用户交互操作而改变的数据也会在model中同步
这种模式实现了model和view的数据自动同步,因此开发者只需要专注对数据的维护操作即可,而不需要自己操作
9.简述vue中每个生命周期具体适合哪些场景
- beforeCreate:在new一个vue实例后,只有一些默认的生命周期钩子和默认事件,其他东西都还没创建。在beforeCreate生命周期执行的时候,data和methods中的数据都还没有初始化,不能在这个阶段使用data中的数据和methods中的方法
- created:data和methods都已经被初始化好了,如果要调用methods中的方法,或者操作data中的数据,最早可以在这个阶段中操作
- beforeMount:执行到这个钩子的时候,在内存中已经编译好了模板了,但是还没有挂载到页面中,此时页面还是旧的。
- mounted:执行到这个钩子的时候,就表示vue实例已经初始化完成了。此时组件脱离了创建阶段,进入了运行阶段。如果我们想要通过组件操作页面上的DOM节点,最早可以在这个阶段中进行
- beforeUpdate:当执行到这个钩子时,页面中显示的数据还是旧的,data中的数据是更新后的,页面还没有和最新的数据保持同步
- updated:页面中显示的数据和data中的数据已经保持同步,都是最新的。
- beforeDestory:vue实例从运行阶段到了销毁阶段,这个时候所有的data和methods、指令、过滤器……都是处于可用状态,还没有真正的被销毁
- destoryed:这个时候所有的data和methods、指令、过滤器……都处于不可用状态,组件已经被销毁
其他
1.axios是什么?怎么使用
请求后台资源的模块
npm install axios --save装好,js中使用import引进来,然后.get或.post,返回在.then函数中如果成功,失败则是在.catch函数中
2.前端如何优化网站性能
(1).减少HTTP请求数量
可以通过精灵图、合并css和js文件、懒加载等方式来减少http请求
(2).控制资源文件加载优先级
浏览器在加载HTTP内容时,是将HTML内容从上至下依次解析,解析到link或者script标签就会加载href或者src对应链接内容,为了第一时间展示页面给用户,就需要将css提前加载,不要受JS加载影响,一般情况下都是css在头部,JS在底部
(3).利用浏览器缓存
浏览器缓存是将网络资源存储在本地,等待下次请求该资源时,如果资源已经存在就不需要到服务器重新请求到该资源
(4).减少DOM操作
(5).图标使用Iconfont替换image标签
3.如何避免回调地狱
-
模板化,将回调函数转换成独立的函数
-
使用流程控制库,例如async
-
使用promise
-
使用async/await
4.数组去重
var arr1=[1,2,3,4,2,5,1,7,5,6,7],arr2=[];
for(var i=0,len=arr1.length;i<len;i++){
if(arr2.indexOf(arr1[i])<0){
arr2.push(arr1[i])
}
}
document.write(arr2); //1,2,3,4,5,7,6
5.写一个function,消除字符串前后的空格(兼容所有的浏览器)
function trim(str){
if(str & typeof str === "string"){
return str.replace(/(^s*)|(s*)$/g,""); //去除前后的空白符
}
}