前端开发，从草根到英雄(总结)

[hsipeng]

文章信息：

原文：

• zero to front-end hero
• From Zero to Front-end Hero (Part 2)

作者：@Jonathan Z. White

翻译：

• 前端开发，从草根到英雄（第一部分）
• 前端开发，从草根到英雄（第二部分）

译者：jieniu

总结

HTML CSS基础练习

工具

• CodePen
• Dribbble

练习使用html，css，包裹google字体的api和google字体的css技巧，当然还有排版。要将注意力放在html，css在一起时如何工作的。然后再dribble这个网站上寻找灵感，在codepen上编写代码。

要点

• 语义标记
• css命名约定
• css重置
• 跨浏览器支持
• css预处理器和后处理器
• 网格系统和响应式

最后要保持更新，从一个又一个例子中学习。

JavaScript

基本知识

语言

• 语法和类型
• 控制流河错误处理
• 循环和遍历
• 函数

交互

文档对象模型（DOM）

• 什么是DOM？
• 如何查询元素？
• 如何添加事件监听者？
• 如何合适的改变DOM节点属性？

检查

调试JavaScript

进阶知识

语言

• 强化原型
• 作用域
• 闭包
• 事件循环
• 事件通知
• 请求、调用和绑定
• 回调和承诺
• 变量及函数挂起
• Currying

Imperative vs. Declarative

JavaScript和DOM如何交互，有两种方法：imperative和declarative，一方面，declarative程序专注于what，另一方面，imperative程序专注于how。
Jquery是imperative方法，然后才是Angular和React库declarative方法

Ajax

新的浏览器请求标准是Fetch

jQuery

jQuery不是唯一的imperative DOM操作解决方案，PlainJS和You Might Not Need jQuery是两个很好的资源，他们会告诉你和jQuery一样的频繁使用的JavaScript函数。

ES5 vs. ES6

有必要知道你今天看到的应用，要么使用ES5，要么使用ES6。ES5，ES6，ES2016，ES.Next: JavaScript版本到底怎么了和Dan Wahlins的ES6入门——下一代JavaScript是很好的ES6介绍。接着你可以在ES6功能列表查看ES5到ES6的变化。如果你还想了解更多，去Github代码库获得更多ES6功能信息。

JavaScript框架

Angular，React + Flux，Ember，Aurelia，Vue，和Meteor。你不需要学习所有的框架，选一个学习即可，不要追赶框架的潮流，取而代之的是，你需要理解框架程序底下的原则和哲学。

架构模型

MVC MVVM

与其让HTML保留应用状态，还不如用一个JavaScript对象——通常被称为Model——来存储状态。

设计模式

• 装饰者模式
• 工厂模式
• 单件模式
• Revealing module
• 外观模式
• 观察者模式

AngularJS

AngularJS是一个JavaScript MVC框架，有时也是一个MVVM框架，它由google维护，并在2010年初次发布时给JavaScript社区带来了一场风暴

React + Flux

Angular很好解决了程序员在构建复杂系统时所面对的问题，另一个流行的工具是React，它是一个创建用户接口的库，你可以把它想象成MVC中的V。由于React只是一个库，所以它会经常伴随着一个框架Flux

风格指南

JavaScript风格指南是一组代码规范，它会帮助你设计具有可读性和可维护性高的代码。

• AirBnB的编码规范
• 常用的JavaScript原则
• Node编码规范
• MDN编码规范

编码基础

我已经无法形容读好代码给我带来的帮助到底有多大，一旦当你想读新的好代码时，可以上Github上找

• Lodash
• Underscore
• Babel
• Ghost
• NodeBB
• KeystoneJS

---

许多时候，人在做，天在看。