前端程式員應該了解的項目經驗分享

1：HTML

• 盡量使用語義化标簽 header aside main footer 等
• 給a标簽加上href：“javascript：；”就能禁止跳轉
• 塊級元素獨占一行
• 除了div等那些，基本上都是行内元素
• 行内元素設定寬高邊距無效
• img、input屬于行内替換元素:height/width/padding/margin均可用。效果等于塊元素
• button也是行内元素

2：CSS

• 引入清除樣式
• 文字的居中，text-align，line-height
• 盒子的間隔可以考慮外邊距margin，也可以考慮内邊距padding。盡可能偏向内邊距
• div的寬度盡量給百分比或者min-width/max-width
• 如果設定了相同的寬高，發現對不齊，考慮盒子的padding和boder ，設定box-sizing：border-box
• 圖檔是行内元素 可以直接在img标簽上 有<img src="smiley-2.gif" alt="Smiley face" width="42" height="42"> 屬性，或者veight設定居中，在img标簽屬性上寫width:100%。能自動鋪開
• 想給圖檔設定外邊距，先設定display：block，變成塊級元素，或者用div包裹圖檔
• 涉及到模态框的問題，點選空白處模态框關閉，事件冒泡不能解決的話，可以在子div加個同級的背景div，在背景div上面加關閉事件，背景div樣式為寬高100%再加個顔色
• less嵌套文法加僞元素 加上&符号 和：
• less等文法 可以抽離公共部門。規定整個項目的顔色主題，規定一個變量@blue:#fff，在每個頁面進行導入，通過@import 導入路勁。
• img是行内元素，雖然可以設定寬高，但是設定display:block減少邊距
• 設定flex布局如果是justify設為space-bewteen，加上允許換行，會有樣式錯誤。解決辦法

• 嵌套僞元素選擇器寫法&:nth-child（第幾個）
• 選擇後代第幾個&：nth-of-type（）
• 最後一個子節點不需要樣式，&：last-chlid
• hover可以指定下面的具體類名加上樣式（比如顯示隐藏），一般配合trasform，和trantions
• 如果說hover給排列的item加樣式，比如加邊框，可能會出現樣式重排。避免這種情況，在原始樣式上設定對應的屬性比如border的顔色為transparent，再hover的時候改顔色。

• 如果說給hover時滑鼠移上去有bug

  可以在外層加一層div包裹

• 加了border後，要考慮盒子大小，box-sizing：border-box
• css3  filter 濾鏡屬性，可以給圖檔設定濾鏡顔色
• user-select：none。
• 旋轉loading動畫，将圖檔360旋轉

3：JavaScript

• 為了清除定時器，要給定時器取個變量名字指派
• 定時器的第一個參數為自執行函數，例如調用别的函數就不要加（）。缺點：第一次函數不執行

  這樣可以第一次執行該函數
  let a =1 
  
  setInterval(b(),8000)
  
  function b() {
  console.log(a)
  return b
  }
             

• 一般來說對于輸入表單的字元串應該加個trim去掉空格
• js的邏輯無非是根據一個狀态去區分寫代碼，這個狀态我們可以自己定義一個變量去實作
• 對象的屬性可以通過【】獲得，括号裡面是字元串類型，當屬性是特殊字元串時使用【】
• vue本地圖檔的src  bind  使用require（““）導入
• 路徑的攜帶參數？前面不需要/，後面拼接屬性
• 純粹的指派使用或運算符，或運算符 就是相當于 一次三元運算符或者簡單的if判斷
• js splice會影響到原數組，比如截取，原數組會變少，slice不會影響原數組
• 擷取視圖視窗高度等

• 想給字元串在某一處添加字元串，可以考慮正則比對出來一個字段替換成要加的字段拼接

• js事件：JS事件（event）處理

4：Vue

• 路由的監聽，可以通過this.$route得到目前路由的資訊，一般來說，路由的指派變量可以在watch裡面可以監聽到指派data，或者生命周期鈎子裡可以操作路由指派data，元件裡也可以直接通過this.$route擷取路由資訊
• watch監聽拿不到路勁是 需要加上ine屬性，讓她第一次就監聽
• route是能拿到路由的資訊，比如route. params或者route. query取決你傳參的形式
• 位址欄路勁可以通過route得到
• 路由傳參适用于使用同個元件擷取不同的值，一般來說我們都是不同元件的生命鈎子裡拿資料
• 根據某個狀态做判斷條件可實作樣式控制或者js邏輯
• 動态元件或者其他子元件，他的生命周期都是在父元件裡面的，切換子元件的顯示隐藏，不能觸發子元件的某些生命周期
• v-show無法和v-else配合使用
• Ifarme不能和v-if使用
• vue元素帶有key屬性，當key發生變化，這個元素會被重新加載，是以我們可以使用同個标簽根據key綁定計算屬性渲染不同的樣式标簽
• 也可以在routerview上攜帶key屬性，達到每次key不同，既渲染不同元件，觸發生命周期
• 樣式相同值不同考慮是子元件傳值，或者後端傳回值再傳給子元件，不同樣式考慮元件的話就是動态元件，不同樣式隻是标簽的話，建議v-show頻繁切換不涉及生命周期
• 路由下的children子路由數組，預設展開一個時，在主路由處重定向路徑到你需要展開的子路由路勁
• 重新整理頁面。。router.go(0)，，根據路由的變化，重新整理頁面

