（給前端大學加星標，提升前端技能.）

面試日期為 4 月 20 日 19:00 今天因為個人原因遲到了 20 分鐘,還好面試官小姐姐愿意等待一謎一樣的男人(沒錯就老子),上來并沒有自我介紹,她直接開始問題了!!!

開始面試

說出下面標簽的字體色值

該題涉及到 CSS 繼承以及權重的關系

對于選擇器的優(yōu)先級：

• 標簽選擇器、偽元素選擇器：1
• 類選擇器、偽類選擇器、屬性選擇器：10
• id 選擇器：100
• 內聯(lián)樣式：1000

1.先看代碼

<style type="text/css"> #a {font-size:12px} div p{ font-size:13px } div .c{ font-size:14px }    .a .b .c{ font-size:15px }    #b{ font-size:16px }</style><div id=”a” class=”a”> <div id=”b” class=”b”>        <p id=”c” class=”c”>I’am here</p> </div></div>

ps :這里我標簽c答錯了, 因為上來就開始問了,我比較緊張,說c會繼承b的字體顏色。

說出 CSS 那些屬性是可以繼承的

其實這里是根據上一題延伸出來的,基本后面的面試都是,面試官根據我所寫的和所說的,去對我進行考核,所以面試官挺厲害的

• 字體系列屬性
• font-family：字體系列
• font-weight：字體的粗細
• font-size：字體的大小
• font-style：字體的風格
• 文本系列屬性
• text-indent：文本縮進
• text-align：文本水平對齊
• line-height：行高
• word-spacing：單詞之間的間距
• letter-spacing：中文或者字母之間的間距
• text-transform：控制文本大小寫（就是 uppercase、lowercase、capitalize 這三個）
• color：文本顏色
• 元素可見性
• visibility：控制元素顯示隱藏
• 列表布局屬性
• list-style：列表風格，包括 list-style-type、list-style-image 等
• 光標屬性
• cursor：光標顯示為何種形態(tài)

ps:這里理論性的東西,我還是比較在行的,一般考手寫我就拉了,

JavaScript 閉包

這里涉及了閉包,最開始以為考的是執(zhí)行上下文

var a = 0,  b = 0;function A(a) {  A = function (b) {    alert(a + b++);  };  alert(a++);}A(1);A(2);

因為執(zhí)行A(1)時，A的作用域里并沒有 A，所以A = function(b){alert(a + b++)}把自己重新賦值了，并擁有之前的作用域(包括形參a)。形成了一個閉包。在調用A(2)執(zhí)行的就是alert(a + b++)，此時作用域中的a為 2,傳入的形參也是 2，所以結果為 4。

ps :雖然這里我解釋有那個意思,但是肯定沒直觀的說到這個關鍵點上。

遍歷嵌套對象

編寫函數獲得對象中的值1，必須使用到 str = 'a.b.c';

更好的答案在這^[1]

"估計我的答案令人大吃一驚,你們要是剛吃完飯就別看了,我怕你們噴出來"

//find(obj,'a.b.c') //1//find(obj,'a.d.c') //undefinedvar obj = {  a: {    b: {      c: 1,    },  },};
var str = "a.b.c";
const find = (obj, str) => {  let arr = [];  for (const key in str) {    if (Object.hasOwnProperty.call(str, key)) {      if (str[key] != ".") {        arr.push(str[key]);      }    }  }  try {    return `${obj[arr[0]][arr[1]][arr[2]]}`;  } catch (error) {    return undefined;  }};

這道題的重點就是要知道檢索對象中包含的值有什么方法。

方法有兩種:

1. 在[]后綴中包括住一個字符串表達式的方法 如：obj[a]
2. 可以使用.表示法 如：obj.a

ps :其中上面的解法就是采用[]的方法來解決這道題的,我的擴展性不高,但是這里給自己留坑了!

Object.hasOwnProperty 的作用

完全就是上一題給自己留坑了有沒有,有沒有!!!!!

事實上,面試到這里,我的節(jié)奏就已經沒了,但是還沒慌,

面試官小姐姐笑起來瞬間讓人不緊張了。

