生命不息,折腾不止!

Viva La Vida

前端技能树

原帖知乎,回答有很多 ,阿里云的这个回复很长 摘入下

作者:阿里云云栖社区
链接:https://www.zhihu.com/question/19588629/answer/152951340
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

核心 CoreHTML5W3C http://www.w3school.com.cn/html5/
W3C https://www.w3.org/html/ig/zh/wiki/HTML5
菜鸟教程 http://www.runoob.com/html/html5-intro.html
HTML5中文门户 http://www.html5cn.org/CSS3W3C CSS教程 http://www.w3school.com.cn/css/index.asp
W3C CSS3教程 http://www.w3school.com.cn/css3/index.asp
菜鸟教程CSS教程 http://www.runoob.com/css/css-tutorial.html
菜鸟教程CSS3教程 http://www.runoob.com/css3/css3-tutorial.html
CSS参考手册 http://css.doyoe.com/JSW3C http://www.w3school.com.cn/js/
菜鸟教程 http://www.runoob.com/js/js-tutorial.html
廖雪峰js教程 http://www.liaoxuefeng.com
js标准参考教程-阮一峰http://javascript.ruanyifeng.com/jQueryW3C http://www.w3school.com.cn/jquery/
菜鸟教程 http://www.runoob.com/jquery/jquery-tutorial.html
极客学院 http://wiki.jikexueyuan.com/project/jquery-tutorial/
廖雪峰 http://www.liaoxuefeng.com/wiki/
参考手册 http://www.css88.com/jqapi-1.9/
参考手册 http://www.runoob.com/manual/jquery/ES6阮一峰ES6 http://es6.ruanyifeng.com/
极客学院 http://wiki.jikexueyuan.com/project/es6/
JavaScript 标准参考 阮一峰http://javascript.ruanyifeng.com/advanced/ecmascript6.html插件parallel.js: 前后端通用的一个并行库
zepto: 用于现代浏览器的兼容 jQuery 的库
totoro: 稳定的跨浏览器测试工具
TheaterJS: 一个用于模拟人输入状态的 JS 库
stellar.js: 前端用于实现异步滚动效果的库,现已不再维护
skrollr: 另一款实现一步滚动的开源库,使用人数众多,可实现各种狂拽酷炫掉渣天的前端效果,看真相
Framework7: 前端框架,是开发人员可以基于 web 技术构建 IOS7 程序
regulex: 用于生成 正则表达式 的可视化流程图
markdown-it: 新型 Markdown 解析器,快速,支持插件
multiline: 用于 Javascript 中的多行文本,类似于 Ruby 的 HERE Doc
screenfull.js: 全屏插件,支持各大浏览器
lunr.js: 类似于 Solr, 但是用于浏览器上的全文搜索引擎,可以为 JSON 创建索引,离线也可以使用
jquery.hotkeys: jQuery 插件,用于绑定热键
breach_core: Javascript 编写的 Browser (浏览器)
octocard: 用于生成 Github 信息卡片的库
github-cards: 用于生成 Github 信息卡片的库
money.js: 轻量级货币转换库,web 和 node 皆可用
accounting.js: 轻量级的数字、货币转换库
javascript-algorithms: Javascript 实现的各种算法集合
lazy.js: 类似于 underscore, 但是会延迟执行,某些场景下,性能会有很大的提升
seajs: 前端模块加载器,解决模块化、依赖等问题
jQuery-One-Page-Nav: 单页应用中一个用于处理导航栏的库
js.js: Javascript 实现的 javascript JIT
jquery-ui: jQuery 团队开发的 UI 相关的前端库,功能强大
todomvc: 分别基于 AngularJS/EmberJS/Backbone等实现的 TODO List, 帮助开发者选择前端 MVC 库
localForage: Mozilla 出品,用于离线存储,基于IndexedDB, WebSQL 或者 localStorage, 提供一致的接口
EventEmitter: 浏览器版的 EventEmitter
jquery.serializeJSON: jQuery 插件,用于将 form 表单序列化成 JSON 数据
knockout: 前端 MVVM 框架,用于开发富前端应用
mermaid: 可以根据文本生成流程图,类似于 Markdown 的语法
js-sequence-diagrams: 另一款可以根据文本生成流程图的库,类似于 Markdown 的语法
flow: 一个用来检测 Javascript 语法错误的库, Facebook 出品
zoomooz: jQuery 插件,用来处理浏览器缩放
fancyBox: 一个用于放大缩小图片、Web 内容或者多媒体元素的库,优雅大方
mithril.js: 轻量型前端 MVC 框架,部分使用场景下性能优于 Angular.js 和 React
backbone: 强大的前端 MVC 库,鼻祖级前端库,最初为了配合 Rails 来模块化前端应用,兼容性良好 (兼容到 IE6),插件丰富,性能良好
jquery.smartbanner: smartbanner 是从 IOS6 开始支持的一个新特性, 这个插件提供了对早期 IOS4/5 和 Android 的支持
jquery.scrollTo: 在页面上以一个元素为起始以动画的方式移动(ScrollTo)到另一个元素, 支持回退等
jScrollPane: 自定义的滚动条,让所有浏览器都显示一样的滚动条
onepage-scroll: 提供类似于 iPhone6 展示页类似的效果,适用于单页应用,兼容到 IE8
scrollMonitor: 前端插件用来监控元素的滚动事件(进入、退出等),性能很好
ScrollMagic: 神奇的滚动交互效果插件,可以在滚动的过程中设置各种各样的动态效果
infinite-scroll: 滚动加载,滚动到最下到自动加载, Paul Irish 大神之作
animatable: 仅仅依靠 border-width 和 background-position 实现的各种动态效果,看真相
Fluidbox: 页面上内嵌图片的放大缩小效果,类似于 Medium 中的效果
jquery-validation: jQuery 的一个插件,用于校验 Form 表单
BigVideo.js: jQuery 的一个插件, 用于实现大背景(视频、图片)效果
emscripten: 一款基于 LLVM, 可以将 C/C++ 转换成 Javascript 的工具,使得 Javascript 可以近乎 Native 的速度
qrcode-generator: 各种语言的二维码生成工具
device.js: 一个可以检测设备类型的工具,可以让我们根据不同的设备来为其定制响应的 Javascript 和 CSS
jquery-qrcode: jQuery 插件,用来生成二维码
Wookmark-jQuery: jQuery 的一个插件,可以用来实现瀑布流的效果
isotope: 可以用来过滤、排列布局,实现美观的动态布局切换效果,Demo
lazysizes: 功能强大的图片延迟加载工具,可以首先加载一个低质量的图片,然后再加载高质量的图片
progressbar.js: 简洁美观的进度条,扁平化
pigshell: 一个由 Javascript 实现的Shell, 将互联网当做一个大的文件系统, 通过 cd/ls/cat…..等命令, 可以访问 Facebook/Twitter/Google Drive 等网络服务
spectrum: Js实现的颜色选择器 (Colorpicker)
jQuery.countdown: jQuery 倒计时插件
summernote: WYSIWYG 富文本编辑器
awesomplete: 非常轻型的一个自动补全 JS 库, 没有任何依赖, 配置简单, 美观
switchery: IOS 7 上 Switch 的 JS 实现, 支持 IE8 及以上浏览器
trix: Basecamp 公司出品的富文本编辑器,简洁小巧
sensor.js: 在智能移动设备浏览器上,通过HTML5的api使用移动设备的功能。定位、运动、倾斜等
hyhyhy: 用于创建 基于 HTML5 的 演示文稿
swipebox: jQuery 插件,用于处理移动端的触摸事件
FileAPI: 前端用户处理文件(拖放、多文件上传等)
Sortable: 现代浏览器上用于实现元素拖拽排序的功能,支持 Meteor, AngularJS, React,不依赖 jQuery
Swiper: 用于实现浏览器上的滑动切换效果,支持硬件加速
matter-js: 2D 物理效果引擎,碰撞、弹跳等
jQTouch: 用于辅助创建手机端的 Web 应用,支持主题、Zepto.js 等
snabbt.js: 一个利用 Javascript 和 CSS transform 的 animation 库
c3: 基于 D3 的图表库
echarts: 企业级图表库,百度开发
parallax.js: 一个用于响应智能手机 orientation 的库
jQuery-Animate-Enhanced: jQuery 动画库的一个增强,用于现代浏览器
wysihtml: 富文本编辑器,适用于现代浏览器
slip: 一个通过滑动或者拖拽来操控列表的库
evil-icons: 一个矢量图库,提供 Ruby/Node 等支持
PhotoSwipe: JS 的一个图片展示库
focusable: 是页面上一个元素高亮的库,有图有真相
firefox.html: Firefox 在浏览器端的实现 —— HTML 版的 Firefox
jquery-mobile: jQuery 团队开发的用于辅助手机端 web app 开发的库,基于 HTML5
mobile-angular-ui: 基于angularjs和bootstarp的web app开发框架
interact.js: 一个适用于现代浏览器的,用于处理 手势、拖放、缩放等的库
rebound-js: 实现部分物理效果,Facebook 出品
basket.js: 基于 LocalStorage 的资源加载器,可以用来缓存 script 和 css, 手机端使用速度快于浏览器直接缓存
iscroll: 高性能的滚动(scroll)处理库,功能强大,支持各种事件,不依赖任何的库,且插件丰富, 大众点评的手机端列表滚动就是用这个库处理的
metrics-graphics: 基于 D3 的图表库,简洁、高效,Mozilla 出品
accessible-html5-video-player: Paypal 出品的 Video 播放器
loading: 几种 Loading 效果,基于 SVG
flippant.js: 一款能够漂亮的网页元素翻转效果库,代码许久不更新,不过作为源码学习还是不错的
move.js: 基于 CSS3 的前端动画框架
scrollReveal.js: 使元素以非常酷帅的方式进入画布 (Viewpoint),看 Demo
Modernizr: 一个用来检测 HTML5 和 CSS3 支持情况的库
foundation: 另一款前端模版框架,类似于 Bootstrap
Flat-UI: Bootstrap 的一款主题,简洁美观
iCheck: 一款漂亮的 Checkbox 插件
Swipe: 非常轻量级的一个图片滑动切换效果库, 性能良好, 尤其是对手机的支持, 压缩后的大小约 5kb
slick: 功能异常强大的一个图片滑动切换效果库
SocialButtons: 漂亮的社交按钮
sweetalert: 一个非常美观的用于替换浏览器默认 alert 的库
web-animations-js: Javascript 实现的 Web Animation API
vivus: 可以动态描绘 SVG 的 JS 库, 支持多种动画
plyr: 轻量, 小巧, 美观的 HTML5 视频播放器
timesheet.js: 基于 HTML5 & CSS3 时间表
slideout: 一个非常美观的侧滑菜单包管理工具 Package ManagersNPM菜鸟教程NPM 使用介绍 http://www.runoob.com/nodejs/nodejs-npm.html
淘宝 NPM 镜像 https://npm.taobao.org/
npm 模块安装机制简介 http://www.ruanyifeng.com/blog/2016/01/npm-install.html
npm包搜索地址 https://www.npmjs.com/BowerBower中文网 http://www.bowercn.com/
Bower:客户端库管理工具-阮一峰 http://javascript.ruanyifeng.com/tool/bower.htmlYarnyarn中文网 https://yarnpkg.com/zh-Hans/快速、可靠、安全的依赖管理
YARN 简介 https://www.ibm.com/developerworks/cn/data/library/bd-yarn-intro/编辑器 Text EditorsWebStorm官网下载 http://www.jetbrains.com/webstorm/downloadVScode官网下载 https://code.visualstudio.com/
vscode 插件精选 – 献给所有前端工程师https://segmentfault.com/a/1190000006697219SublimeText官网下载 https://www.sublimetext.com/
SublimeCodeIntel: Sublime Text 的代码补全工具,支持多种语言
Emmet:一个用于提高开发效率的编辑器插件,前身是Zen coding
SublimeLinter: 一个提供代码质量检测的插件
SublimeTmpl:快速新建指定的模版文件
Syntax-highlighting-for-Sass:sass代码高亮插件
MarkdownEditing: Sublime Text 强大的 Markdown 扩展, 提供快捷键, 主题等
ApplySyntax: 辅助检测语法插件
CTags: Sublime Text Ctags 支持插件, 需要安装 ctags
sublime-react: React 代码高亮Atom官网下载 https://atom.io/HBuilder官网下载 http://www.dcloud.io/JS框架 JS FrameworksBackboneBackbone.js API中文文档http://www.css88.com/doc/backbone/AngularJs中文官方文档https://angular.cn/
angularjs中文网http://www.apjs.net/
angularjs教程http://www.angularjs.net.cn/
Angular 基础入门http://www.cnblogs.com/micua/p/angular-essential.html
angular-masonry: Masonry 的 AngularJS 插件,用于瀑布流
angular-schema-form: 根据 JSON 生成响应的 Form 表单
restangular: Angular 中用来处理 RESTful API 的插件,可替代 $resource
ng-cordova: Cordova 常用组件的 Angular 版本
angular-translate: Angular 的国际化 (I18n)
ng-inspector: Chrome 插件,用于调试 Angular
angularjs-style-guide: AngularJS 代码风格
ngReact: React 的 Angular 插件,可以在 Angular 中使用 React Components
material: Google Material Design 效果的 Angular 实现
angular-local-storage: Angular 插件, 提供了对 localStorage 的友好支持, 并对不支持的浏览器使用 cookie 优雅降级
angular-filter: 一组有用的 Angular Filters
bindonce: Angular 插件, 用于减少 Watcher 的数量, 提升性能React英文官方文档https://facebook.github.io/react/docs/hello-world.html
中文官方文档http://reactjs.cn/react/docs/getting-started-zh-CN.html
gitbooks手册https://hulufei.gitbooks.io/react-tutorial/content/introduction.html
阮一峰react入门http://www.ruanyifeng.com/blog/2015/03/react.html
阮一峰React Router入门http://www.ruanyifeng.com/blog/2016/05/react_router.html
React Router 中文文档https://react-guide.github.io/react-router-cn/
react-redux 中文文档http://cn.redux.js.org/docs/react-redux/index.html
阮一峰Redux 入门教程http://www.ruanyifeng.com/blog react: React 框架源代码
react-native: Facebook 出品的使用 React 开发 IOS 原生应用的框架
react-hot-loader: 实时调整 React 组件效果
grunt-react: React 的 Grunt 组件, 用于将 JSX 编译成 JS
touchstonejs: 基于 React 的手机应用前端框架
essential-react: 基于 React, ES6, React-Router的一个应用脚手架
react-router: React 路由解决方案Vuevue官方http://cn.vuejs.org/
vuex官方http://vuex.vuejs.org/zh-cn/
vue-router官方https://router.vuejs.org/zh-cn/UI框架 UI FrameworksBootstrap最受欢迎的 HTML、CSS 和 JS 框架 http://v3.bootcss.com/Ionic一款接近原生的Html5移动App开发框架 会html css js就可以开发apphttp://www.ionic.wang/FoundationFoundation 中文网 迄今为止最好的响应式前端框架http://www.foundcss.comFrozenUI移动端服务的前端框架http://frozenui.github.io/materializecss基于Material Design的主流前端响应式框架http://www.materializecss.cn/mui最接近原生APP体验的高性能前端框架http://dev.dcloud.net.cn/mui/AntDesign和react配合的UI框架https://ant.designeleme和vue配合的UI框架http://element.eleme.io/JS预处理 JS PreprocessorsTypeScriptTypeScript 入门教程 菜鸟教程http://www.runoob.com/
TypeScript中文网https://www.tslang.cn/
TypeScript教程gitbookhttps://www.gitbook.com/CoffeeScriptCoffeeScript 中文http://coffee-script.org/
CoffeeScript 实用手册 极客学院http://wiki.jikexueyuan.com/project/coffeescript/过程自动化 Process AutomationGruntGrunt中文网http://www.gruntjs.net/Gulpgulp.js 中文网http://www.gulpjs.com.cn/
gulp详细入门教程http://www.ydcss.com/
前端构建工具gulpjs的使用介绍及技巧http://www.cnblogs.com/2050/p/4198792.html
Gulp开发教程https://www.w3ctech.com/topic/134模板引擎 TemplatingHandlebarshandlebarsjs官网http://handlebarsjs.com/
Handlebars中文文档http://www.360doc.com/content/
Handlebars.js 中文文档http://keenwon.com/992.html
Handlebars的使用方法文档整理http://www.tuicool.com/articles/fqQFN3Hamlhaml官方文档https://github.com/haml/haml
haml入门http://blog.csdn.net/napoay/article/details/50491363JadeJade 官方的英文文档http://www.w3cplus.com/html/how-to-use-jade.html
Jade的使用http://www.w3cplus.com/html/how-to-use-jade.html
带你学习Jade模板引擎视频http://www.imooc.com/learn/259构建工具 Build ToolsRequireJSRequireJS 英文网http://requirejs.org/
RequireJS 中文网http://requirejs.cn/
require.js的用法-阮一峰http://www.ruanyifeng.com/blogseajsseajs文档http://seajs.org/docs/
SeaJS从入门到原理http://www.tuicool.com/articles/FfEJv2uBrowserify官网http://browserify.org/
githubhttps://github.com/substack/node-browserify/WebpackWebpack 中文指南http://webpackdoc.com/
webpack的实例http://www.vichily.com
webpack的入门http://www.vichily.com
一小时包教会 —— webpack 入门指南http://www.w2bc.com/Article/50764CSS预处理器 CSS PreprocessorsSasssass入门http://www.w3cplus.com/sassguide/
sass参考手册http://sass.bootcss.com/docs/sass-reference/
SASS用法指南-阮一峰http://www.ruanyifeng.com/blog/Lessless中文网http://lesscss.cn/
less快速入门http://less.bootcss.com/stylusstylus中文文档-张鑫旭http://www.zhangxinxu.com/jq/stylus/

