Javascript - 轩枫阁 – 前端开发

前言

学校里没有前端的课程，那如何学习JavaScript，又如何使自己成为一个合格的前端工程师呢？

除了在项目中学习和跟着有经验的同事学习，读书也是必不可少的。书中有着相对完整的知识体系，每读一本好书都会带来一次全面的提高。

而如果深一脚浅一脚的学习，写出代码的质量会参差不齐。初学者的首要任务是成为靠谱的熟练开发者，能够稳定的输出有一定质量的代码。

前端技术发展速度特别快，总是涌现出很多新的东西，需要不断的学习。

本文将主要分享Web前端开发推荐书籍、学习课程资源。电子书籍：H5、CSS、JS、Node、HTTP、jQuery等经典推荐书籍。前端相关视频教程：JS、SEO、AJAX、jQuery、AngularJs、HTML5、ionic、PS等优质教程。

希望这些学习资源，能够让读者知识技术有进一步积累提升。

20151028更新

1. 极客学院系列视频

知识体系图：Android开发、Cocos2d-x游戏开发、IOS开发、Swift语言、HTML5开发、Java语言、PHP语言、计算机二级、web前端开发、Python等
实战路径图：Android路径图、IOS路径图、Cocos2d-x路径图、HTML5路径图等

2. angularjs+ionic视频教程

phonegap + Angularjs + ionic 移动app开发
ionic项目简介以及Angularjs 基础
手机 app 开发的几种方式 ionic 学习思路
ionic css布局介绍
ionic ion-tap选项卡以及高级路由
ionic动态组件等

20150601更新

新增以下视频教程及资料：

妙味2014远程课堂jQuery视频教程
Javascript视频教程大合集
前端教程系列——html5，css3，web mobile
前端教程系列——javascript
前端相关视频教程 – 燕十八
JSP视频教程 – 韩顺平

20150510更新

新增：HTML5语言工程师-极客学院视频教程，目录为

HTML5基础
CSS3基础
JavaScript基础
HTML5新特性基础
响应式布局
jQuery基础
jQuery UI基础
jQuery Mobile基础
CreateJS基础
TypeScript基础

20150208更新

Ajax视频教程-传智播客
SEO课程-李俊超
IT面试之2015届校招腾讯校招笔试面试大礼包
传智播客PHP培训站在java的高度讲解PHP
传智播客PHP视频教程李东超 LAMP经典入门
PHP程序员玩转算法公开课等系列视频教程

20150119更新

本次更新新增文档及视频：

Angular视频教程（英文版）
Git系列书籍

20141208更新

本次更新新增视频和文档：

Node系列书籍
PS教程：平面设计、AI、候老师系列
HTML+CSS教程-PHP兄弟连
JS视频教程-智能社
产品经理系列
前端参考手册系列
微信公众平台开发

20140105更新

首批更新：

HTML5书籍
CSS书籍
jQuery书籍
web前端-FE书籍
JavaScript书籍
名站文档
wordpress资料
书籍源码

学习路线

大部分技术，熟读下列四类书籍，就是一个很好的学习提升

入门，用浅显的语言和方式讲述正确的道理和方法
全面，巨细无遗地探讨每个细节，遇到疑难问题时往往可以在这里得到理论解答
实践，结合实际中经常遇到的情景环境，来描述如何设计和解决问题
深入，讲解一些文化，思路，甚至于哲学上的东西，真正做到深入一种语言去编程，如unix编程艺术，程序员修炼之道等等

接下来介绍的这些书籍，没法说这是前端学习最优路线，但真看进去了获得一个IT民工从业资格是没啥问题的。查看全文

2014/01 05 周日

前言

2011年5月11日，是美国现代舞大师玛莎葛兰姆（Martha Graham）的117岁诞辰，玛莎葛兰姆大师独创了玛莎葛兰姆式的舞蹈技法，以收与放为技巧充分展现舞者的感情，成为现代舞的创立人之一。GOOGLE为了纪念现代舞先驱，用巧妙的技术和奇特的创意在首页创建了一副跳舞的图。

效果图

整个动画实际上是由155张小图片做出来的（GOOGLE的设计师太NB了），就像放电影那样查看全文

2014/01 02 周四

JS实用技巧手记（四）

本系列文章旨在记录一些实用的javascript技巧，既可以作为一个知识的积累，又可以作为闲暇时打发时间写写代码的记录。同时也方便日后翻阅~

1. 将字符串转换成URL编码

var myString = "hello all";

var code = encodeURI(myString); //结果: "hello%20all"

var str = decodeURI(code); //结果: "hello all"

相应的还有: encodeURIComponent() decodeURIComponent()

2. 将字符转换成Unicode编码

var myString = "hello";

var code = myString.charCodeAt(3); //返回"l"的Unicode编码(整型)

var char = String.fromCharCode(66); //返回Unicode为66的字符

3. 光标停在文字的后面，文本框获得焦点时调用

function focusLast(){

var e = event.srcElement;

var r =e.createTextRange();

r.moveStart('character',e.value.length);

r.collapse(true);

r.select();

}

项目名称

grunt-contrib v0.8.0

项目地址

https://github.com/gruntjs/grunt-contrib

项目介绍

此项目是对grunt常用插件的集合，刚接触grunt如果不知道使用什么插件，可以直接安装此项目。或者通过package.json自定义要使用的插件。

项目使用

在文件夹中执行node安装包命令，生成包含插件的node_modules文件夹:npm install grunt-contrib –save-dev
插件下载安装完之后，可以在Gruntfile.js中设置引用这些插件:grunt.loadNpmTasks(‘grunt-contrib’);

查看全文

2013/12 09 周一

官网

官方英文版：http://gruntjs.com/

中文翻译版：http://www.gruntjs.org/article/home.html

背景

前端工程师需要维护的代码变得及为庞大和复杂，代码维护、打包、发布等流程也变得极为繁琐，同时浪费的时间和精力也越来越多，当然人为的错误也随着流程的增加而增加了更多的出错率。致使每一个团队都希望有一种工具，能帮助整个团队在开发中能精简流程、提高效率、减少错误率。随之讨论自动化部署也越来越多，并且国内很多大型团队也都有自己成熟的自动化部署工具。百度有FIS，腾讯有Modjs，360有燕尾服，还有很多团队在使用Ant，Shell等。而Grunt乐意成为目前最好的前端构建框架。