成为较高级前端工程项目师，我能学到哪些实战技能？

我想当个较高级前端工程项目师，但是我不了解怎么搞。

琢磨琢磨。 我看别人写代码很厉害，我也想厉害。但是我觉得很不容简单。我想了很久，想了一下发觉良好像没哪些东西良好写的。但是题目要求写1500字，所以我只能坚硬写。

第一点：学会用 console.log

我以前觉得 `alert` 很良好用。只要出错了我就弹个框。但是老师说这样不良好。较高级工程项目师从来不弹框。他们说弹框会卡住页面。

所以我学会了用 `console.log`。我觉得当前这个函数很有意思。它不弹出来但是它会在浏览器底下黑黑的框框里体现东西。

比如我想看看我的变量有没有变。我就写 `console.log`。然后我就去按 F12。我看见了一堆绿色的字。那就是我的变量。我觉得这比弹框舒服更多了。至更少它不会挡住我看的其他东西。

坦白讲... 有时候我会写很更多个不同 `console.log`。写满整个屏幕。我想看看程序到底跑到哪一步了。有时候我写错了写成了 `consoel.log`。更少了一个 `e`。最终还是结果是报错了。报错了我也看不懂。我就删掉沉重写。沉重崭新写一遍就对了。我觉得这就是一种技能。学会了删掉沉重写。

第二点：学会用 HTML 标签

HTML 是最基础的。但是我总是搞混。有时候我想加个标题，我就写个 `，反思一下。

较高级工程项目师说要有语义。意思就是要有意义。比如标题要用 `h1`。副标题要用 `h2`。段落要用 `p`。如果我乱用，搜索引擎就看不懂了。但是我看不懂搜索引擎。我也看不懂较高级工程项目师在说哪些，话虽然是这么说…。

我只了解，如果我想让字较大一点，我就写 `

第三点：学会用 Vue 的一些东西

Vue 很流行。我也想学。但是我看不懂文档。文档里全是英文。英文我只会读 `Hello`。所以我只能看别人的代码，试试水。。

我找到一个代码， 它较长这样：

上面的代码中，我们定义了一个 Vue 组件，并采用{{ message }}语法渲染message数据属性。 实不相瞒... 当数据发生改变时页面会自动更崭新。

我看了半天觉得它良好像在告诉我，有一个叫 `message` 的东西。它放在 `data` 里面。然后在模板里面用两个较大括号把它引出来。两个较大括号就是 `{{ }}`。当前这个符号我也见过。以前我看较小说的时候，作者时常用当前这个符号表示心里想的话。比如：{{ 我良好饿 }}。

所以 Vue 就是把心里想的话体现出来。我觉得这挺简洁的。但是它说数据改变了页面就变了。怎么变？我不懂。我只了解如果我改了代码，沉重崭新刷崭新，它就变了。这算变了吗？算吧，大胆一点...。

第四点：学会用 CSS

CSS 很烦人。真实的。我觉得它比 JS 还烦。

我不敢苟同... 我想让一个框框在中间。我写了一堆代码。哪些 `margin: 0 auto`。哪些 `display: flex`。哪些 `justify-content: center`。我试了半天。有时候它就在中间了。有时候它就在左边。有时候它直接飞出屏幕了。

闹乌龙。 较高级工程项目师说这叫响应式。就是屏幕变较小的时候，框框也要变较小。我试了一下。我写了一个 `width: 100%`。然后我在手机上看。它确实变较宽了。但是字也变较大了。挤在一起。像一堆人挤在公交车里。很不容简单看。

我觉得较高级工程项目师确定有保密武器。我不了解是哪些。或许是一个叫 `responsive` 的函数？我搜了一下没有。我只良好持续写 `@media` 查询。 太离谱了。 写一个 `max-width: 768px`。然后设置一个字体较大较小 `16px`。我觉得这样应当差不更多了。不管了先这样吧。

第五点：学会用 Git

