国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

工作中使用javascript的一些小結

lykops / 1217人閱讀

摘要：而用來聲明一些根據判斷條件會發生變化的變量。函數中盡量避免的嵌套是十分常見的一種邏輯。僅對原數組進行一次遍歷。當然，使用專門的請求庫也是很好的選擇。以上總結僅僅是個人對于工作中的一些細節上的經驗之談。

不知不覺，正式工作馬上兩年了，待了兩家公司，做過的項目也不少了，總結一下自己在寫代碼上的經驗累積。
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等框架也只是會用而已，并沒有很深入的研究。

以上總結僅僅是個人對于工作中的一些細節上的經驗之談。歡迎交流。

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

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

相關文章

  • 【讀書筆記】《高性能JavaScript》

    摘要：性能訪問字面量和局部變量的速度是最快的，訪問數組和對象成員相對較慢變量標識符解析過程搜索執行環境的作用域鏈，查找同名標識符。建議將全局變量存儲到局部變量，加快讀寫速度。優化建議將常用的跨作用域變量存儲到局部變量，然后直接訪問局部變量。 缺陷 這本書是2010年出版的，這本書談性能是有時效性的，現在馬上就2018年了，這幾年前端發展的速度是飛快的，書里面還有一些內容考慮IE6、7、8的東...

    chengjianhua 評論0 收藏0

  • 高性能javascript小結

    摘要：高性能小結文章轉載于我的博客最近看完了動物叢書的高性能，覺得那本書的小結部分寫得非常不錯，簡潔輕快易懂概括性很強。由于局部變量存在于作用域鏈的起始位置，因此訪問局部變量比訪問跨作用域變量更快。 高性能javascript小結 文章轉載于我的CSDN博客：http://blog.csdn.net/hello_world_20/article/details/46793317 最近看完了動...

    wujl596 評論0 收藏0

  • 編程模型（范式）小結

    摘要：參考鏈接面向對象編程模型現在的很多編程語言基本都具有面向對象的思想，比如等等，而面向對象的主要思想對象，類，繼承，封裝，多態比較容易理解，這里就不多多描述了。 前言 在我們的日常日發和學習生活中會常常遇到一些名詞，比如 命令式編程模型，聲明式編程模型，xxx語言是面向對象的等等，這個編程模型到處可見，但是始終搞不清是什么？什么語言又是什么編程模型，當你新接觸一門語言的時候，有些問題是需...

    miya 評論0 收藏0

  • 高性能JavaScript（文檔）

    摘要：最近在全力整理高性能的文檔，并重新學習一遍，放在這里方便大家查看并找到自己需要的知識點。 最近在全力整理《高性能JavaScript》的文檔，并重新學習一遍，放在這里方便大家查看并找到自己需要的知識點。 前端開發文檔 高性能JavaScript 第1章：加載和執行 腳本位置 阻止腳本 無阻塞的腳本 延遲的腳本 動態腳本元素 XMLHTTPRequest腳本注入 推薦的無阻塞模式...

    RayKr 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<