日升昌面试题

时间 2019-11-11

原文原文链接

基础篇css

一、什么是盒子模型？html

页面就是由一个个盒模型堆砌起来的，每一个HTML元素均可以叫作盒模型，盒模型由外而内包括：边距（margin）、边框（border）、填充（padding）、内容（content）。它在页面中所占的实际宽度是margin + border + paddint + content 的宽度相加。前端

二、行内元素、块级元素有哪些，有何区别，如何转换?vue

分别有：块级元素div p h1 h2 h3 h4 form ul 行内元素: a b br i span input selectangularjs

区别es6

行内元素会在一条直线上排列，都是同一行的。块级元素各占据一行，垂直方向排列。web

块级元素可包含行内、块级元素。行内元素不能包含块级元素，只能包含文本或其它行内元素。vue-router

行内元素与块级元素属性的不一样，主要是盒模型属性上：行内元素设置width无效，height无效(能够设置line-height)，margin上下无效，padding上下无效vuex

转换：display:block;设为块级元素。display:inline;设为行内元素编程

三、前端页面有哪三层构成，分别是什么?做用是什么?

结构层 Html 、表示层 CSS、行为层 js

四、以下有一段html，请用原生js或jq知足以下要求【dom】

<div class="mydiv">
    <lable>用户名：</lable>
    <input type="text" data-name="uname" value="hello"/>
</div>

a：将lable中的内容设置为当前值+当前时间戳

b：将input的值设置为当前值+当前时间戳

c：将input中的自定义属性data-name设置为当前值+当前时间戳

高级篇

五、描述一下js都有哪些做用域。以下代码的结果是什么，而且分析缘由【做用域】

var arr = [];
for(var i=0;i<10;i++){
    arr[i]=function(){
        return i;
    }
}
var res=arr[3]()
console.log(res);

显然这段代码输出10，并无向咱们指望的返回3，缘由也很简单（js的变量提高）函数在调用时候访问的是一个全局做用域的i，此时for循环已经执行完毕，全局变量i=10；

若是想输出3，两种办法，1中是用es6的let。另外一种是利用函做用域经过当即执行函数来对其闭包。具体代码以下

六、js有几种数据类型，分别都有哪些。按照内存结构如何区分，存储结构有何区别

5种简单数据类型：Undefined, Null, Boolean, Number, String.

1种复杂数据类型：Object（Array，Date，Function）.

上面的5种简单数据类型又称为基本数据类型，复杂数据类型又称为引用数据类型。基本数据类型保存在栈内存，引用数据类型其实是一个指针，这个指针也保存在栈中，可是这个指针指向的对象则保存在堆内存中。

var arr = [];
 for(var i=0;i<10;i++){
     arr[i]=(function(i){
         return function(){
             return i;
         }
     })(i)
 }
 var res=arr[3]()
 console.log(res);
 // 这样一来数组的每一个函数就处于一个当即执行函数的函数做用域中，该当即执行函数传入i,其实for循环执行了以下代码：
 // array[0]=(function(i){
 //     return function(){
 //         return i;
 //     }
 // })(0);
 // array[1]=(function(i){
 //     return function(){
 //         return i;
 //     }
 // })(1);
 // 这样一来，数字组中每一个函数对应一个单独的函数做用域（当即执行函数的）这里共建立了10个函数做用域，这些函数做用域里的i值就是执行时候传入的0……9，当执行
 // array[3]();时候函数访问的i值是其对应的当即执行函数做用域里的 i，而不是全局的i值，这样咱们就获得了预期的效果。
// 说获得这里咱们简单来讲一下闭包，闭包能够理解为一个闭包就是一个没有释放资源的栈区，栈区内的变量处于激活状态。上面的例子中for循环在执行时系统分配内存，js执行线程建立执行栈区，执行

七、目前为止，js都有哪些实现继承的办法。【面向对象】

原型链继承:将父类的实例做为子类的原型

借用构造函数继承：apply与call

es6：关键字extend

八、如何避免回调地狱（如何优雅的处理回调），并给出以下代码优雅解决方案【es6+】

service.js代码以下