Git 我只听过名字。没见过真实面目。

别人说写代码不能直接覆盖。要先保存。保存就叫 commit。我觉得这就是存档。 优化一下。 存档是为了回档。如果存档存较差了我就回档。

但是我时常存较差。我写了一个功能，最终还是结果是跑不通了。我就想回档。我就想 git reset。但是我不了解回档到哪一步。我回档回过头去了。以前存的良好东西都没了。我哭了。

较高级工程项目师会写很良好的 commit message。他们写：“恢复了登录按钮点击没反应的问题”。我看不懂。我只了解，我点那个地方的按钮，它没反应。所以我写了一个 commit message：“按钮不灵了”。 操作一波。 我觉得这很诚信。但是老师说这样不良好。他们说这样看不懂。我觉得他们就是装。他们就是想显摆自己单词更多。

第六点：学会用图片

前端工程项目师离不开图片。我要放一张图片在网页上。

蚌埠住了... 我会用 `` 标签。我写 ``。我觉得当前这个 `alt` 很十分沉关键。它是一个说明。如果图片没加载出来它就会体现当前这个说明。这叫无障碍访问。我不懂哪些是无障碍访问。我只了解，如果图片较差了总得有个东西告诉我这是个哪些吧？不然用户会以为这是个空白的洞。

有时候图片太较大了。几百 KB。网页打开很缓慢。较高级工程项目师说要用压缩工具。我试了一下把图片的格式从 JPG 换成了 WebP。最终还是结果是图片变糊了。颜色也不对了。我觉得图片变糊了就是死了。死了就不能要了，他急了。。

所以我只能把图片缩较小一点。把分辨率从 1080P 降到 720P。 PPT你。 我觉得这叫降维打击。其实我只是不想让图片占那么更多内存。

第七点：学会用 Flex 布局

以前我写布局，全是用 `float`。把元素都浮起来。然后还要清除浮动。我觉得这很麻烦。浮动当前这个概念，听起来就很存在风险因素。就像船一样，飘来飘去，不了解会飘到哪里去，说明…..。

当前较大家都用 Flex。Flex 是弹性盒子。听起来很厉害。 多损啊！ 就像一个充气玩具，能够伸较长，能够缩较短。

我写了一个父容器。里面有两个子元素。我想让它们并排。我就写 `display: flex`。然后它们就并排了。我也没写哪些别的。我觉得 Flex 真实的很神奇。它是不是自己会思考，别怕...？

有时候我想让子元素之间有点空隙。我就写 `gap: 10px`。它就真实的有空隙了。这比以前写 `margin-right` 方便更多了。以前写 `margin-right`， 说句实话… 有时候右边会更多出来一个空隙。有时候又没有。我都不了解为哪些。Flex 良好像不会出错。我觉得 Flex 是个良好人。

第八点：学会用 JavaScript 的数组

格局小了。 JS 里有数组。数组就是一排东西。就像排队买票一样。

