【譯】當(dāng)不使用JavaScript框架時

blair 發(fā)布于2019-08-20 18:26 / 3115人閱讀

摘要：在其他方面，我們只需要考慮針對特定任務(wù)時所使用框架的成本。當(dāng)我們必須使用或不應(yīng)該使用框架時我強(qiáng)烈主張要了解編寫某個工具的目的。

非常有價值的建議：哪些框架是合理的，哪些并不合理。

作者：Tod Hansmann
來源：https://opensource.com/articl...
翻譯：瘋狂的技術(shù)宅
說明：本專欄文章首發(fā)于公眾號：jingchengyideng 。

Image by : opensource.com

隨著互聯(lián)網(wǎng)的發(fā)展，網(wǎng)絡(luò)發(fā)展已經(jīng)遠(yuǎn)遠(yuǎn)超出了預(yù)期——不管是好的還是壞的方面。為了打磨粗糙的細(xì)節(jié)，web開發(fā)人員發(fā)明了大量的框架，既有小巧又的也有不那么小巧的。這對開發(fā)人員來說是一件好事，因為瀏覽器的碎片化和標(biāo)準(zhǔn)問題比比皆是，特別是對于那些想要新的API功能和更多統(tǒng)一語法的用戶而言。此外大多數(shù)框架都是開源的，這對每個人都是有好處的。

現(xiàn)在可以看到這些粗糙的細(xì)節(jié)已經(jīng)隨著時間被逐漸打磨掉掉，不再像以前那么尖銳了，所以我們應(yīng)該適當(dāng)?shù)臏p少一些框架的使用。在其他方面，我們只需要考慮針對特定任務(wù)時所使用框架的成本。

一些事情可以自己來做

考慮一下簡單的HTTP請求，曾經(jīng)是一段50行的函數(shù)，就可以在 Firefox 和 Internet Explorer 中完成簡單的GET搞作。舉個例子，這里有一個簡單的函數(shù)可以完成POST操作；我們曾經(jīng)在網(wǎng)站 Phone Janitor（網(wǎng)址：https://phonejanitor.com/ ）的生產(chǎn)環(huán)境下使用它超過一年，并把它作為React的主用數(shù)據(jù)泵：

function postMe(name, data, callback, onError) {
    var request = new XMLHttpRequest();
    request.onreadystatechange = function() {
        if (request.readyState != 4 || request.status != 200) { return; }
        var body = JSON.parse(request.responseText);
        if (body.error) {
            onError(body.error);
        }
        else {
            callback.(body);
        }
    };
    request.open("POST", "/api/" + name, true);
    request.setRequestHeader("Content-type", "application/json");
    request.send(JSON.stringify(data));
}

這段沒有使用任何框架的代碼可以很容易的被重寫，然后很好的與Promise一起工作，并能夠適應(yīng)新的請求類型，或者可以支持任何對你的應(yīng)用至關(guān)重要的功能。它的設(shè)計是否良好？也許不是。它是健壯的嗎？這僅僅是為了我們當(dāng)前的需要。它的意義不在于它是或者是什么，而更多需要思考的是我為什么要使用其他的框架。

如果我不想編寫自己的HTTP請求引擎，也會有很多選擇。不過它們都是有代價的。它們有多大？我該怎樣在自己的代碼中包含它們，以及它是如何影響我的工作流程的？他們還做了哪些不必要的事情消耗了時間？如果我花了一個小時（這是我們花在代碼和測試上的時間）來實(shí)現(xiàn)這個功能以滿足我所有的需求，那么與集成一個庫來來實(shí)現(xiàn)同樣的功能相比，會節(jié)省很多時間嗎？對此我們每個人都會有不同的答案。

所有人的一切問題

我們使用服務(wù)（services）來滿足各種不同的需求。這才是問題的癥結(jié)所在。為了社區(qū)利益而統(tǒng)一API是一件好事，因為有些事情很微妙，很難多帶帶完成。jQuery之所以被編寫出來，是因為瀏覽器的差異性非常大，而 JavaScript API 對此能做的事情太少了。有一段時間，幾乎每個Web開發(fā)人員都在使用 jQuery ，這樣他們可以使用文檔對象模型（DOM）來處理簡單的innerHTML元素，但是這對頁面加載時間產(chǎn)生了明顯的影響。現(xiàn)在思考一下下面的案例：

