require
2020-10-30 13:42:02 6 举报AI智能生成
require.js用法
作者其他创作
大纲/内容
定义
JS模块载入框架，可实现AMD规范
优点
实现异步加载，防止js文件阻塞页面渲染
使用程序调用方式加载js，保持页面整洁
管理模块之间的依赖性，便于代码编写与维护
调用
<script data-main="js/main" src="js/require.js"></script>
基本知识
变量
requirejs / require
加载依赖模块，执行加载后的回调函数
require( ["js/js1","js/js2"....],function( js1_name,js2_name,... ){ } )
define
定义AMD模块
define( function( ){ } )
define(["js1","js2"],function( ){ })
加载文件
符合AMD规范的模块
require.config({
paths:{
//配置多路径，若远程加载不成功，则可加载本地文件
"js1":["http_url","localhost_url"],
"js2":["url"]
}
})
paths:{
//配置多路径，若远程加载不成功，则可加载本地文件
"js1":["http_url","localhost_url"],
"js2":["url"]
}
})
非AMD规范的模块
require.config({
shim:{
"underscore":{
exports:"_" //表示对象名
}
//将jquery插件“垫”到jquery中
"jquery.form":["jquery"],
"jquery.form":{
deps: ["jquery"] //数组形式，表示依赖的库
}
}
})
shim:{
"underscore":{
exports:"_" //表示对象名
}
//将jquery插件“垫”到jquery中
"jquery.form":["jquery"],
"jquery.form":{
deps: ["jquery"] //数组形式，表示依赖的库
}
}
})
deps
数组，表示其依赖的库
exports
表示输出的对象名
全局配置
其指定的js在require.js加载后进行处理
默认其指定的js为根路径，可直接加载依赖模块
require( ['jquery'] )
require插件
domready插件
使回调函数在页面DOM结构加载完成后运行
require(['domready!'], function (doc){
// called once the DOM is ready
});
// called once the DOM is ready
});
text和image插件
允许require.js加载文本和图片文件
define([
'text!review.txt',
'image!cat.jpg'
],
function(review,cat){
console.log(review);
document.body.appendChild(cat);
}
);
'text!review.txt',
'image!cat.jpg'
],
function(review,cat){
console.log(review);
document.body.appendChild(cat);
}
);
json插件
加载json文件
mdown插件
加载markdown文件
0 条评论
下一页
