从用Markdown写博客开始，慢慢点亮前端技术栈

 
全文7465字，阅读约25分钟

---

写在开始

  算是入行一小段时间了，因为是从硬件开发转专业（模电和FPGA心理阴影无限大），一切都从头开始，学习各项技术都是项目驱动，为了赶工常常是面向百度Google开发，甚至有些难点功能直接复用别人的代码段，一知半解地排排bug跑通代码完成任务，渐渐感觉知识掌握浮于浅层，技术学习不深入不系统不连贯。
  之前习惯用Win10的OneNote作为备忘录来记录一些有价值的文章、待解决的疑问、bug的处理、常用算法代码块的积累等等，笔记内容比较杂乱。
  我一直认为编程最伟大的精神就是开源、分享与协作，因此希望接下来能通过技术博客的方式，整合一些之前的备忘笔记和学习资源，结合项目实战，从最基础的地方开始，解释清楚那些看似复杂高大上的一个个英文单词到底是什么、为什么、怎么用，对前端技术重新进行一个系统的梳理和学习，监督自己有效提升，也希望尽量能为后来者提供一些帮助，如果有缘看到我的博客能让你有些收获，我倍感荣幸。

关于Markdown

  Markdown是非常好用的轻量级文本编写语言，文件后缀为.md，对html有很好的兼容性，传统文档编写中需要鼠标选中、点击的样式效果都能通过简单的符号和html代码完成。
  在Web项目中，常常需要在网页里展示说明或帮助文档，会有很多代码片段、数据字段表格、数学公式的展示需求，而Web页面不可能直接展示word工具排版编辑好的文档，与其用word写好后再翻译成html，直接使用Markdown是更好的选择。
  CSDN写博客的页面自带Markdown教程和帮助文档，编辑页和预览页双屏同步，非常友好，即使不会html也能直接上手，用代码写博客也算是程序员的自我修养。
  由于Markdown是国外开发，英文中没有首行缩进，所以博客里的所有首行缩进都用两个全角空格 代替。

关于学习方法和学习资源

  w3cschool是一个很好的技术文档/视频综合学习网站，runoob是一个很好的技术文档网站，入门学习需要的大部分资源基本都能找到。
  时下IT技术非常火爆，各种资源教程网络上一搜一大把，只要你愿意用心去学，基本上没有找不到的资源，所以个人已经比较熟悉的东西就不再费力去检索整理学习资源了，如有纯小白想从零开始，可以直接到上面两个网站去检索相关资源。
  技术是为了实践服务，所以亲自动手码代码、排bug、完成小项目或小作品，是学习过程中最重要的环节。编程语言很多，现有的框架也很多，一个完整的项目开发会涉及到UI设计、前端、后端、数据库全栈配合，细分下来有太多技术，所以除了最核心最基础的技术之外，不建议通过视频学习来点亮技术栈，比较浪费时间，看官方手册、读文字教程、动手跑实例、把API都自己调用一遍，完成一个自己的小项目，是最快的学习方法。如果要更深入的学习，就从计算机组成原理、网络协议/标准开始，了解最底层的原理，再阅读开源框架的源码，相信对技术的理解会有质的飞跃。

前端技术栈学习路线

  参考文章大前端技术栈入门串讲，结合实际业务需求和个人兴趣取向，整理了一下需要系统学习的技术路线和相关学习资源。

一、工具类

代码编辑器Visual Studio Code

  代码编辑器是程序员最重要的伙伴，是每天打开电脑第一个点开的东西，编辑器平台有很多，刚开始的时候使用过sublime和Hbuilder，但是现在就不说了，虽然有很多插件我也还没用明白，但是VScode，永远滴神。
  点击官网，无脑安装。

