好程序員web前端學習路線大廠面試題詳解

好程序員web前端學習路線大廠面試題詳解，依賴注入原理
手動實現依賴注入實現方式
-var _global={
-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，格式為 https://www.aliyun.com/buy?id=xxx®ion=xxx&name=xxx&每個產品自己特有的成員變量

class Property{
constructor(_identify,_region,_name){
this.id=_identify;
this.region=_region;
this.name=_name;
}
buy(){
var _url="https://www.aliyun.com/buy?";
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": "https://www.aliyun.com",
"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操作的知識。
參考答案的思路是把每次創建完成的節點添加到父元素中。