好程序员web前端学习路线大厂面试题详解，依赖注入原理手册实现依赖注入实现-var_global={-ajax:function(){//声明服务，也可以说是一个内部类-this.get=function(){-//todo:get方法请求data-console.log(“getissuccess”);-};-This.post=function(){-//todo:post请求数据-console.log("postissuccess");-}-},-//...也可以定义几个不同的服务-init:function(_server,_fx){//此方法充当注入器-var_args=[];-for(vari=0;i<_server.length;i++){-_args.push(newthis[_servers[i]]);/这里特别关键，必须是新创建的对象，如果是预定义的对象，很有可能改出影响全世界的致命错误。/-}-_fx.apply(this,_args);-}-}-_global.init([“ajax”],function(_ajax){数组中的每个元素代表服务的名称，形状中的function参数的顺序与数组中的顺序一致/-_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.largeRDS具有数据库类型（dbType）属性，可选值为mysql,mssql,PPAS请用你的基于面向对象的知识，基于ES6语法编写ECS和RDS两个类，实现方法如下：1.config()返回一个字面量对象，所有成员变量可以获得。2.buy()返回一个URL，格式为https://www.aliyun.com/buy?id...classProperty{constructor(_identify,_region,_name){this.id=_identify;this.region=_region;this.name=_name;}buy(){var_url="https://www.aliyun.com/buy?";for(let_keyinthis){if(this.hasOwnProperty(_key)&&typeof(this[_key])!=="object"){_url+=_key+"="+this[_key]+"&";}}if(_url.indexOf("&")>0){返回_url.replace(/&$/g,"");}返回_url；}}classECSextendsProperty{constructor(_identify,_region,_name){super(_identify,_region,_name);}配置（_value）{this.instance=_value;归还这个；}}let_ecs=newECS(1,"北京","ECS");console.log(_ecs.config("ecs.t1.small"));console.log(_ecs.buy());classRDSextendsProperty{constructor(_identify,_region,_name){super(_identify,_region,_name);}协nfig(_type){this.dbType=_type;归还这个；}}var_rds=newRDS(2,"北京","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]functionsplice(){var_arr=[3,5,7,2,1,8,9,0,5,23,15,5,1,5,8];for(vari=0;i<_arr.length;i++){for(varn=i+1;n<_arr.length;n++){if(_arr[i]===_arr[n]){_arr.splice(n--,1);//因为减少了元素个数，如果向前移动一个连续重复元素超过3个的下标，就会有缺失}}}console.log(_arr);}splice();参考答题思路：数组去重比较常规面试题主要考查数组知识点的拼接方法的使用。但是当阿里问这个问题的时候，我个人认为他更看重的是你的认真或者思考的周到。因为题中没有3个连续重复的数字。我在评论栏写得很清楚，这道题没有用n——结果也是正确的。但是如果三个数字连续出现，你会发现重复的数字并不能完全消除。3、写一个递归函数查询树中给定节点的祖先链（包括给定节点）。要求：1、函数找到祖先链后立即返回，不再继续递归遍历后面的节点。2.函数必须有一个参数来指定树的节点的主键名3.使用示例代码中的options作为树结构的引用constoptions=[{id:'zhejiang',text:'浙江',children:[{id:'杭州',text:'杭州',children:[{id:'西湖',text:'西湖'}]}]},{id:'江苏',text:'江苏',children:[{id:'南京',text:'南京',children:[{id:'中华门',text:'中华门'}]}]}];函数递归(_primary,_options){var_parent=null;for(vari=0;i<_options.length;i++){if(_options[i].id!==_primary){if(!_options[i].children){返回空值；}_parent=recursion(_primary,_options[i].children);if(_parent){_parent.push(_options[i])返回_parent;}}else{返回[_options[i]];}}}console.log(recursion("zhonghuamen",options));参考答题思路：题目需要递归，所以我们根据给定的节点的主键查询父节点来检验我们对递归算法的理解路径，所以首先我们要找到主键所在的位置，然后一路返回。这个问题的难点主要在于发现后立即停止，不能继续浪费查询。此时如果直接无条件返回，递归完第一个对象后，递归结束。4.使用parseDOM函数（使用document.createElement、document.createTextNode、appendChild等）从类似如下JSON表示（可以无限分层）const的树结构生成DOM树（返回一个element元素）JsonTree={"tagName":"ul","props":{"className":"list","data-name":"jsontree"},"children":[{"tagName":"li","孩子”：[{“tagName”：“img”，“道具”：{“src”：“//img.alicdn.com/tps/TB1HwXxLpXXXXchapXXXXXXXXXX-32-32.ico”，“宽度”：“16px”}}]},{"tagName":"li","children":[{"tagName":"a","props":{"href":"https://www.aliyun.com","target":"_blank"},"children":"阿里云"}]}]};functionparseDOM(jsontree){const{tagName,props,children}=jsontree;constelement=document.createElement(tagName);//请执行流程//....for(let_keyinprops){element[_key]=props[_key];}if(children&&typeof(children)==="object"){for(leti=0;i
