技能教程网:怎么体系学习 Web 前端技能？

访客5年前 (2020-01-14)关于黑客接单1079

　　这篇文章首要是面向小白用户的，假设你有些基础，当然也主张你看看，尤其是最终一个主题，或许你能得到一些启示。本文的观念，纯属个人自以为是的主意，不是真理，仅供参考。

　　抛开具体技能细节，先首要谈谈程序员怎么更高效的，有挑选的学习技能。我能体会到挑选的轻松和趣味，体会到身为技能人员和人类的平衡感。言外之意中，我要表达的是一种抛弃与挑选的哲学，能品到这一点，我就很快乐。

　　人生苦短我们需求一个基线

　　古代小说里，高手如云，人们为了生计，要把握一套保命武功。其间，我最喜爱的是轻功，究竟三十六计走为上策(狡猾的一笑)。说究竟，武功和技能相同，都是为了生计。

　　问题是，实际一点来说，一个武者，很难把握一切的武功秘籍，因为臣妾做不到啊;所以假设有一种武功，可以远攻和近攻，能逃跑能单挑，那就极好了。

　　玩“农药”也相同，我发现英豪们各有优缺点，但你又不或许什么英豪都练，因为臣妾也做不到啊，究竟上场时就一个英豪，所以就需求挑选，我挑选的是吕布和赵云，他俩在游戏故事设定中是情敌，其实貂蝉喜爱的是赵云，我之所以选这两个情敌成为基友，是因为符文相同，这点很重要，五级符文真mde难攒，吕布和赵云战斗力都很棒，我基本就练这两个，现在的级别是永久钻石，尽管不是最厉害的，但在王者的国际，确有一席之地。

　　技能也是相同，我通过一套技能，每天用这套技能开发，不断锻炼，好过啥都学，啥都不深化，因为之所以深化，是因为你不断去用，许多时分，一个技能名出来，就买书学，其实很傻很单纯，因为技能是手法，意图是处理开发问题，假设用不上，就毫无意义。

　　回过头来，我们发现“农药”中选英豪，和选自己的技能系统是相同的。我们狭义的意图，是想通过一种技能(手法)，可以开发尽或许多的使用程序。

　　那么假设有这种技能，更好满意以下几个特征：开源，前后端全栈式开发，前后端代码可以同享，更好在有生之年不被筛选的，最重要的是好工作的。

　　契合这些特征的技能，当属 Web 技能了，下个主题让我们讨论，它为什么契合。别的需求阐明的是，这儿说的 Web 技能，是我进一步浓缩的技能系统，因为广义上的 Web 技能，其实包含的面太广了，我们需求进一步，抽离出更契合这些特性的具体技能，构成一套便于开发的 Web 技能。所以，下面讲的是狭窄的 Web 技能。

　　Web 全栈式开发

　　HTML5 与 Node.js 技能，可以让程序员做到 Web 全栈式开发。这套技能是标准的、开源的。

　　HTML5 我们都听过，百度就可以知道它的界说啊，前史啊等一些信息，所以，这儿不再赘述。HTML5 是标准化的技能，Node.js 是开源技能，所以完全免费，随意用。别的，当你进入到 npmjs.com 网站，会发现许多 Node.js 第三方库，最重要的，这都是免费的，开源的，这为我们的项目开发供应了一个强壮的、免费的开发团队!你可以直接用他人的开发效果!

　　这套技能不会被筛选

　　学习是有本钱的，时刻是名贵的，因为生命名贵;人都是想用更多时刻陪陪家人，陪陪女朋友和基友，也喜爱玩玩“农药”，去迪士尼当回小孩儿;假设你爱技能胜于当人的趣味，那么祝贺你!至少我们不太喜爱，学个一溜十三招，最终学的东东筛选了或过期了。

　　HTML5 技能是标准的，我们用到的浏览器都支撑他，所以在可预见的未来不会被筛选。而 Node.js 是开源的，不受一个公司的操控，却遭到各个大咖公司的资助和支撑，包含微软、因特尔、IBM … 具体参看 https://nodejs.org/en/foundation/members/ 所以 Node.js 在可预见的未来，也不会被筛选。

　　所以学习 HTML5 and Node.js 技能可耐久有用。

　　这套技能可前后端全栈式开发

