Requirejs
開發階段
不打包，不壓縮，子產品化開發
部署階段
自動打包，壓縮
require.js基本使用
https://requirejs.org/1、require.js
異步加載
子產品化開發
一個檔案一個子產品
減少全局變量
2、define 定義子產品
// helper.js
// 子產品名，子產品依賴，子產品的實作function
define("helper", ["jquery"], function ($) {
return {
trim: function (str) {
return $.trim(str);
}
}
}); 3、require 加載子產品
// app.js
// 子產品名，子產品的實作function
require(["helper"], function (helper) {
var str = " adm ";
console.log(helper.trim(str));
}); 4、加載檔案
- html
- data-main
<!-- index.html -->
<script
data-main="/static/js/app.js"
src="/static/js/require.js"
></script> - baseUrl
// app.js
requirejs.config({
baseUrl: "/static/js"
}); <!-- index.html -->
<script src="/static/js/require.js"></script>
<script src="/static/js/app.js"></script> 5、加載機制
// RequireJS将依賴加載為script标簽
head.appendChild() 加載即執行
配置子產品路徑
paths 映射不放與bashUrl下的子產品名
// app.js
requirejs.config({
baseUrl: "/static/js",
// 子產品路徑映射
paths: {
// 加載子產品使用的名稱
"jquery": [
// 首先加載的檔案,不需要 .js
"//cdn.bootcss.com/jquery/3.4.1/jquery.min",
// 備用檔案
"./lib/jquery"
]
}
}); 定義子產品
函數式定義
// 最佳實踐：不寫死子產品名，依賴的子產品可有可無
define('helper', ['jquery'], function($) {
return {
trim: function(str) {
return $.trim(str);
}
}
}); 定義簡單的對象
define({
username: 'Tom',
age: 23
}); 代碼示例
app.js
requirejs.config({
baseUrl: "/static/js",
// 子產品路徑映射
paths: {
"jquery": [
// 首先加載的檔案,不需要 .js
"//cdn.bootcss.com/jquery/3.4.1/jquery.min",
// 備用檔案
"./lib/jquery"
]
}
});
require(["jquery", "./app/api"], function ($, api) {
$("#user").click(function(){
console.log("user");
api.getUser().then(function (user) {
console.log(user);
}
);
});
}); app/api.js
define(["jquery"], function ($) {
return {
getUser: function () {
// jquery的異步處理
var def = $.Deferred();
require(["./app/user"], function (user) {
def.resolve(user);
});
return def;
}
}
}); app/user.js
// 使用者資訊
define({
name: "Tom",
age: 23
});
index.html
<button id="user">顯示使用者資訊</button>
<script src="/static/js/lib/require.js"></script>
<script src="/static/js/app.js"></script>
配置不支援amd
shim: {
"model": { // 不支援AMD的子產品
"deps": ["jquery"], // 依賴子產品
"exports": "Model", // 全局變量作為子產品對象
init: function($) { // 初始化函數，傳回對象代替exports作為子產品對象
return $;
}
}
}
shim: {
"model": { // 不支援AMD的子產品
"deps": ["jquery"], // 依賴子產品
"exports": "Model", // 全局變量作為子產品對象
init: function($) { // 初始化函數，傳回對象代替exports作為子產品對象
return $;
}
}
} 其他常用配置
1、map
// 加載不同的版本
map: {
// 當app/api子產品加載jquery時生效
"app/api": {
"jquery": "./lib/jquery"
},
// 當app/api2子產品加載jquery時生效
"app/api2": {
"jquery": "./lib/jquery2"
}
} 2、waitSeconds
下載下傳js等待時間，預設7秒
如果設為0，則禁用等待逾時
3、urlArgs
下載下傳檔案時，在url後面增加額外的查詢query參數
urlArgs: "_="+(new Date()).getTime() jsonp服務
jsonp的一種使用模式，可以跨域擷取資料，如json
同源政策：
www.baidu.com通過ajax不能擷取www.qq.com的資料
1、jsonp實作
通過script跨域請求擷取資料
<script src="http://www.baidu.com/user.js?callback=onloaded"></script> 後端通過callback擷取參數值onloaded
onloaded({
name: "Tom",
age: 23
}) 2、ajax請求
$.ajax(
{
url: "http://127.0.0.1:5000/static/js/app/user.js",
dataType: "jsonp", // 注意參數是jsonp
success: function (data) {
console.log(data);
}
}
); 3、require.js實作jsonp
require(["http://www.baidu.com/user.js"], function(user){
}) user.js
define({
name: "Tom",
age: 23
}) text.js插件
https://github.com/requirejs/text用于加載文本
// 注意字首 strip隻要body部分的内容
require(["text!/user.html!strip"], function(template) {
$(#userinfo).html(template);
}) text.js配置
requirejs.config({
config: { // 不要少了這個
text: {
onXhr: function(xhr, url){
// 請求之前設定
// 設定請求頭
xhr.setRequestHeader("X-Requested-With", "XMLHttpRequest");
},
createXhr: function(){
// 請求時設定
},
onXhrComplete: function(xhr, url){
// 請求完成後設定
}
}
}
})
css.js插件
加載樣式檔案
https://github.com/guybedford/require-csspaths: {
"css": "./lib/require/css"
}
或者
map: {
"*": {
"css": "./lib/require/css"
}
}
// 加載
require(["css!/static/css/bootstrap.css"], function () {
} 加載js依賴的時候同時加載css檔案
paths: {
"jquery": "./lib/jquery",
"css": "./lib/require/css",
"bootstrap": "./lib/bootstrap"
},
shim: {
"bootstrap": [
"jquery",
"css!/static/css/bootstrap.css",
"css!/static/css/bootstrap-theme.css"
]
},
// 加載
require(["bootstrap"], function () {
}
paths: {
"jquery": "./lib/jquery",
"css": "./lib/require/css",
"bootstrap": "./lib/bootstrap"
},
shim: {
"bootstrap": [
"jquery",
"css!/static/css/bootstrap.css",
"css!/static/css/bootstrap-theme.css"
]
},
// 加載
require(["bootstrap"], function () {
}
i18n插件
支援國際化多語言
https://github.com/requirejs/i18n調用方式
require(["i18n!./nls/message"], function(i18n){
$("#user").after("<button class='btn btn-primary'>" + i18n.edit + "</button>");
}) 目錄結構
檔案夾名稱固定為nls
nls
-en
-message.js
define({
"edit": "Edit"
})
-zh
-message.js
define({
"edit": "編輯"
})
-message.js
define({
"zh": true,
"en": true
})
從浏覽器中擷取語言
navigator.language
navigator.userLanguage 配置預設語言
config: {
i18n: {
locale: "zh"
}
} 從cookie中擷取語言
設定浏覽器cookie
$ document.cookie='language=zh_CN' # 中文
$ document.cookie='language=en_US' # 英文 // 從浏覽器cookie中擷取語言
var language= document.cookie.match(/language=([^;]+)/);
var locale = "zh";
if (language){
locale = language[1].split("_")[0];
console.log(locale);
}
// 修改配置
config: {
i18n: {
locale: locale
}
} r.js打包工具
下載下傳執行
https://github.com/requirejs/r.js$ node r.js -o bashUrl=js name=app out=built.js 安裝執行
$ npm install -g requirejs
$ r.js -o bashUrl=js name=app out=built.js 使用配置檔案打包
r.js -o app.build.js app.build.js
({
appDir: "./src", // 要打包的根目錄
bashUrl: "./js", // js檔案在這個baseUrl下
dir: "./build", // 打包後的輸出目錄
mainConfigFile: "src/js/require.config.js", // requirejs的配置檔案
name: "app"
}) 多子產品打包
({
appDir: "./src", // 要打包的根目錄
bashUrl: "./js", // js檔案在這個baseUrl下
dir: "./build", // 打包後的輸出目錄
mainConfigFile: "src/js/require.config.js", // requirejs的配置檔案
models: [
{
name: "app",
// optimize:'uglify' // 壓縮方式 "none"
include: ["foo/bar/bee"] // 添加一起打包
},
{
name: "user",
exclude: ["foo/bar/bop"] // 移除不打包
}
]
}) 插件打包
text
css
npm打包
$ npm init
$ npm run-script <command>
$ npm run # 簡寫 "script": {
"package": "node r.js -o app.build.js"
} maven+ npm自動打包
frontend-maven-plugin
![nodejs微信開發---授權登入+擷取使用者資訊微信網頁授權[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)