美文网首页
2019-06前端面试题

2019-06前端面试题

作者: 凤凰的小迷妹 | 来源:发表于2019-07-17 14:23 被阅读0次
    1. 将项目传到远程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 下拉最新的内容
    
    1. js跨域
      (1) nginx 代理(将A、B通过一个统一的地址进行转发)
      (2) jsonp的ajax请求方式
         定义:js文件和带有src属性的标签不受跨域的影响,而json的数据格式被js支持。用户传递一个callback参数给服务器,服务器返回的数据是将callback参数作为函数名包裹成json格式,这样随意定值函数,自动处理数据。
         优点:可以跨域,兼容性好,将controller层和view层分开(请求完后调用callback回传结果,将权限给调用方)
         缺点:只支持GET不支持POST请求方式
              调用失败不返回状态码
              安全性低
    
    1. px、em、rem
    px 表示像素,绝对单位,不改变
    em 相对于父元素的字体大小
    rem 相对于根元素html的字体大小
    
    1. let、const
      两者都只在声明所在的块极作用域内有效
      let 声明的变量值和类型都可以改变,const变量一旦声明,立即初始化,不可改变
    
    1. 行内样式设置width、height无效,margin、padding仅左右有效,上下无效
    2. call()、apply()
    两者都是改变函数体内部this的指向,第一个参数是this要指向的对象,第二个参数apply接受数组参数,call接受连续参数。
    
    1. 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}`);
    })
    
    1. 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')
        }
      }
    })
    
    1. 双向绑定的原理
     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手指松开
    
    1. 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()
    
    1. 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还没生成
    

    相关文章

      网友评论

          本文标题:2019-06前端面试题

          本文链接:https://www.haomeiwen.com/subject/wfsxlctx.html