let myService={
    /**
    *功能：获取教师id，即tid
    *参数：tno--教师编号
    */
    getTcId:function (param) {
        let result=$.post('http://localhost:8080/getTcId',param);
        return result;
    },


    /**
    *功能：获取老师详细信息
    *参数：tid--教师id
    */
    getTcInfo:function (param) {
        let result=$.post('http://localhost:8080/getTcInfo',param);
        return result;
    }
}
 

index.html以下

<button>获取张老师信息</button>
<div class="tinfo"></div>
<script src="service.js"></script>
<script>
   $('button').click(function () {
       let param={tno:20160808};
       getTcId(param).then(function (rep) {
           let tid=rep.tid;
           let param={tid:tid}
           getTcInfo(param).then(function (rep) {
                $('tinfo').html(`老师的详细信息为：${rep}`)
           })
       })
   })
</script>

更改index.html中的script部分，使其代码优雅处理回调

参考答案：

$('button').click(async function () {
    let tid=(await getStudent({tno:20160808})).tid;
    let tinfo=await getStudent({tid:tid})
    $('tinfo').html(`老师的详细信息为：${rep}`)
})

组件篇

九、什么是mvvm，它和mvc有何区别？【设计思想】

什么是mvvm

MVVM是Model-View-ViewModel的缩写，是一种设计思想。Model 层表明数据模型；View 表明UI 组件，它负责将数据模型转化成UI 展示出来，ViewModel 是一个同步View 和 Model对象。

在MVVM架构下，View 和 Model 之间并无直接的联系，而是经过ViewModel进行交互，Model 和 ViewModel 之间的交互是双向的，所以View 数据的变化会同步到Model中，而Model 数据的变化也会当即反应到View 上。

ViewModel 经过双向数据绑定把 View 层和 Model 层链接了起来，而View 和 Model 之间的同步工做彻底是自动的，无需人为干涉，所以开发者只需关注业务逻辑，不须要手动操做DOM, 不须要关注数据状态的同步问题，复杂的数据状态维护彻底由 MVVM 来统一管理。

和传统mvc的区别

mvc和mvvm其实区别并不大。都是一种设计思想。主要就是mvc中Controller演变成mvvm中的viewModel。mvvm主要解决了mvc中大量的DOM 操做使页面渲染性能下降，加载速度变慢，影响用户体验。

十、Vue组件之间如何通讯，父子组件通讯（父-->子，子-->父），兄弟组件通讯

父组件经过标签上面定义传值，子组件经过props方法接受数据【vue通讯】

//父组件中
<child message="hello!"></child>


//子组件中
<template>
  <div>
     {{message}}
  </div>
</template>
export default {
   name: "baseLayer",
   props:['message']
}


/*须要注意的是，子组件不能修改父组件的props
由于一个父组件下可能有多个子组件，若是某个子组件修改了父组件传递的props，
极可能致使其余子组件也就跟着变化，最终致使整个应用的状态难以管理和维护
因此不容许子组件修改props*/

子->父: 子组件自定义事件，子组件经过$emit方法传递参数，父组件能够在使用子组件的地方用 v-on 来监听子组件触发的事件

//父组件中
<template>
  <div class="father">
    <child v-on:result="clickChild"></child>
  </div>
</template>
<script>
  import child from '@/compoment/child'
  export default {
    name:'father',
    components:{child},
    methods:{
        clickChild(type){
            alert(type)
        }
    }
  }
</script>




//子组件中
<template>
  <div>
     <button v-on:click="clickBtn(true)">肯定</button>
  </div>
