有哪些利於前端新手練習、理解JS的獨立小項目？

01-15

大約接觸了半年前端，但是發現自己JS掌握的很差，平時練習大多是布局，想不出來應該用JS寫點什麼，有沒有什麼常見的，典型的例子可供練習？

我給你個例子吧：編寫一個註冊頁。

簡而言之就是個 form 表單，從上到下分別是用戶名、密碼、昵稱、註冊郵箱等文本框，最下面是個提交按鈕。

簡單吧？我們加個小需求：給文本框加上數據校驗功能。

校驗方式總共有三種：

1，通過正則表達式限制能輸入的字元和長度，比如用戶名不能超過 15 字元，只能輸入英語數字下劃線。輸別的輸不進去。

2，同步校驗。在文本框的 blur 事件中執行，用來校驗數據格式，比如郵箱是否合法，或者任意欄位不能為空。如果不合法，文本框右端打叉並寫明原因。

3，非同步校驗，通過 ajax 向後台校驗數據合法性，比如用戶名、昵稱和郵箱不能重複（你可以用setTimeout模擬）。如果不合法，文本框右端同樣右端打叉寫明原因。

各種校驗有先後順序，比如同步校驗先執行，驗證通過再執行非同步校驗。

注意兩種情況：

第一，當用戶點擊提交的時候，由於某些欄位文本框可能根本沒有 focus 過，所以 blur 事件也沒有，於是沒被校驗過。此時需要補充校驗，通過之後方可提交。

第二，當用戶點擊提交的時候，非同步校驗可能還在執行沒得到結果，此時你有兩種選擇，要麼需要等待結果，通過之後方可提交。要麼直接提交接收後台錯誤信息，彈框顯示。我建議你試試第一種，以及，校驗超時怎麼辦？

其實就是一個普通的簡化版註冊頁，各個網站都有這麼一套流程。老掉牙的東西。

你如果能用 jquery 把這套邏輯非常清晰的實現出來，清晰到看到代碼就能口述出我剛才講的這些需求，分門別類，條理清楚，扔給誰都可以隨時維護，並且沒有 bug。

那麼你可以說基本具備了編寫網站前端的基本功了。

練手未必要「項目」，看到一篇文章，或者書里有個章節，把別人講的東西在chrome dev tool里自己實現實現，改一改，擴展一下，就是挺好的語言練習了。

修真院的任務體系。

1。介紹

先是做一個九宮格，練習JS的基礎語法，擴展開來，還可以學習到怎麼理解什麼叫業務邏輯。

然後是殺人遊戲，單機版的一個真實案例，不需要和後端有交互，主要是頁面跳轉，本地儲存，參數傳遞和事件監聽。

再往後就是一個真實的後台管理系統，學會Ajax，登錄註冊，介面調試。

這些都是JQuery版的。主要用來理解JS和業務。

跟著是AngularJS版的練習和小程序的練習。

最後是一個完整的團隊項目，真實項目請略過。

附一下截圖。

2 任務截圖

這個是任務的截圖列表，標明了任務是什麼，學會什麼技能，大概多久，多少人在學。

3。任務的詳情頁-學習任務前

這裡是學習前的重點知識，希望在做任務的時候掌握什麼技能。以及每一個操作步驟。

任務里的資料，有一部分是收集到了系統中，但是故意沒有提供全部資料，也是希望伸手黨去練習一下如何百度。

4。任務詳情頁-做任務中

這裡是做任務的時候，你可能會遇到的一些問題。

5。任務詳情頁-完成任務後

完成任務後不要停，還有很多是你需要進一步學習的。

6。交流學習

這是如果有不會的問題。找誰請教，誰跟你一起在學習，可以交流。

7。日報

截圖上傳有點慢。每個任務下都有上百篇之前師兄學習過的經歷，和他們做出來的效果和源碼。

8。傳送門

http://www.jnshu.com

自然是前端框架 phodal/lettuce 了，兩年前理解 JavaScript 框架寫的入門項目。

可以結合：『我的職業是前端工程師 - 知乎專欄』完成學習

我的職業是前端工程師【一】: 我要成為一個前端設計師
我的職業是前端工程師【二】: 入門不是應該很簡單嗎？
我的職業是前端工程師【三】：學習前端只需要三個月【語言篇】
我的職業是前端工程師【四】：如何選擇合適的前端框架，告別選擇恐懼症
我的職業是前端工程師【五】: 前端工程師必會的六個調試技能
我的職業是前端工程師【六】：前端程序員如何有效地提高自己
我的職業是前端工程師【七】：你真的懂前後端分離嗎？
我的職業是前端工程師【八】：SEO 技巧，如何設計一個高質量的 URL 和標題
我的職業是前端工程師【九】：你應該知道的單頁面應用的五要素
我的職業是前端工程師【十】客戶端存儲藝術：數據存儲與模型
我的職業是前端工程師【十一】：這幾點技巧幫你優化前端應用性能
我的職業是前端工程師【十二】寫給前端工程師看的，移動應用選型指南

