好程序员-千锋教育旗下高端IT职业教育品牌

400-811-9990
  • 客服QQ
  • 官方微信

    好程序员

    专注高端IT职业培训

[HTML5] 好程序员web前端培训学习路线大厂面试题详解

[复制链接]
104 0
叶子老师 发表于 前天 15:07 | 只看该作者 |阅读模式 打印 上一主题 下一主题
好程序员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]);/*这里尤为关键,必须是新new出来的对象,如果是预定义的对象的情况,很有可能改一处动全局的致命错误。*/
- }
- _fx.apply(this,_args);
- }
- }
- _global.init([“ajax”],function(_ajax){
• /*数组中的每个元素表示服务的名称,函数中的形参顺序与数组中的顺序一致*/
- _ajax.get();
- _ajax.post();
- console.log(this);
- });
参考答案思路:
本题是要求js实现依赖注入设计模式。考察编程基础的目的。答案不唯一。
依赖注入顾名思义:有依赖关系才会注入服务。也就是需要使用的时候才会注入相关服务。
注意事项:服务不能是全局对象,必须是新实例的对象。如果是全局的对象,一是注入就显得多此一举,更重要的是有可能在多处使用,然后出现数据脏读的致命性错误。
由此可见,服务都是预定义的构造函数。
阿里·云笔试
1、阿里云产品线十分丰富,拥有ECSRDS等数百款产品,每个产品都具有一些通用属性,例如:IDid),地域(region),名称(name),同时每个产品又包含自己特有的属性。 ECS拥有实例(instance)属性,可选值有ecs.t1.smallecs.t3.smallecs.t1.large RDS拥有数据库类型(dbType)属性,可选值有mysqlmssqlPPAS 请使用你的面向对象知识,基于ES6语法编写ECSRDS两个类,并实现如下方法: 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方法的时候传入配置参数,同时还要求返回一个字面两对象,还要能拿到所有属性,所以直接返回当前对象即可。
3buy方法要求返回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===_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.id!==_primary){
                if(!_options.children){
                    return null;
                }
                _parent=recursion(_primary,_options.children);
                if(_parent){
                    _parent.push(_options)
                    return _parent;
                }
            }else{
                return [_options];
            }
        }
    }
    console.log(recursion(“zhonghuamen",options));
参考答案思路:
题目要求需要递归,那么就考察我们对递归算法的了解。根据给定的节点主键查询父路径,那么首先我们要找到主键所在的位置,然后一路返回,此题的难度主要在于,当找到后立即停止,而不能继续浪费查询。在这一点上如果直接无条件return的话,第一个对象递归完就回结束递归。
4将类似以下JSON表示的树状结构(可以无限层级)
    通过parseDOM函数(使用document.createElementdocument.createTextNodeappendChild等方法)
    生成一颗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));
            }
        }else{
            if(children){
                element.appendChild(document.createTextNode(children));
            }
        }
        return element;
    }
    document.getElementsByTagName(“body")[0].appendChild(parseDOM(JsonTree));
参考答案思路:
首先这个面试题很切合实际,在日常的开发过程中经常会遇到这种类型的数据。主要考我们对递归算法的熟练程度。具体的知识点就是题中列出的3DOM操作的知识。
参考答案的思路是把每次创建完成的节点添加到父元素中。
好程序员web前端培训官网:http://www.mygod78.com/html5_class.shtml

精彩内容,一键分享给更多人!
收藏
收藏0
转播
转播
分享
淘帖0
支持
支持0
反对
反对0
您需要登录后才可以回帖

本版积分规则

关注我们
千锋好程序员

北京校区(总部):北京市海淀区宝盛北里西区28号中关村智诚科创大厦

深圳西部硅谷校区:深圳市宝安区宝安大道5010号深圳西部硅谷B座A区605-619

杭州龙驰智慧谷校区:浙江省杭州市下沙经济技术开发区元成路199号龙驰智慧谷B座7层

郑州校区:郑州市二七区航海中路60号海为科技园C区10层、12层

Copyright 2007-2019 北京千锋互联科技湖南福彩网 .All Right

京ICP备12003911号-5 京公安网11010802011455号

请您保持通讯畅通1对1咨询马上开启

辽宁福彩网 江苏福彩网 上海福彩网 淅江福彩网 辽宁福彩网 江苏福彩网 淅江福彩网 上海福彩网 辽宁福彩网 淅江福彩网