前端JS代碼規范

zhiwei 發布于2019-08-21 18:24 / 2482人閱讀

摘要：縮進為個空格句末必須用分號結尾待定就無分號注釋單行注釋多行注釋代碼注釋和再提交重要函數或者類等都要添加頭描述字符串拼接應使用數組保存字符串片段，使用時調用方法。

前言

下面這幾點將工作中所踩的一些坑簡單整理了一下,團隊幾個人開發,一些默契就比較重要,可以提高開發效率和代碼的可讀性

命名,編碼和注釋 命名

A.文件夾命名:文件夾、文件的命名與命名空間應能代表代碼功能,可讀性強,如hub
B.函數和變量命名:
具有意義的駝峰命名,如hubList;
變量函數名禁止使用關鍵字和保留字,禁止重新定義(不能重名)或定義不用
C.常量:大寫字母,如HUBLIST

編碼

采用統一的縮進方式排版代碼。縮進為2個ASCII空格,句末必須用分號結尾(待定,vue就無分號)

注釋

A單行注釋

B多行注釋

C.Js代碼注釋console.log和debugger再提交
D.重要函數或者類等都要添加頭描述

字符串拼接

應使用數組保存字符串片段，使用時調用join方法。避免使用+或+=的方式拼接較長的字符串，每個字符串都會使用一個小的內存片段，過多的內存片段會影響性能

例一:

例二:會影響性能

ES6的使用 變量聲明:

Let:不存在變量提升問題;不能重復聲明

常量聲明:

Const:原理是內存地址不可變

箭頭函數:

A.有函數名

B.無函數名

C.箭頭函數使用注意的問題:
This指向定義者,內部無arguments對象,不能new(因為箭頭函數的this就是指向定義本身),函數里面不要有太多的return
D.函數的形參不超過7個,超過用數組,調用時實參和形參對應
E.不能有重復的返回
F.在循環內部聲明函數慎用,因為是循環執行完成函數調用才會執行
G.Return后面不要寫代碼,并且不封裝成if…then…else…

導入和導出

使用import和export,只能位于代碼頂部和頂部,如果代碼中部需要按需導入文件使用require

解決地獄回調問題

A.方法一

B.方法二

C.promise解決多個ajax或定時器調用數據依賴問題

1.promise里面不存在ajax和定時器

var data1=12;
  Promise.resolve().then(
    function(){data1=24})
  .then(function(){
    console.log(data1);
  })

2.存在定時器

var data2=54;
let _this=this;
  Promise.resolve().then(function(){
    return new Promise(function(res,rej){
        setTimeout(() => {
        data2=36
        console.log(data2)
        console.log(_this)
        res()
        return data2;
      }, 10);
      })
  }).then(function(){
    console.log(data2)
  })

在定時器里面設置res(),res執行啦,才會執行then(),如果對應的ajax也可以做類似的封裝
promise里面的this并不指向vue,所以需要在外面緩存

3.axios封裝的promise
可以在axios里面設置flag,用watch監聽,值返回再執行下面的代碼,并設置Flag為false

If,for…in,for…of和的使用

A.能用三元運算符就用,減少if的嵌套,第一個花括號位于一行的結束

B.減少多余條件判斷,如果是函數返回if里面和外面返回相同的數據類型

C.If…else if…else多個條件時以else結尾,因為符合防御性編程規則
D.NaN不應該用于比較,應該是判斷是否是數字
E.Switch…case使用在至少有三個判斷值,case不可省,每次case必須用break跳出
F.for…of遍歷數組和字符串

可以使用break,return(一個循環一個),continue不使用,降低代碼可讀性
G.for…in遍歷對象
For…in遍歷對象包括所有繼承的屬性,所以如果只是想使用對象本身的屬性需要做一個判斷

總結

歡迎大家補充和修正!大家圣誕節快樂.

GPU云服務器云服務器前端規范前端規范文檔代碼規范代碼規范考試

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/90431.html

從 1 到完美，寫一個 js 庫、node 庫、前端組件庫

摘要：從到完美，寫一個庫庫前端組件庫之前講了很多關于項目工程化前端架構前端構建等方面的技術，這次說說怎么寫一個完美的第三方庫。使用導出模塊，就可以在使用這個庫的項目中構建時使用功能。從 1 到完美，寫一個 js 庫、node 庫、前端組件庫之前講了很多關于項目工程化、前端架構、前端構建等方面的技術，這次說說怎么寫一個完美的第三方庫。 1. 選擇合適的規范來寫代碼 js 模塊化的發展大致有...

rollback 2019-08-29 17:18 評論0 收藏0
從 1 到完美，寫一個 js 庫、node 庫、前端組件庫

摘要：從到完美，寫一個庫庫前端組件庫之前講了很多關于項目工程化前端架構前端構建等方面的技術，這次說說怎么寫一個完美的第三方庫。使用導出模塊，就可以在使用這個庫的項目中構建時使用功能。從 1 到完美，寫一個 js 庫、node 庫、前端組件庫之前講了很多關于項目工程化、前端架構、前端構建等方面的技術，這次說說怎么寫一個完美的第三方庫。 1. 選擇合適的規范來寫代碼 js 模塊化的發展大致有...

xiaolinbang 2019-08-26 13:22 評論0 收藏0
前端資源系列（4）-前端學習資源分享&前端面試資源匯總

摘要：特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。本以為自己收藏的站點多，可以很快搞定，沒想到一入匯總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應和斧正，會及時更新，平時業務工作時也會不定期更...

princekin 2019-08-20 11:28 評論0 收藏0
構建前端項目

摘要：解決思路服務器端渲染服務器端和前端公用同一個應用，然后通過構建工具及配置，確定哪些組件需要再服務器端渲染，那些組件需要再客戶端渲染。服務器端渲染，由框架與構建工具配合，并依據一定的項目結構和編碼方式，共同運行。分離為什么需要前后端分離、web服務器與static服務器分離: 前端與后端耦合 (需求) 自動化、工程化的構建前端的代碼 (基礎條件) 模塊化、組件化，項目共享代碼 (...

mindwind 2019-08-23 13:51 評論0 收藏0
前端、HTML+CSS+JS編寫規范（終極版）

摘要：文檔規范和文檔必須采用編碼格式文檔必須使用的標準文檔格式編寫規范和的標簽屬性類名都必須使用小寫字母和的屬性類名命名必須具有語義化代碼必須保持文檔結構清晰，必須合理的進行代碼縮進文件禁止樣式表內引用文件編寫格式，樣式代碼保持一行，多個選擇器 HTMLCSS文檔規范 HTML和CSS文檔必須采用UTF-8編碼格式； HTML文檔必須使用HTML5的標準文檔格式； HTMLCSS編寫規范...

jsyzchen 2019-08-01 18:15 評論0 收藏0
前端、HTML+CSS+JS編寫規范（終極版）

摘要：文檔規范和文檔必須采用編碼格式文檔必須使用的標準文檔格式編寫規范和的標簽屬性類名都必須使用小寫字母和的屬性類名命名必須具有語義化代碼必須保持文檔結構清晰，必須合理的進行代碼縮進文件禁止樣式表內引用文件編寫格式，樣式代碼保持一行，多個選擇器 HTMLCSS文檔規范 HTML和CSS文檔必須采用UTF-8編碼格式； HTML文檔必須使用HTML5的標準文檔格式； HTMLCSS編寫規范...

_Dreams 2019-08-22 11:23 評論0 收藏0