</template>
export default {
   name: "child",
   methods:{
        clickBtn(b){
            //监听result变化, 并发出通知
            //（在angularjs中叫作广播，angularjs提供了emit,
            //broadcast和$on服务用于向父中传递消息）
            this.$emit('result', b);
        }
    }

兄弟或者复杂组件间的通讯，推荐使用vuex，参考笔记

http://www.cnblogs.com/flyings/p/9022583.html

十、vue-router如何定义一个带参数的路由，而且写出跳转至此路由，此路由对应的组件如何接受对应的参数【vue路由】

export default new Router({
  routes: [
    {
      path: '/',
      name: 'home',
      component: home
    },
    {
     path: '/blogDetail/:bid',
     name: 'BlogDetail',
     component: blogDetailCmp
    }]

//跳转至此组件，并携带参数

编程式：this.$router.push({ name: 'BlogDetail', params: { bid: 20160808}})

声明式：<router-link :to="{ name: 'user', params: { bid: 20160808 }}">详情</router-link>

//此组件如何接受参数

this.$route.params.bid

十一、vue生命周期函数（钩子）都有哪些？DOM 渲染在哪一个周期中就已经完成。请列举出3个Vue中经常使用的生命周期钩子函数

【vue钩子】

能够总共分为8个阶段：建立前/后, 载入前/后,更新前/后,销毁前/销毁后

在mounted阶段

created: 实例已经建立完成以后调用,在这一步,实例已经完成数据观测, 属性和方法的运算, watch/event事件回调. 然而, 挂载阶段尚未开始, $el属性目前还不可见

mounted: el被新建立的 vm.$el 替换，并挂载到实例上去以后调用该钩子。若是 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。

activated: keep-alive组件激活时调用

十二、v-show和v-if指令的共同点和不一样点【vue指令】

v-show指令是经过修改元素的display的CSS属性让其显示或者隐藏

v-if指令是直接销毁和重建DOM达到让元素显示和隐藏的效果

1三、如何让css只在当前组件中起做用【vue组件】

将当前组件的<style>修改成<style scoped>

1四、如何定义一个vue组件，别人只须要安装你的插件，无需再页面引入import 模板也无需插入该组件，即可以直接调用。好比toast弹窗插件。某个组件用的时候，直接 this.$toast('验证中经过',1000) ,既能够弹出。【vue组件进阶】

./plugin/modal/index.js

import mytoast from './toast';
export  default {
  install:function(Vue){
    //生成一个Vue的子类，同时这个子类也就是组件.并生成一个该子类的实例
    const Toast = Vue.extend(mytoast);
    let toast = new Toast();




    // 将这个实例挂载在我建立的div上, 并将此div加入全局挂载点内部
    toast.$mount(document.createElement('div'))
    document.body.appendChild(toast.$el)


    //挂在到全局
    Vue.prototype.$toast=function (msg,time) {
      toast.msg=msg;
      toast.open();
      if(time){
        setTimeout(function () {
          toast.close();
        },time)
      }
    }

main.js启动直接注入到全局实例中就行

import modal from './plugin/modal/index'
Vue.use(modal)//启用本身的插件

1五、<keep-alive></keep-alive>的做用是什么，若是使用了keep-alive，页面中哪些钩子会被触发【vue原生内置组件】

<keep-alive></keep-alive> 包裹动态组件时，会缓存不活动的组件实例，主要用于保留组件状态或避免从新渲染。好比滚动的位置，表单的值

当组件在 <keep-alive> 内被切换，它的 activated 和 deactivated 这两个生命周期钩子函数将会被对应执行。

1六、vue中如何定义一个全局的插件，在任何组件中均可以使用。好比定义个工具类，工具类里有获取当前时间的插件。我想在任意组件中均可以 this.utils.getTime()来调用。请大体写出【vue插件】

1七、vue经常使用的指令都有哪些【vue指令】

v-if：判断是否隐藏；v-for：数据循环；v-bind：绑定一个属性； v-model：实现双向绑定； v-on事件； v-html渲染dom； v-once只绑定一次就不在改变...

1八、vue如何自定指令

分为全局和局部

// 注册一个全局自定义指令 `v-focus`
Vue.directive('focus', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el) {
    // 聚焦元素
    el.focus()
  }
})
 

directives: {
  focus: {
    // 指令的定义
    inserted: function (el) {
      el.focus()
    }
  }
}

使用

<input v-focus>

1九、VNode是什么？虚拟 DOM是什么？

Vue在页面上渲染的节点，及其子节点称为“虚拟节点 (Virtual Node)”，简写为“VNode”。“虚拟 DOM”是由 Vue 组件树创建起来的整个 VNode 树的称呼。

20、谈谈你对单页Web应用（single page web application，SPA）的理解