MDN 的官方解釋^[2]

ps :我答的是判斷是否為 null 或者 undefined,在面試官再三的鼓勵下,我說出來判斷原型鏈~~

這里面試官小姐姐笑吟吟的好好看 ??????

原型以及原型鏈的理解

根據上一題,面試官小姐姐又提出了一個這個問題,

const b = 2;a = b;// 問 : a的原型鏈指向誰?是怎么個查找順序// 答 : a是指向的b
// 問 : 怎么修改a的原型指向// 答 : 深淺拷貝// 問 : 除了拷貝呢// 答 : 思考再三,我說了construvtor (這不對)// 答 : 通過構造函數
// 下一題(≧﹏ ≦)

正確答案:a 的原型不是指向 b，是 Number，b 是基礎類型，所以 a 是重新賦值，a 的原型指向是 Number。(經過評論區(qū)大佬提醒,才知道自己理解錯了)

ps :這里完全是基礎沒打好,因為項目經驗比較多,忽略了這些原理性的東西,這就導致在技術考核中,這屬于薄弱的項。

項目數據可視化,Vue 高階組件

這里看了我的簡歷,項目中有寫過數據可視化的項目,而項目中使用了 Vue 高階組件(組件懶加載)

組件懶加載代碼

const MonthlyAddition = () => ({  // 需要加載的組件 (應該是一個 `Promise` 對象)  component: import("@/components/Echart/MonthlyAddition.vue"),  // 展示加載時組件的延時時間。默認值是 200 (毫秒  delay: 900, // 延遲加載，默認200毫秒  // 加載失敗時使用的組件  error: Hebberror, // 加載失敗顯示組件  // 異步組件加載時使用的組件  loading: Hebberror, // 加載時使用組件  // 如果提供了超時時間且組件加載也超時了，  // 則使用加載失敗時使用的組件。默認值是：`Infinity`  timeout: 2000, // 超時時間，默認 Infinity});

JSX

export default { props: {  nowTime: {   type: String,   default: '',  }, }, render() {  return (   <time class="head__time" datetime={this.nowTime}>    {this.nowTime}   </time>  ); },};

ps :這里其實展示了自己的的一些算是項目經驗吧,主要是那個高階組件。

高階組件延伸題目

由上一題的高階組件,延伸出 Promise 加定時器, 根據狀態(tài)去判斷是否顯示異常組件

/** * * @param {Object} falg 標識 * @param {Object} date 數據 * @returns */function componentsShow(falg = true, date) {  let componentsTime = null;  return new Promise(function (resolve, reject) {    if (falg) {      componentsTime = setTimeout(function () {        resolve();      }, 200);    } else {      clearTimeout(componentsTime);      if (date) {        resolve();      } else {        reject();      }    }  });}

項目優(yōu)化

這里其實是個送分題,優(yōu)化方面我還是比較擅長的,剎那間,感覺來了

• 懶加載
• CDN
• 文件優(yōu)化
• Webpack 優(yōu)化

項目中參與公司模板封裝

封裝多環(huán)境,Ecahrts 插件,axios,公共 Css 樣式,Esilit,

ps 這里粗略的看了下我的項目,我也將自己做的大概說一下。

Webpack 都使用過那些 loader

• babel-loader → 轉義代碼
• css-loader → 加載 css,支持文件導入
• style-loader → 把 css 代碼注入到 javaScript 中,
• scss-loader → 轉義 scss

ps :這里考察了我對 Webpack 的理解,其實答得并不顯得很多,感覺自己答的不是特別好。

總結

面試官對我的評價是原理還是差一點,項目經驗是可以的,

從她言語中透露出我還是不太合適,基本上第三層道題后,其實雙方都心照不宣的知道這場面試的結果。

通過這次面試我了解了自己的不足的地方，面試過程中也沒有去引導面試官步入我認為理論性較強的地方,基本之后我會根據面試去補習原理方面的,爭取跟這個小姐姐成為同事,

看著更好看的面試官小姐姐,沒有鼓起勇氣要個微信啥的,太虧了,希望半年后她還在。

參考資料

點贊和在看就是最大的支持??