　　我们所说的 HTML5 和 Node.js ，是前后端技能的代名词，因为环绕它们的，是非常巨大的生态圈。这个我们会在下一主题中阐明。

　　一个软件可以分为前端和后端，比方一个 App 分为客户端和服务器端程序。通过 HTML5 技能可以开发客户端程序，服务器端程序可以用 Node.js 开发。

　　那么，为什么 HTML5 要与 Node.js 构成前后端全栈技能呢? 而不能是 html5 + php 或其它呢?也不是不能，而是前者更有优势。

　　浏览器程序是选用 Javascript 言语编写的，而服务器端的 Node.js 程序，也是用 Javascript 言语编写的，所以前后端可以一致运用一种编程言语开发。这样前后端的许多库，都可以同享，既可以运转前端，又可以运转后端，进步了开发功率。

　　学好这套技能好工作

　　上面说了一些，这套技能的优势地点，那么为什么说，学好这套技能好工作呢?要回答这个问题，还需更进一步阐明，运用这套技能究竟精干什么。

　　我们把握这套技能后，可以开发全端程序，比方 iPhone Android 的 APP ，可以开发 Web 程序，可以开发桌面使用程序，乃至可以开发物联网程序等等，更重要的是它节约了开发本钱，进步了开发功率。

　　节约开发本钱，是因为雇佣一个程序员，可以一起开发前后端，薪酬要比两个人少，并且因为 Node.js 自身的特征，可以节约公司服务器，这也是 paypal 之所以用 Node.js 技能重写系统的原因。

　　而进步开发功率，是因为运用这套技能，可以写一套程序，运转在 Android iPhone PC 和服务器端，当然这样说有些夸大，多少会更改一些，但基本上做到了，一次编写处处运转。

　　再有，Web 前端必定要用到 HTML5 技能，后端或许会用到其他技能，但即使后端程序不必 Node.js 开发，或多或少都要用到 Node.js ，因为环绕它诞生的一些东西，在开发中必然会用到的，比方 Webpack ，Gulp等 Node.js 相关技能。

　　综上所述，这套技能关于公司来说，百利而无一害，所以把握这套技能很好工作。现在我在CSDN学院开设前端特训营，政策是：将学员培育有中心竞争力的前端开发者。从、你们可以点击进去检查里边需求的技能知识点和前端工作薪资。传送门点我吧！

&n bsp;

　　Web 前端技能知识系统

　　前面讲了两点。之一点，阐明人精力有限，有空要多陪陪基友和女友，所以我们要挑选一套全栈式开发技能，协助我们轻松开发使用程序，这便是 HTML5 + Node.js 技能系统。第二点，吹了半响，来阐明这套技能多多好。

　　那么，HTML5 和 Node.js 便是两种技能吗?当然不是了，衍生出的技能许多许多。HTML5 是什么，你 google 吧，我这儿不粘贴了，可好? 假设你说：google 臣妾做不到，那就百度吧。

　　Web 前端程序，实际上运转环境便是浏览器，现代浏览器已经是一个渠道了，供应了许多 API ，我们叫做 Web API。编写一个 Web 前端程序，需求用到的技能有 HTML5 / CSS3 / Javascript 。而 HTML5 往往是这些技能的总称。

　　那么，用这三个技能的确能写出程序来了，可是从头自己些也是很慢的，可以用许多东西库和结构，协助我们快速开发。

　　前端技能库

　　比较火的技能包含： JQuery , Angular2 , React , Redux , Vue.js 等，这些东西库各有千秋，比方，比较小的程序，用 JQuery 就可以搞定了，假设比较杂乱的，可以用 React ，Angular2 或 Vue.js 库。

　　开发 Android 、iPhone 和桌面程序

　　上面介绍的部分前端技能，可以写出程序来，但只能运转在浏览器中，我们也可以用打包东西，让开发好的程序，运转在 Android iPhone 和电脑上。

　　PhoneGap 和 React-Native 就可以用我们已知的技能，来开发Android 和 iPhone 程序，而用 electron 就可以把程序打包成 PC 电脑桌面程序。

　　把握以上技能，就让我们可以开发各种客户端程序了。

　　服务器端技能

　　那么，服务器端程序用 Node.js 就可以了吗? 你当然可以从头写服务器端程序，更好是用现成的结构。比方 Express koajs 等结构，来编写 Web 服务器端程序。