作者:知乎用户
链接:https://www.zhihu.com/question/19588629/answer/17543292
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

由我整理的面试题中抽取的部分片段,完整版请看:Front-end-Developer-Questions markyun/My-blog · GitHub前端开发工程师应该具备的基础知识体系大纲:HTML&CSS:对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:布局、盒子模型、选择器优先级及使用、document flow(文档流)、清除浮动,hasLayout 和 块格式化上下文 (block-formattin contexts) 、reflow&repaint、硬件加速、HTML5(离线 & 存储,多媒体,Web Sockets ,Web Workers,History API2D/3D 绘图)、CSS3、Flexbox、CSS预编译、动画、响应式布局、移动端开发JavaScript:数据类型、面向对象、数组、DOM、BOM、Function、继承、闭包、内置对象、作用域、跨域、原型链、、JSON、XMLHttpRequest、 RegExp、模块化、内存泄漏、事件机制、异步装载回调、模板引擎、前端MVC、NodeJS、JSON、ajax、框架、算法等其他(前端工程化\代码规范\预编译\前端框架\安全\优化\重构):HTTP、 ES6、 ES7、React、 VUE、Angular、Backbone、Underscore、Flux、Web Component、handlebars、Gulp/Grunt、Git、CDN、WEB安全、性能优化、项目重构、团队协作、SEO、UED、技术架构、快速学习能力前端可深入的领域(来源玉伯):前后端分离、前端工程化、前端质量体系、前端工具与生态圈、数据可视化、下一代类库框架、前端服务化、前端安全、设计工业化、跨平台解决方案。作为一名前端工程师,无论工作年头长短都应该必须掌握的知识点:此条由 王子墨 发表在 攻城师的实验室 1、DOM结构 —— 两个节点之间可能存在哪些关系以及如何在节点之间任意移动。

