require.js 簡潔入門

andot 發布于2019-08-21 12:21 / 3245人閱讀

摘要：另外一個道理，一部分是依賴另一部分的，比如依賴文件的載入。其實主要做的事情就是這兩點。這里只是我虛構一個假的例子，實際應用中要根據自己的實際需求去設計構思自己的項目，再次提醒，不要為了用而用。

前言

提到require.js大多數人會說提到模塊化開發，AMD等等，其實require.js并沒有這么多復雜的概念，這里我就希望排除這些概念，從實用的角度來簡單說一下require.js是干什么的，我們要怎么用它。

1.為什么要用require.js

大多數前端開發者都用過jquery，那么用jquery之前我們首先要把jquery加載進頁面，然后在之后的js之中才可以使用$,這里面我們知道了兩個道理，一個是我們不能把所有js代碼都放到一個文件里，有些東西可以多帶帶提出來成為一個模塊，比如jquery。另外一個道理，一部分js是依賴另一部分js的，比如$依賴jquery文件的載入。其實require.js主要做的事情就是這兩點。

當你的js項目足夠大，足夠復雜，依賴的庫足夠多，你完全需要這樣一種工具去做這些js的管理，否則你的項目擴展性很差，結構很糟糕，要找到想修改的地方會很困難。

其實其他很多編程語言都已經在代碼里實現了類似的功能，比如這段python

import web

db = web.database(dbn="sqlite", db="todos.db")

很好理解，我們導入了web對象，然后就可以在接下來的代碼里使用web.database

2.怎么用require.js？

首先頁面要載入require.js，這個沒辦法用它自己依賴

既然使用require這種模式的目的是把文件分割成可理解的小塊，那么我們的js文件也要分割成一個一個部分，稱之為模塊，官方api實例中的目錄結構是這樣的：

www/

index.html

js/

app/

sub.js

lib/

jquery.js

canvas.js

app.js

這里是一個app應用，但是普通頁面開發也可以借鑒的是這個概念，就是把js根據功能和目的分開放，庫文件放到一起，子模塊放到一起，入口js再來選擇性載入。
這里注意一下，模塊化開發的目的是方便開發者理解和提高效率，如果讀者認為沒有必要完全則不需要硬去這么做，為了使用什么概念或者方法反而增加了開發成本的事情不要做。

定義模塊

jquery這類的庫文件先不提，我們說自己怎么定義一個模塊，就是sub.js文件里

//定義對象
define({
    color: "black",
    size: "unisize"
});

//定義方法
define(function () {
    //Do setup work here

    return {
        color: "black",
        size: "unisize"
    }
});

如果我們定義的東西里面有依賴，比如用到jquery，我們可以這樣

define(["../lib/jquery"], function($) {

        return {
            color: "blue",
            size: "large",
            addToCart: function() {
                $(".cart-color").append(color)
            }
        }
    }
);

思考一下，這里的概念是這樣的，第一個參數，數組里的東西是我接下來要依賴的模塊，后面的回調函數的參數，依次就是前面數組里的對象的傳遞。

調用模塊

還記得上面那個目錄結構嗎，我們依然摘取官網的實例, app.js是項目的入口，內容如下

require.config({
    //By default load any module IDs from js/lib
    baseUrl: "js/lib",
    //except, if the module ID starts with "app",
    //load it from the js/app directory. paths
    //config is relative to the baseUrl, and
    //never includes a ".js" extension since
    //the paths config could be for a directory.
    paths: {
        app: "../app"
    }
});

// Start the main app logic.
require(["jquery", "canvas", "app/sub"],
function   ($,        canvas,   sub) {
    //jQuery, canvas and the app/sub module are all
    //loaded and can be used here now.
});

require.config 配置文件，這里定義了baseUrl等

接下來我們require調用，注意這里是調用，上面是定義define，不過看到代碼發現和之前類似，同樣是第一個參數是依賴對象的數組，回調里會執行，參數是之前依賴的對象。

3.舉個栗子

實踐是檢驗真理的唯一標準，光看別人實踐也沒用，自己動手做一遍勝讀十年書。我自己寫了一個簡單的例子，讀者如果感興趣也可以自己寫一個

我有一個中間模塊，我把他叫做sth，這個模塊放在 sth.js 里面，如下

