|
总结下这两年前端需要的一下必备知识体系,一部分深入挖掘过总结了一下,有些还没来得及研究,也列出来了,分享一下~[转]
获取原图
博客原地址
一、框架与组件
 bootstrap等UI框架设计与实现
- 基础UI样式:元素reset、按钮、图片、菜单、表单
- 组件UI样式:按钮组、字体图标、下拉菜单、输入框组、导航组、面包屑、分页、标签、轮播、弹出框、列表、多媒体、警告
- 响应式布局:布局、结构、样式、媒体、javascript响应式
 jQuery、zepto使用原理以及插件开发
- $.fn.method = function(){}
 mvc/mvvm框架原理设计,vue/angular/avalon等
- directive设计:html、text、class、html、attr、repeat、ref,可扩展
- filter设计:bool、upperCase、lowerCase,可扩展
- viewmodel结构设计:例如数据,元素,方法的挂载与作用域
- 数据更变检测:函数触发,脏数据检测、对象hijacking
 polymer/angular2思想与设计思路
 reactjs原理与使用
 commonJS/AMD/CMD
- UMD解决不同规范兼容性的问题,例如webpack封装
 loadJs模块化加载原理与实现
 polyfill、shim原理与实现
- polyfill提供了开发者们希望浏览器原生提供支持的功能特性
- shim将新的API引入到旧的环境中,且仅靠旧环境中已有的手段实现
 virtual Dom、Incremental DOM
- 1.用js对象树表示dom树结构,根据该对象树构建dom树
- 2.状态改变时,重新构建对象,和旧的对象对比,记录两个对象树差异
- 小结:js对象模拟dom(elem.js),virtual dom diff算法(diff.js)、差异渲染dom(patch.js)
- incremental dom在状态改变时扫描旧对象树将差异直接应用到dom中
 shadow dom
 webwork与service Worker
 ES6转ES5、Babel与ES6开发规范体系
 Isomorphic JavaScript
- reactjs同构:React + Flux + Koa
 双向数据绑定
 browserify运行原理
- 5.包装每个模块(传入依赖字典以及export和require函数),生成执行的js
 performance timing
 组件UI与js组件规范化
 immutable JavaScript
 generator与promise原理与使用
二、构建生态
 grunt/gulp开发环境任务编写
- 文件处理插件:html、scss、js、image、font、其它
 npm、jspm、bower包管理工具
 r.js、browserify、webpack、webpack 2、Rollup打包工具使用
- webpack支持更多的规范打包,AMD,Commonjs
- webpack+babel/reactjs+reflux
 fis3构建与插件开发、构建环境、fis3构建离线包
 web Component:rosetta-org、x-view、Q、riot、nova
 brunch构建工具
三、开发技巧与调试
 fiddler加willow基础组合调试
 werien、vorlonjs远程调试,chrome inspect
 mockjs,F.M.S(Front Mock Server)模拟调试使用与cgi自动调试
 macha/phantomjs/casperjs/karma测试自动化任务使用
 自动化UI测试,海豚
 node-supervior、node-inspector、karma
 开发发布系统流程
 sublime高效插件
- emmet工具使用、 sublimelinter、 babel snippets、 sublimeLint、 SassBeautify 、 emmet 快速编辑、 jsxlint、 SideBarEnhancements、 SnippetsMaker、 SublimeCodeIntel、 css snippets、 ColorPicker、 html/css/js Pretty、 SpinnetMacker、 DocBlockr、 MultiEditUtils、 javascript & node spinnet、 JavaScript & NodeJS Snippets、 jsLint、cssLint
 代码自动化检查fecs
四、html、css与重构
 jpeg、webp、apng、bpg图片
 iconfont使用与实现原理
- fonthello、fontawesome、icomoon.io、iconfont.cn线上工具
 页面响应式设计
 css重置
 sass/compass/less/postcss常用语法与使用
 media query与常见页面尺寸了解
 em,rem原理与实现
- rem计算:width*retina/10,相当于屏幕宽度为10rem
 code4ui、code4app、初页、maka等
- 根据config配置使用r.js或webpack打包
 css3动画
- 缓动函数速查表: http://www.xuanfengge.com/easeing/easeing/
- Ceaser: http://xuanfengge.com/easeing/ceaser/
- cubic-bezier:http://cubic-bezier.com/
 css网格布局
 搜索引擎与前端SEO
 浏览器缓存种类,resources,webSQL,indexDB, localstorage,cookie,app cache,cache storage
 UI框架
- bootstrap、jqwidgets、semantic ui、amaze ui
- 微信手Q ui: frozenui、weui、blend ui
五、native/hybrid/桌面开发
 ionic移动开发方案
 nativescript移动开发方案
 react Native移动开发方案
 android/ios原生开发与框架
 桌面应用开发
六、前端/H5优化(另一个图已给出)
 yslow、pagespeed
 移动web性能优化
七、全栈/全端开发
 express/node club + mongodb、thinkjs等框架
 node.js直出
 实时web开发,meteor/express.io
 MEAN(mongodb/express/angular/nodejs)
 http与http2协议、bigpipe、pipeline
 离线缓存,cookie、localstorage、indexdb
 cdn与dns
八、研究实验
 WebAssembly、webTRC、typescript
 Material design规范的前端框架
 AMP-HTML规范
- 使用受限HTML以及缓存技术来提高移动网络中静态内容的性能
- 添加自定义的元素代替禁用掉的元素:amp-audio, amp-img、amp-video等
九、数据分析与监控
 badjs数据上报
- 捕获错误两种方法:onerror、try-catch。抽样上报,先onerror统计语法错误,如果是script error,再使用tryjs。
- onerror:可以捕捉语法错误和运行时错误;可以拿到出错的信息,堆栈,出错文件、行号、列号;当前页面执行的js脚本出错都会捕捉到;跨域的资源需要特殊头部支持。
- try-catch:无法捕捉语法错误,只能捕捉运行时错误;可以拿到出错的信息,堆栈,出错文件、行号、列号;需要借助工具把function块以及文件块加入try,catch,可以在这个阶段打入更多的静态信息。
 点击热力图clickHeat、heatMap
 js加载失败优化方案
 百度alog数据上报
十、其它软技能
 axure 原型图设计
 xmind脑图管理
 效率管理
 can i use、github
 知识管理/总结分享
 产品思维与技能
十一、前端技术网站
 技术社区
- w3c tech、w3c plus、w3 help
 行业会议
|
|
|