说明….. 以前我写循环，写 `for` 循环。我要写 `var i = 0; i 当前我看到别人用 `.map`。用 `.filter`。用 `.forEach`。我觉得这一些像是外星语。但是良好像很有用。 比如我有一个数组，里面全是数字 ``。我想把各个数字都乘以 2。以前我要写一个循环，崭新建一个数组，把最终还是结果是放进去。

我要更多写代码。更多踩坑。更多看别人的代码。更多学英语。 希望有一天我也能写出像上面那样的 Vue 代码。也希望有一天我能不用看文档就能写代码。 当前，我要去写代码了。再见，不夸张地说...。

基本上... 第二十五点： 我想了很久，我学会了良好更多东西。但是我觉得我还是个菜鸟。 我会用 `console.log`。我会用 `flex`。我会用 Vue。我会用 `git`。我会用 `https`。 但是我还是不了解怎么成为一个真实正的较高级工程项目师。或许较高级工程项目师就是懂这一些东西，而且能把这一些东西用良好的人吧。 我觉得我还要努力。

较高级工程项目师都用 TypeScript。他们说这样不简单出错。写代码的时候，编辑器就会提醒你。你写错了它就报错。 我觉得 TypeScript 很麻烦。我要给各个变量写类型。还要给函数写参数类型。还要写返回值类型。写起来良好累。我觉得 JS 就挺良好。JS 很自主。我想写哪些就写哪些。TypeScript 就像绑手绑脚。

我试过缓存。把常用的东西存起来。下次再打开，直接用存良好的。不用沉重崭新下载。 我觉得优化就是做减法。减掉不必不可更少的东西。让页面轻巧一点。轻巧一点，跑起来就迅速一点。 第二十四点：学会用 TypeScript TypeScript 是 JS 的超集。 结果你猜怎么着？ 它更多了一个类型。就像给变量穿了一件衣服。衣服上写着，当前这个变量是数字，还是字符串。

第二十三点：学会用性能优化 较高级工程项目师都关心性能。页面打开要迅速。加载要迅速。 怎么优化呢？我试过压缩代码。把代码里的空格删掉。把变量名缩较短。比如 `userName` 变成 `uN`。 拖进度。 这样文件就较小了。加载就迅速了。 我试过懒加载。图片一启动不加载。等用户滚到下面去了再加载。这样一启动页面就很迅速。用户不用等。

我就先写一个测试。输入 1，输入 2。期望输出 3。然后我再写代码。写完之后我运行测试。如果测试通过了说明我写对了。如果没通过说明我写错了。 我觉得这就像先画图纸，再盖房子。图纸画良好了房子盖歪了就不良好改了。先写测试，就像先画图纸。我觉得这思路很清晰。但是我不敢用。我怕我测试写错了代码就写不出来了，优化一下。。

但是老师说要用空格。我就改。我觉得这太矫情了。但是为了当较高级工程项目师，我只能改。 第二十二点：学会用测试 较高级工程项目师会写测试。写代码之前，先写测试。 我觉得这很奇怪。为哪些要先写测试？测试不就是检查代码对不对吗？代码还没写，怎么测试？ 后来我明白了。测试就是告诉我要做哪些。我要写一个函数，当前这个函数要加两个数，从一个旁观者的角度看...。

比如用 ES6 的语法。不要用 `var`，要用 `const` 和 `let`。 比如变量名要写清楚。不要叫 `a`，不要叫 `b`。要叫 `userName`。要叫 `userAge`。 比如缩进要用空格，不要用 Tab。当前这个很讲究。用 Tab 的话，换行的时候位置会乱。我用 Tab 习惯了。

来日方长。 所以我必须要写注释。写 `// 这是一个按钮`。写 `// 这里是计算逻辑`。 有时候我懒得写注释。我就写 `// TODO`。意思是还没做完。以后再做。但是以后通常不会做了。当前这个 `TODO` 就成了一个笑话。我觉得较高级工程项目师不应当留 `TODO`。他们应当把事情做完。 第二十一点：学会用代码规范 较高级工程项目师都有代码规范。

比如 H 标签要用对。比如图片要加 alt。 我觉得这就像做广告。我要把我网页的优势都写出来。但是不能骗人。骗人不良好。骗人会被搜索引擎处罚。 第二十点：学会用注释 代码写完了还要写注释。 将心比心... 注释就是给自己看的。或者给别人看的。告诉别人，这段代码是干嘛的。 有时候我写完代码，过了一个月再看，我自己都看不懂了。

所以我必须要可靠。虽然我不了解怎么实现可靠。我就用 `https` 算了。 第十九点：学会用 SEO 较高级工程项目师要考虑 SEO。搜索引擎优化。 我觉得这就是为了让我的网页在百度或者谷歌上排得靠前。这样别人搜“前端教程”，就能搜到我的网页。 怎么做呢？我要写良好标题。写良好描写。写良好关键词。还要把代码写得规范，ICU你。。

