上手的第一個項(xiàng)目，以前都是學(xué)習(xí)知識蓝纲，沒有應(yīng)用到實(shí)際項(xiàng)目中阴孟。

主要收獲

1. 知道了一個項(xiàng)目大致是如何進(jìn)行開發(fā)的，學(xué)到的東西學(xué)會應(yīng)用到實(shí)踐中税迷，團(tuán)隊(duì)是怎么進(jìn)行合作的
2. 了解了部門的業(yè)務(wù)永丝，主要是做哪方面開發(fā)的
3. git熟練度比之前大大增加，包括git命令行和TortoiseGit箭养。知道如何在代碼托管平臺（如GitHub和GitLab）上進(jìn)行合作慕嚷，解決代碼沖突
4. 加深了對項(xiàng)目結(jié)構(gòu)和Vue的理解，學(xué)會了使用瀏覽器控制臺合理debug毕泌，也提高了vscode的使用熟練度

發(fā)現(xiàn)不足&待學(xué)習(xí)

1. ES6和css掌握比較差喝检，尤其是css，需要大量學(xué)習(xí)加練習(xí)
2. ejs這種模板第一次聽說撼泛，不太會使用挠说，在js文件中import導(dǎo)入html片段以前也是沒用過。html愿题，js损俭，ejs聯(lián)合使用
3. 前端路由雖然自己看了代碼之后知道了是怎么運(yùn)作的，但是感覺自己寫不出來抠忘，需要學(xué)習(xí)
4. node以及node框架（如koa撩炊，express）不太了解，npm命令需要學(xué)習(xí)崎脉。
5. Vue的高級特性和用法拧咳，如單文件組件（.vue文件）、vuerouter囚灼、vuex等不會使用骆膝，Vue的生命周期理解不深，webpack等打包工具不會使用灶体。
6. 之前學(xué)的東西有所遺忘阅签，如紅寶書上關(guān)于DOM部分等，對于DOM 0級2級事件等記不太清蝎抽。

零散筆記

• 命令行操作可以在cmd命令行政钟、powershell、git bash中進(jìn)行，效果一樣养交，git bash和powershell和Linux的終端類似精算。
• package.json文件中存放的一般都是項(xiàng)目的依賴文件依賴包，本地要讓一個項(xiàng)目跑起來碎连，一般需要在項(xiàng)目根目錄下和具體項(xiàng)目下運(yùn)行npm install命令灰羽，這個命令會自動掃描所在目錄中的package.json中的內(nèi)容并下載所需文件到node_modules文件夾中。
• 項(xiàng)目的目錄結(jié)構(gòu)大致如下

目錄結(jié)構(gòu)

其中public目錄為項(xiàng)目中的各個小項(xiàng)目鱼辙，如worldcup和ee2018等廉嚼，html中存放的是各個項(xiàng)目的html（雖然ee2018沒有用到這個目錄），routes目錄下為路由倒戏，views文件夾下面為各個小項(xiàng)目下的ejs文件

• .gitignore文件是git上傳時會忽略的文件怠噪。

• 項(xiàng)目從app.js啟動

• 啟動項(xiàng)目的步驟為，先npm install兩次（上面提到過峭梳，同時也只需要第一次運(yùn)行）下載依賴包舰绘，之后切換到所在項(xiàng)目的目錄下（ee2018），執(zhí)行npm run dev-server啟動服務(wù)器葱椭，之后再在項(xiàng)目根目錄下運(yùn)行node app.js（或者在vscode下直接f5運(yùn)行）捂寿，這個時候打開瀏覽器，輸入對應(yīng)的路徑（http://localhost:5389/webapp/hotel/wechatlab/ee2018/list）即可訪問

• 項(xiàng)目的樣式代碼全部在wechatlab\public\ee2018\app\css\list2.css中孵运，主js文件在wechatlab\public\ee2018\app\js\pages\list\index.js秦陋，而位于views中的wechatlab\views\ee2018\list.ejs中，通過路由<script type="text/javascript" src="<%=asset('ee2018@list.js')%>"></script>治笨，將list.js文件映射為上面說到的index.js驳概。soa目錄下是一些向服務(wù)端發(fā)送請求的文件，如getHotelList.js

