下載下傳
指令行下載下傳：
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() + 'RMB everyday.';
$('#box').text(str);
};
//總之，傳回一個對象就行
return student;
});
appleModule.js部分
//注意，這裡并沒有給子產品命名，是以主入口可以随便定義子產品名
define(function () {
const apple = {};
apple.name = 'apple';
apple.num = ;
apple.price = ;
apple.unit = 'kg';
apple.total = function () {
return this.num * this.price
};
//總之，傳回一個對象就行
return apple;
});
重點内容
- 不需要定義子產品名，同時還可以通過配置項自定義子產品名
- 因為沒有子產品名，檔案名也不受限制
- 一次配置，多處依賴
![App用戶端架構演化之路[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)