// Author"s note, this is mostly for example, 
// don"t manipulate DOM unless you know what 
// that means for your app

var el1 = document.getElementById(id_Name);
var el2 = document.getElementsByClass(class_Name); // returns array
var el3 = document.querySelector("div.user-panel.main input[name="login"]");

// Want it in a jquery style function name?

var $ = document.querySelector; // Or get fancier if you wish
var el4 = $("div.user-panel.main input[name="login"]");

直到現(xiàn)在我們?nèi)匀辉趶V泛使用 jQuery (例如:一般的WordPress主題)。不要隨意相信我說的話，你可以自己去看看到底是不是這樣。如果沒有它們，我們幾乎什么也做不了。

即使我們使用框架

這不僅僅是我們?nèi)绾我约昂螘r使用框架的問題；它還涉及到我們?nèi)绾翁幚硖匦院透郊咏M件。例如，例如，將 Google Visualization 集成到 Angular 框架中。在 MobilSense ，我們嚴(yán)重依賴圖表向管理團(tuán)隊提供報告——但我們也使用Angular 1.5。那么怎樣做才能把新功能集成到我們的應(yīng)用程序的圖表中呢？

我們可以選擇 angular-google-chart 或開發(fā)自己的解決方案庫。雖然 angular-google-chart是一個很棒的庫，我在其他地方也使用過它，同時很感激作者貢獻(xiàn)他的免費(fèi)項目——但是由于一些顯而易見的原因，我們自己實(shí)現(xiàn)了相關(guān)的功能庫——以下是他們的特征對比:

Angular-Google-Charts	我們自己的庫
20個源碼文件	1個源碼文件
平均每個文件約40行代碼	包括注釋在內(nèi)的81行代碼(遺憾的是，沒有太多的注釋)
被npm集成到angular中	不是一個包，不依賴任何東西，它只是另一個指令

我們自己的解決方案并不處理所有情況，也并不需要處理這些情況，如果一旦需要，我們可以很容易地擴(kuò)充它們，并且以某種方式移植到我們的工作流和其他框架中。這是我們每個人都需要根據(jù)自己的具體需求做出的權(quán)衡。這兩種選擇都不丟人。

當(dāng)我們必須使用或不應(yīng)該使用框架時

我強(qiáng)烈主張要了解編寫某個工具的目的。如果我們的目標(biāo)是一種暫時的、需要快速拼湊的東西，那么可能并不需要將其工程化。但是如果是需要被長久使用的東西，我認(rèn)為使用框架工具是更合適的。一個框架一經(jīng)使用便很難擺脫，特別是假如我們添加了一些庫，這將進(jìn)一步把我們和這個框架綁定在一起。

如果只有要一兩天的時間來編寫自己的解決方案，我就會傾向于這樣做。如果有一周或更長的時間，我也許會改變自己的主意。

另外一個自己編寫的庫的理由是，使自己的項目依賴一個可能不適合你的項目生命周期的框架，代價是很昂貴的。但是，如果你要做的是一件非常復(fù)雜的事情，比如集成PDF支持，那么您可能完全不愿意考慮自己編寫，因為這會把你逼瘋。

與任何類型的軟件工程一樣，把您的工作看作是在修建一棟建筑。假如你是在造一個狗窩，實(shí)際上無論怎樣都可能很好。但是如果你正在修建摩天大樓，那么就必須做更多的規(guī)劃。我們應(yīng)該在哪里畫一條線？框架的作用與你正在使用建筑材料和建筑風(fēng)格的作用是一樣的。它是否適合環(huán)境，以后可以在需要時替換材料嗎？雖然怎樣做出決定是你自己的事情，但是我希望這些信息和例子能夠幫到你。

關(guān)于作者：

Tod Hansmann - 托德·漢斯曼（Tod Hansmann）是一名技術(shù)專家，他是一名程序員，并指導(dǎo)新人，關(guān)注著常常被當(dāng)今技術(shù)愛好者忽視的舊的開發(fā)方式。同時也是一名軟件架構(gòu)師，整天都在解決問題。在他看來，開源是解決問題的最佳工具。他目前在Phonejanitor.com工作。

歡迎掃描二維碼關(guān)注公眾號，每天推送我翻譯的技術(shù)文章。