共计 1870 个字符，预计需要花费 5 分钟才能阅读完成。
本文来源于：https://imshengli.com/blog/20…
如需查看文章最新内容，请拜访源地址。
背景
前端这些年产生了很大的变动，导致有些前端根底的非前端同学在当初的状况下，也不晓得如何下手了，甚至连发送一个申请可能都要绕半天。因而，本文就”非前端同学如何做前端开发？“这个主题聊聊这些年前端的变与不变。
万变不离其宗
不论前端如何变动，前端最外围的三个概念始终未变：HTML、CSS、JavaScript。HTML 负责页面构造，CSS 负责页面款式，JavaScript 负责用户交互。
前端任何新的概念，都是这三个概念的变种。React 框架采纳相似 JavaScript 的 JSX 语法，生成 HTML 构造。LESS、SASS 的呈现无非是升高 CSS 的开发成本。各种库、组件的呈现，也无非是对开发中常见的问题形象的实现。总的来说，只应用 HTML、CSS、JavaScript 齐全能够满足咱们本人的前端开发需要。
说说”万变“
变的起因也很简略，就是”理论诉求“。诉求是 如何晋升咱们的开发效率，如何放弃整体的格调对立，如何同时撑持多端，如何应答简单的业务需要。
第一个变：语法
和 Java 语法更新迭代一样，前端的语法也在升级换代中，当初 JavaScript 一年一个迭代版本。不过不必放心，JavaScript 代码中即反对新的语法，也能够用老的语法，留神一下其中的区别即可。想理解新的语法，能够参考：阮一峰 – ES6 入门教程。
另外一点须要留神的是，须要采纳新的语法，浏览器如果没有对应的实现，咱们须要先将它编译为老的语法，能力在浏览器中执行。罕用的工具是：babeljs。这一点也不必本人去做，成熟的工具曾经将它纳入其中，比方 Antd Design Pro 中采纳的 UmiJS。
LESS、SASS 并不是 CSS 新的语法，只是为了简化 CSS 的写法，能够看作 CSS 的语法糖。在浏览器中运行之前，须要编译为 CSS。
第二个变：组件化
Web 页面中存在大量的类似构造，只是数据不同。因而这些类似的 Web 页面构造和对应的款式，开启了前端组件化的征程。
最开始，大家只是利用 HTML、CSS、JavaScript 做一些简略的封装，比方 Bootstrap，尽管谈不上组件化，至多缩小了局部开发工作量。起初，国内呈现了 AmazeUI，算是有了一点点组件化的雏形。W3C 也制订了组件化的规范，Polymer Project 是基于此规范的实现。不过倒退的都不太好，个中起因，七嘴八舌。再起初，AngularJS、ReactJS、VueJS，因为其更先进的理念，更欠缺的生态，开始大行其道，当初根本是这三者的天下。Antd、Fusion、ElementUI 等都是基于这三个框架组件化的实现。
当初，举荐大家应用基于这三大框架的组件库。抉择时，抉择文档全面、github star 多的组件库。应用组件时，多参考组件应用文档。遇到的问题，个别其他人都有遇到过，Google 搜寻一下即可。
第三个变：工程化
组件化的到来，呈现了一个新的问题，如何解决组件之间的依赖问题，如何把组件打包成一个 JS 文件，如何拆分组件中的款式文件，还有如何编译新的语法，本地开发时如何监听文件变动主动编译，如何公布，这都归为前端工程化的领域。
对于非前端同学来讲，理解工程化的细节不是必要的。把握一个棘手的，应用的来的便可。在下节要介绍的”整体解决方案“中，计划自身曾经集成了工程化的能力。
第四个变：整体解决方案
当初有大量的博客零碎、中后盾零碎需要，面对这种状况，开箱即用的整体解决方案利用而生。
最早的莫过于 WordPress，只不过性能比拟繁多。在前端上，做的最多的可能是开发一个主题，但也仅限于列表和详情。对于博客零碎，除了 WordPress 这种外，另外还有专门依据 MarkDown 文件生成动态站点的工具，比方：Hugo、Hexo、Next.js 等。面对简单的中后盾零碎，当初比拟风行的是：Antd Design Pro，集成了组件，集成了工程化的能力，封装了网络申请的形式，制订了标准的目录构造，对立了设计格调，及其他开发工程中可能须要的工具。
对于整体解决方案，熟读文档，是最便捷的形式。在咱们不理解一件事物时，最好的方法是”照猫画虎“，但这有一个弊病是，如果呈现问题，会手足无措。所以浏览每一章节时，最好晓得问题是什么、解决的形式、背地的基本原理。所有的原理，最初都会落到前端的三个外围概念上。
总结
前端已独立为一个岗位好多年，天然有不少的产出。对于非前端同学，不用为不能一天把握前端而苦恼，前端能为本人服务、解决本人的问题即可。