代码管理工具SVN / Git、GitHub

  大型项目必须要协作开发，代码开发的团队合作中最重要的就是各个开发人员的代码统一管理和版本控制。现在我工作中的项目开发基本都是用SVN来进行代码管理，而GitHub是目前全球最大的公网代码管理仓库，里面储存着全世界程序员的优秀开源项目，开源协作的精神体现得淋漓尽致，学会使用GitHub是程序员最基本的素质（ps.网站是全英文的，这边建议和我一样英语差的多背背单词争取早日摆脱谷歌翻译实现无障碍逛GitHub）。
  在 GitHub 上进行交流时用到的 Issue、评论、Wiki，都使用 GFM语法 表述。

  官网：SVN下载，Git官网，GitHub官网
  官方手册：Git官方中文手册，GitHub 官方帮助文档中文版
  免费视频课程：Git 与 GitHub 入门实践
  推荐：Git游戏闯关式学习，怎么在GitHub上传和下载代码

二、核心技术类

  了解核心技术之前，必须了解前端开发到底是在做什么。在一个Web网页开发的项目中，前端主要负责两个部分的工作，第一是与访问这个网页的用户进行交互，比如访问网页能看到什么内容，点击页面的某个地方能弹出某个效果；第二是与后端服务器的数据进行交互，比如用户上传的数据要即时传回保存到数据库，后端某些数据的更新要即时展示到网页中。因此我按这两项分类来罗列前端开发的核心技术。

前端-用户交互

搭建静态页面：Html5与CSS3

  Html超文本标记语言是Web网页搭建的骨架与基础，可以通过不同的标签快速搭建出不同功能的页面。CSS层叠样式表能够对网页中元素位置的排版进行像素级精确控制，用于编辑页面的排版、颜色、字体字号等所有样式。
  学习手册：Html 参考手册，CSS 参考手册

实现交互功能：JavaScript与ES6

  JS是Web开发最重要的语言，只有HTML和CSS的页面只能叫做静态页面，而网页的各种点击交互功能、数据接入、动态更新全部需要依靠JS实现，因此JS编码能力也是前端开发的基础与核心。

  ES6全称 ECMAScript 6.0 ，2015.06 发版，是 JavaScript 最新一个版本的语法标准，也是十年来变动最大的一版标准，在原生JS的基础上引入了新的概念，增加了新的语法特性，以适用于目前越来越复杂的应用需求。
  目前大多数浏览器都已经支持ES6语法，使用ES6语法会让你的JS代码变得更加简洁美观，提升代码效率，因此ES6也是前端开发人员们需要掌握的最新语法。
  学习教程：JavaScript 教程，ES6教程
  免费视频课程：ES6经典入门到进阶

前端-后端交互

与服务器交换数据：AJAX

  AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML），是一种用于创建快速动态网页的技术，没有使用AJAX的网页如果需要更新内容，必需重载整个页面。而通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新，这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
  学习教程：AJAX教程
  免费视频课程：AJAX视频教程

[进阶]运行在服务端的JS：Node.js

  Node.js可以说是后端技术的一种，掌握了Node.js和简单的数据库知识之后，结合前面的前端技术，基本上就能独立完成一个简单项目的全栈开发了。因此，虽然Node.js的编码方式与语言风格JavaScript类似，但其内核与基础概念都与前端技术完全不同。同时，Node.js还拥有一个强大的包管理工具：npm，你可以上传分享自己的代码包，也可以从npm服务器上引入别人写好的代码包，是大型项目开发中不可或缺的帮手。
  学习教程：Node.js教程
  免费视频课程：Node.js开发实践

三、前端框架/库类

  很多人会觉得前端技术种类繁多学不过来，实际上前端开发的核心就是上面说的那几项技术，其他的东西全是为了减少重复繁琐的编码，让编写程序的工作更简洁更方便摸鱼而开发出来供大家使用的前端框架。
  个人不太注重框架和库的区分，反正都是辅助开发的工具，干脆就统称为框架。前端框架有很多，就像装修一套房子，提供承重的柱子可以叫框架，提供墙壁的粉刷装饰可以叫框架，提供全套一条龙服务的也叫框架，目前广受开发者欢迎的包括用于简化编码的JQuery，提供UI界面布局排版方案的Bootstrap，还有提供成套服务的三大主流框架：Vue、Angular、React。
  前端框架都是为更便捷的开发而服务的，所以只要深入掌握一个主流框架就足够了，目前我主要使用和着重学习的是Vue框架，学习方法参考文章如何从零开始学习一个框架。

