好程式設計師web 前端學習路線大廠面試題詳解，依賴注入原理

手動實現依賴注入實現方式

- var _g lobal ={

- ajax:function(){ // 申明服務，也可以說是內部類

- this.get=function(){

- // todo : get 方式請求資料

- console.log( “ get is success ” );

- };

- This.post=function(){

- //todo: post 方式請求資料

- console.log( “ post is success ” );

- }

- },

- // … 還可以定義若干個不同的服務

- init:function(_server,_fx){// 這個方法起到一個注入器的作用

- var _args=[];

- for(var i=0;i<_server.length;i++){

- _args.push(new this[_servers[i]]);/* 這裡尤為關鍵，必須是新 new 出來的物件，如果是預定義的物件的情況，很有可能改一處動全域性的致命錯誤。 */

- }

- _fx.apply(this,_args);

- }

- _global.init([ “ ajax ” ],function(_ajax){

• / * 陣列中的每個元素表示服務的名稱，函式中的形參順序與陣列中的順序一致 */

- _ajax.get();

- _ajax.post();

- console.log(this);

- });

參考答案思路：

本題是要求 js 實現依賴注入設計模式。考察程式設計基礎的目的。答案不唯一。

依賴注入顧名思義：有依賴關係才會注入服務。也就是需要使用的時候才會注入相關服務。

注意事項：服務不能是全域性物件，必須是新例項的物件。如果是全域性的物件，一是注入就顯得多此一舉，更重要的是有可能在多處使用，然後出現資料髒讀的致命性錯誤。

由此可見，服務都是預定義的建構函式。

阿里 · 雲筆試

1 、阿里雲產品線十分豐富，擁有 ECS 、 RDS 等數百款產品，每個產品都具有一些通用屬性，例如： ID （ id ），地域（ region ），名稱（ name ），同時每個產品又包含自己特有的屬性。 ECS 擁有例項（ instance ）屬性，可選值有 ecs.t1.small 、 ecs.t3.small 、 ecs.t1.large RDS 擁有資料庫型別（ dbType ）屬性，可選值有 mysql 、 mssql 、 PPAS 請使用你的物件導向知識，基於 ES6 語法編寫 ECS 、 RDS 兩個類，並實現如下方法： 1. config() 返回一個字面量物件，可以拿到所有的成員變數。 2. buy() 返回一個 URL ，格式為 ®ion=xxx&name=xxx& 每個產品自己特有的成員變數

class Property {

constructor ( _identify , _region , _name ){

this . id = _identify ;

this . region = _region ;

this . name = _name ;

}

buy (){

var _url = " ;

for ( let _key in this ){

if ( this . hasOwnProperty ( _key ) && typeof ( this [ _key ])!== "object" ){

_url += _key + "=" + this [ _key ]+ "&" ;

}

if ( _url . indexOf ( "&" )> 0 ){

return _url . replace ( /& $ / g , "" );

}

return _url ;

}

class ECS extends Property {

constructor ( _identify , _region , _name ){

super ( _identify , _region , _name );

}

config ( _value ){

this . instance = _value ;

return this ;

}

let _ecs = new ECS ( 1 , "beijing" , "ECS" );

console . log ( _ecs . config ( "ecs.t1.small" ));

console . log ( _ecs . buy ());

class RDS extends Property {

constructor ( _identify , _region , _name ){

super ( _identify , _region , _name );

}

config ( _type ){

this . dbType = _type ;

return this ;

}

var _rds = new RDS ( 2 , "beijing" , "RDS" );

console . log ( _rds . config ( "mysql" ));

console . log ( _rds . buy ());

解題思路：

1 、根據面試題描述，數百種產品均有通用的屬性，那麼就選擇一次定義多次使用的，能達到這種效果的而且又要求物件導向，所以優先考慮繼承。把公共的屬性和方法放到父類。子類實現繼承即可。

2 、每個產品均有自己的特有屬性，那麼在呼叫 config 方法的時候傳入配置引數，同時還要求返回一個字面兩物件，還要能拿到所有屬性，所以直接返回當前物件即可。

3 、 buy 方法要求返回 url ，此時檢視 url 中都包含哪些屬性，我們發現均為當前產品物件的屬性。所以遍歷拼接即可。

2 、請將編寫一個函式將 [3, 5, 7, 2, 1, 8, 9, 0, 5, 23, 15, 5, 1, 5, 8] 這樣的一個元件中重複的元素去除掉

function splice (){

var _arr =[ 3 , 5 , 7 , 2 , 1 , 8 , 9 , 0 , 5 , 23 , 15 , 5 , 1 , 5 , 8 ];

for ( var i = 0 ; i < _arr . length ; i ++){

for ( var n = i + 1 ; n < _arr . length ; n ++){

if ( _arr [ i ]=== _arr [ n ]){

_arr . splice ( n --, 1 ); // 因為元素數量減少了，如果向前挪動一個下標 3 個以上的連續重複的元素會有遺漏

}

console . log ( _arr );

}

splice ();

參考答案思路：

陣列去重是比較常規的面試題，主要考察一個知識點陣列的 splice 方法的使用。但是阿里出這個題個人認為他更注意的是你的認真態度，或者思維縝密性。因為在題中並沒有連續 3 個重複的數字。在註釋那一行我寫的很清楚，這題的不用 n — 結果也是對的。但是連續出現三個數字的話，你會發現不能完全清除重複的數字。

3 、編寫一個遞迴函式查詢 tree 給定節點的祖先鏈（包含給定節點），

要求：

1 、要求查出祖先鏈後函式立即返回，不再繼續遞迴遍歷後面的節點

2 、函式要有一個引數來指定 tree 的節點的主鍵名

3 、使用示例程式碼中的 options 作為 tree 結構的參考

const options = [

{

id: 'zhejiang' ,

text: 'Zhejiang' ,

children: [

{

id: 'hangzhou' ,

text: 'Hangzhou' ,

children: [

{

id: 'xihu' ,

text: 'West Lake'

}

]

}

]

},

{

id: 'jiangsu' ,

text: 'Jiangsu' ,

children: [

{

id: 'nanjing' ,

text: 'Nanjing' ,

children: [

{

id: 'zhonghuamen' ,

text: 'Zhong Hua Men'

}

]

}

]

}

];

function recursion ( _primary , _options ){

var _parent = null ;

for ( var i = 0 ; i < _options . length ; i ++){

if ( _options [ i ]. id !== _primary ){

if (! _options [ i ]. children ){

return null ;

}

_parent = recursion ( _primary , _options [ i ]. children );

if ( _parent ){

_parent . push ( _options [ i ])

return _parent ;

}

} else {

return [ _options [ i ]];

}

console . log ( recursion ( “ zhonghuamen" , options ));

參考答案思路：

題目要求需要遞迴，那麼就考察我們對遞迴演算法的瞭解。根據給定的節點主鍵查詢父路徑，那麼首先我們要找到主鍵所在的位置，然後一路返回，此題的難度主要在於，當找到後立即停止，而不能繼續浪費查詢。在這一點上如果直接無條件 return 的話，第一個物件遞迴完就回結束遞迴。

4 、將類似以下 JSON 表示的樹狀結構（可以無限層級）

透過 parseDOM 函式（使用 document.createElement ， document.createTextNode ， appendChild 等方法）

生成一顆 DOM 樹（返回一個 element 元素）

const JsonTree = {

"tagName" : "ul" ,

"props" : {

"className" : "list" ,

"data-name" : "jsontree"

},

"children" : [

{

"tagName" : "li" ,

"children" : [{

"tagName" : "img" ,

"props" : {

"src" : "//img.alicdn.com/tps/TB1HwXxLpXXXXchapXXXXXXXXXX-32-32.ico" ,

"width" : "16px"

}

}]

},

{

"tagName" : "li" ,

"children" : [{

"tagName" : "a" ,

"props" : {

"href" : " ,

"target" : "_blank"

},

"children" : " 阿里雲 "

}]

}

]

};

function parseDOM ( jsontree ){

const { tagName , props , children } = jsontree ;

const element = document . createElement ( tagName );

// 請實現過程

//....

for ( let _key in props ){

element [ _key ]= props [ _key ];

}

if ( children && typeof ( children )=== "object" ){

for ( let i = 0 ; i < children . length ; i ++){

element . appendChild ( parseDOM ( children [ i ]));

}

} else {

if ( children ){

element . appendChild ( document . createTextNode ( children ));

}

return element ;

}

document . getElementsByTagName ( “body" )[ 0 ]. appendChild ( parseDOM ( JsonTree ));

參考答案思路：

首先這個面試題很切合實際，在日常的開發過程中經常會遇到這種型別的資料。主要考我們對遞迴演算法的熟練程度。具體的知識點就是題中列出的 3 個 DOM 操作的知識。

參考答案的思路是把每次建立完成的節點新增到父元素中。

好程式設計師web前端學習路線大廠面試題詳解

相關文章