2、DOM操作 ——如何添加、移除、移动、复制、创建和查找节点等。

3、事件 —— 如何使用事件,以及IE和标准DOM事件模型之间存在的差别。

4、XMLHttpRequest —— 这是什么、怎样完整地执行一次GET请求、怎样检测错误。

5、严格模式与混杂模式 —— 如何触发这两种模式,区分它们有何意义。

6、盒模型 —— 外边距、内边距和边框之间的关系,及IE8以下版本的浏览器中的盒模型

7、块级元素与行内元素 —— 怎么用CSS控制它们、以及如何合理的使用它们

8、浮动元素 ——怎么使用它们、它们有什么问题以及怎么解决这些问题。

9、HTML与XHTML ——二者有什么区别,你觉得应该使用哪一个并说出理由。

10、JSON —— 作用、用途、设计结构。




    作者:知乎用户

链接:https://www.zhihu.com/question/19588629/answer/17543292
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

由我整理的面试题中抽取的部分片段,完整版请看:Front-end-Developer-Questions markyun/My-blog · GitHub前端开发工程师应该具备的基础知识体系大纲:HTML&CSS:对Web标准的理解、浏览器内核差异、兼容性、hack、CSS基本功:布局、盒子模型、选择器优先级及使用、document flow(文档流)、清除浮动,hasLayout 和 块格式化上下文 (block-formattin contexts) 、reflow&repaint、硬件加速、HTML5(离线 & 存储,多媒体,Web Sockets ,Web Workers,History API2D/3D 绘图)、CSS3、Flexbox、CSS预编译、动画、响应式布局、移动端开发JavaScript:数据类型、面向对象、数组、DOM、BOM、Function、继承、闭包、内置对象、作用域、跨域、原型链、、JSON、XMLHttpRequest、 RegExp、模块化、内存泄漏、事件机制、异步装载回调、模板引擎、前端MVC、NodeJS、JSON、ajax、框架、算法等其他(前端工程化\代码规范\预编译\前端框架\安全\优化\重构):HTTP、 ES6、 ES7、React、 VUE、Angular、Backbone、Underscore、Flux、Web Component、handlebars、Gulp/Grunt、Git、CDN、WEB安全、性能优化、项目重构、团队协作、SEO、UED、技术架构、快速学习能力前端可深入的领域(来源玉伯):前后端分离、前端工程化、前端质量体系、前端工具与生态圈、数据可视化、下一代类库框架、前端服务化、前端安全、设计工业化、跨平台解决方案。作为一名前端工程师,无论工作年头长短都应该必须掌握的知识点:此条由 王子墨 发表在 攻城师的实验室 1、DOM结构 —— 两个节点之间可能存在哪些关系以及如何在节点之间任意移动。