• 最好將組件進(jìn)行拆分旷赖，分到不同的文件里顺又，比如，hotel-list-item組件由圖片組件和內(nèi)容組件組成等孵，可以將這兩個組件寫到兩個js文件中稚照，之后再import進(jìn)來，同時也可以將比較長的template模板（html）分出去俯萌，之后再導(dǎo)入

• 最好使用小烏龜TortoiseGit果录，圖形化界面，不會像命令行那樣容易出錯（雖然我還是很喜歡命令行那種感覺）咐熙，步驟為弱恒，（如果有新增的文件，先在git bash中add）先在目錄下右鍵點(diǎn)擊Git commit棋恼，添加一些描述之后commit返弹，之后再Git Sync锈玉，然后fetch&rebase拉取遠(yuǎn)程變化并合并，有沖突的話會提示琉苇，之后可以用TortoiseGit提供的圖形化界面解決沖突嘲玫，解決沖突后再push就行悦施。

• 把一個分支上的commit遷移（復(fù)制）到另一個分支使用git cherryout pick <commit id>就可以了并扇。不要輕易新建分支

• 過程中遇到的一些問題：

  • npm run dev-server報(bào)錯

    $ npm run dev-server
    
    > worldcup@1.0.0 dev-server D:\Users\jz.wu\Desktop\new download\wechatlab\public\ee2018
    > webpack-dev-server --inline --hot --config ./webpack.config.babel.js
    
    events.js:183
      throw er; // Unhandled 'error' event
      ^
    
    Error: listen EADDRINUSE 0.0.0.0:8080
        at Object._errnoException (util.js:992:11)
        at _exceptionWithHostPort (util.js:1014:20)
        at Server.setupListenHandle [as _listen2] (net.js:1355:14)
        at listenInCluster (net.js:1396:12)
        at doListen (net.js:1505:7)
        at _combinedTickCallback (internal/process/next_tick.js:141:11)
        at process._tickCallback (internal/process/next_tick.js:180:9)
        at Function.Module.runMain (module.js:695:11)
        at startup (bootstrap_node.js:191:16)
        at bootstrap_node.js:612:3
    npm ERR! code ELIFECYCLE
    npm ERR! errno 1
    npm ERR! worldcup@1.0.0 dev-server: `webpack-dev-server --inline --hot --config ./webpack.config.babel.js `
    npm ERR! Exit status 1
    npm ERR!
    npm ERR! Failed at the worldcup@1.0.0 dev-server script.
    npm ERR! This is probably not a problem with npm. There is likely additional logging output above.
    
    npm ERR! A complete log of this run can be found in:
    npm ERR!     D:\Users\jz.wu\AppData\Roaming\npm-cache\_logs\2018-07-13T05_50_32_306Z-debug.log
    

    錯誤原因：運(yùn)行項(xiàng)目所需的8080端口號被占用，可以在cmd查詢使用的端口號是否被占用netstat -aon|findstr <端口號>抡诞，按回車顯示占用8088端口對應(yīng)的程序的PID號穷蛹，之后tasklist|findstr <PID號>查看占用端口的具體應(yīng)用程序，之后就打開任務(wù)管理器關(guān)掉對應(yīng)的任務(wù)再重新運(yùn)行就行了昼汗。（在這個里面其實(shí)是上次運(yùn)行npm run dev-server之后打開的node.exe沒有關(guān)肴熏，占用了8080）

  • 數(shù)據(jù)對接時報(bào)錯Uncaught ReferenceError: Zepto is not defined

    這個錯誤是因?yàn)闆]有導(dǎo)入對應(yīng)的包，在ejs文件中通過路由導(dǎo)入即可顷窒，<script type="text/javascript" src="<%=asset('ee2018@3rdlibs/zepto.js')%>"></script>蛙吏，同理，vue.js也是這樣導(dǎo)入的

  • 通過watch監(jiān)測cityID和sortWay變化時調(diào)用getHotelList鞋吉，導(dǎo)致在取消排序切換到其他城市再切換回上海時會請求兩次鸦做，解決方法就是將sortWay單獨(dú)列成一個函數(shù)，不要同時監(jiān)測兩個變量的變化

  • 異步的問題谓着，即翻頁太快導(dǎo)致上次請求還沒有返回?cái)?shù)據(jù)泼诱，這時候preHotel的數(shù)據(jù)還沒有更新。通過判斷是否及時返回了數(shù)據(jù)來解決赊锚，如果及時返回了治筒，就直接放入hotels數(shù)組中，否則就在回調(diào)函數(shù)getPreData中再放入hotel數(shù)組中舷蒲。還想到的解決方法有promise和async/await耸袜，不過還不是很會用，需要學(xué)習(xí)

  • 503錯誤

    開啟了hkproxy代理牲平，換成系統(tǒng)代理或者關(guān)掉代理直接連接就行

  • 在設(shè)置了body的overflow:hidden之后堤框，移動端還是可以滾動

    通過給body增加position: fixed和width: 100%即可

  • 一個簡易的處理字符串中html字符實(shí)體的方法是創(chuàng)建一個div元素，將元素的innerHtml設(shè)置為該字符串欠拾，再通過div.innerText||div.textContent獲取字符串即可

  • CSS加載慢

