前端練手專案小結
簡要
在這個頁面中,用到了JS物件導向的思想、AMD模組程式設計、jQuery、requireJS、繼承、事件監聽等前端的知識點。其中一些基礎的關於DOM的操作也有不少,包括建立節點,設定class或者CSS樣式等一系列的基礎運用。這可以算作是這段時間以來前端學習的小結。
問題總結
1,首先,對於頁面部分邏輯的分析出現一定的失誤,不能準確快速地將具體的需求和程式碼設計緊密聯絡在一起。有時是需求沒有搞清楚,即使這個需求已經是很簡單地,但是還是會出現一點偏差。有時就是明確需求,但是程式碼這塊還是有點問題,之前學習的基礎的知識點和實際運用還是存在一定的距離。所以第一個問題在於對於這個簡單的頁面從開始到寫程式碼沒有一個比較清晰的思路。實際操作起來磕磕碰碰的,遇到一個問題會卡在那裡糾結一段時間。如果沒有好的思路,自己動手寫程式碼是沒有必要的。除非是運氣好碰對了。但是不可能每次運氣都會這麼好的。所以思路明確的話,寫程式碼就簡單了,進度也就會很快的。
2,結合這個專案中的一個元件來說。這個元件的功能就是現實七天的日期。這個日期包括月份和幾號,還有某一天是星期幾。左右還有一個按鈕。實現下一個七天或者前面七天的資訊的一個跳轉。簡單地思路是:首先得到一個陣列,這個陣列包括所有的資訊,而且這個陣列的長度是七的倍數。否則對這個陣列的操作不是很容易的額。在得到這個陣列後,就要對這個陣列的資訊進行分割。然後設定標誌,決定按鈕點選事件後具體顯示哪一部分分割後陣列的內容。這個標誌初始為零,每次點選事件的執行,自加或者自減。至於渲染頁面的元素動態生成,沒有什麼特別難的地方。還有設定邊界不能點選的問題則是通過新增或者移除class。動手寫程式碼還是很快的,效果也完美實現了。
可是沒有想到的是:後來在做另外一個元件的時候,需要得到之前一個元件的部分資料。可是再看之前寫的元件,方法幾乎寫在一起了。不可能將想要的資料返回給新的元件。確實一個小元件的實現,有各種方式。但是最適合的也就那麼一種。事實證明,那個元件不能用了。需要重寫。針對一個完整的專案而言,每一個元件的實現不是說當前的一個小的功能實現就好了。如果另外一個元件依賴於前一個元件,前一個元件寫的很糟糕的話,就要重新書寫,這是很浪費時間和精力的。
最後,將這個元件重新寫了一下,多了幾個方法,但是我能從這個元件得到想到的東西。而且條理也更加清晰了。即使程式碼比之前是多了一些,這些是值得的。
後續
這個頁面的程式碼還是存在一定的問題,後續優化更新。。。
專案地址:西京醫院仿寫頁面
相關文章
- 【練手小專案】簡易通訊錄:單連結串列實現
- gin練手專案
- 長沙前端培訓機構:新手練手前端專案實戰前端
- 長沙前端培訓機構:10個適合新手練手的前端專案前端
- Flutter練手專案--玩安卓Flutter安卓
- Vue練手專案(包含typescript版本)VueTypeScript
- 小程式專案總結
- 小程式專案-總結
- go+vue入門專案練手GoVue
- 學python找不到專案練手?別擔心,70個python練手專案給你充實感Python
- 前端部署腳手架專網專案實踐前端
- vue前端專案工作流(首個專案總結)Vue前端
- 最適合Java基礎練手的Java小專案「圖書管理系統」Java
- 長沙Java培訓:JAVA練手專案分享Java
- Go 的練手專案有哪些值得推薦?Go
- Go 語言入門練手專案推薦Go
- 給Python初學者的最好練手專案Python
- python練習小結Python
- 專案需求討論 – 定位功能小結
- 小程式的專案結構設計
- 專案需求討論 - 定位功能小結
- [練手專案]Gin+websocket 的多人聊天室Web
- 50行程式碼,Node爬蟲練手專案 ?️行程爬蟲
- 微信小程式初體驗,入門練手專案--通訊錄,部署上線(二)微信小程式
- 前端學習(2375):專案介紹結束前端
- 初學Python不知道做什麼專案好?來看看練手專案如何?Python
- 專案完成小結 - Django3.x版本 - 開發部署小結 (2)Django
- 又一個Rust練手專案-wssh(SSH over Websocket Client)RustWebclient
- 專案需求討論— ButterKnife初級小結
- 微信小程式--專案腳手架的搭建微信小程式
- 前端專案打包前端
- 前端專案部署前端
- 專案管理小結(如何做好一個百萬級專案甚至千萬級別的專案)專案管理
- 做題小結 DP訓練
- 分享一份介面測試專案(非常值得練手)
- 70個Python經典實用練手專案(附原始碼)Python原始碼
- 4個Python經典專案實戰,練手必備哦Python
- 推薦一些適合新手練手的Python專案Python
- vue vue-element-admin專案踩坑小結Vue