• 盡量不要對資料源進行操作
• vue元件的this指向該元件的執行個體，在main,js導入了資源時，在該元件執行個體調用vue的原型屬性時，加上$符号，比如導入了路由就是this.$router，this.$store，this.$set
• vue事件修飾符：https://blog.csdn.net/io_123io_123/article/details/122975610
• 面包屑元件的寫法使用預設插槽，父元件v-for周遊出來放在面包屑子元件的預設插槽裡
• router-view其實和動态component标簽一樣，相當于一個子元件标簽。變化動态的
• tabs标簽選中的樣式一般基于後端傳回的字段綁定class，如果後端沒有傳回，我們可以在data裡面定義一個變量去和v-for的index做比較，然後再點選事件裡設定這個data裡面的變量等于index（綁定方法裡傳入index），就可以為真加上樣式了
• 全局搜尋的思路，把輸入框的綁定值當成路由傳參到浏覽器路勁上，監聽路由變化或者重新整理頁面拿到路勁參數的值進行請求啊哈哈哈
• 修改數組裡面的某項值時，可能會出現資料更新，頁面不重新整理的問題，這是因為vue監測不到對象和數組的變化，一般用Vue.set（）去改 ，或者用下面這個方法
• this.$forceUpdate()作用：強制更新方法,作用是觸發vue的update方法。可以用在解決資料對象新增屬性和數組新增資料,出現頁面不渲染的問題。
• 一般來說{{}}v-text裡可以做js邏輯計算，如果複雜的話 可以寫傳參的計算屬性 傳回一個函數
• 路由路徑path：“*”，則為剩餘路徑
• 圖檔懶加載可以使用插件，在：src的屬性上改為v-lazy就行，注意圖檔位址為伺服器路徑，不是本地相對路勁
• 在export default 外面定義變量考慮兩點。1：使該變量成為目前頁面的全局變量，2：不需要該變量響應式變化，3：可以做一個存儲，将後端傳回的值存儲下來，全局變量使用
• 頁面的監聽事件在mounted鈎子内定義，定義的是window監聽，要在該頁面銷毀前清空這個監聽，不然會影響到别的頁面，類似于清空定時器一樣。減少性能損耗。另外，在不滿求判斷條件的情況下，要取消監聽。避免bug，比如什麼時候開啟監聽，什麼時候不需要監聽，要充分考慮一下。

• vue中清單循環，你想給選中的item加上active樣式，可以考慮在data裡定義一個屬性，然後綁定class，當點選方法時，将這個屬性等于清單循環的index，三元表達式加上active

• 

封裝元件思路：樣式根據傳參變化。都是根據狀态動态的渲染

4-1：路由守衛

全局守衛要在router執行個體以後調用，調用beforeeach方法，傳一個箭頭函數

5：http狀态碼，和資料傳參

狀态碼：

• 1xx：臨時響應
• 2xx：成功
• 3xx：重定向
• 4xx：請求錯誤---401需要權限，403拒絕請求，404路勁不對
• 5xx：伺服器報錯，502，無法響應，504逾時

500：1伺服器問題。2前端傳參格式錯誤

傳參問題：

參數格式（對象字元串還是qs字元串），請求頭類型，傳參類型（params，data，路徑）

參數格式參考：VUE項目，什麼情況要使用qs，序列化 - javascript9527 - 部落格園

因為設定的headers格式是 application/x-www-form-urlencoded

這種格式是form送出的格式 name=zhangsan&age=4

是以要把json {name:zhangsan,age:4}格式轉換為name=zhangsan&age=4的格式      

因為後端是根據一個字段識别，是以我們傳對象，将屬性作為識别器，值為值 

一般來說我們隻需要定義一個對象參數就行  然後寫請求方式

根據id進行接口查詢方式

接口文檔的：

 js的請求方法寫法如下：

路徑後面拼接參數

是隻需要傳值的情況( 根據id進行查詢 )

// 删除Modeler
export function delModeler(id) {
  return request({
    url: '/modeler/remove/' + id,
    method: 'delete'
  })
}

隻需要傳id的值  
           

路勁括号攜帶參數

路徑寫成模闆字元串形式

const getName = (id)=> getAction(
   `/safety-service/hiddendanger/thTCheckarea/details/${id}` );


 //根據id擷取checkName
 getName(event.node.dataRef.checkId).then((response) => {
        this.form.parentCheckName = response.result.parentCheckName
      })
           

 其實兩種方法結果一樣，都是拼接，無非就是看接口文檔選擇的兩種寫法

6：前端實作微信登陸

7：報錯資訊

 報  of  undefined，先全局搜尋該項，一般來說這個屬性本身不會錯，考慮這個屬性的前面的問題，比如指向作用域或者拿不到。亦可能考慮後端傳回值字段

報 not  defined  是該屬性未定義

8：項目配置即打包釋出

在package.json裡面輸入打包node指令

 可以在dist下面的html，用vscode打開右鍵open in serve  可以看看結果