你是如何打造自己的前端庫(css+js,主要是js了)的?

最近看bootstrap,將其中比較複雜的css源碼簡化後整理了起來供自己使用,同時也想把bootstrap源碼中的jQuery插件整理過來,以後在使用的過程中不斷完善和優化,因為所有的過程都經過了自己的思考,所以以後會在使用的過程中越用越舒服,使效率大大提升,這樣也可以減少大量的工作量。

初期階段我的思想很簡單,就是把常用的最基本的常用的功能實現,比如果按鈕、標籤頁、彈出框、輪播圖等等以最簡單的代碼呈現出來(因為自己的js功底挺差的,複雜了吃不消)。

但我現在遇到的問題是隨便找一個插件,就經常引好幾個JS庫,不引用的大多也沒有把最核心最直接的東西呈現出來,本來對使用jQuery就稍微有一些抵觸(因為感覺jQuery會影響自己去學習JavaScript,JavaScript才是最根本的吧,現在都有說jQuery過時的了,我不希望把自己綁定在jQuery上,使自己離開jQuery什麼也不會了),讓我為了實現一個小功能而調用另外一個JS/jQuery庫,我不喜歡那樣做。

我想了解各位是如何打造自己的前端庫的,有沒有特別適合JS能力不好的人的一些簡潔的代碼(不要輕易引一些不知名的插件),或者說有沒有打造了自己的前端庫,然後在工作中越用越順手的,有沒有人願意分享一下自己的「前端庫」的,希望大家不要太謙虛,我相信經過了長時間使用和考驗的那些「前端庫」是很值得一讀的,而其中那些很簡潔的「前端庫」很容易讓像我這種能力還不好的初學者有一個質的提高(整理bootstrap的時候感覺到的,對於bootstrap的jQuery插件,已經很簡潔了,代碼的也很清晰,但在整理的時候還是感覺有些吃力)

/*******************************補充***********************************/

我從沒有說要抵制什麼,jQuery是一個很好的工具,我當然也會使用,現在幾乎每一個涉及到JS的頁面都會引入jQuery啊,但我肯定不想做只會使用jQuery的人。

另外,我需要解釋一下(之前說的不清楚),這裡所說的前端庫中的js方面指的是各種實現具體效果的代碼(插件)的集合,而不是像jQuery那種更底層的東西。

此外,在評論中我也看到了一些建議讀jQuery源碼的,我當然知道閱讀jQuery源碼對JS的學習肯定有很大的幫助,這就涉及到我另外的一個問題了(有沒有「拒絕」使用jQuery的人? - 前端開發)這裡的問題不是想去涉及哪些比較底層的東西,主要就是想了解一下你們是怎樣一步步搞出來自己前端庫的,有沒有那些節點讓自己有一些質的提高(例如,我看bootstrap的css源碼,並整理了一下就感覺到了有不少進步),如果可以的話,有人分享一下就更好了。

下面有我的回答,雖然自己感覺按自己能力並沒有什麼值得好分享的,所以僅僅作為一個回答方式的參考(最好的回答姿勢不應該是那樣的嗎?)


初學者的話最好的前端庫難道不是jQuery?

難道就是因為太流行所以大家都抵制?不得不說dom好多設計並不高明,jquery無疑在用一種高明且實用的方式來倒逼標準。

輪子是用來用的不是用來重新發明的,我倒是沒見過寫c++的不喜歡依賴STL的庫……新手常見誤區似乎就是「越底層越牛逼」啊…

可能對原問題幫助不大,抱歉……


Js初學者還是把js學好再搞自己的庫吧,不積跬步何以致千里,千里之行始於足下,不要好高騖遠,先從簡單一點的庫開始看,先搞一些util庫開始,underscore可以看看,然後才造自己的輪子,非要想自己搞些UI組件你就從彈出框做唄,簡單實用,或者開始封裝現有UI組件....我瞎說的啊,逃....


用別人的


少年,請讀源碼。他們就擺在那,等著你讀呢。就從jquery開始。


prototype比較友好一點,初學不可能搞得定jq,


我做前台的話要麼完全自己寫,要麼完全依賴第三方庫,至於修改的話總覺得太蛋疼。


可以用angularJS,他倆的實現思想都不一樣


先學習的CSS,然後閱讀了很多別人的博客,在閱讀博客的時候看到了比較「原子化」的CSS庫,用心了解了一下感覺很受用,就總結過來了(當然不能濫用)。

早就聽說過bootstrap,但僅僅接觸一下而不深入了解的話,會感覺使用bootstrap需要符合它的HTML結構,感覺限制很大,所以一開始是比較抵觸的,後來耐心去學習了boostrap看了其中的很多css源碼,感覺很好,就簡化整理了過來,至於js插件方面,才剛開始整理,如果有想看的,我自然願意分享,但整理過後的代碼還沒怎麼使用,拿不出手,就不分享了。

......balabala~~


推薦閱讀:

用 js 和 css3 做動畫時,如何判斷所有的圖片元素都載入完了?

TAG:前端開發 | JavaScript | jQuery |