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操作的知识。
参考答案的思路是把每次创建完成的节点添加到父元素中。
低调大师中文资讯倾力打造互联网数据资讯、行业资源、电子商务、移动互联网、网络营销平台。
持续更新报道IT业界、互联网、市场资讯、驱动更新,是最及时权威的产业资讯及硬件资讯报道平台。
转载内容版权归作者及来源网站所有,本站原创内容转载请注明来源。
- 上一篇
阿里云容器服务使用动态云盘卷
动态存储卷 动态存储卷供应使用StorageClass进行实现,其允许存储卷按需被创建。基于StorageClass的动态存储供应整体过程如下图所示:本文以云盘为例进行说明。 创建StorageClass 阿里云容器服务控制台中,选择集群-存储卷-存储类,点击创建,在如下弹窗中填写相关参数参数说明: type:标识云盘类型,支持 cloud、cloud_efficiency、cloud_ssd、cloud_essd、available 四种类型;其中 available 会对高效、ESSD、SSD依次尝试创建,直到创建成功。 zoneid:期望创建云盘的可用区。如果是多可用区的情况,zoneid可同时配置多个,示例如下: zoneid: cn-hangzhou-a,cn-hangzhou-b,cn-hangzhou-c encrypted:可选参数。创建的云盘是否加密,默认情况是false,创建的云盘不加密。 回收策略:云盘的回收策略,默认为Delete,支持Retain。如果数据安全性要求高,推荐使用Retain方式以免误删。 绑定模式:默认为Immediate,可选Immediat...
- 下一篇
运维编排系列场景-----批量释放实例
应用场景 因某些原因临时创建一些实例,使用完成后无需在继续保留这些实例,因此需要批量释放实例。或某些特殊的原因需要批量释放实例。 解决方案 模版功能:功能一:只要输入实例就可以批量释放所有的实例,释放实例时可以选择是否释放状态为Running的实例。功能二:系统无法删除预付费实例,因此想要删除预付费实例时,首先将其转换成按量付费才能删除。 一、打开控制台,找到运维编排 二、查找模版1.批量删除非预付费实例由于系统已经给了此公共模版,因此可以直接在公共模版中搜寻此模版ACS-ECS-BulkyDeleteInstanceByInstanceIds,此模版主要是删除非预付费实例。 2.批量删除预付费实例搜索公共模版ACS-ECS-BulkyDeletePrepaidInstanceByInstanceIds,此模版将预付费转换为按量付费,并实现批量删除,所需输入参数与批量删除实例基本相同。 三、创建执行搜索到模版后,点击创建执行,准备执行此模版 四、输入参数当执行模版前,需要首先输入参数,根据实际的需要来选择参数,参数输入完毕后点击下一步:确认创建,如下图所示。 五、执行模版当所有的填充内...
相关文章
文章评论
共有0条评论来说两句吧...
文章二维码
点击排行
推荐阅读
最新文章
- Eclipse初始化配置,告别卡顿、闪退、编译时间过长
- Red5直播服务器,属于Java语言的直播服务器
- CentOS7编译安装Cmake3.16.3,解决mysql等软件编译问题
- Windows10,CentOS7,CentOS8安装MongoDB4.0.16
- Windows10,CentOS7,CentOS8安装Nodejs环境
- SpringBoot2整合Thymeleaf,官方推荐html解决方案
- Jdk安装(Linux,MacOS,Windows),包含三大操作系统的最全安装
- SpringBoot2编写第一个Controller,响应你的http请求并返回结果
- CentOS7,8上快速安装Gitea,搭建Git服务器
- SpringBoot2更换Tomcat为Jetty,小型站点的福音