2. 程式人生 > >使用requirejs程式設計實現模組化

使用requirejs程式設計實現模組化

阿新 • • 發佈：2019-01-18

下載

命令列下載：bower install requirejs 或者 npm install requirejs
官網下載點選下載requirejs

主要方法

  • define定義模組
  • require 載入模組

案例一

目錄結構

  • index.html
  • main.js
  • scripts
    • apple.js
    • student.js

index.html部分

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>requirejs模組化程式設計</title
 
></head>
<body>
<h3>requirejs模組化程式設計</h3>
<script src="https://cdn.bootcss.com/require.js/2.3.5/require.min.js"></script>
<script src="./main.js"></script>
</body>
</html>

main.js部分

//配置依賴路徑
requirejs.config({
    baseUrl: './scripts'
});

//依賴student模組，並呼叫該模組eat()方法
 

require(['student'], function (stu) {
    stu.eat()
});

apple.js部分

//apple為當前模組名
define('apple', function () {
    return {
        name: 'apple fruits'
    }
});

student.js部分

//apple為依賴模組名
//student為當前模組名
define('student', ['apple'], function (apple) {
    return {
        eat: function () {
            console.log(apple.name);
        }
    }
});

特點：

  • 模組名必須與檔名相同
  • 其實模組名可以不寫的

案例二

目錄結構

  • index.html
  • main.js
  • scripts/
    • appleModule.js
    • studentModule.js

  • bower_components/jquery/dist/

    • jquery.min.js

    index.html部分

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>requirejs模組化程式設計</title></head>
<body>
<h3>requirejs模組化程式設計</h3>
<div id="box">Lorem ipsum dolor sit amet.</div>
<script src="https://cdn.bootcss.com/require.js/2.3.5/require.min.js"></script>
<script src="./main.js"></script>
</body>
</html>

main.js部分

//配置項，在主入口js檔案配置即可，其他模組都可呼叫paths模組
requirejs.config({
    //所有的require依賴根路徑都是baseUrl
    baseUrl: './scripts',
    //路徑可以是陣列，如果第一個載入成功則結束，否則載入後面的檔案
    paths:{
        'jquery': [
            '../bower_components/jquery/dist/jquery.min', //本地載入jquery
            'http://code.jquery.com/jquery-1.12.4' //cdn載入jquery
        ],
        'student': 'studentModule',
        'apple': 'appleModule'
    }
});

//依賴config配置項命名的student模組
require(['student'], function (stu) {
    //呼叫student模組的eat()和say()方法
    stu.eat();
    stu.say();
});

studentModule.js部分

//注意，這裡並沒有給模組命名，所以主入口可以隨便定義模組名
//依賴jquery和apple模組
define(['jquery', 'apple'], function ($, apple) {
    const student = {};
    student.name = 'zhangsan';
    student.eat = function () {
        console.log(this.name + ' like ' + apple.name);
    };
    student.say = function () {
        var str = 'I eat '
            + apple.num + apple.unit + ' ' + apple.name
            + ', and pay ' + apple.total().toFixed(2) + 'RMB everyday.';
        $('#box').text(str);
    };
    //總之，返回一個物件就行
    return student;
});

appleModule.js部分

//注意，這裡並沒有給模組命名，所以主入口可以隨便定義模組名
define(function () {
    const apple = {};
    apple.name = 'apple';
    apple.num = 5;
    apple.price = 10;
    apple.unit = 'kg';
    apple.total = function () {
        return this.num * this.price
    };
    //總之，返回一個物件就行
    return apple;
});

重點內容

  • 不需要定義模組名，同時還可以通過配置項自定義模組名

  • 因為沒有模組名，檔名也不受約束

  • 一次配置，多處依賴

相關推薦

使用requirejs程式設計實現模組化

下載 命令列下載：bower install requirejs 或者 npm install requirejs 官網下載點選下載requirejs 主要方法 define定義模組 require 載入模組 案例一 目錄結構 i

C程式設計｜用函式實現模組化程式設計詳解（一）

目錄 一、為什麼要用函式 使用函式可使程式清晰、精煉、簡單、靈活。 函式就是功能。每一個函式用來實現一個特定的功能。函式名應反映其代表的功能。 在設計

傳統HTML頁面實現模組化載入

對於網站來說很多頁面之間都有著大量的共享模組，如頁頭，頁尾和使用者欄等。對於具備後端檢視引擎的框架來說這些共享都比較容易抽取，如asp.net mvc來說就有統一佈局的MasterPage,@Section等功能可以共享檢視模板功能。但對於HTML就沒這麼幸運了,在html檔案裡並不具備這些功能，所以當你用純

【requirejs】JS模組化工具requirejs教程

初識requirejs 隨著網站功能逐漸豐富，網頁中的js也變得越來越複雜和臃腫，原有通過script標籤來匯入一個個的js檔案這種方式已經不能滿足現在網際網路開發模式，我們需要團隊協作、模組複用、單元測試等等一系列複雜的需求。 RequireJS是一個非常小巧的JavaScript模組載入框架，是A