2、DOM操作 ——如何添加、移除、移动、复制、创建和查找节点等。

3、事件 —— 如何使用事件,以及IE和标准DOM事件模型之间存在的差别。

4、XMLHttpRequest —— 这是什么、怎样完整地执行一次GET请求、怎样检测错误。

5、严格模式与混杂模式 —— 如何触发这两种模式,区分它们有何意义。

6、盒模型 —— 外边距、内边距和边框之间的关系,及IE8以下版本的浏览器中的盒模型

7、块级元素与行内元素 —— 怎么用CSS控制它们、以及如何合理的使用它们

8、浮动元素 ——怎么使用它们、它们有什么问题以及怎么解决这些问题。

9、HTML与XHTML ——二者有什么区别,你觉得应该使用哪一个并说出理由。

10、JSON —— 作用、用途、设计结构。



    作者:phodal

链接:前端技能路线详解:真正的从入门到放弃 – Phodal – 手工艺人 – 知乎专栏
来源:知乎
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

在完整APP的迁移之后,终于可以好好写这些内容了。第一篇就是对之前的《前端技能图谱》进行一些细致的解释。当然这些是个人的经验,所以可存在一些区别,不过总的来说还是差不多的。

入门

在我理解下的基础知识,就是我们可以写一些基本的样式,并能对页面的元素进行操作。举例来说,就是我们用Spring和JSP写了一个博客,然后我们可以用jQuery来对页面进行一些简单的操作,并可以调用一些API。因此,我们需要基本的HTML / CSS知识。只是要写好CSS并不是一件简单的事,这需要很多实战经验。随后,我们还需要有JavaScript的经验,要不怎么做前端呢?