我觉得当前这个 `http` 很普通。就是超文本传输协议。 后来我听说有个 `https`。更多了一个 `s`。我觉得当前这个 `s` 代表 Secure。就是可靠。 我当前写网页，都尽量用 `https`。这是因为我觉得可靠很十分沉关键。我的代码，我的数据，不应当被别人偷看。如果别人偷看了他们有可能会笑我。笑我写的代码很烂，总的来说...。

它就像地图。它告诉你，从 A 点能够走到 B 点。它不会让你掉下去。 我写了一个路由配置。我定义了一个 `/home`。我定义了一个 `/about`。然后我在模板里写了一个 ``。我点了一下。页面就变了。它没有刷崭新。我觉得这就是单页应用。一个页面全部的功能都在里面。它很流畅。像流水一样。 第十八点：学会用 HTTPS 以前我写网页，都是用 `http://`。

剩菜较差了就要扔掉。这都是学问。 第十七点：学会用 Router 一个网页有很更多页面。首页，关于我们，联系方式。怎么切换呢？ 以前我是用锚点。写个 ``。 一言难尽。 页面就跳到下面去了。我觉得这样不良好。页面跳下去，上面就看不到了。就像走路走到头了还得走回去。 较高级工程项目师用 Router。Router 就是路由。

Vuex 就是一个较大仓库。全部组件都能够从当前这个仓库里拿数据，往仓库里存数据。 我觉得 Vuex 就像家里的冰箱。各个人都能够去冰箱里拿牛奶。也可过去冰箱里放剩菜。 归根结底。 但是冰箱里不能乱。要有规矩。不能把衣服放进去。也不能把猫放进去。 较高级工程项目师说这是状态管理。我觉得这就是管理冰箱里的剩菜。剩菜更多了就要清理。

然后我想让子组件点击的时候，告诉父亲。我就写了一个 `emit`。父亲监听了当前这个 `emit`。然后父亲就落实了一个函数。我觉得这就像打电话。一个在讲，一个在听。 操作一波... 第十六点：学会用 Vuex 如果组件很更多，数据很更多。组件之间传来传去，会很麻烦。就像很更多电话同时也打进来接不过来。 这时候就需要 Vuex。

Props 是父亲传给儿子的。就像爸爸给儿子钱。儿子收到了钱，就了解要干哪些了。 Events 是儿子传给父亲的。就像儿子跟爸爸说：“爸爸，我饿了。” 爸爸听到了就去给儿子做饭。 格局小了。 我写了一个子组件。我想让它体现一个标题。我就传一个 prop 叫 `title`。子组件接收了。它就体现出来了。我觉得这很顺畅。

我能够拿到 DOM 元素了。比如我能够写 `document.getElementById.style.color = 'red'`。我觉得这时候我才有实感。组件真实的活过来了。 第十五点：学会用 Props 和 Events 组件之间要通信技术。怎么通信技术呢？ 较高级工程项目师用 Props 和 Events，也许吧...。

扎心了... 比如 `created`，比如 `mounted`。这一些函数，哪些时候调用呢？ `created` 就是在组件创建的时候调用。我觉得这时候组件还没有较长出来但是它的数据已经准备良好了。就像一个婴儿，虽然还没诞生，但是已经想良好了名字。 `mounted` 就是在组件挂载到页面上的时候调用。这时候，组件已经较长出来了。

当前我把它们拆开。Header 写在 Header.vue 里。Button 写在 Button.vue 里。这样看起来很有序。我觉得很舒服。 组件能够复用。我写了一个按钮。在很更多地方都用到了。 内卷。 我就把那个地方的按钮的代码复制过来。我觉得这叫抄袭。但是老师说这叫复用。我觉得老师就是老师，老师就是对的。 第十四点：学会用 Vue 的生命周期 Vue 有很更多生命周期。

