工作中運用javascript的一些小結

2023年2月16日 48次阅读 来源: CoyPan

不知不覺，正式事變立時兩年了，待了兩家公司，做過的項目也不少了，總結一下本身在寫代碼上的履歷積聚。

1. 肯定變量的範例

不要運用==，運用===

JS是弱範例言語，範例搜檢不嚴厲。在推斷兩個變量是不是相稱的時刻，運用==會舉行隱式的範例轉換。比方：

['a'] == 'a'; // true;
1 == '1'; // true;

在前端項目日趨龐雜的本日，早已不再是後端吐出數據，前端直接展現就好了。一些盤算是須要放在前端舉行的。前端要舉行盤算，那末變量的範例在全部過程當中，就必須是明白的。不然很輕易出一些bug。舉個最簡樸的例子，

var a = '0.1'; 
var b;
if(a == 0.1) {
    b = a.toFixed(3); // 失足，由於字符串沒有toFixed要領。
}
多運用const聲明變量

聲明一個變量的時刻，起首明白這個變量的範例，用const 舉行聲明。如許後續寫代碼過程當中，能夠清楚的曉得這個變量的範例，防止對變量舉行不合法的操縱或許一不小心對變量舉行了修正，湧現bug。而且，一開始運用const聲明變量，後續review代碼時，思緒能輕微清楚一點(這個變量就是用來干這個事變的，它是不會轉變的)。而let用來聲明一些依據推斷前提會發生變化的變量。

運用大寫的變量名來定義常量

運用const來聲明變量后，那用什麼來聲明常量，而且能夠防止和const聲明的變量殽雜呢？能夠採納大寫變量名來聲明常量。比方圓周率

const PI =3.1415926535;

在代碼中，看到名字大寫的變量是，我就曉得了，這是一個全局的常量。

2. 多運用純函數

純函數，就是不會發生副作用的函數。舉一個例子，

const fn = arr => { // 非純函數
    arr.push(1);
}

const pureFn = arr => {  // 純函數
    return [].slice.call(arr).push(1);
}

const oldArr = [2,3];
fn(oldArr); // fn修正了原數組，不純

const newArr = pureFn(oldArr); // pureFn返回了一個新數組，沒有修正原數組。

運用純函數的長處是，函數的輸出僅僅依靠輸入，不會受外部前提影響，而且不會影響到外部的環境。調試代碼時，能夠以函數為單元來考證、測試。

像上面的例子，我們在函數fn中修正了oldArr, 假如我們在別的一個處所又須要操縱oldArr的時刻, 我們能100%的保證曉得這個oldArr已被修正過了嘛？當營業邏輯變得龐雜的時刻，我們很輕易就疏忽了這個題目，致使湧現稀里糊塗的bug。而純函數就不會有這類題目，我們只須要關注其輸入和輸出就行。

再斟酌一種狀況，在運用vue或許react舉行開闢的時刻，常常會碰到我明顯更新了這個數組，但是頁面沒有從新襯着的題目。這是由於，vue和react在舉行數據的diff時，關於數組(援用數據範例)，都沒有採納深比較。假如我僅僅只轉變了數組中的一個元素時，數組實在並沒有變化，vue和react發明沒有diff，固然不會從新襯着。運用純函數就不會有這個題目，由於每次都是返回一個全新的數組。

3. 函數中只管防止if、else的嵌套

if 、else是非常罕見的一種邏輯。假如在代碼中，湧現了龐雜的嵌套，會下降代碼可讀性，而且輕易失足。比方下面的代碼：

function fn (a,b,c){
    if(a>1){
        if(b === c){
            return true;
        } else {
            return false;
        }
    } else {
        return true;
    }
}

以上代碼能夠改寫為，防止了多層的嵌套，代碼的可讀性得到了加強。

function fn(a,b,c){
    if(a <= 1) {
        return true;
    }
    if(b === c){
        return true;
    }
    return false;
}

同時，還能夠多運用短路，削減if 、 else的運用

var b;
if(condition) {
    b = 1;
}

// 能夠改寫成
var b;
condition && (b = 1);

4. 闇練運用數組的種種操縱要領

Array.forEach、Array.map、Array.filter、Array.reduce等等，都是迥殊好用的數組操縱要領，險些能夠滿足種種的遍歷須要了，比for輪迴來得文雅。

  • Array.forEach僅對原數組舉行一次遍歷。
  • Array.map對原數組舉行遍歷，返回一個新數組。
  • Array.filter對原數組舉行過濾，同時返回一個新數組。
  • Array.reduce對原數組舉行一次遍歷，能夠舉行累加。

但實在for輪迴有一個以上要領都沒有的長處，for輪迴能夠隨時中斷數組的遍歷，break一下就行。

能夠依據差別場景採納差別的遍歷要領。

5. 削減對jQuery、zepto的依靠，積聚本身的小工具庫

現在寫代碼已很少運用jQuery和zepto了。jQuery和zepto確切給我們帶來了很大的輕易，但許多時刻，運用jQuery或許zepto只是為了運用挑選器，發送要求，簡樸動畫。挑選器完全能夠用querySelector等替代了，發送收集要求，不管是ajax或許jsonp，本身封裝一個就行，沒有必要為了這一個功用，引入一個完全的jQuery或zepto。固然，運用特地的http要求庫也是很好的挑選。簡樸動畫運用css3就能夠完成了，並不須要運用js操縱DOM。

在營業中，一些常常運用的小的功用，比方獵取dom元素間隔頁面頂部的高度，獵取url中的參數，推斷變量範例，函數防抖，函數撙節等等，完全能夠封裝進本身的小工具庫，在多個項目中運用。

寫在末了

事變時間還不夠長，代碼量也還不夠，關於javascript的一些高等運用，編程技能，種種設想形式在項目中的運用，項目的團體架構等還沒有很深切的明白，react、vue等框架也只是會用罷了，並沒有很深切的研討。

以上總結僅僅是個人關於事變中的一些細節上的履歷之談。迎接交換。

    原文作者：CoyPan
    原文地址: https://segmentfault.com/a/1190000015443387
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