同时,我们还需要对DOM有一些基础的了解,才能做一些基本的操作,如修改颜色等等。在这种情况下,最简单的方案就是使用jQuery这样的工具。不过,如果可以自己操作DOM是再好不过的了。

中级篇

中级篇就更有意思了,现在我们就需要对页面进行更复杂的操作。Ajax和JSON这两个技能是必须的,当我们要动态的改变页面的元素时,我们就需要从远程获取最新的数据结果。并且我们也需要提交表单到服务器,RESTful就是必须要学会的技能。未来我们还需要Fetch API,ReactiveX这些技能。

除此我们还需要掌握好HTML的语义化,像DIV / CSS这也会必须会的技能,我们应该还会使用模板引擎和SCSS / SASS。而这个层面来说,我们开始使用Node.js来完成前端的构建等等的一系列动作,这时候必须学会使用命令行这类工具。并且,在这时候我们已经开始构建单页面应用了。

高级篇

JavaScript是一门易上手的语言,也充满了相当多的糟粕的用法。几年前人们使用CoffeeScript编成成JavaScript来编写更好的前端代码,现在人们有了ES6、TypeScript和WebPack来做这些事。尽管现在浏览器支持不完善,但是他们是未来。同样的还有某些CSS3的特性,其对于某些浏览器来说也是不支持的。而这些都是基于语言本来说的,要写好代码,我们还需要掌握面向对象编程、函数式编程、MVC / MVVM / MV*这些概念。作为一合格的工程师,我们还需要把握好安全性(如跨域),做好 授权(如HTTP Basic、JWT等等)。

