Web 前端的工程化 | 前端技术 101

之前听人说过，学电子的所有知识五年一更新，学软件的知识两年一更新，对于学 Web 的人来说，所有的知识大概每9个月就会大更新一次，至于是不是这样无从考证，但是至少从侧面说明 web 技术是迭代的很快的。

前端技术这十来年发展的很快，网站从多页面应用向单页面发展，从 PC端向移动端发展，UI 交互也从简单的 jQuery / Ajax 发展到 React / Vue / websocket，前端应用的构建也从以前简单的手写 html/css/javascript 发展到使用 webpack / gulp / grunt / browserify 各种工具来实现。

至于 javascript 这门语言，也从一门仅仅用来实现简单表格验证的小小的语言，发展到现在前后端通吃的一门生态超级复杂的语言了。为了适应这种变化，javascript 本身的语法也更新过好几次，其语言规范也已经更新到了 ES6（ECMAScript 6）。

本提纲可以作为你继续探索前端技术的开端。

第一部分：概念

在 Web 的领域里，没有唯一正确的实现方法，同一件事情，可能有10-15件工具来完成。所以知识是学不完的，但看到某个名词，一定要清楚它到底属于什么东西，这样才能在需要的时候找到最适合的工具来帮助自己完成。

前端三板斧的 html, css, javascript, node 它们到底是干什么的？

前端三板斧

第一板斧：HTML

HTML是一种标记语言。

重点：

什么是HTML5？

第二板斧：CSS

CSS3 是 CSS 的升级版本，这套新标准提供了更加丰富且实用的规范。

重点：

CSS3的新特性

盒子模型（IE 和 Webkit 的区别）。动画。阴影。渐变。Flex 布局。

第三板斧：javascript（ES4,ES5,ES6)

什么是 ECMAScript？

Node.js

Node.js 是什么？

Node.js 是使用 V8 Javascript 的一个服务端程序。通俗地讲，就是运行在后端的 Javascript 。

为什么前端需要了解 Node.js?

自动化构建。服务端渲染。

第二部分：前端的工程化

所谓工程化，就是将工作变成一个个可完成的项目，从模块化、组件化、规范化、自动化。

前端三板斧的模块化

HTML

模板引擎的引入

  • markdown ot html
  • jekyll,Octopress(静态页面生成)
  • jade,ejs,liquid,swig

CSS的工程化

less/sass/stylus

  • Nesting
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}
  • importing
//nav-bar.scss

.nav-bar-head {
  position: fiexd;
  top: 0px;
  widht: 100%;
  height: 150px;
}

// base.scss

@import 'reset';

body {
  font: 100% Helvetica, sans-serif;
  background-color: #efefef;
}

......

js的工程化

common.js 和 ES6

这些工程化都做了什么？

  • 消除重复代码

  • 代码解耦

  • 将大文件分拆成小文件，将代码拆分为组件，用来复用

构建工具的引入

  • webpack
  • browerify
  • grunt

第三部分：从工程化到集成的解决方案

库/框架

  • React
  • Vue
  • Angular
  • Backbones.js
  • Meteor

Tips: 其实 React 不是一个框架

Vue 解决了什么问题？

逐步的将一个项目工程化。

React 解决了什么问题？

与其费尽心思地告诉别人要遵守某种规则，以规避某种痛苦，倒不如从工具层面就消灭这种痛苦。

第四部分：实战

(完)

附：更多

Html/Html5 CheatSheet

前端语言、框架

  • CSS 模块化方案：LESS/ SASS

  • JS 模块化方案：AMD/CommonJS/UMD/ES6 Modlue

  • HTML 模板引擎：baiduTemplate(百度)artTemplate（腾讯）juicer（淘宝）doT tmpl handlebars easyTemplate underscoretemplate mustache kissytemplate

  • 前端集成框架 Bootstrap、Gumby、 Skeleton、Foundation

  • AngularJS

  • ReactJS

  • VueJS

  • Meteor

  • 还有 WEEX
    (排名不分先后)

前端构建工具

所以在实际前端构建流程里面，你会发现以下的流程。

代码优化

  • LESS、SASS 自动编译

  • Autoprefixer 前缀自动补全

  • 自动生成图片 CSS 属性，width & height

  • CSS Sprite 雪碧图合成

  • JS、CSS、HTML 压缩

  • 按需加载

  • 延迟加载

解决方案

  • 项目初始化。如果你用了 yeoman 或者 HTML5 Boilerplate，你就懂我说什么

  • 作用域污染。前端自带问题。

  • eslint 验证，代码验证验证

  • Retina @2x & @3x 自动生成适配

  • px -> rem 兼容适配方案

  • 智能 WebP 解决方案

  • 非覆盖式升级，文件指纹

  • CDN 文件缓存，缓存更新

  • 自动化测试

调试和部署

  • 监听文件变动，自动刷新浏览器 (LiveReload)

  • 文件指纹，hash 值生成

  • FTP 发布部署

  • ZIP 项目打包

自动化测试

Last updated on 2019-1-8 by wild-flame