Lettuce 介紹如下~~

只有6kb，模塊化

Lettuce, Mobile Framework for romantic

Lettuce is a Small Powerful Framework for Romantic.

Online demo http://lettuce.phodal.com/.

Lettuce 是一個輕巧的移動開發框架。

用途: Romantic，前端學習

Gallery(展示)

應用場景

一個情人節禮物: http://valentine.phodal.com/
官網: http://lettuce.phodal.com/

Lettuce Usage(用法)

Class(類)

var L = new lettuce(); var zero = function(){

}; var sub = new L.Class(zero);

Template(模板)

var L = new lettuce(); var data = { "title": "JavaScript Templates" };


var result = L.Template.tmpl("
&{%=o.title%}&

!@#$%^*()-=", data);

Router(路由)

var L = new lettuce();

var check = L.Router .add(/#about/,log) .add(/#what/, log) .add(/#why/, log) .load();;

Effect(效果)

淡出

L.FX.fadeOut(document.getElementById("content"), { duration: 2000, complete: function () { } });

淡入

L.FX.fadeIn(document.getElementById("content"), { duration: 2000, complete: function () { } });

Promise

function late(n) { var L = new lettuce(); var p = new L.Promise(); return p; }

late(100).then( ).then( ).done();

Ajax

lettuce.get("/bower.json", function(result){ equal(result["name"], "lettuce"); done(); })

lettuce.post("http://127.0.0.1:5000/some", "something", function(data){ console.log(data) })

Single Page Application Example(單頁面應用)

1.new a instance

var L = new lettuce();

2.define data

var data = { about: "Template", what: "This about A Mobile Framework For Romantic", why: "Why is a new Framework" };

3.create function for router

var aboutPage = function(){ var aboutPage = new L.SimpleView(); var templates = L.Template.tmpl("&{%=o.about%}&", data); return aboutPage.render(templates, "results"); }; var whyPage = function(){ var whyPage = new L.SimpleView(); var templates = L.Template.tmpl("&{%=o.why%}&", data); return whyPage.render(templates, "results"); };

4.Add router

L.Router .add(/#about/, about) .add(/#why/, why) .load();

Q：

有沒有哪些獨立小項目可以幫助前端新手練習理解JS？

A：

這個提問，需要解決兩個問題

一) 如何通過開發項目任務理解 JS

目前首贊「欲三更」的答案已說明了如何解決了：

欲三更的答案：https://www.zhihu.com/question/58371467/answer/156868072

但對於沒有在公司實習，或從未有過項目經驗的人來說，如沒有人指導，很難具備答主所說的思考方式。

我個人的建議是，多看看成熟的開源項目，比如：

useryangtao/vue-wechat

在看項目源碼的過程中，多翻翻語言的基礎書籍，這樣能夠徹底的理解知識點：

這種學習方式，絕對能讓你徹底明白古人說的「溫故而知新」。

更多好的開源項目，就多翻翻：

史上最大的同性交友網站：http://Github.com

二) 如何確定開發項目任務

如果你是學生：

可以嘗試加入校園計算機開發社團，裡面的學長應該會有不少項目可做的；
又或者，找找老師，說不定能獲取一些不錯的外包項目；
再或者，去外面找找實習，說不定能獲取到一個願意指導新人的 Leader。

如果你不是學生：

可以利用 QQ 的群搜索，加很多 QQ 群，去大面積的撒網發消息，碰碰合適的項目練手；
或者自己確定項目需求，從零開始做項目。
這兩個方案，學生也可以嘗試。

如果以上方案都不能解決「如何確定開發項目任務」，可以來嘗試參與我組織的趣編程選拔賽：

1) 非常明確的項目開發任務，同時還有很多寫好的代碼參考，像這樣：

2) 初步完成任務後，還有專人對你代碼進行審核，提高你代碼撰寫質量，像這樣；

3) 任務通過最終審核後，還能成為趣編程的實習生，像這樣：

笨辦法學前端 - 知乎專欄

模擬Tmall怎麼樣？

傳送門：

前端練手項目-先定一個小目標，做他一個天貓官網 | 基於實例代碼分步講解一站式學習Java | how2j.cn

TodoApp

能有時間練習技術，是一件多麼幸福的事。

對於前端新手，普通的Web產品已經足夠用了，可以對JS基礎和周邊的技術有個了解甚至掌握；如果沒有業務，選擇就更多了：坦克大戰、聊天室、登錄註冊。。。

已經擺脫了入門，想進一步提高自己技術的，還是建議少寫多看，找一些小型的有名的開源項目，從頭讀它的源碼，這絕對是提高技術最快的辦法之一。

我自學前端的時候拿百度技術學院2016年的任務做的練手項目一共50多個任務我做了40多個然後投簡歷成功轉職現在在做2017年的任務來提升自己感覺對我幫助特別大題主可以百度搜索百度技術學院第一個就是

先寫一些小插插件比如banner這些，不建議用jq寫，最好用原生的js去寫，練習一下對dom的操作，注意數據封裝和書寫規範。

百度前端學院