日升昌面試題

時間 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()
    }
  }
}