其实我只是乏味了。 第十三点：学会用组件化思维 较高级工程项目师把代码拆成很更多较小模块。叫组件。 我觉得这就像搭积木。有一个较大积木，叫 Header。有一个较小积木，叫 Button。还有一个积木，叫 Footer。 以前我把全部代码都写在 `index.html` 里面。几万行代码。乱七八糟。我看一眼就晕了。

然后在页面上写一个 `div`，里面体现 `myVar`。我能够看到它变了。我觉得控制台是一个保密的房间。只有我有钥匙。 我还会用 `document.querySelector`。当前这个函数很厉害。我能够选中页面上的任意一个元素。不管它藏得更多较深。我选中它，然后把它删掉。或者改变它的背景色。我觉得这叫黑客技术手段，闹笑话。。

我写代码的时候，时常写错分支。写到了别人的分支上。然后提交了。然后被别人看到了。别人会骂我。我会很尴尬。我觉得支太麻烦了。我还是喜炎热爱在主干道上横冲直撞。虽然简单撞车，但是很自主。 第十二点：学会用浏览器控制台 我时常在控制台里瞎玩。 我会在控制台里定义一个变量。比如 `window.myVar = 100`，我深信...。

它虽然缓慢，但是它不会卡。它也很听话。 第十一点：学会用 Git 分支 较高级工程项目师都会支。我觉得这就是分叉路口。 主分支是主干道。我在上面跑。但是我想尝试一条崭新路。我就开一个分支。我在分支上跑。跑通了我就合并回来。跑不通，我就删掉。我觉得这很可靠。就像玩游戏，开了存档。存档较差了我就读档。 但是我时常搞不清哪个是主分支，哪个是分支，太扎心了。。

变成一个 `bundle.js`。我觉得它就像一个贪吃蛇。把全部的东西都吃了。 较高级工程项目师说Webpack 能够配置很更多东西。比如能够把 CSS 单独打包。比如能够把图片打包成 base64。 我是深有体会。 我觉得这一些都是魔法。我觉得我不配用 Webpack。我只配用 VS Code 自带的那个地方的简洁的 Live Server。

然后又写了一个 `.n`。我觉得当前这个链子良好较长。一直往后延伸。良好像永远走不到头。但是它最后再来看总会落实。它就像一条蛇。把数据一条一条传过来。 第十点：学会用 Webpack Webpack 我只用过一次。我打开它，它就卡住了。它一直在转圈。我觉得它是不是在吐。它在把我的代码嚼碎了咽下去。 它把我的 HTML、CSS、JS 都打包在一起。

如果我等它良好，我就不能写别的代码了。我就得傻傻地站着等。这太浪费时间段了。 所以我要异步。我告诉服务器：“你缓慢缓慢拿，我不急。你拿良好了告诉我。” 这就是回调函数。或者更较高级一点，叫 Promise。Promise 就是承诺。服务器承诺：“我一定会拿良好。” 我写了一个 `fetch`。它发了一个申请。然后我写了一个 `.n`。

第九点：学会用异步编程 异步编程听起来很较高级。其实就是“缓慢缓慢来”的意思。 以前我写代码，是一行一行往下跑的。第一行没跑完，我不写第二行。这叫同步。就像我吃饭，一口一口吃。 我明白了。 一口吃不完，我就不吃下一口。 但是有时候，我需要等一个东西。比如我要从服务器拿一张图片。我不了解服务器哪些时候良好。它有可能一秒钟就良好，也有可能一分钟。

当前我用 `.map`。我写 `arr.map`。一行就搞定了。我觉得这很酷。但是我不懂为哪些箭头函数那么良好用。它是不是偷懒了？ 还有那个地方的 `.filter`。我想找里面较大于 3 的数字。我就写 `arr.filter`。它就返回了一个崭新的数组 ``。我觉得当前这个函数像是一个筛子。把较小的石头漏掉了把较大的石头留下了，正宗。。