資訊專欄INFORMATION COLUMN
摘要：平凡之路前端發(fā)展了十幾年，現(xiàn)在幾乎到達(dá)頂峰的速度了，近兩年推出的框架層出不窮，早已不是一統(tǒng)江湖了。模板和數(shù)據(jù)分離也好，狀態(tài)和表現(xiàn)分離也好，我越來越體會到分是為了合這條平凡之路，還會頻繁的發(fā)展和融合下去。
一直想總結(jié)下自己摸打滾爬的前端經(jīng)歷，3年，從一個極討厭前端的人，變成一個吃前端飯碗的人。沒有人帶過我，跌跌撞撞的緩慢前進(jìn)，但我很喜歡分享，喜歡一起進(jìn)步，這會是我以后一直樂意做的事情。
綜述 娃娃學(xué)步w3cschool上的 html / css / javascript / 以及jquery教程，萬事開頭的第一步
小跑上路Say hello to the world!
jquery 輕松玩耍DOM和event
jquery-ui 增強的UI組件
Bootstrap 從此傻瓜式排版就能搞定
Bootstrap 主題模板 and 管理系統(tǒng)模板 快速搭建項目，簡單，好看
遇上平衡木在小跑上路的過程中，做出來的東西看起來很專業(yè)，注意是“看起來”。如果不理解真正的前端技能，那只能是看起來專業(yè)，內(nèi)部結(jié)構(gòu)還是亂糟糟的，或者是遇到bug不知道怎么調(diào)，東一句西一句，拆了東墻補西墻。這過程就像走在平衡木上，稍不留神就會摔下去。
首先要了解css的布局原理盒模型
定位模型
有了布局的基本理論后，嘗試去理解Boostrap里的柵格系統(tǒng) row col span2 背后的style
js最重要的三點: 閉包、原型、作用域JS中的閉包及使用場合
使用閉包解決循環(huán)引用問題
閉包、原型、作用域 面試整理
關(guān)于js的原型和作用域，我沒專門寫過文章，建議去博客園搜下。如果想要完整的理解js語言機制，可以去看《Javascript模式》這本書，或者看我整理的讀書筆記
《JavaScript模式》讀書筆記系列
華麗跳躍謝幕只有把平衡木上的技能磨熟練后，我們才能真正的游刃有余，保證不從平衡木上摔下來的前提下，再有余力去設(shè)計如何華麗的跳躍和謝幕。
組件封裝還沒了解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);
});
一個點擊就獲取數(shù)據(jù)，然后刷新表格的功能。如果一個頁面中有多個類似的異步刷新的表格，且每個表格的字段又各不相同，那么最偷懶的做法就是拷貝大段代碼，然后再調(diào)整
var table1 = new AjaxTable({
el: "#dataTable",
dataUrl: "/path/to/action/"
});
table1.refresh();
如果代碼變成這樣，那就爽多了，獲取數(shù)據(jù)和刷新表格的過程都封在了AjaxTable中，各個使用之處只需要傳個參數(shù)調(diào)用下refresh()即可，減少了大量重復(fù)(相似的)代碼。這就是對UI組件/功能組件的封裝。
以前為了準(zhǔn)備面試時的“手撕代碼”，寫過一個簡單的輪播組件，不用jquery（面試經(jīng)常不允許使用任何庫）
原生js的Slider組件
還寫過下面一些文章
自己寫的jquery分頁插件
為Highcharts做包裝 （有點類似上面示例中的AjaxTable）
一步步做組件-學(xué)校選擇器(系列) （系列長文，如何把一段生硬實現(xiàn)的代碼一步一步封裝和擴展成為一個可配置的UI組件）
模塊化開發(fā)如果要在頁面上引入外部的js庫，最初學(xué)習(xí)的時候是這樣引入的
由于瀏覽器中js的執(zhí)行(非加載)過程是在單線程中的，而各js文件又會存在依賴關(guān)系，比如 jquery-ui 依賴 jquery，bootstrap 也依賴 jquery，所以