本文目錄一覽：
如何讓能讓jquery的.min.js文件變得可讀性
可以下載沒加壓的jquery文件。一般文件名沒帶min 的jquery都是沒加壓的。
如何寫高質量的JS，Html5前端代碼
首先，本人在前端開發方面有點心得，有什麼不對的地方希望給出建議讓我更好的進步
1.命名
在開發前必須有個命名規範來對代碼統一規範團隊代碼結構，使代碼可讀性提高
2.注釋
我相信每個人看別人代碼時看到密密麻麻的代碼結構，相信每個人都會很頭疼，即使想看也會看不下去，而且很耗時間，所以注釋就變得尤其得重要，注釋越清楚越詳細我相信代碼可維護性越高，而且更容易修改維護
3.變量
在js中變量無處不在，所以這麼聲明變量就變得尤其得重要，首先少使用全局變量，這樣會增加加載速度，從而導致項目用戶體驗不好
4.聲明變量如果不用 var 會導致變量成為全局變量。
5.函數
函數的參數數量
函數的參數不應該超過 3 個。如果函數的參數超過 3 個，應該將一些參數進行封裝。
6.函數參數傳遞
只傳函數需要的參數。如
// 不推薦
function greet(data){
console.log(‘Hello, I am ‘ + data.name);
}
// 推薦
function greet(name){
console.log(‘Hello, I am ‘ + name);
}
7.函數的功能
一個函數只做一件事。這有助於測試和代碼復用。
函數儘可能無副作用。無副作用指不修改傳入的參數和全局變量。
8.減少重複代碼
. 記得在某個文章中看到說，如果重複的代碼出現 3 次，就應該重構重複的代碼。
. 松耦合
. 一個函數只做一件事
. 緩存一些計算結果
9.避免全局變量
. 從分配置和離邏輯代碼
. 不要修改不屬於你的對象
. 不屬於你的對象包括
. 瀏覽器原生對象，如 Object，Array等
DOM，如 document
BOM，如 window
類庫對象
如果想拓展瀏覽器原生對象的功能，可以創建函數，函數中把瀏覽器原生對象傳入。如 Underscore.js 做 的那樣。
10.代碼風格的統一
11.儘可能的避免代碼重複
. 如何減少重複的代碼呢？
. 在JS中，可以將重複的代碼寫成一個方法，如果是可通用的，可以寫在獨立的JS文件中。
. 在CSS中，則需要藉助Sass，Less之類的預處理語言的Mixins的功能。將重複的部分寫成一個Mixins。
12.配置和邏輯分開
. JS中，對於整個站的通用配置，寫在config.js里。如果是某個js的配置，在文件的開頭，用defaultParam 對象來存放可變的配置，用const來定義不可變的配置
. CSS中，依舊要藉助預處理語言。對於整站的配置，定 義在_variables.scss里。對於某個具體CSS文件里，在文件開頭用變量來定義
13.減少代碼的副作用
1JS中，方法中的溝通盡量不要用全局變量；不要在Array之類的全局對象的原型鏈上添加方法；盡量不要定義全局的方法和變量：如果確實有很多變量，方法放在全局上，可以學習jQuery,將很多變量，方法放在一個全局對象上；自定義事件，事件的名稱也要有命名空間。
2CSS中，要做到無副作用，難度很大。對於簡單頁面，一個方法是，把頁面上的元素都分成一個個組件，寫樣式時，選擇器要用組件選擇器 當前元素選擇器。當組件變的複雜時，組件也會包含很多子組件。然後，選擇器就會越來越長。。。我的解決方案是用的BEM。
14.提高代碼的可讀性
. 變量，方法等的合理命名，通過名稱可以知道這個大概做什麼的。
. 如果則要加註釋來說明一下。對於不容理解的代碼加註釋
. 儘可能不用魔法數字
. 對於HTML，選擇合適標籤
15.一個方法只做一件事
一來提高代碼的復用性，二來讓調試也變的更容易，三來讓測試變的更容易
如何寫出優美的 JavaScript 代碼
javascript代碼和其他腳本語言一樣，都要合理的組織好，不然到最後js代碼也是比較亂的。
我把JS的組織分成了三個階段，看看您現在屬於哪個階段。
初級階段，JS代碼從頭順序寫到尾,過程化
html
body
input type=”text” name=”username” id=”username” value=”” /
input type=”password” name=”password” id=”password” value=”” /
/body
/html
script type=”text/javascript”
if(document.getElementById(“username”).value == “”){
alert(“用戶名不能為空”);
}
if(document.getElementById(“password”).value == “”){
alert(“密碼不能為空”);
}
/script
缺點：像這樣的代碼都是寫一個頁面裡面的，代碼基本不能共用，最後的結果js代碼冗餘比較多。
優點：單個頁面修改比較快，不用考慮影響其他頁面。不用加載JS文件。
中級階段，通過JS的function來，組織js代碼
在開發的過程中，不斷的發現，順序寫JS代碼，有太多的麻煩，到最後可能就無法維護，要麼維護的時間的太長。在重新開發的時，有意識的對代碼進行分塊，注意代碼的共用性，這個時候function寫的比較多。
script type=”text/javascript”
function check_username() {
if(document.getElementById(“username”).value == “”){
alert(“用戶名不能為空”);
}
}
function check_password() {
if(document.getElementById(“password”).value == “”){
alert(“密碼不能為空”);
}
}
/script
優點：對JS代碼，進行分塊，共用性較好，修改一處所有調用都可以修改掉，並且代碼可讀性加強。
缺點：需要加載JS文件，如果function過多，導致找一個function要花很多時間。
高級階段: 通過方法類，域等對function進行分割
當一個JS文件裡面有100多個方法的時候，這個時候看代碼其實挺難過的，如果能把裡面的function進行分分類是不是就清楚很多，好比，這幾個方法是註冊時check用的，這個幾是對字符串的驗證用的等等。
script type=”text/javascript”
function register(){
this.check_username = function(){
if(document.getElementById(“username”).value == “”){
alert(“用戶名不能為空”);
}
}
this.check_password = function(){
if(document.getElementById(“password”).value == “”){
alert(“用戶名不能為空”);
}
}
}
new register().check_username(); //調用方法
/script
上面的這種用的是方法類，大方法是register，裡面定義的二個小方法，一個是對用戶名的check,一個是對密碼的check.
script type=”text/javascript”
var register = {
check_username:function(){
if(document.getElementById(“username”).value == “”){
alert(“用戶名不能為空”);
}
},
check_password:function(){
if(document.getElementById(“password”).value == “”){
alert(“用戶名不能為空”);
}
}
}
register.check_username(); //調用方法
/script
個人覺得通過域，來對function進行管理，規劃最簡單明了。
如何提高代碼可讀性，可維護性
如何提高代碼可讀性，可維護性
很多程序員在寫代碼的時候往往都不注意代碼的可讀性，讓別人在閱讀代碼時花費更多的時間。其實，只要程序員在寫代碼的時候，注意為代碼加註釋，並以合理的格式為代碼加註釋，這樣就方便別人查看代碼，也方便自己以後查看了。下面分享十個加註釋的技巧： 1. 逐層注釋為每個代碼塊添加註釋，並在每一層使用統一的注釋方法和風格。例如：針對每個類：包括摘要信息、作者信息、以及最近修改日期等；針對每個方法：包括用途、功能、參數和返回值等。在團隊工作中，採用標準化的注釋尤為重要。當然，使用注釋規範和工具(例如C#里的XML，Java里的Javadoc)可以更好的推動注釋工作完成得更好。2. 使用分段注釋如果有多個代碼塊，而每個代碼塊完成一個單一任務，則在每個代碼塊前添加一個注釋來向讀者說明這段代碼的功能。
原創文章，作者：小藍，如若轉載，請註明出處：https://www.506064.com/zh-hant/n/200365.html
微信掃一掃 
支付寶掃一掃 