JS前端知识模块大全

公司前端：小胖提供，表示感谢

1. 基础

HTML, CSS, JS 文档

W3CSCHOOL: http://www.w3schools.com/

MDN: https://developer.mozilla.org/zh-CN/

MSDN: https://msdn.microsoft.com/zh-cn/library/d1et7k7c(v=vs.94).aspx

w3school:http://www.w3school.com.cn/

个人更倾向于使用MDN. w3cschool貌似被墙

Html中学习语义化, 正确的结构, meta标签等. 了解各种属性用途. 例如data-*(html5新增数据属性), aria-*(帮助屏幕阅读器使用web) 等

CSS 中学习布局, position, float, flex. 盒子模型. Line-height等

Html/css 需要自己动手写体会了

JS 中学习引用类型与基础类型, BOM/DOM, 原型, 继承

深入理解javascript: http://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html - 有实体书, 当然作者有blog, 可在这看.

学习顺序可在”前端知识框架图”中, 理论知识慢慢逐步学习

2. 开发框架, 工具等

Html:

可纯写原版html, 可使用模板语言如jade, ejs, markdown

Jade: http://jade-lang.com/

Ejs: http://www.embeddedjs.com/

Markdown: http://markdown.tw/

在下面会介绍如果更快地编写原生html

Css:

Caniuse: http://caniuse.com/ - 用于查询css兼容性情况. 取决项目目标平台使用对应属性

SASS/SCSS: http://sass-lang.com/ - 官方

http://www.w3cplus.com/sassguide/syntax.html - 中文介绍/语法等

至于less, stylus等可按照自己需求学习, 我个人只用sass. 其实相差无几

LESS: http://lesscss.org/ http://www.bootcss.com/p/lesscss/

Stylus: https://learnboost.github.io/stylus/

Js:

jQuery: http://api.jquery.com/

zepto: http://zeptojs.com/ - 轻量级jq, 用于移动/pc端, 无animate模块, 移动端可用css属性控制动画(推荐)

underscore: http://underscorejs.org/

3、模块化:

Requirejs: http://requirejs.org/

Seajs: http://seajs.org/docs/

其它如 React/angular 等非传统js可自行了解.

React: https://facebook.github.io/react/

Angular: https://angularjs.org/

Vue: http://vuejs.org/

Debug方面我个人建议用chrome, 会比firebug好用一点… 特别看性能/堆栈等情况.

强烈建议学习js时, 读读jq/underscore源码.

4、其它:

需要熟悉iconfont. 可更方便地使用小图标.

国内: http://iconfont.cn/

国外: https://icomoon.io/

SVG: 从html5支持svg直接使用后, 移动端可酌情使用, 由于这个太庞大, 有需要可自行google.

可做的事太多. 路径动画, 高级动画等一些css可能做不到的需要svg去做.

5、开发工具:

Sublime Text2 / 3, 因众多插件原因, 建议使用此ide.

(当然, 手速快的 vim/notepad还是可以的 – css中需要精通各浏览器兼容性)

插件类: (针对st2/3

Caniuse: https://github.com/Azd325/sublime-text-caniuse

Emmet: https://github.com/sergeche/emmet-sublime - 快速编写html, css

Autoprefixer: https://github.com/sindresorhus/sublime-autoprefixer - 自动查找caniuse数据库, 为属性加入兼容前缀

HTML/CSS/JS格式化: https://github.com/victorporof/Sublime-HTMLPrettify

还有其它snippets, 可根据需求安装.

6. 自动化工具

Nodejs: https://nodejs.org/en/docs/

Grunt: http://gruntjs.com/

Gulp: http://gulpjs.com/

Fis: http://fis.baidu.com/fis3/docs/beginning/intro.html

个人使用Grunt与fis, grunt小项目的话还ok, 但大项目会较慢, 没有增量更新.

Grunt常用插件, autoprefixer, concat, cssmin, sass, uglify, watch等.(具体可参考diysite svn下gruntfile

Fis的话前端需要的都有齐了. 学习成本较Grunt/gulp大

7. 安全/交互学习/UED

腾讯Alloyteam: http://www.alloyteam.com/

腾讯UED: http://isux.tencent.com/

网易UED: http://uedc.163.com/

百度UED: http://ued.baidu.com/#/

安全方面, 乌云是get到新技能的有效方法. 当然理论知识等还是要去看. XSS CSRF等.

https://www.ibm.com/developerworks/cn/rational/r-cn-webcsrf/

http://www.ibm.com/developerworks/library/se-prevent/

缓存机制/压缩等服务器配置具体怎么配要问志成.

缓存机制已附图. 应该好理解

其它:

Express: http://expressjs.com/4x/api.html - web应用框架