工程化

这个标题好像是放错了,这部分的内容主要都是自动构建的内容。首先,我们需要有基本的构建工具,无论你是使用gulp、grunt,还是只使用npm,这都不重要。重要的是,你可以自动化的完成构建的工具,编译、静态代码分析(JSLint、CSS Lint、TSLint)、对代码质量进行分析(如Code Climate,可以帮你检测出代码中的Bad Smell)、运行代码中的测试,并生成测试覆盖率的报告等等。这一切都需要你有一个自动构建的工作流。

兼容性

虽然我们离兼容IE6的时代已越来越远了,但是我们仍然有相当多的兼容性工作要做。基本的兼容性测试就是跨浏览器的测试,即Chrome,IE,Firefox,Safari等等。除此还有在不同的操作系统上对同一浏览器的测试,某些情况下可能表现不一致。如不同操作系统的字体大小,可能会导致一些细微的问题。

而随着移动设备的流行,我们还需要考虑下不同Android版本下的浏览器内核的表现不致,有时候还要一下不成器的Windows Phone。除此,还有同一个浏览器的不同版本问题,常见于IE。。

前端特定

除了正常的编码之外,前端还有一些比较有意思的东西,如CSS3和JavaScript动画。使用Web字体,可惜这个不太适合汉字使用。还有Icon字体,毕竟这种字体是矢量的。不过Icon字体还有一些问题,如浏览器对其的抗锯齿优化,还有一个痛是你得准备四种不同类型的字体文件。因此,产生了一种东西SVG Sprite,在以前这就是CSS Sprite,只是CSS Sprite不能缩放。最后,我们还需要掌握一些基本的图形和图表框架的使用。