　　数据库也是需求的，要不数据就无法耐久化和查询了，我举荐用 mongodb 数据库，选用 mongoosejs 库来写 Node.js 的数据库程序，因为 mongodb 数据库的文档结构，和 javasript 的 json 是很相似的，别的 mongodb shell 用的也是 javascript 言语。

　　单元测验

　　到现在为止，前后端程序所需技能，都够用了。那么，还有一个问题，便是测验! 程序开发后，再全体测验，会呈现许多鬼魂bug，也便是很难找到问题本源bug2.检查白名单情况。所以，更好是单元测验，便是写点代码就测验一下，遇到问题及时处理，而不是 bugs 攒多了到最终无法处理。这方面的单元测验东西也有许多，举荐 Node.js 后端程序用 mocha 做单元测验，前端用 ja *** ine + karma 做单元测验，因为karma 可以让我们在终端就能看到多个浏览器测验成果，而不是各种浏览器，挨着个的改写看成果，前端浏览器测验最费事，因为有兼容问题，所以用 karma 大大进步了我们测验功率。

　　打包东西

　　像 Webpack , gulp 等技能也是需求把握的，可以协助我们主动打包程序。

　　Web 前端技能学习路线图

　　上面说了这么多，究竟怎么一步步把握这些技能呢? 下面举荐一个学习路线图，期望对初学者有协助。

　　Javascript 言语：全栈开发中，用的编程言语便是 javascript

　　HTML5 标签和 DOM：这是前端最中心技能，为之后学习各种开发结构，打下坚实基础。

　　CSS3：学习通过 css 开发网页和各种可视 UI 组件。

　　SASS：运用 sass 言语，开发杂乱的页面 css

　　Node.js：把握Node.js 中心 API ，具有后端开发才能。

　　Express 5.x 结构：把握 Express 结构，然后具有快速开发后端程序的才能。

　　socket.io 库：让前后端通过 websocket协议通讯，是web 开发游戏、聊天等程序必备技能。

　　Mongoose 结构：可以让程序具有文档数据贮存才能

　　Git 指令与 github：可以对项目进行版别办理，然后能团队开发项目。

　　Gulp 构建东西实战：通过 gulp 东西，活络对项目进行构建。

　　Webpack：可以用和 Node.js 后端模块化办法，开发前端程序，然后能开发大型系统。

　　Ja *** ine & Karma：可以运用 Ja *** ine & Karma 轻松结束，多种浏览器一起进行单元测验，而不必切换界面。

　　前端相关结构：JQuery / Bootstrap / Vue.js /React / Angular通过结构帮我我们快速开发程序

　　移动端与桌面程序开发东西：phonegap / react-native / electron / 微信小程序开发，这套东西，基本上仅仅打包东西，和供应了一些特定渠道 API ，开发仍是运用之前的 Web 技能。

　　假设通过这套学习路线图学完，那么工作是毫无压力的，可是做为有志趣的码奴，我们还需求展望未来和扩展视野。想要具体检查学习知识点的，点我检查吧！传送门在此。

　　一说到扩展视野，有些人就会，张狂的拿来一本永久不必技能的书，啃起来，比方你是用 html5 写前端界面的，永久用不上 QT 写界面，你买本 QT 津津乐道的学起来，假设你感觉不错，那就学吧。

　　其实，我们学任何技能，都要考究是否有用，技能自身是严寒
技能教程网:怎么体系学习 Web 前端技能？
的，假设没有价值，或用不上就不必学，除非你理论计算机学家，这个职位我编出来的，不造有没有这个岗位。

　　废话不多说了下面便是硬件组态了，这儿就不赘述了，我这台设备因为之前用过，我就直接从plc上传组态信息及程序了，我们拿到一些需求的信息就可以了，我们来扩展一下有用的视野，展望一下有用的未来!

　　扩展视野与未来展望

　　前文说到的，说实话也仅仅冰山一角，这个一角也的确能开发，简直一切的使用程序了，可是冰山的下半部分，却让我们愈加向往! 尽管技能是严寒的，但做为生机四射的技能，仍是会感遭到一丝震撼人心的灵光!下面我挑两个高端技能，来共享一下。

　　CQRS framework 我一手带大的孩子

