随着互联网行业的快速发展和技术的不断更新，前端开发工程师的角色变得越发重要。他们不仅需要掌握传统的HTML、CSS、JavaScript等基础知识，还要熟练运用各种前端框架和库，如React、Angular、Vue.js等，以及与后端工程师紧密合作，实现复杂的Web应用程序。进入大厂成为一名优秀的前端开发工程师，需要具备扎实的技术能力、丰富的项目经验，以及良好的个人品牌和社交网络。本文将深入探讨前端攻城狮如何成功进入大厂的道路，为广大前端开发者提供有益的指导和建议。

零基础的探索勤思考、多动手

今天以一个腾讯面试的小案例给大家展开说说，进入大厂我们都需要具备哪些能力。
小案例：角色：小艾、小王、小美、小红。
        描述：小艾同学喜欢小美，如何拿下小美同学？！

面向对象编程

js是一门表现力极强的语言，{}即可声明为一个对象，对象由属性和方法构成。

抽象思想

小艾、小美...，在js世界里都是一个个对象，当对象越来越多、代码越来越复杂时怎么办？

代理模式

代理模式是面向对象设计模式的一种，可以通过接口让对象之间互相使用，从而达到某些目的。

掌握基本的JS语法

简单数据类型有哪些？
-String字符串类型
-Number数值类型(js适合表达，不适合计算，不存在浮点、整型...类型)
-Null
-Boolean布尔类型
-undefined
-...
复杂数据类型有哪些？
  其他的一切都是对象 Object、{}、[]、function也是对象

规范代码

- 大厂都有规范代码，写代码前可以先阅读代码
    -驼峰式命名
    -规范语句(语句后都加;或者都不加;)
    -多写注释

案例实操

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BATJTMD 腾讯日</title>
</head>

<body>
    <script>
        /**
         *  @func 代理送花
         *  @desc 通过实现receiveFlower，互换对象
         *  @author zykk
         *  @date 24/4/15
         */
        // console.log('面向大厂编程')
        // 了解子民 js 对象花括号 数组中括号  表现力
        // 对象由属性和方法构成
        // 通过小王同学这个对象了解到对象由什么组成
        const wzm = {
            name: '小王同学',
            school: '江西财经',
            hometown: '南康',
            isSingle: false
        }

        //对象 object
        //对象和数值，字符串...类型 有什么区别？
        //对象是复杂(引用)数据类型 数值、字符串...为简单数据类型
        //通过小艾同学这个对象了解如何不断提升代码的健壮性以及各种数据类型
        const aas = {
            name: '小艾同学', //字符串类型
            age: 20, //数值类型 js中没有整数类型浮点类型
            girlFriend: null, //空值  扎心了老铁 简单数据类型：null 空
            city: undefined, //未定义数据类型
            school: '南昌大学',
            hometown: '抚州',
            isSingle: true, //布尔值
            hobbies: ['刷剧', '小说', ''], // 对象  在js中数组也是对象
            //形式参数
            sendFlower: function(receiver) {
                //receiver.receiveFlower(aas);
                // 提升代码健壮性  安全代码 防止用户传空值 出现bug
                receiver && receiver.receiveFlower(aas);
            }
        }

        const xm = {
                name: '小美同学',
                hometown: '丰城',
                mood: 20, //心情20
                receiveFlower: function(sender) {
                    console.log(this.name + '收到' + sender.name + '的鲜花');
                    if (this.mood < 80) {
                        console.log('我想你还是算了吧');
                    } else {
                        console.log('万达走一波');
                    }
                }

            }
            // {}对象字面量   字面上就了解这个对象的情况
            // 小红是代理对象，学会利用接口
            //通过小红同学这个对象了解代理模式这个概念
        const xh = {
                name: '小红同学',
                hometown: '抚州',
                //实现了和小美一样的接口，就可以互换
                receiveFlower: function(sender) {
                    console.log('收到' + sender.name + '的鲜花');
                    //跳过狗血剧情！
                    // if (sender.name === '艾安盛'){
                    //     //小红暗恋艾总
                    //     console.log('啊，我们在一起吧...')
                    // }
                    //善变的女人，2s后心情变好了(定时器)
                    setTimeout(function() {
                        xm.mood = 99;
                        xm.receiveFlower(sender);
                    }, 2000)
                    xm.receiveFlower(sender);
                }
            }
            //直接送花，忽略。 
            // aas.sendFlower(xm)
            //间接送花
            aas.sendFlower(xh);
    </script>
</body>

</html>

“前端攻城狮的进击：如何成功进入大厂？

零基础的探索 勤思考、多动手