JS三教九流系列-require.js-网站模块化开发
js开发的模块化就是module处理javascript
简单理解js模块化的开发就是让咱们的web项目对js进行分类的处理css
咱们在开发网站的时候，里面会用要不少的类库，如jquery，还会有到基于jq各类插件，还会有其余类库，还有本身写的js或者jq代码等。一个html页面会有n多个script标签对外部js的引用，是否是感受这样的页面会很是的混乱，若是咱们能够只用一个script标签载入一个js文件，这个js文件把其余须要的js文件能所有加载进去，而且按着之间依赖关系执行，是否是一个页面就很是的整洁和容易扩展处理。html
js的开发规范有AMD,典型表明就是require.jsjava
CMD，典型表明就是sear.jsnode
Commonjs规范咱们已经接触过，在nodejs的安装和使用中咱们在页面里运用require()请求原生模块、第三方模块和export定义咱们第三方模块就是在运用commonjs的规范开发jquery
咱们的requirejs就是典型的amd规范处理，实现html页面中head.appendchild("script")的加载和内部依赖顺序处理web
amd是异步加载模块化开发，采用异步的载入方式，也就是咱们虽然先引用了require.js，下面的js文件也可能先执行处理，若是对上面有依赖，也可能失效。浏览器
咱们经过参考requriejs的手册，去实践到咱们的网页开发中去，利用amd模块化的技术去开发咱们的网页。app
requirejs文档地址 http://www.requirejs.cn/ 异步
requirejs下载地址 http://apps.bdimg.com/libs/require.js/2.1.11/require.min.js
我们不去学习那么多的高级处理，基础功能已经足够咱们的项目开发，一切为了开发去使用
下载requirejs，加载到html页面中，经过script标签的src属性加载require.js
<!DOCTYPE html> <head> <title>requirejs</title> <meta charset="utf-8" /> </head> <body> <div class="aa">requirejs</div> </body> <script src="js/require.js" type="text/javascript"></script> </html>
requirejs不使用多个script在html页面去加载全部js文件，经过require去作咱们这种顺序加载处理
<script>标签含有一个特殊的属性data-main，require.js使用它来启动脚本加载过程
咱们给页面添加data-main属性，指定咱们的这个主要js控制加载的文件（都是对js的处理，因此省略了.js后缀）
<!DOCTYPE html> <head> <title>requirejs</title> <meta charset="utf-8" /> </head> <body> <div class="aa">requirejs</div> </body> <script src="js/require.js" data-main="js/config.js" type="text/javascript"></script> </html>
和咱们的require的路径同样，都是放在了js这个文件下面，如今的目录
requ.html
js/reruire.js
js/config.js
咱们已经知道，config.js就是咱们的控制文件（文字自定义），在这里面咱们定义和处理对其余文件的顺序加载
咱们给config.js写入以下代码
requirejs.config({
baseUrl: 'js/modules/',
paths: {
jquery: 'jquery'
}
});
require(['jquery'], function(jq) {
});
咱们利用reruirejs的config方法去定义咱们依赖的外部文件，
baseUrl属性：是定义外部文件加载的基本路径(好比咱们的依赖js都在js/modules下)
paths属性：是定义加载外部文件的文件名，后缀.js省略（名字叫jquery.js，赋给指定键名jquery）
require方法：是请求加载咱们的外部依赖文件，第一个参数是请求路径，这里就是jquery类库（目录js/modules/jquery.js），
jquery这个键值会自动拼接成 baseUrl+paths的路径进行加载
第二个参数是回调函数，里面的回调参数被赋值为请求的依赖文件
咱们先看一下咱们下载的目录结构：
requ.html
js/reruire.js
js/config.js
js/modules
js/modulesjquery.js
咱们会把大量的外部放置在modules文件夹下面，html利用requirejs经过script加载外部文件，那么大量文件的基本目录就是：js/modules
咱们浏览器打开html页面，firebug插件页面结构
咱们的html页面其实只定义了require.js的引用，经过对config上面的设置，咱们发现html页面已经加载了config.js和jqurey.js文件了！
config.js路径和data-mian的设置同样，
<script src="js/require.js" data-main="js/config.js" type="text/javascript"></script>
jquery.js的路径就是咱们设置里面的baseUrl+paths
咱们能够看出，咱们config对路径的处理是站在html页面的角度去引用，若是站在config文件的角度去引用就错了，由于是给html页面去顺序加载js文件的
基本路径属性很好理解，就是相对html的路径，
文件属性的设置咱们须要给他设置一个键名，键名的后面是引入文件的名字
require()方法：能够经过你的键名去请求加载外部文件的，看上面的path设置
咱们经过config()定义了依赖文件
如今经过require()获得依赖，而且在回调函数中赋给了回调参数$
咱们在回调函数内添加咱们的jq处理代码，config.js修改以下
requirejs.config({
baseUrl: 'js/modules/',
paths: {
jquery: 'jquery'
}
});
require(['jquery'], function($) {
alert($(window).height());
$("body").append("<div>append</div>")
});
页面弹出了窗口高度而且插入了div，咱们利用requirejs加载jq类库，和基于jq的代码处理就完成了！！！
咱们能够本身定义模块，用于依赖加载处理，
咱们的依赖文件代码要放置在define()中。做为模块的定义，这样requirejs才能够加载依赖
咱们建立自定义依赖文件，叫作ex.js（目录js/modules/ex.js）
modules建立ex.js，
define(function() {
var ex="我是依赖"
return ex;
});
config.js设置引入
requirejs.config({
baseUrl: 'js/modules/',
paths: {
jquery: 'jquery',
ex: 'ex'
}
});
require(['jquery',"ex"], function($,ex) {
alert(ex)
});
咱们浏览器打开HTML页面，会弹出“我是依赖”。
在js文件，咱们将定义的内容反之在define里面，咱们在config方法设置路径，require请求到，返回到到回调函数，咱们回调函数的参数就会赋值为define里的内容
对于当前的ex.js文件就是在回调函数中 ex=function() { var ex="我是依赖"; return ex; }
咱们把ex的代码就行处理，不用原生js的处理代码，使用jq的代码，修改以下：
define(function() {
var ex=$(window).height();
return ex;
});
审查报错了，由于你定义的模块不知道$是什么，define提供依赖的支持，咱们修改以下：
define(["./jquery"],function($) {
var ex=$(window).height();
return ex;
});
和require方法相似，能够先进行依赖请求，而后回调到回调参数中，这样定义的代码就对jq识别了，咱们能够成功运行
咱们看到，define加载依赖的路径是相对于当前js文件的，
咱们既然在定义模块能够加载依赖，好了把ex.js修改成jq插件的形式，咱们在之前文章写过jq的插件，咱们以tab切换为案例
ex.js引入jq类库依赖，放入插件代码：
define(["./jquery"],function($) {
return $.fn.extend({
tab:function(){
return this.each(function () {
var obj = $(this);
obj.find(".tabnav").children().click(function(){
$(this).addClass("fou").siblings().removeClass("fou");
$(this).parent().parent().find(".tabbox").children().eq($(this).index()).show().siblings().hide();
});
});
}
});
});
咱们直接把插件的代码放入define里面就行了，咱们的config.js代码引用插件
requirejs.config({
baseUrl: 'js/modules/',
paths: {
jquery: 'jquery',
ex: 'ex'
}
});
require(['jquery',"ex"], function($,ex) {
$(".tab1").tab();
});
这时候ex回调参数其实没有什么意义，由于咱们依赖是jq的插件，他会自动加上新的功能，咱们html加上tab切换的html代码
<!DOCTYPE html>
<head>
<title>requirejs</title>
<meta charset="utf-8" />
<style type="text/css">
/*reset*/
*{ padding:0; margin:0}
body{ height: 100%; width: 100%; font-size:12px; color:#333;}
/*demo*/
.tab1{height:400px; width:400px;}
.tabnav{height:50px; line-height:50px;}
.tabnav span{ cursor:pointer; margin:0 10px;}
.tabnav .fou{ color:#36F;}
.tabbox{height:350px; }
</style>
</head>
<body>
<div class="tab1">
<div class="tabnav">
<span class="fou">111</span>
<span>222</span>
<span>333</span>
</div>
<div class="tabbox">
<div>111111</div>
<div style="display:none;">22222222222</div>
<div style="display:none;">33333333</div>
</div>
</div>
</body>
<script src="js/require.js" data-main="js/config.js" type="text/javascript"></script>
</html>
浏览器打开修改的页面，咱们的tab效果成功执行了。
咱们的插件里面放置了依赖，其实config里面能够放弃对jq类库的引用的
config修改以下
requirejs.config({
baseUrl: 'js/modules/',
paths: {
ex: 'ex'
}
});
require(["ex"], function(ex) {
$(".tab1").tab();
});
仍是能够正确执行！插件里面加载了jq类库，当前没有加载！
咱们若是在外部define定义模块加载了模块，那么咱们这里引用外部文件会把define定义的代码和他的依赖都加载进去html页面
咱们经过require加载的依赖，就是把整个js依赖放入在html中，咱们config.js以下处理
requirejs.config({
baseUrl: 'js/modules/',
paths: {
jquery: 'jquery'
}
});
require(["jquery"], function() {
alert($(window).height())
});
咱们的jq同样有效，请求到后，那么在回调内部就能够进行处理！
咱们建立一个完整的项目，结构以下
requ.html 咱们的静态页面
js/reruire.js require文件
js/config.js 主要配置文件
js/modules 存放jq类库和插件文件的文件夹
js/modules/jquery.js jq类库
js/handle/ys.js 原生js文件,匿名函数返回消息
js/handle/ysfun.js 原生js文件,匿名函数返回工具函数
html页面代码：
<!DOCTYPE html>
<head>
<title>requirejs</title>
<meta charset="utf-8" />
<style type="text/css">
/*reset*/
*{ padding:0; margin:0}
body{ height: 100%; width: 100%; font-size:12px; color:#333;}
/*demo*/
.tab1{height:400px; width:400px;}
.tabnav{height:50px; line-height:50px;}
.tabnav span{ cursor:pointer; margin:0 10px;}
.tabnav .fou{ color:#36F;}
.tabbox{height:350px; }
</style>
</head>
<body>
<div class="tab1">
<div class="tabnav">
<span class="fou">111</span>
<span>222</span>
<span>333</span>
</div>
<div class="tabbox">
<div>111111</div>
<div style="display:none;">22222222222</div>
<div style="display:none;">33333333</div>
</div>
</div>
</body>
<script src="js/require.js" data-main="js/config.js" type="text/javascript"></script>
</html>
ex.js代码：
define(["./jquery"],function($) {
return $.fn.extend({
tab:function(){
return this.each(function () {
var obj = $(this);
obj.find(".tabnav").children().click(function(){
$(this).addClass("fou").siblings().removeClass("fou");
$(this).parent().parent().find(".tabbox").children().eq($(this).index()).show().siblings().hide();
});
});
}
});
});
ys.js代码：
define(function() {
var ys="我是就是一个消息！";
return ys;
});
ysfun.js代码：
define(function() {
var tools={};
tools.norepeat=function(arr){
arr.sort();
var newarr=[];
for(var i=0;i<arr.length;i++){
if(arr[i]==arr[i+1]){
continue;
}else{
newarr.push(arr[i]);
}
};
return newarr;
};
tools.strindex=function(str,arr){
var index;
for(var i=0;i<arr.length;i++){
if(arr[i]==str){
index=i;
}
};
return index;
};
return tools;
});
config.js代码：
requirejs.config({
baseUrl: 'js',
paths: {
jquery: 'modules/jquery',
ex: 'modules/ex',
ys: 'handle/ys' ,
ysfun: 'handle/ysfun'
}
});
require(["jquery","ex","ys","ysfun"], function($,ex,ys,ysfun) {
$(".tab1").tab();
alert(ys);
var arr1=["123","44","55","66","789","44"];
alert(ysfun.norepeat(arr1));
alert(ysfun.strindex("66",arr1));
});
页面依赖jq类库，依赖jq的插件，还有其余js处理，一个基本页面的js引用大概就这些！
大概的实现：
define定义模块，
config设置依赖
require请求加载依赖，回到参数能够接收依赖返回内容，回调函数内作进一步处理
Commonjs规范在nodejs有体现，咱们看看利用nodejs建站就知道了！
- 1. JS模块化开发----require.js
- 2. js模块化开发——require.js的用法
- 3. require.js模块化开发
- 4. require.js js模块化方案
- 5. require.js模块化
- 6. require.js 模块化
- 7. Require.js(模块化)
- 8. 模块化 require.js 入门教学(前端必看系列)
- 9. js模块化开发——require.js的用法详细介绍(含jsonp)
- 10. js模块化开发——require.js学习总结
- 更多相关文章...
- • ASP.NET Web Pages - 发布网站 - ASP.NET 教程
- • ASP.NET MVC - 发布网站 - ASP.NET 教程
- • PHP开发工具
- • 委托模式
-
每一个你不满意的现在，都有一个你没有努力的曾经。
- 1. 融合阿里云，牛客助您找到心仪好工作
- 2. 解决jdbc(jdbctemplate)在测试类时不报错在TomCatb部署后报错
- 3. 解决PyCharm GoLand IntelliJ 等 JetBrains 系列 IDE无法输入中文
- 4. vue+ant design中关于图片请求不显示的问题。
- 5. insufficient memory && Native memory allocation (malloc) failed
- 6. 解决IDEA用Maven创建的Web工程不能创建Java Class文件的问题
- 7. [已解决] Error: Cannot download ‘https://start.spring.io/starter.zip?
- 8. 在idea让java文件夹正常使用
- 9. Eclipse启动提示“subversive connector discovery”
- 10. 帅某-技巧-快速转帖博主文章（article_content）