摘要：平凡之路前端发展了十几年，现在几乎到达顶峰的速度了，近两年推出的框架层出不穷，早已不是一统江湖了。模板和数据分离也好，状态和表现分离也好，我越来越体会到分是为了合这条平凡之路，还会频繁的发展和融合下去。
一直想总结下自己摸打滚爬的前端经历，3年，从一个极讨厌前端的人，变成一个吃前端饭碗的人。没有人带过我，跌跌撞撞的缓慢前进，但我很喜欢分享，喜欢一起进步，这会是我以后一直乐意做的事情。
综述 娃娃学步w3cschool上的 html / css / javascript / 以及jquery教程，万事开头的第一步
小跑上路Say hello to the world!
jquery 轻松玩耍DOM和event
jquery-ui 增强的UI组件
Bootstrap 从此傻瓜式排版就能搞定
Bootstrap 主题模板 and 管理系统模板 快速搭建项目，简单，好看
遇上平衡木在小跑上路的过程中，做出来的东西看起来很专业，注意是“看起来”。如果不理解真正的前端技能，那只能是看起来专业，内部结构还是乱糟糟的，或者是遇到bug不知道怎么调，东一句西一句，拆了东墙补西墙。这过程就像走在平衡木上，稍不留神就会摔下去。
首先要了解css的布局原理盒模型
定位模型
有了布局的基本理论后，尝试去理解Boostrap里的栅格系统 row col span2 背后的style
js最重要的三点: 闭包、原型、作用域JS中的闭包及使用场合
使用闭包解决循环引用问题
闭包、原型、作用域 面试整理
关于js的原型和作用域，我没专门写过文章，建议去博客园搜下。如果想要完整的理解js语言机制，可以去看《Javascript模式》这本书，或者看我整理的读书笔记
《JavaScript模式》读书笔记系列
华丽跳跃谢幕只有把平衡木上的技能磨熟练后，我们才能真正的游刃有余，保证不从平衡木上摔下来的前提下，再有余力去设计如何华丽的跳跃和谢幕。
组件封装还没了解js对类(或模块)的封装前，我们的代码可能是这样的
var getData = function(){
// ......
};
function editFunc(){
// ......
};
$(".refresh-btn").on("click", function(){
var data = getData();
var $target = $($(this).attr("data-target"));
$target.empty();
for(var i=0; i");
$child.append("" + data[i]["name"] + " ");
// ......
$child.append("编辑 ");
$target.append($child);
}
$target.find(".edit-link").on("click", editFunc);
});
一个点击就获取数据，然后刷新表格的功能。如果一个页面中有多个类似的异步刷新的表格，且每个表格的字段又各不相同，那么最偷懒的做法就是拷贝大段代码，然后再调整
var table1 = new AjaxTable({
el: "#dataTable",
dataUrl: "/path/to/action/"
});
table1.refresh();
如果代码变成这样，那就爽多了，获取数据和刷新表格的过程都封在了AjaxTable中，各个使用之处只需要传个参数调用下refresh()即可，减少了大量重复(相似的)代码。这就是对UI组件/功能组件的封装。
以前为了准备面试时的“手撕代码”，写过一个简单的轮播组件，不用jquery（面试经常不允许使用任何库）
原生js的Slider组件
还写过下面一些文章
自己写的jquery分页插件
为Highcharts做包装 （有点类似上面示例中的AjaxTable）
一步步做组件-学校选择器(系列) （系列长文，如何把一段生硬实现的代码一步一步封装和扩展成为一个可配置的UI组件）
模块化开发如果要在页面上引入外部的js库，最初学习的时候是这样引入的
由于浏览器中js的执行(非加载)过程是在单线程中的，而各js文件又会存在依赖关系，比如 jquery-ui 依赖 jquery，bootstrap 也依赖 jquery，所以