JS-export和import實現模組化管理

    JS中經常會用到export和import，以實現程式碼模組化管理。其中：      export：用於對外輸出本模組（一個檔案可以理解為一個模組）變數的介面      im

openlayers5.x結合webpack4.x實現模組化引用

一、問題來源分析：openlayers5.x以來採用的是ES6（ECMAScript 6，注：ECMAScript 和 JavaScript 的關係是，前者是後者的規格，後者是前者的一種實現（另外的 ECMAScript 方言還有 Jscript 和 ActionScript

BaseAdapter的封裝來實現模組化開發

引子 要在一個手掌大的手機上展示各種豐富的資訊，橫向滑動與上下滑動已經成為了手機應用不可缺少的一部分。對於上下滑動，有一個被小看的神器ListView配合Adapter。為什麼被小看了呢?對比ScrollView來說，ListView不僅能夠實現不同介面的

使用Webpack ES6轉ES5 實現模組化(import export)

1.安裝nodejs：開啟nodejs官網https://nodejs.org/en/，點選碩大的綠色Download按鈕，它會根據系統資訊選擇對應版本（.msi檔案）。   開啟命令提示符執行下列命令（開啟方式：window + r 輸入cmd回車）   node -v檢

（3）javascript實現模組化

1.引言       在實現js的模組化之前，我們首先想一下為什麼要實現模組化程式設計呢？實現模組化程式設計有什麼好處呢？或者說實現模組化程式設計我們可以解決什麼樣子的問題呢？如果在看本篇部落格之前你不懂js的作用域鏈，請務必先看js的作用域鏈原理

Flask 用Blueprint實現模組化的應用

在一個大型專案中，肯定會有很多模組組成，比如一個網路管理系統可能有流量運營模組，實時分析模組，故障預警模組等。我們可以利用Flask Blueprint 實現每個模組的功能進行獨立的開發與管理，後

使用DroidPlugin實現模組化開發（主要說呼叫）

github地址：https://github.com/DroidPluginTeam/DroidPlugin/blob/master/readme_cn.md 關於配置，跟著說明文件配置吧。 關於跳轉呼叫， 使用new Intent(String ActiviyUrl)，你會發現，

ES6新特性：使用export和import實現模組化

　　在ES6前， 前端就使用RequireJS或者seaJS實現模組化， requireJS是基於AMD規範的模組化庫，  而像seaJS是基於CMD規範的模組化庫，  兩者都是為了為了推廣前端模組化的工具， 更多有關AMD和CMD的區別， 後面參考給了幾個連結；  　　現在ES6自帶了模組化， 也是JS第

selenium實現模組化

在selenium的自動化指令碼中，有許多東西是總是呼叫的，比如登陸，那麼就可以將其模組化，獨立出來，從而可以使自動化指令碼更加簡潔．如下以登陸為例來實現模組化： 現有一個自動化指令碼如下，為驗證是否正常登陸的： test1.py # -*- coding: UTF-8

如何用JS實現模組化？JS的模組模式詳解

JS的模組化是很常見的一個需求，在日常的開發過程中經常會用到，但是今天瞭解完這個知識點，才算是徹底明白了為什麼要那樣實現，真是醍醐灌頂，受益匪淺。一 JS中的私有變數和特權方法和其他語言不同，JS中沒有私有，共有，類的概念。但是很特殊的一點，在JS的function中，有個私

python3.6 +tkinter GUI程式設計 實現介面化的文字處理工具

更新： 2017.07.17　　補充滾動條、win批處理拉起py 2017.08.13　　新增自定義圖示 --------原創      blogs:    http://www.cnblogs.com/chenyuebai    -------- 一、背景：

使用velocity模板使javaWeb的html+js實現模組化

頁面上一些基礎資料或者其他頁面經常用到部分，可以獨立出來做成小元件，元件預留呼叫入口，需要的頁面直接呼叫即可。 如圖，頁面中的展示分類和搜尋標籤在多個頁面重複使用，可以將這部分內容獨立出來，做成元件，供後續開發呼叫： classify_search_tag.html檔案如

163郵箱自動化登入實現模組化

from selenium import webdriver import time from selenium.webdriver.common.action_chains import ActionChains url = 'http://mail.163.com/'

運用 CSS methodologies 去實現模組化

一、什麼是 CSS methodologies CSS methodologies，可以理解成 設計模式，也可以理解成 css 規範，市面使用情況如下圖： 上圖來源：https://2019.stateofcss.com/technologies/ 你可能在日常開發中並不會專門花時間去注意和了解 C

運用 CSS in JS 實現模組化

一、什麼是 CSS in JS 上圖來源：https://2019.stateofcss.com/technologies/ CSS in JS 是2014年推出的一種設計模式，它的核心思想是把 CSS 直接寫到各自元件中，而不是單獨的樣式檔案裡。 CSS in js 的發展： 最早就是內聯樣式

JS模組化程式設計之AMD模型實現原理（Requirejs瀏覽器模型，nodejs伺服器模型）

官方引數手冊：https://requirejs.org/docs/api.html     /** * require使用指南！ * 第一步：建立一個符合Require CMD模組化的標準目錄結構，去官方檢視！ * 第二步：在html檔案中指定主js檔