软件工程

这一点上和大部分语言的项目一样,我们需要使用版本管理软件,如git、svn,又或者是一些内部的工具。总之你肯定要有一个,而不是 2016.07.31.zip这种文件。然后,你还需要一些依赖管理工具,对于那些使用Webpack、Browserify来将代码编写成前端代码的项目来说,npm还是挺好用的。不过就个人来说,对于传统的项目来说我总觉得bower有些难用。我们还需要模块化我们的源码文件,才能使其他人更容易开始项目。

调试

作为一个工程师来说,调试是必备的技能。大部分浏览器都自带有调试工具,他们都不错——如果你使用过的话。在调试的过程中,直接用Console就可以输出值、计算值等等。如果你的项目在构建的过程中有一些问题,你就需要debugger这一行代码了。

在一些调用远程API的项目里,我们还需要一些更复杂的工具,即抓包工具。在调试移动设备时,像Wireshark、Charles这一类的工具,就可以让我们看到是否有一些异常的请求。当然在这个时候,还有一个不错的工具就是像Chrome自带的远程设备调试。对于移动网站来说,还要有Responsive视图。

测试

我遇到的很多前端工程师都是不写测试的,于是我便把它单独地抽了出现。对于一个前端项目来说,正常情况下,我们要有单元测试、功能测试,还有要一些UI测试来验证页面间是否可以跳转。对于依赖于第三方服务的应用来说,还要有一个Mock的服务来方便我们测试。如果是前后端分离的项目,我们还需要有集成测试。

