Requirejs
开发阶段
不打包，不压缩，模块化开发
部署阶段
自动打包，压缩
require.js基本使用
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 $; } } }
其他常用配置
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 })