define(function(require){
    var p1 = require("part/part1");
    var p2 = require("part/part2");
    return {
        f1: p1.doSome,
        f2: p2.doOther
    }
})

這里面require了另外兩個子模塊，part1和part2，并把他們的方法拿出來放到中間塊里面并且返回
我們來看下part1，part2長啥樣，首先他們都是part1.js 和part2.js文件，require.js里認為你載入的都是js腳本文件，所以統一省略.js

//part1.js
define(function(){
    return {
        doSome: function(){
            console.log("doSome")
        }
    }
})

//part2.js
define(function(){
    return {
        doOther: function(){
            console.log("doOther")
        }
    }
})

然后我們在主文件里，比如index.html,main.js...調用 sth

require(["sth","check"],function(sth,check){
    if(check.ok){
        sth.f1()
    }else{
        sth.f2()
    }
})

我們假設這里還有另外一個check對象，如果check為真則執行sth.f1
,否則執行sth.f2 想一下，f1，f2其實是在兩個文件里面。

這里只是我虛構一個假的例子，實際應用中要根據自己的實際需求去設計構思自己的項目，再次提醒，不要為了用而用。

最后

好了騷年們，對require.js感興趣了嗎，那就去這里瘋狂的看吧
http://requirejs.org/

云服務器 GPU云服務器 require.js 簡潔簡潔方法 php簡潔

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

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

JS學習筆記 - 模塊化

摘要：在開發大型的項目中，可能會使用到管理的模塊化工具。說道，學習過的同學會比較熟悉，是服務器模塊的規范，采用了這個規范。可能是未來模塊化解決方案的首選。本文章記錄本人在學習 JavaScript 中理解到的一些東西，加深記憶和并且整理記錄下來，方便之后的復習。在開發大型的web項目中，可能會使用到管理js的模塊化工具。但是在前端輪子漫天飛的時代。那一款js模塊化工具真正適合我...

CntChen 2019-08-22 10:57 評論0 收藏0
深入 CommonJs 與 ES6 Module

摘要：目前主流的模塊規范模塊通用模塊如果你在文件頭部看到這樣的代碼，那么這個文件使用的就是規范實際上就是全局變量這三種風格的結合這段代碼就是對當前運行環境的判斷，如果是環境就是使用規范，如果不是就判斷是否為環境，最后導出全局變量有了后我們的代碼和目前主流的模塊規范 UMD CommonJs es6 module umd 模塊（通用模塊） (function (global, facto...

sanyang 2019-08-23 14:42 評論0 收藏0
es6語法快速上手

摘要：二一個的解析器在我們正式講解語法之前，我們得先了解下。而則實際上為新增了塊級作用域。的繼承機制，實質是先創造父類的實例對象所以必須先調用方法，然后再用子類的構造函數修改。隨著google和firfox以及node6.0對es6的支持，es6語法的定稿使它越來越受到關注，尤其是react項目基本上都是用es6來寫的。是時候從es5到es6轉變了showImg(http://static...

PiscesYE 2019-08-19 18:33 評論0 收藏0
[ 學習路線 ] 學完這些去阿里！GOGOGO

摘要：以下知識點是前輩師兄總結基礎語義化標簽引進了一些新的標簽，特別注意等，注意的標題結構理解瀏覽器解析的過程，理解的樹形結構，及相應理解標簽在各個瀏覽器上的默認樣式代理樣式，理解中的重置樣式表的概念理解等功能性標簽理解標簽，理解文件提交過程推薦以下知識點是前輩師兄總結 1、HTML/HTML5基礎： 1.0、語義化H5標簽1.1、H5引進了一些新的標簽，特別注意article...

zhaochunqi 2019-08-28 18:06 評論0 收藏0
[ 學習路線 ] 學完這些去阿里！GOGOGO

摘要：以下知識點是前輩師兄總結基礎語義化標簽引進了一些新的標簽，特別注意等，注意的標題結構理解瀏覽器解析的過程，理解的樹形結構，及相應理解標簽在各個瀏覽器上的默認樣式代理樣式，理解中的重置樣式表的概念理解等功能性標簽理解標簽，理解文件提交過程推薦以下知識點是前輩師兄總結 1、HTML/HTML5基礎： 1.0、語義化H5標簽1.1、H5引進了一些新的標簽，特別注意article...

learn_shifeng 2019-08-21 10:27 評論0 收藏0