性能与优化

要对Web应用进行性能优化,可能不是一件容易的事,有时候我们还知道哪些地方可以优化。这时候人们就可以使用Yahoo的YSlow,或者我最喜欢的Google PageSpeed来检测页面的一些问题,如有没有开启GZip、有没有压缩、合并、Minify JS代码等等。

我们还应该借助于NetWork这一类的工具,查看页面加载时,一些比较漫的资源文件,并对其进行优化。在一些情况下,我们还需要借助如Chrome的Timline、Profiel等工具来查看可以优化的地方。

设计

前端工程师还需要具备基本的UI技能。多数情况下拿到的只是一张图,如果是一个完整的页面,我们就需要快速分割页面布局。而依赖于不同的页面布局,如响应式、网格、FlexBox布局也会有不同的设计。而有些时候,我们就需要自己规划,制作一个基本的线框图(Wireframe)等等。

SEO

如果以搜索引擎作为流量来源,我们还需要考虑页面的内容,除非你用的是竞争排名。像Sitemap可能就不是我们考虑的内容,而我们还要考虑很多点。首先,我们需要保证页面的内容是对于搜索引擎是可见的,并且对应的页面还要有基本的Title、Description和Keyword。然后在一些关键的字体,如栏目标题等等可以用H2之类的大字的地方就不要放过。同时在页面设计的过程中,我们还需要考虑一些内部链接的建设。

它即可以提供页面的可见度,又可以提高排名。最后,如果你是面向的是Google等支持结构化数据的搜索引擎,你还需要考虑一下MicroData / MicroFormat这一类东西。

原文首发于我的微信公众号:http://mp.weixin.qq.com/s?__biz=MjM5Mjg4NDMwMA==&mid=2652973836&idx=1&sn=da563bd65667417173e454f85488f17d#rd

点赞

发表评论

电子邮件地址不会被公开。 必填项已用*标注