NTUEE+ FrontEnd (1/26 Work Disspation)

回MD首頁

前端重構Branch: frontEndRevised

架構討論

├── client/
    ├── src/
        ├── pages/
            ├── in/
                ├── functions/
                ├── component/
                ├── container/
                    ├── routes/
                ├── routes/
                ├── css/
                ├── images/
                ├── index.js
                ├── agent.js
            ├── out/
                ├── functions/
                ├── component/
                ├── container/
                    ├── routes/
                ├── routes/
                ├── css/
                ├── images/
                ├── index.js
                ├── agent.js
            ├── auth/
                ├── component/
                ├── container/
                ├── routes/
                ├── css/
                ├── images/
                ├── index.js
                ├── agent.js
            ├── routes/
            ├── images/
            ├── global.css
            ├── index.js
        ├── index.js
        /////redux/////
        ├── actions/
        ├── reducers/
        ├── store/
        ├── constants/
        /////redux/////
        ├── animation/

各檔案寫法

pages

統一做的事:

  • class => hook
  • css移動到css資料夾
  • 為所有function加上註解(一些trivial的不用)
  • 每個object應該都要有註解顯示他內部會有的key
  • css檔案每個container只有一個，不會有專屬於component的css(除了Navbar)，修飾component的css會合併在裡面
  • 表示一個頁面，一個css，且在container import一次就好，component不import css(除了NavBar)
  • 因為檔案架構大更動，所有檔案的import路徑都要改

container/

  • 命名: 大寫開頭(頁面名稱) Ex: About.js
  • 內容: 為網站的主頁面，會包含component的東西，主要負責外觀，盡量不要在裡面處理state，用prop就好(不過不一定了，頗複雜)
  • 注意: 在註解部分寫一下整個頁面的架構包含甚麼component，頁面顯示什麼

component/

  • 命名: 大寫開頭 Ex: NavBar.js
  • 內容: 為頁面的部分，主要負責一些邏輯處理，事件處理等
  • 注意:
    • 在註解的部分寫一下哪裡會用到這個component，在最前面寫傳進來的prop會有哪些，會用到的state有哪些等等
    • 事件處理函式的命名規則:handle+大寫開頭動詞們
    • 事件處理函式的第一個參數統一為e(表示event object)(除了一些例外)

functions/

  • 命名: 小寫開頭 Ex:saveImage.js
  • 內容: 被兩個以上的檔案使用到功能，無法被分類到component者
  • 注意:

images/

  • 命名: 小寫單字以_連結 EX:

routes/

  • 命名: "…"Routes.js
  • 內容: 為react router的route放置處，負責所有頁面的路由，會從container提取頁面render
  • 注意: 之前寫的route應該都會命名成…+app，要做的便是把他依現在的檔案架構放在各個routes/中

agent.js

  • 內容: 為向後端送request的函式匯集處，由很多的axios method構成
  • 由需要後端的頁面名稱構成object，內部是axios method，這樣各component就可以import 這個object去使用axios methid跟後端溝通，而要修改axios method也會統一到這邊修改
  • 現在的axios應該散布在各個js中，需要寫進負責該部分的agent.js

示意圖:

css/

  • 命名: 大寫單字(頁面名稱)
  • 內容: 為各頁面的css
  • 注意:
    • 目前各頁面的css分散成很多個檔案，需要將其合併起來，修飾不同的component請用註解將他們分隔成大區塊，以便之後修改
    • 並且apply css的coding style

coding style:

js

  • 不准加分號!!!

  • 大括號範例

    ​​​​while (condition) {
​​​​    ...
​​​​}

  • "雙引號"!!!

  • 函數命名使用camelCase

  • 所有function使用arrow function!!

  • 變數(object除外)與object的property命名使用小寫單字_小寫單字

    • EX:follow_this

  • Class,Object使用大寫開頭單字

    • EX:ExampleClass

  • Comment Form:

    • 之後應該會用這個:apiDoc，但大家還是先照著下面格式寫，之後再改也不遲
    • function:
    ​​​​const testFunction = () => {
​​​​    /*
​​​​    input:{
​​​​    	param1:type, 
​​​​            description...
​​​​    	param2:type,
​​​​            description...
​​​​    }
​​​​    output: type,
​​​​        description...
​​​​    description:
​​​​        ...
​​​​    */
​​​​  ...
​​​​}
    • variable
    ​​​​let test_variable = 1 //description
    • hook
    ​​​​const TestHook = (props) => {
​​​​    /*
​​​​    props:{
​​​​    	param1:type, 
​​​​            description...
​​​​    	param2:type,
​​​​            description...
​​​​    }
​​​​    description:
​​​​        ...
​​​​    */
​​​​}

  • html

    • 有onEvent的tag都換行
    • inline style也換行
    • 依個人感覺換行(以不要超出頁面為原則)

  • css

    • id,classNames 請承襲以往規格

    • 這裡要加分號!!!

    • 請依以下順序:

      • 位置相關:
        • display
        • flex相關
        • position
        • top,right,left,bottom
        • overflow
      • 大小相關(指元素):
        • height,width
      • 排版相關:
        • outline
        • margin
        • border
        • padding
      • 背景相關:background
      • 文字相關:
        • font-family
        • color
        • font-size
        • font-weight
        • text-align
        • text-decoration
        • …
      • transition
      • transform
      • animation
      • cursor
      • opacity
      • z-index

    • Pseudo-class 順序

      • link
      • visited
      • hover
      • active
      • focus
      • …

    • css variable:
      *

    • screen

    ​​​​​   @media (max-width:1200px) {
​​​​​       ...
​​​​​   }

工作內容

請在自己的branch工作，覺得可以就送pull request
請打有意義的commit名字，這樣reset或找bug比較快

  • Config:

    • 建立AgentConfig.js 建立axios instance 然後export，讓所有的agent.js擁有相同的網址

  • Images:

    • 把舊有圖片方散到各層級的images裡, 用json儲存圖片網址的部分放到config, 這樣import 那個檔就好

以下在out 新增functions資料夾後做

  • Forget/Login/Register/RegisterDefault/RegisterFB:

    • 把state寫好(useState那邊)
    • 把原本的handleInput塞回去(import from functions)
    • 把axios分離到agent
    • 改寫成functional的寫法

  • History/Team:

    • 這兩個頁面基本上一模一樣(?
    • 把一些不需要的import註解刪除
    • 改寫成functional的寫法
    • 處理好圖片import

  • ResetPassword:

    • 改寫成functional
    • 頁面可能要設計一下(css之類的?

  • Columns:

    • 串接後端(agent.js, block跟content都要，包含內容跟圖片(getImages之類的))
    • 改RWD(理論上之前寫過 但不知道跑去哪了 可以重新寫或找出來XD)
    • 如果有時間的話可以把class改成hook，但這個優先順序應該是最低的

  • Auth:

    • 就是管理端，詳細可以問君輔(推鍋XD
      • 目前後端都還沒好，不過可以先根據這些功能刻需要的頁面
      • 更：好了
    • 先架好骨架就好，詳細的之後會討論(希望啦Q

  • Recruitment:

    • 串後端跟新增功能
    • 目前只有Recruitment的api完成(add還要改)，能串就串

  • Recommendation:

    • 基本上類似於Recruitment

  • Policy:

    • 就是隱私權政策
    • 新增一個route給他
    • 把它弄得還可看就行

  • CSS:

    • 非常非常龐大的工作
    • 要做的大概就是
      • 依照規定順序排列CSS
      • 根據顯示調整RWD
      • 記得如果要設定全域變數的話可以到global.css調 不要分散寫
Select a repo