Web前端入门知识点有哪些？

首先要知道什么前端是做些什么的，用什么软件语言开发编写的，所以我们先来简单了解一下前端。

　　1、代码编辑器/IDEs

　　与2019年一样，微软的VSCode将成为2021年大多数前端工程师的首选编辑器。

　　它几乎具备跟IDE一样的功能，例如代码补全和高亮，并且可通过扩展市场进行无限延伸。

　　尤其是它的市场让VSCode脱颖而出。下面是作为前端开发人员的一些重要扩展内容：

　　·JavaScript(ES6)codesnippets

　　·npm

　　·Prettier

　　·CSSPeek

　　·Vetur

　　·ESLint

　　·LiveSassCompiler

　　·DebuggerforChrome

　　·LiveServer

　　·Beautify

　　这些是很酷的例子。VSCode还有更多有待于挖掘，如果你尚未使用它，建议去尝试一下。

　　2、测试

　　未经过测试的代码不应产出。

　　尽管对个人项目不进行任何测试似乎更加方便，但在商业环境和企业环境下工作时必须进行测试。因此，对于任何开发人员而言，最好尽可能在开发工作中加入测试环节。

　　测试用例可以作如下区分：

　　单元测试

　　单独测试单个组件或函数。

　　集成测试

　　测试组件之间的交互。

　　端间测试

　　在浏览器中测试功能完善的用户流。

　　测试方法还有很多，例如手动测试和快照测试等。如果想升任到高级开发人员或者打算在具有一定开发标准的大型企业工作，就应该努力提高测试技能。

　　3、软技能

　　软技能的学习经常被忽视却对开发人员极为重要。

　　尽管它有助于理解技术层面的内容，但是知道如何进行团队沟通也同样重要。如果决心从事技术方面的职业或者打算升任，应该培养以下的软技能：

　　·共情

　　·沟通

　　·团队合作

　　·平易近人和乐于助人

　　·耐心

　　·开放的心态

　　·解决问题的能力

　　·责任感

　　·创造力

　　·时间管理

　　永远记住：高级开发人员最重要的成果是培养更多的高级开发人员。

　　4、JAMstack

　　术语JAMstack代表着JavaScript(在客户端上运行—例如React、Vue或VanillaJS)、API(服务器端处理是抽象的，其通过JavaScript访问HTTPS)、markup(在部署时预构建的模块化标记)三者。

　　这是构建具有更好性能的网站和apps的一种方式—降低扩展成本、提高安全性和更好的开发体验。

　　尽管这些术语本身不是新鲜事物，但它们都有一个共同点—即不依赖网站服务器。因此，如果单片应用程序依赖于Ruby或Node.js后端，或者依赖由服务器端CMS(例如Drupal或WordPress)构建的网站，那么它便不是使用JAMstack构建而成。

　　如果想使用JAMstack，以下有一些最佳实践：

　　整个项目由CDN提供服务

　　由于不需要任何服务器，整个项目可通过CDN获取服务，解锁无与伦比的速度和性能。

　　一切都存在于Git

　　每个人应该能够从Gitrepo上复制整个项目，而无需数据库或者复杂的设置。

　　自动构建

　　你可以完美地进行自动构建，因为所有的标记是预先构建的—例如，webhooks或云服务的使用。

　　原子化部署

　　为了避免在大型项目中重新部署成百上千的文件而造成的不一致状态，原子化部署等到所有文件上传后，才进行更改。

　　即时缓存失效

　　当网站运行时，必须确保CDN能够处理即时缓存清除，以使更改可见。

　　著名的Netlify、Zeit等主机都支持JAMstack应用，大公司使用它们为用户提供出色的体验。

　　作为一名前端开发人员，一定有在2021年想要弄清楚的事。如果想要进一步了解JAMstacks，下面是一些不错的资源：

　　·JAMstack

　　·JAMstackWTF

　　·“NewtoJAMstack？EverythingYouNeedtoKnowtoGetStarted”

　　5、静态站点生成器

　　静态站点生成器结合了服务器端的渲染功能(对SEO和初始加载时间都非常重要)和单页应用程序。

　　如今，许多项目即使不需要服务器端渲染，也会选择SSG，因为Next或Nuxt这类解决方案具有便捷的功能，例如Markdown编辑器支持、模块捆绑和集成测试运行器等。

　　如果你是认真对待前端开发，应该仔细研究以下项目，并尝试从中获得一些实践经验：

　　·Next(基于React)

　　·Nuxt(基于Vue)

　　·Gatsby(基于React)

　　·Gridsome(基于Vue)

　　尽管还有很多，但这些可能会是2021年最受欢迎的。如果想要了解更多，可以查阅这些资源：

　　·Next.js