2019-06前端面试题
2019-07-17 本文已影响0人
凤凰的小迷妹
- 将项目传到远程github上
git init（将本地项目编程git可以管理的仓库）
git add . （将项目添加到暂存区，.代表所有文件）
git commit -m 'first' （把文件提交到仓库时候的说明性文字）
git remote add origin 远程项目的地址 （关联到远程）
git push -u origin mater/分支 （项目推送到远程）
其他的指令：
git status （状态查询）
git fetch origin develop （从远程的develop分支将代码下载到本地）
git branch （查看远程分支的名字）
git branch zhang （新建分支zhang）
git checkout master （切换到主分支）
git checkout -b zhang （创建并切换到新分支）
git merge zhang （将新分支提交的改动合并到主分支）
下载项目：
git clone 项目链接
cd 项目名/
git status
git checkout -b ... 建一个自己的分支
git branch 查看所在分支
git pull origin develop 下拉最新的内容
- js跨域
(1) nginx 代理(将A、B通过一个统一的地址进行转发)
(2) jsonp的ajax请求方式
定义：js文件和带有src属性的标签不受跨域的影响，而json的数据格式被js支持。用户传递一个callback参数给服务器，服务器返回的数据是将callback参数作为函数名包裹成json格式，这样随意定值函数，自动处理数据。
优点：可以跨域，兼容性好，将controller层和view层分开（请求完后调用callback回传结果，将权限给调用方）
缺点：只支持GET不支持POST请求方式
调用失败不返回状态码
安全性低
- px、em、rem
px 表示像素，绝对单位，不改变
em 相对于父元素的字体大小
rem 相对于根元素html的字体大小
- let、const
两者都只在声明所在的块极作用域内有效
let 声明的变量值和类型都可以改变，const变量一旦声明，立即初始化，不可改变
- 行内样式设置width、height无效，margin、padding仅左右有效，上下无效
- call()、apply()
两者都是改变函数体内部this的指向，第一个参数是this要指向的对象，第二个参数apply接受数组参数，call接受连续参数。
- es6新特性
1. 新的变量声明方式 let/const
2. 箭头函数的使用
const fn = (a, b) => a + b;
箭头函数最直观的三个特点。
不需要 function 关键字来创建函数
省略 return 关键字
继承当前上下文的 this 关键字
3. 模板字符串 ``
4. 函数默认参数 ,不定参数，拓展参数
function add(x = 20, y = 30) {
return x + y;
}
console.log(add());
5. 展开运算符 ...
const arr1 = [1, 2, 3];
const arr2 = [...arr1, 10, 20, 30];
// 这样，arr2 就变成了[1, 2, 3, 10, 20, 30];
6. 类的支持，引入class关键字
7. for of
8. promise 用于异步操作（未完成，可能会完成的操作），多重链式回调
let p = new Promise((resolve, reject) => {
resolve(1);
});// resolve成功，reject失败
p.then(value => {
console.log(value);
return value * 2;
}).then(value => {
console.log(value);
}).then(value => {
console.log(value);
return Promise.resolve('resolve');
}).then(value => {
console.log(value);
return Promise.reject('reject');
}).then(value => {
console.log(`resolve: ${value}`);
}, err => {
console.log(`reject: ${err}`);
})
- vuex
vuex是vue中用于管理全局状态的一个组件，用于不同组件之间的通信
getters 实时监听值，相当于计算属性
mutations 改变定义的初始值 =>this.$store.commit('方法名')调用
actions 可包含任意一步操作，出发mutations里的方法
参数是content，context.commit('mutations里的方法名')
外部调用this.$store.dispatch('actions里的方法名')
代码示例：
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
increment (context) {
context.commit('increment')
}
}
})
- 双向绑定的原理
vue中v-model {{}} v-bind
原理：在数据变动时，通过object.defineProperty()劫持各个属性的getter和setter，触发相应的监听回调，update方法实现数据实时更新
10.组件传值
1. a组件向b组件传值
a: this.$router.push({path:'/b',query:{id:1}})
b接收: this.$route.query.id
或者：
a:<router-link :to="{name:'b',params:{bid:id}}"/>
b:this.$route.params.bid
2.父组件向子组件传值
父: <child :name-list='names'>
子: props: ['name-list']
3. 子组件向父组件传值
子(通过事件): <button @click="submit"/>
submit(){
this.$emit('code',888)
}
父:<child @code='getcode'>
11.router和route的区别
router是跳转的时候用到，route是接收参数
路由每次跳转都有route，可查询name、path、params等
12.怎么在父元素上获得id？
let $commid=$(e.target).parents('.a').attr('id')
13.css3动画
@keyframe A{
from to /0% ...100%
}
执行animation:A 5s;
14.下拉刷新
touchstart 触摸开始，toumove手指移动位置，touchend手指松开
- canvas绘图
var canvas=document.getElementByTagName('canvas') //拿到canvas标签
var ctx=canvas.getContent('2d') //拿到canvas的上下文，‘2d’表示2d画笔
ctx.moveTo(x,y) //设置绘制起点
ctx.lineTo(x,y) // 绘制直线
ctx.closePath() //闭合路径
ctx.strokeStyle='red' //设置锚边的样式
ctx.stroke()
ctx.fillStyle='green' // 填充样式
ctx.fill()
- sass
(1) $变量名：值，$full-width: 500px;
(2) 计算功能：+-*/%运算符，width: 10px*2//20px
(3) 选择器嵌套（父选择器）：
div {
hi {
color:red;
@include border-radius；
}
}
(4) 属性嵌套：
.box {
font: {
size: 12px;
weight: bold;
}
}
(5) 混合器@mixin：
@mixin border-radius{
border-radius: 5px;
}
调用用@include 方法名
(6) 继承extend（一个选择器可以继承另一个选择器里的样式）
17.js延迟加载
defer或async
<script src="" async>
18.HTML5响应式网页
(1)头部加viewport原标签，width=device-width
(2)宽度不要用绝对值，用%（百分比）或margin：auto
(3)字体大小不用px（绝对值），用相对大小rem（相对根部html）
(4)流动布局（各个div是浮动的，不是固定的）
float:left; width:30%;
float:right;width:70%;
如果屏幕宽度小的话div内容不会溢出，后面的元素会自动到下方
(5)引入css3的Media Query模块，自动探测屏幕宽度，加载相应的css文件
(6)@media/@media screen 媒体查询
例：@media (max-width:600px){
.box{}
}//当设备宽度小于600px的时候用.box样式
@media screen and (max-width: 300px) {
body {
background-color:lightblue;
}
}
PC:>1024px
ipad：768-1024px
iPhone：<768px
(7)图片自适应，img{width:100%}
(8)flex布局
flex-direction:row | row-reverse | column | column-reverse; 排列方向
flex-wrap: nowrap | wrap | wrap-reverse;排列不下是否换行
justify-content:flex-start | flex-end | center | space-between |space-around; 项目在主轴的对齐方向
flex-start（默认值）：左对齐
flex-end：右对齐
center：居中
space-between:两端对齐，项目之间的间隔都相等
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
align-items:flex-start | flex-end | center |baseline | stretch;项目在交叉轴上如何对齐
flex-start：交叉轴的起点对齐
flex-end:交叉轴的终点对齐
center：交叉轴的中点对齐
baseline：项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
19.小程序和h5的区别
(1)运行环境不同，小程序在微信上，h5在浏览器上，webview中
(2)开发成本不同
小程序：开发者工具，规定开发规则
H5：开发工具里开发，要考虑浏览器兼容等问题
(3)获得系统极权限不同
小程序：权限更多，如网络通信状态，数据缓存等。
(4)运行流畅度,h5需要在浏览器中渲染，会卡顿
20.小程序的优点
开发成本低，无需下载，服务请求延时与用户体验感变好
21.小程序中的wxss和css的区别
wxss图片引入需使用外链地址，没有body，样式用import导入
二、微信小程序
1.跳转方式
(1)页面跳转：<navigator url=""/>
(2)函数跳转：wx.navigatorTo({
url=""
})
(3)带参数的页面跳转
<navigator url="/pages？id={{item.id}}&url={{item.img}}"/>
跳转页面接受参数：
onload:function(options){
this.setData({
id:options.id,
url:options.img
})
}
2.公共变量
在App.js中 globalData：{
userInfo:null
}
其他页面引用：
userid:getApp().globalData.userInfo
3.代码模块化
新建commo.js文件写公共的代码，用model.export导出
其他页面引用：var common=require('common.js')
common.方法名调用
4.数据交互
wx.request({
//请求地址
url: 'http://127.0.0.1:8000/wechat/addressGetShebei/',
data: {
address
},//发送给后台的数据
header: {//请求头
//"Content-Type": "application/json"
"Content-Type": "application/x-www-form-urlencoded"
},
method: 'POST',
dataType:'json',
success: function (res) {
//res.data相当于ajax里面的data,为后台返回的数据
//如果在sucess直接写this就变成了wx.request()的this了
//必须为getdata函数的this,不然无法重置调用函数
that.setData({
shebei:res.data
})
},
fail: function (err) { },//请求失败
complete: function () { }//请求完成后执行的函数
})
5.绑定数据
bindtap 、{{}}
页面里data的值被修改需在方法里写this.setData({a:1})
6.模板和组件（模板逻辑少）
模板引用：@import ‘../templates/index.wxss’
引入标签<template is="模板里的name值"，data="模板里要用的值"/>
组件引用要在被引用页面的json文件配置
三元运算符：<view hidden="{{flag?true:false}}"/>
标签做操作的时候要在{{}}里
wx:for与wx:for-items是循环数组 ，使用{{item.id}}(item是别名)
wx:for-item是给列表起别名
wx:if当条件为true开始局部渲染，hidden始终会被渲染（根据条件显示或隐藏）。当判定条件频繁改变时用hidden
属性里data-name="a"
获取event.target.dataset.name
touchstart手动触摸动作开始
touchmove手指触摸后移动
touchcancel 手指触摸动作被打断，如来电
touchend手指触摸动作结束
事件绑定 以bind/catch开头
bind(不会阻止事件冒泡)，catch(阻止事件冒泡，<canvas/>中无事件冒泡)
引用文件用import/include,src=" "
import会引用目标文件，但目标文件里的引用不会引用
include所有都会引用，相当于将整个代码拷贝到include位置
性能问题：频繁做setData()操作
不要再data里放太多数据或长数组，用数据缓存或者分页渲染
下拉刷新：onPullDownRefresh()函数
上拉加载：onReachBottom()
8.页面传值
(1)全局变量：
在App.js中 globalData：{
userInfo:null
}
其他页面引用：
userid:getApp().globalData.userInfo
(2)本地缓存：
存值wx.setStorageSync('a',a)
取值wx.getStorageSync('a')
删除wx.removeStorage({key:'a'})
(3)父向子
wx.navigatorTo({url:'...?name=1&id=2'})
取值:onload:function(options){
this.setData({
id:options.id
})
}
获取其他页面的对象原型
E.js data：{
index：1
}
跳转到F页面，写一个方法
changeIndex:function(){
var pages=getCurrentPages();返回当前栈的路径和页面的数据
var prevPage=pages[pages.length-2];
prevPage.setData({
index:0
})
}
此方法可以操作页面堆栈里的页面数据，后一级页面对上一级页面群做数据管理
9.小程序里嵌入H5页面
<web-view src=""/>
web-view自动铺满整个页面，会覆盖页面的其他内容
H5跳转回小程序，引入微信的JSDK
wx.miniProgram.navigatorTo({url:'/path/to'})
10.生命周期函数
app.js文件：onLanch 初始化完成，出发onlanch
onShow 小程序启动或从后台进入前台显示，触发onshow
onHide 小程序隐藏，从后台进入前台触发
onError 发生脚本错误或api调用失败
page页面：onLoad 监听页面加载
onReady 监听页面初次渲染完成
onShow 监听页面显示
onHide 小程序隐藏，从后台进入前台触发
onUnload 监听页面卸载
App()必须在APP.js中注册，不能注册多个
通过getApp()获取实例后不要调用生命周期函数
不要再onLanch时调用getCurrentPage()，此时page还没生成
