好程序員web前端學(xué)習(xí)路線大廠面試題詳解，依賴注入原理
手動(dòng)實(shí)現(xiàn)依賴注入實(shí)現(xiàn)方式
-var _global={
-ajax:function(){//申明服務(wù)，也可以說是內(nèi)部類
-this.get=function(){
-//todo:get方式請(qǐng)求數(shù)據(jù)
-console.log(“get is success”);
-};
-This.post=function(){
-//todo:post方式請(qǐng)求數(shù)據(jù)
-console.log(“post is success”);
-}
-},
-//…還可以定義若干個(gè)不同的服務(wù)
-init:function(_server,_fx){//這個(gè)方法起到一個(gè)注入器的作用
-var _args=[];
-for(var i=0;i<_server.length;i++){
-_args.push(new this[_servers[i]]);/這里尤為關(guān)鍵，必須是新new出來的對(duì)象，如果是預(yù)定義的對(duì)象的情況，很有可能改一處動(dòng)全局的致命錯(cuò)誤。/
-}
-_fx.apply(this,_args);
-}
-}
-_global.init([“ajax”],function(_ajax){
?/數(shù)組中的每個(gè)元素表示服務(wù)的名稱，函數(shù)中的形參順序與數(shù)組中的順序一致/
-_ajax.get();
-_ajax.post();
-console.log(this);
-});
參考答案思路：
本題是要求js實(shí)現(xiàn)依賴注入設(shè)計(jì)模式?？疾炀幊袒A(chǔ)的目的。答案不唯一。
依賴注入顧名思義：有依賴關(guān)系才會(huì)注入服務(wù)。也就是需要使用的時(shí)候才會(huì)注入相關(guān)服務(wù)。
注意事項(xiàng)：服務(wù)不能是全局對(duì)象，必須是新實(shí)例的對(duì)象。如果是全局的對(duì)象，一是注入就顯得多此一舉，更重要的是有可能在多處使用，然后出現(xiàn)數(shù)據(jù)臟讀的致命性錯(cuò)誤。
由此可見，服務(wù)都是預(yù)定義的構(gòu)造函數(shù)。
阿里·云筆試
1、阿里云產(chǎn)品線十分豐富，擁有ECS、RDS等數(shù)百款產(chǎn)品，每個(gè)產(chǎn)品都具有一些通用屬性，例如：ID（id），地域（region），名稱（name），同時(shí)每個(gè)產(chǎn)品又包含自己特有的屬性。 ECS擁有實(shí)例（instance）屬性，可選值有ecs.t1.small、ecs.t3.small、ecs.t1.large RDS擁有數(shù)據(jù)庫類型（dbType）屬性，可選值有mysql、mssql、PPAS 請(qǐng)使用你的面向?qū)ο笾R(shí)，基于ES6語法編寫ECS、RDS兩個(gè)類，并實(shí)現(xiàn)如下方法： 1. config() 返回一個(gè)字面量對(duì)象，可以拿到所有的成員變量。 2. buy() 返回一個(gè)URL，格式為 https://www.aliyun.com/buy?id=xxx®ion=xxx&name=xxx&每個(gè)產(chǎn)品自己特有的成員變量
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、根據(jù)面試題描述，數(shù)百種產(chǎn)品均有通用的屬性，那么就選擇一次定義多次使用的，能達(dá)到這種效果的而且又要求面向?qū)ο?，所以?yōu)先考慮繼承。把公共的屬性和方法放到父類。子類實(shí)現(xiàn)繼承即可。
2、每個(gè)產(chǎn)品均有自己的特有屬性，那么在調(diào)用config方法的時(shí)候傳入配置參數(shù)，同時(shí)還要求返回一個(gè)字面兩對(duì)象，還要能拿到所有屬性，所以直接返回當(dāng)前對(duì)象即可。
3、buy方法要求返回url，此時(shí)查看url中都包含哪些屬性，我們發(fā)現(xiàn)均為當(dāng)前產(chǎn)品對(duì)象的屬性。所以遍歷拼接即可。
2、請(qǐng)將編寫一個(gè)函數(shù)將 [3, 5, 7, 2, 1, 8, 9, 0, 5, 23, 15, 5, 1, 5, 8] 這樣的一個(gè)組件中重復(fù)的元素去除掉
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);//因?yàn)樵財(cái)?shù)量減少了，如果向前挪動(dòng)一個(gè)下標(biāo)3個(gè)以上的連續(xù)重復(fù)的元素會(huì)有遺漏
}
}
}
console.log(_arr);
}
splice();
參考答案思路：
數(shù)組去重是比較常規(guī)的面試題，主要考察一個(gè)知識(shí)點(diǎn)數(shù)組的splice方法的使用。但是阿里出這個(gè)題個(gè)人認(rèn)為他更注意的是你的認(rèn)真態(tài)度，或者思維縝密性。因?yàn)樵陬}中并沒有連續(xù)3個(gè)重復(fù)的數(shù)字。在注釋那一行我寫的很清楚，這題的不用n—結(jié)果也是對(duì)的。但是連續(xù)出現(xiàn)三個(gè)數(shù)字的話，你會(huì)發(fā)現(xiàn)不能完全清除重復(fù)的數(shù)字。
3、編寫一個(gè)遞歸函數(shù)查詢tree給定節(jié)點(diǎn)的祖先鏈（包含給定節(jié)點(diǎn)），
要求：
1、要求查出祖先鏈后函數(shù)立即返回，不再繼續(xù)遞歸遍歷后面的節(jié)點(diǎn)
2、函數(shù)要有一個(gè)參數(shù)來指定tree的節(jié)點(diǎn)的主鍵名
3、使用示例代碼中的options作為tree結(jié)構(gòu)的參考
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));
參考答案思路：
題目要求需要遞歸，那么就考察我們對(duì)遞歸算法的了解。根據(jù)給定的節(jié)點(diǎn)主鍵查詢父路徑，那么首先我們要找到主鍵所在的位置，然后一路返回，此題的難度主要在于，當(dāng)找到后立即停止，而不能繼續(xù)浪費(fèi)查詢。在這一點(diǎn)上如果直接無條件return的話，第一個(gè)對(duì)象遞歸完就回結(jié)束遞歸。
4、將類似以下JSON表示的樹狀結(jié)構(gòu)（可以無限層級(jí)）
通過parseDOM函數(shù)（使用document.createElement，document.createTextNode，appendChild等方法）
生成一顆DOM樹（返回一個(gè)element元素）
const JsonTree = {
"tagName": "ul",
"props": {
"className": "list",
"data-name": "jsontree"
},
"children": [
{
"tagName": "li",
"children": [{
"tagName": "img",
"props": {
"src": "http://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);
//請(qǐng)實(shí)現(xiàn)過程
//....
for(let _key in props){
element[_key]=props[_key];
}
if(children && typeof(children)==="object"){
for(let i=0;i參考答案思路：
首先這個(gè)面試題很切合實(shí)際，在日常的開發(fā)過程中經(jīng)常會(huì)遇到這種類型的數(shù)據(jù)。主要考我們對(duì)遞歸算法的熟練程度。具體的知識(shí)點(diǎn)就是題中列出的3個(gè)DOM操作的知識(shí)。
參考答案的思路是把每次創(chuàng)建完成的節(jié)點(diǎn)添加到父元素中。
創(chuàng)新互聯(lián)www.cdcxhl.cn，專業(yè)提供香港、美國(guó)云服務(wù)器，動(dòng)態(tài)BGP最優(yōu)骨干路由自動(dòng)選擇，持續(xù)穩(wěn)定高效的網(wǎng)絡(luò)助力業(yè)務(wù)部署。公司持有工信部辦法的idc、isp許可證， 機(jī)房獨(dú)有T級(jí)流量清洗系統(tǒng)配攻擊溯源，準(zhǔn)確進(jìn)行流量調(diào)度，確保服務(wù)器高可用性。佳節(jié)活動(dòng)現(xiàn)已開啟，新人活動(dòng)云服務(wù)器買多久送多久。
