Question

在安博学HTML5，有哪些知识模块？有没有知道的？

Answer 1

2015-2016前端知识体系

总结了下前端这两年的主流技术，大部分技术在我的博客里有较深入的研究学习，对应技 ，博客持续更新中，欢迎大家关注~

一、框架与组件

bootstrap等UI框架设计与实现

• 伸缩布局：grid网格布局

• 基础UI样式：元素reset、按钮、图片、菜单、表单

• 组件UI样式：按钮组、字体图标、下拉菜单、输入框组、导航组、面包屑、分页、标签、轮播、弹出框、列表、多媒体、警告

• 响应式布局：布局、结构、样式、媒体、javascript响应式

• 第三方插件：插件管理

jQuery、zepto使用原理以及插件开发

• 支持amd、cmd、全局变量的模块化封装

• $.fn.method = function(){}

mvc/mvvm框架原理设计，vue/angular/avalon等

• directive设计：html、text、class、html、attr、repeat、ref，可扩展

• filter设计：bool、upperCase、lowerCase，可扩展

• 表达式设计：if-else等实现

• viewmodel结构设计：例如数据，元素，方法的挂载与作用域

• 数据更变检测：函数触发，脏数据检测、对象hijacking

polymer/angular2思想与设计思路

• import技术

• template和script引入方式

• css样式命名空间隔离

• 简单复用第三方库

reactjs原理与使用

• virtual dom单向数据绑定

• js执行语法方式

• UI由状态控制

commonJS/AMD/CMD

• 模块引入

• 模块定义

• 模块标识

• UMD解决不同规范兼容性的问题，例如webpack封装

• 模块懒执行(CMD)与与预执行(AMD)

loadJs模块化加载原理与实现

• 创建script标签，需要id映射到资源url

• onload加载模块队列判断

• 全部加载完成后触发

• 加载失败问题优化

• requirejs、modjs、seajs

polyfill、shim原理与实现

• polyfill提供了开发者们希望浏览器原生提供支持的功能特性

• shim将新的API引入到旧的环境中,且仅靠旧环境中已有的手段实现

virtual Dom、Incremental DOM

• 1.用js对象树表示dom树结构，根据该对象树构建dom树

• 2.状态改变时，重新构建对象，和旧的对象对比，记录两个对象树差异

• 3.将对象树差异应用到dom中

• 小结:js对象模拟dom(elem.js)，virtual dom diff算法(diff.js)、差异渲染dom(patch.js)

• incremental dom在状态改变时扫描旧对象树将差异直接应用到dom中

shadow dom

• 隔离外部环境用于封装组件：结构、样式、行为

• 实现形式：新标签、class类属性 + 构建编译

webwork与service Worker

• webwork与主线程机制，on/post

• serviceworker可作为浏览器请求代理

• 应用场景




• 
  

Answer 2

2015-2016前端知识体系

总结了下前端这两年的主流技术，大部分技术在我的博客里有较深入的研究学习，对应技，博客持续更新中，欢迎大家关注~

一、框架与组件

bootstrap等UI框架设计与实现

• 伸缩布局：grid网格布局

• 基础UI样式：元素reset、按钮、图片、菜单、表单

• 组件UI样式：按钮组、字体图标、下拉菜单、输入框组、导航组、面包屑、分页、标签、轮播、弹出框、列表、多媒体、警告

• 响应式布局：布局、结构、样式、媒体、javascript响应式

• 第三方插件：插件管理

jQuery、zepto使用原理以及插件开发

• 支持amd、cmd、全局变量的模块化封装

• $.fn.method = function(){}

mvc/mvvm框架原理设计，vue/angular/avalon等

• directive设计：html、text、class、html、attr、repeat、ref，可扩展

• filter设计：bool、upperCase、lowerCase，可扩展

• 表达式设计：if-else等实现

• viewmodel结构设计：例如数据，元素，方法的挂载与作用域

• 数据更变检测：函数触发，脏数据检测、对象hijacking

polymer/angular2思想与设计思路

• import技术

• template和script引入方式

• css样式命名空间隔离

• 简单复用第三方库

reactjs原理与使用

• virtual dom单向数据绑定

• js执行语法方式

• UI由状态控制

commonJS/AMD/CMD

• 模块引入

• 模块定义

• 模块标识

• UMD解决不同规范兼容性的问题，例如webpack封装

• 模块懒执行(CMD)与与预执行(AMD)

loadJs模块化加载原理与实现

• 创建script标签，需要id映射到资源url

• onload加载模块队列判断

• 全部加载完成后触发

• 加载失败问题优化

• requirejs、modjs、seajs

polyfill、shim原理与实现

• polyfill提供了开发者们希望浏览器原生提供支持的功能特性

• shim将新的API引入到旧的环境中,且仅靠旧环境中已有的手段实现

virtual Dom、Incremental DOM

• 1.用js对象树表示dom树结构，根据该对象树构建dom树

• 2.状态改变时，重新构建对象，和旧的对象对比，记录两个对象树差异

• 3.将对象树差异应用到dom中

• 小结:js对象模拟dom(elem.js)，virtual dom diff算法(diff.js)、差异渲染dom(patch.js)

• incremental dom在状态改变时扫描旧对象树将差异直接应用到dom中

shadow dom

• 隔离外部环境用于封装组件：结构、样式、行为

• 实现形式：新标签、class类属性 + 构建编译

webwork与service Worker

• webwork与主线程机制，on/post

• serviceworker可作为浏览器请求代理

• 应用场景

ES6转ES5、Babel与ES6开发规范体系

• ES6编码规范全

• ES6在babel下兼容性

• ES6在node下兼容性与性能

• ES6新特性：看编码规范

• aurelia ES6前端框架

Isomorphic JavaScript

• 同构原理

• 同构方案 Rendr

• nodejs: 服务器

• hapi: 应用服务

• backbone.js: 后台mvc

• requirejs: 模块加载

• jquery: dom处理

• reactjs同构:React + Flux + Koa

双向数据绑定

• 函数触发:vuejs

• 脏数据检测:angular

• 对象hijacking:avalon

browserify运行原理

• 1.从入口模块开始分析require函数调用

• 2.根据依赖生成AST

• 3.根据AST找到每个模块的模块名

• 4.得到每个模块的依赖关系，生成一个依赖字典

• 5.包装每个模块（传入依赖字典以及export和require函数），生成执行的js

performance timing

• performance timing api

• performance timing 过程

• performance timing 性能计算

• performanceTrace库

组件UI与js组件规范化

• 组件编码规范

• 组件目录规范：组件目录与公用目录

• 组件构建规范：构建环境支持

• 组件模块化管理：spm，bowserify

• 组件复用性管理

• 第三方组件接入成本

immutable JavaScript

generator与promise原理与使用