　　Web 前端开发人员，记住你们仅仅前端! 不要越界好不好!你们没这个本事!

　　但惋惜的是，本文的标题 “怎么学习 Web 前端技能?” 真的仅仅谦善说法，谁说我们不能开发后端程序了?!

　　Node.js 为后端开发供应了柱石，望着老牌技能的一些结构啊，数据剖析相关的结构啊，给人的感觉 Node.js 还很年青，开发运用政策替换堆指针内存一些简略的 Web CURD 程序就得了。可是，这些并不正确，跟着 Node.js 自身能量，和各种第三方库让 Node.js 可以开发微服务，大型系统，比方 paypal 系统便是用 Node.js 写的，莫非不行强壮吗?

　　后端是个抽象的概念，假设后端仅仅 Web 服务器端，那么 Node.js 开发是没问题的，那么为什么给人的感觉，后端如同很牛逼呢?因为后端指的是支撑高并发访问、大型系统、杂乱系统。

　　也便是系统很巨大，用一般的 CURD 简略开发方式，无法担任这种杂乱性。那么，这个其实和技能无关;而是，是否有应对开发杂乱系统的结构。

　　CQRS https://github.com/liangzeng/cqrs 是 DDD 范畴驱动设计理论的落地结构，我为 Node.js 开发了 CQRS framework ，然后可以让 Node.js 具有开发超大型系统的才能，当然它不只限于此!

　　来来来，让我们“吹”一下吧！

　　Node.js CQRS 结构，合适于开发大中小程序，也很合适开发微服务，它具有横向无限扩展机制，可以运用多cpu和多服务器分布式功能，具有事情驱动、saga长故事、saga回轮、actor方式、事情回溯。在未来，也将运转在浏览器，可替代 redux 和其他数据办理结构，将一致办理事务数据，通过 cqrs framework 强壮的兼容性和 js 的简略性相结合，结束无所不在的开发便当。

　　最近，Node.js CQRS 结构增加了 DCI 特性，然后结束 CQRS + DDD + Actor + DCI 的有机整合，为开发大中小项目供应强壮的中心支撑，分布式/微服务，或一般的 react 使用 (cqrs将替代类redux结构，供应更完善、更牢靠和更强悍的技能支撑)，将在一开端，给程序员一种可控性，而不是一盘散沙，不管多大规划的项目，可控性、可扩展性、无限横向扩展性，都是成功项意图必备。

　　这是一个很大的论题，先吹到这儿。

　　WebAssembly

　　WebAssembly 是浏览器和 Node.js 环境下，新参加的程序格局，简略来说，便是让运转功率挨近原生程序。未来的新开发使用软件，基本上选用 HTML5 + Node.js 前后端全栈来开发，因为开发功率高，而程序中的一些需求高繁运算部分，选用 Javascript/Typescript 开发后转换为字节码，但不应把整个项目转换为字节码二进制，那是很傻的。不精确的说 95%+的动态 *** 代码加 <5% *** /TS转为wa *** 二进制的字节码，构成了完好的程序。

　　我们可以参看 https://github.com/AssemblyScript/assemblyscript

　　先说这些吧，还有许多要说的，不过留到下次吧。期望本文对你有些启示!

　　最终，做一个小小的举荐。十年一变，从2016 年开端，Web前端工程师开端大放异彩，人才需求重返巅峰。

　　本文作者曾亮教师，在CSDN出品4个月从零生长为前端工程师方案。意图是：将学员培育有中心竞争力的前端开发者。

　　生长阶段：

　　之一阶段：Web 全栈中心技能实战(1～6周)

　　第二阶段：Node.js 技能与开发东西实战 (7~10周)masscan -p23 `sed ':a;N;$!ba;s/n/ /g' ip.txt` --banners -oB port.txt

　　第三阶段：前端结构实战(11～15周)

　　第四阶段：移动端与桌面程序开发(16～19周)

　　第五阶段：结业项目实战

　　课程特征：

　　从零实战，学习途径清楚，独家系统纲要，有多名助教随时答疑，不再困扰遇到的技能问题。在线学习+直播方式，无需脱产。

　　有专人(助教)来盯梢你的学习进展，并根据你的编程基础来拟定专属学习方案，保证不掉队。讲师有着深沉的经历，产、学、研结合严密。