前端練手專案小結
簡要
在這個頁面中,用到了JS面向物件的思想、AMD模組程式設計、jQuery、requireJS、繼承、事件監聽等前端的知識點。其中一些基礎的關於DOM的操作也有不少,包括建立節點,設定class或者CSS樣式等一系列的基礎運用。這可以算作是這段時間以來前端學習的小結。
問題總結
1,首先,對於頁面部分邏輯的分析出現一定的失誤,不能準確快速地將具體的需求和程式碼設計緊密聯絡在一起。有時是需求沒有搞清楚,即使這個需求已經是很簡單地,但是還是會出現一點偏差。有時就是明確需求,但是程式碼這塊還是有點問題,之前學習的基礎的知識點和實際運用還是存在一定的距離。所以第一個問題在於對於這個簡單的頁面從開始到寫程式碼沒有一個比較清晰的思路。實際操作起來磕磕碰碰的,遇到一個問題會卡在那裡糾結一段時間。如果沒有好的思路,自己動手寫程式碼是沒有必要的。除非是運氣好碰對了。但是不可能每次運氣都會這麼好的。所以思路明確的話,寫程式碼就簡單了,進度也就會很快的。
2,結合這個專案中的一個元件來說。這個元件的功能就是現實七天的日期。這個日期包括月份和幾號,還有某一天是星期幾。左右還有一個按鈕。實現下一個七天或者前面七天的資訊的一個跳轉。簡單地思路是:首先得到一個數組,這個陣列包括所有的資訊,而且這個陣列的長度是七的倍數。否則對這個陣列的操作不是很容易的額。在得到這個陣列後,就要對這個陣列的資訊進行分割。然後設定標誌,決定按鈕點選事件後具體顯示哪一部分分割後陣列的內容。這個標誌初始為零,每次點選事件的執行,自加或者自減。至於渲染頁面的元素動態生成,沒有什麼特別難的地方。還有設定邊界不能點選的問題則是通過新增或者移除class。動手寫程式碼還是很快的,效果也完美實現了。
可是沒有想到的是:後來在做另外一個元件的時候,需要得到之前一個元件的部分資料。可是再看之前寫的元件,方法幾乎寫在一起了。不可能將想要的資料返回給新的元件。確實一個小元件的實現,有各種方式。但是最適合的也就那麼一種。事實證明,那個元件不能用了。需要重寫。針對一個完整的專案而言,每一個元件的實現不是說當前的一個小的功能實現就好了。如果另外一個元件依賴於前一個元件,前一個元件寫的很糟糕的話,就要重新書寫,這是很浪費時間和精力的。
最後,將這個元件重新寫了一下,多了幾個方法,但是我能從這個元件得到想到的東西。而且條理也更加清晰了。即使程式碼比之前是多了一些,這些是值得的。
後續
這個頁面的程式碼還是存在一定的問題,後續優化更新。。。
專案地址:西京醫院仿寫頁面