• 在彈出彈窗之后胰锌，防止底層滾動的方法有：

  1. 將body和html都設(shè)置如下樣式：overflow:hidden;height:100%，pc端和移動端瀏覽器都有效藐窄。但是這樣有個問題就是在彈出彈窗（給body和html添加上述樣式）后资昧，底層會直接滾回頂部，這是因?yàn)?code>overflow:hidden表示從頭開始顯示荆忍，溢出頁面的內(nèi)容不顯示格带，所以會滾回頂部撤缴。
  2. 給body添加樣式display:fixed;width:100%，pc端移動端都有效叽唱。這個同樣有上述問題屈呕，就是底層會滾回頂部，這個有個解決方法是添加樣式時同時記錄下此時的scrollTop屬性的值棺亭，然后dispaly:fixed;width:100%;top:<記錄下的值>虎眨，之后在去除彈窗或者蒙板時，給頁面的scrollTop賦值為記錄的那個值镶摘，但這個方法只有pc端有效
  3. 將彈窗層的z-index的值設(shè)置的比底層的大嗽桩，由于z-index大的會先觸發(fā)事件，所以在彈窗層（注意是彈窗層）addEventListener將touchmove和mousewheel事件event.stopPropagation()凄敢、event.preventDefault()碌冶，在移除彈窗層時再removeEventListener就行。這個方法在pc端和移動端均有效涝缝，且不會出現(xiàn)底層滾動到頂部的問題扑庞，是比較完美的解決方法。詳見https://blog.csdn.net/yuhk231/article/details/74171734

     function forbiddenMove(event){
         event.stopPropagation();
         event.preventDefault();
     }
     

     document.getElementById("<彈窗層id>").addEventListener("touchmove",forbiddenMove,false);/*禁止移動端滑動*/
     document.getElementById("<彈窗層id>").addEventListener("mousewheel",forbiddenMove,false);/*禁用滾輪*/
     

     document.getElementById("<彈窗層id>").removeEventListener("touchmove",forbiddenMove,false);/*允許移動端滑動*/
     document.getElementById("<彈窗層id>").removeEventListener("mousewheel",forbiddenMove,false);/*允許滾輪*/
     

• 在pc端document.documentElement.scrollTop有效而document.body.scrollTop無效拒逮，在移動端恰好反過來罐氨，document.body.scrollTop有效而document.documentElement.scrollTop無效

• requestAnimationFrame代替setInterval