JQuery

  JQuery是一个JavaScript 库，极大地简化了JS编程，如果说ES6是JS本身的语法版本，那么JQuery就是一个应用最广泛的第三方辅助的语法版本，需要通过在项目中引入JQuery插件才能使用，JQuery将JS中很多常用的功能直接封装成函数，不用再敲出复杂的JS代码，直接调用函数即可完成需要的功能，大大简化了编写代码的工作，是很值得学习的。当然，ES6语法其实已经很简化了，所以也并不是不会JQuery就写不了代码。
  学习教程：JQuery教程

Vue.js

  Vue是现在最主流的框架之一，提供了组件化开发、数据响应驱动的全套服务，无需特殊设置，语法均基于HTML和JavaScript，拥有强大的生态，开发者们在其基础上开发了很多功能强大的组件，可以直接使用，为大型项目的合作开发提供了极大的便利，广受欢迎。因此，深入学习Vue框架，将会帮助我们打开新世界的大门。
  官方网站：Vue.js
  学习教程：Vue教程
  免费视频课程：Vue零基础到实战

四、工程类

代码规范

  项目工程的开发总会涉及到团队协作和代码维护，而前端代码中无数的对象、变量、函数名都是由编码人员自己命名的，如果编码风格过于飘逸，即使只有一百来行代码，都有可能连自己都读不懂，更不用说几十上百万行代码的开发与维护了。因此，优秀的程序员都会追求代码的美感，算法上追求精简代码量、命名上追求明确与统一、排版上追求简洁美观，尽量将单个功能封装成函数，写明注释进行调用，坚持模块化开发，让自己的代码易读、易维护、易扩展。
  熟读并应用：JavaScript 代码规范

webpack打包

  在大型项目开发中，页面和功能的开发常常会涉及到很多依赖（也就是开发过程中会调用其他文件，比如引入有助于开发的库，或是直接引入别人封装好的功能模块），当依赖太多时需要请求的文件也会变多，直接影响了页面运行的速度，为了解决这个问题，就诞生了webpack这个工具，将所有文件根据其依赖关系打包合并成一个大文件，具体解释可参考文章：前端项目为什么要打包。
  学习资源：webpack官方文档，webpack教程

网站发布与域名申请

  要让你的网站在任何时候都可以通过公网访问，就需要一台能够24小时持续运行的服务器，现在因为各个互联网大厂的云服务兴起，服务器的成本大幅降低，因此可以到阿里云、腾讯云、华为云等地方去租用一台云服务器（具体看个人喜好或者公司/客户合作要求），服务器租用、域名解析和网站部署方式流程，大厂们会提供非常详细的一条龙教程（给了钱就是爸爸）。
  云服务器部署网站（腾讯云为例），GitHub部署网站

五、数据可视化(待补充)

二维可视化图表

echarts

d3.js

三维场景搭建

ceisum

three.js

最后

  技术发展日新月异，学习使用他人开发出来的工具固然便捷，但是静下心来深入挖掘、掌握核心与根基才是自我提升的最好方法。完全点亮了上面列出的技术栈之后，只要再学习一些数据库的基础知识，基本就能独立完成一个复杂工程的全栈开发了，后续有其他需要用到或者感兴趣的技术我也会更新到博客中。
  列出学习大纲很重要，坚持学习本身更重要。
  那么，就从这里开始吧，Hello，world！

<!DOCTYPE html>
<html>
	<head>    
		<title>Hello World!</title>
	</head>
	<body>
		<p>Hello World!</p>
	</body>
</html>