Web前端知识

未分类

1.基本定义

定义：利用Web技术进行客户端产品的开发，完成客户端程序（也就是浏览器端）的开发，即在浏览器端将产品展现给用户。

与后端相比：前端客户端的环境不可预知、代码开源、数据无法隐藏，更关注页面性能和用户体验。

2.浏览器

IE、Chrome、Firefox、Safari、Opera、Edge、Netscape

3.协议

• HTTP/1.1：
  链接
  会话
  授权
  请求
  响应

• HTTP/2
  压缩
  打包
  服务器端推送

• WebSocket

4.W3C标准

W3C标准主要由结构标准（HTML/XHTML/XML) 表现标准（CSS）、和行为标准（javascript） 三大部分构成。

结构标准（HTML/XHTML/XML)是指标记语言，用于建立网页的骨架，是结构层；（房子的钢筋水泥，肉身）

CSS主要设置html的样式，包括位置、颜色等，是表现层；（房子的装修粉刷，皮肤）

JavaScript是编程语言，用于实现网页的功能，完成一些交互等，是行为层；（房门、空调，灵魂）

5.三大支柱

• HTML

  • DOM
  • 元件
  • 属性

• JavaScript

  • Prototype
  • Scope
  • Closure
  • JSON (JavaSript Object Notation)
  • AJAX (Asynchronous JavaScript and XML)

• CSS

  • Selector
  • Priority
  • Specificity
  • Box Model

6.渲染引擎

• Trident (IE)
• Blink / prev. WebKit (Chrome)
• Gecko (Firefox)
• WebKit (Safari)
• Blink / prev. Presto (Opera)
• EdgeHTML (Edge)

7.JavaScript引擎

• JScript (IE8- / ASP)
• Chakra (IE9+ / Edge)
• V8 (Chrome / Opera / Nodejs / MongoDB)
• SpiderMonkey (Firefox)
• JavaScriptCore (Safari)

8.编辑器

• Sublime Text
• WebStorm
• Vim
• Atom
• Emacs
• Brackets
• Light Table
• Visual Studio
• Visual Studio Code (Linux & Mac)

9.编译任务

• 精简
• 编译
• 合并
• 混淆
• 图像优化
• 单元测试

10.编译工具

• Grunt
• Gulp
• Brunch
• Yeoman
• Broccoli

11.包管理

• npm

• Bower

12.调试

• Developer Tools

• Firebug

13.质量控制

• JSLint
• JSHint
• jscs
• Closure Linter

14.测试工具

• QUnit
• Jasmine
• Mocha
• Selenium
• WebDriverIO
• Protractor
• Chai
• Sinon.JS
• Karma
• nodeunit
• tape
• nightmare

15.框架类/库

JS基础类库

• jQuery
• Prototype
• Zepto
• MooTool

JS类库

• AngularJS
• Backbone
• Knockout
• Ember
• React
• polymer
• Deft.js
• Vue
• Riot

模块化

• ES6 Module
• CommonJS
  
  • webpack
  • browserify
• AMD
  
  • RequireJS
• UMD

UI框架

• Bootstrap
• Semantic UI
• Foundation
• Material UI
• WinJS
• Pure
• Amaze UI

数据可视化

• D3
• Echarts
• HighCharts
• Vis.js
• Flot

流程控制

• ES6

  • Promise
  • Generator
• ES7
  
  • yield
  • await
• async
• co
• Promise
  
  • Bluebird
  • when.js

CSS3 动画

• Animate.css
• bounce.js
• Effeckt.css
• move.js

函数式编程

• bacon.js
• immutable.js
• ramda
• underscore.js
• lodash
• ReactiveX

手机 UI 框架

• jQuery Mobile
• Jo
• Dojo Mobile
• Lungo

16.CSS预处理器

• LESS

  • LESS
  • Hat

• Sass(SCSS)

  • Compass
  • Bourbon
  • Gumby

• Stylus

  • nib

17.模板引擎

• Handlebars
• Haml
• Slim
• Jade
• Ejs
• Spacebars
• mustache

18.统一化

• Normalize

• Reset

19.最佳实践

• SEO
• Responsiveness
• CDN

20.安全

• Sandbox
• XSS
• CORS

21.中间语言

• CoffeeScript
• TypeScript
• ClojureScript
• JSX (Facebook)

22.移动应用开发

• PhoneGap / Cordova
• MUI
• React Native
• Ionic

23.桌面应用开发

• Electron
• NW.js