require.js 簡(jiǎn)潔入門(mén)

andot 發(fā)布于2019-08-21 12:21 / 3251人閱讀

摘要：另外一個(gè)道理，一部分是依賴(lài)另一部分的，比如依賴(lài)文件的載入。其實(shí)主要做的事情就是這兩點(diǎn)。這里只是我虛構(gòu)一個(gè)假的例子，實(shí)際應(yīng)用中要根據(jù)自己的實(shí)際需求去設(shè)計(jì)構(gòu)思自己的項(xiàng)目，再次提醒，不要為了用而用。

前言

提到require.js大多數(shù)人會(huì)說(shuō)提到模塊化開(kāi)發(fā)，AMD等等，其實(shí)require.js并沒(méi)有這么多復(fù)雜的概念，這里我就希望排除這些概念，從實(shí)用的角度來(lái)簡(jiǎn)單說(shuō)一下require.js是干什么的，我們要怎么用它。

1.為什么要用require.js

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

當(dāng)你的js項(xiàng)目足夠大，足夠復(fù)雜，依賴(lài)的庫(kù)足夠多，你完全需要這樣一種工具去做這些js的管理，否則你的項(xiàng)目擴(kuò)展性很差，結(jié)構(gòu)很糟糕，要找到想修改的地方會(huì)很困難。

其實(shí)其他很多編程語(yǔ)言都已經(jīng)在代碼里實(shí)現(xiàn)了類(lèi)似的功能，比如這段python

import web

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

很好理解，我們導(dǎo)入了web對(duì)象，然后就可以在接下來(lái)的代碼里使用web.database

2.怎么用require.js？

首先頁(yè)面要載入require.js，這個(gè)沒(méi)辦法用它自己依賴(lài)

既然使用require這種模式的目的是把文件分割成可理解的小塊，那么我們的js文件也要分割成一個(gè)一個(gè)部分，稱(chēng)之為模塊，官方api實(shí)例中的目錄結(jié)構(gòu)是這樣的：

www/

index.html

js/

app/

sub.js

lib/

jquery.js

canvas.js

app.js

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

定義模塊

jquery這類(lèi)的庫(kù)文件先不提，我們說(shuō)自己怎么定義一個(gè)模塊，就是sub.js文件里

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

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

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

如果我們定義的東西里面有依賴(lài)，比如用到j(luò)query，我們可以這樣

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

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

思考一下，這里的概念是這樣的，第一個(gè)參數(shù)，數(shù)組里的東西是我接下來(lái)要依賴(lài)的模塊，后面的回調(diào)函數(shù)的參數(shù)，依次就是前面數(shù)組里的對(duì)象的傳遞。

調(diào)用模塊

還記得上面那個(gè)目錄結(jié)構(gòu)嗎，我們依然摘取官網(wǎng)的實(shí)例, app.js是項(xiàng)目的入口，內(nèi)容如下

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等

接下來(lái)我們r(jià)equire調(diào)用，注意這里是調(diào)用，上面是定義define，不過(guò)看到代碼發(fā)現(xiàn)和之前類(lèi)似，同樣是第一個(gè)參數(shù)是依賴(lài)對(duì)象的數(shù)組，回調(diào)里會(huì)執(zhí)行，參數(shù)是之前依賴(lài)的對(duì)象。

3.舉個(gè)栗子

實(shí)踐是檢驗(yàn)真理的唯一標(biāo)準(zhǔn)，光看別人實(shí)踐也沒(méi)用，自己動(dòng)手做一遍勝讀十年書(shū)。我自己寫(xiě)了一個(gè)簡(jiǎn)單的例子，讀者如果感興趣也可以自己寫(xiě)一個(gè)

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

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

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

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

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

然后我們?cè)谥魑募铮热鏸ndex.html,main.js...調(diào)用 sth

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

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

這里只是我虛構(gòu)一個(gè)假的例子，實(shí)際應(yīng)用中要根據(jù)自己的實(shí)際需求去設(shè)計(jì)構(gòu)思自己的項(xiàng)目，再次提醒，不要為了用而用。

最后

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

GPU云服務(wù)器云服務(wù)器 require.js 簡(jiǎn)潔簡(jiǎn)潔方法 php簡(jiǎn)潔

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/87550.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

andot

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

＜LeetCode天梯＞Day025 刪除鏈表的倒數(shù)第N個(gè)節(jié)點(diǎn)（雙指針） | 初級(jí)算法 | Pyth

閱讀 1972·2021-11-16 11:45
機(jī)器學(xué)習(xí)數(shù)學(xué)基礎(chǔ)之線(xiàn)代篇——線(xiàn)性代數(shù)python手冊(cè)（建議收藏）

閱讀 3690·2021-09-06 15:02
你可能不知道的css騷操作 — 表單驗(yàn)證

閱讀 2033·2019-08-30 15:44
CSS的一些單位

閱讀 2295·2019-08-30 11:21
構(gòu)建靜態(tài)頁(yè)面之 [ 布局 ]

閱讀 1860·2019-08-29 16:31
網(wǎng)站SEO優(yōu)化

閱讀 3436·2019-08-29 13:55
vue

閱讀 1907·2019-08-29 12:15
CSS學(xué)習(xí)筆記(十) 界面組件之表單

閱讀 3259·2019-08-28 18:05

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

require.js 簡(jiǎn)潔入門(mén)

相關(guān)文章

JS學(xué)習(xí)筆記 - 模塊化

深入 CommonJs 與 ES6 Module

es6語(yǔ)法快速上手

[ 學(xué)習(xí)路線(xiàn) ] 學(xué)完這些去阿里！GOGOGO

[ 學(xué)習(xí)路線(xiàn) ] 學(xué)完這些去阿里！GOGOGO

發(fā)表評(píng)論

0條評(píng)論

andot

男|高級(jí)講師

TA的文章

＜LeetCode天梯＞Day025 刪除鏈表的倒數(shù)第N個(gè)節(jié)點(diǎn)（雙指針） | 初級(jí)算法 | Pyth

機(jī)器學(xué)習(xí)數(shù)學(xué)基礎(chǔ)之線(xiàn)代篇——線(xiàn)性代數(shù)python手冊(cè)（建議收藏）

你可能不知道的css騷操作 — 表單驗(yàn)證

CSS的一些單位

構(gòu)建靜態(tài)頁(yè)面之 [ 布局 ]

網(wǎng)站SEO優(yōu)化

vue

CSS學(xué)習(xí)筆記(十) 界面組件之表單

最新活動(dòng)

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

require.js 簡(jiǎn)潔入門(mén)

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！