本文主要是介绍Web前端开发requireJs学习研究(一)，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
什么是requireJs？有什么用？用了有什么好处？马上稍等一一解答....
最早的前端Js代码可能如下面这样的代码，相信大家都见过,如下面这段示例代码..
//文件名字 calc.js//内容如下:function add(x,y){return x+y;};function sub(x,y){return x-y;};.....然后在需要用到这些方法的地方，引用js
<script language="JavaScript" src="calc.js"></script>
// 假若还依赖其他js<script src="1.js"></script><script src="2.js"></script><script src="3.js"></script><script src="4.js"></script><script src="5.js"></script><script src="6.js"></script>这样以来，有以下几点问题:
1.页面要等待js代码加载，完成才能加载
2.由于js文件之间存在依赖关系，因此必须严格保证加载顺序，依赖性最大的模块一定要放到最后加载，当依赖关系很复杂的时候，代码的编写和维护都会变得困难。
3.空间污染
requireJS就是为了解决这两个问题而来
1）实现js文件的异步加载，避免网页失去响应；
2）管理模块之间的依赖性，便于代码的编写和维护，独立变量空间，防止污染
如何来使用requireJs？
1.创建test.html
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title1</title ></script>
</head>
<body>
body2
//也许你更喜欢，把javascript放这里，原因就不说了..
<script data-main="main"
src="http://apps.bdimg.com/libs/require.js/2.1.9/require.min.js" >
</body>
</html>2.创建main.js
require.config({baseUrl:"../js",//指定js代码的根路径paths : {"jquery" ://两个参数，如果CDN加载失败，就采用第二个参数，加载本地资源 ["http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min","util/jquery.min"],"jquery-cookie":["http://apps.bdimg.com/libs/jquery.cookie/1.4.1/jquery.cookie.min"],'jquery.tabs': "util/jquery.tabs.min"},shim: {//用于处理非AMD规范的JavaScript代码，什么是AMD规范？请百度，google..'jquery.tabs': {deps: ['jquery'],//此模块依赖的其它模块exports: 'jQuery.fn.tabs'//此模块的引用名字，eg：jquery用$}}
});
require(["jquery","j1"],function($,J1){//main.js运行后，jquery模块就有了，这里直接注入即可，j1同理，分别对应两个模块的引用对象function Controller() {// 继承于J1类J1.init.call(this);alert(this.add(3,4));//调用继承于J1.js的add函数alert(this.sub(4,3));//调用继承于J1.js的sub函数alert(this.type(3)); //调用继承于J1.js的type函数this.init();//调用本地的init函数}Controller.prototype.init=function () {alert("init load");}//初始化Controller类$(document).ready(function () {new Controller;});
});3.创建J1.js
define(["jquery"],function ($){//注入jquery模块function Calc() {this.add = function (x,y){return x+y;};this.sub=function (x,y) {return x-y;};this.type=function (x) {return $.type(x);//用jquery的方法}};return {init: Calc //返回此Calc类，让其它模块继承};
});简单描述以下上述代码的意思
html页面上的：
<script data-main="main" src="http://apps.bdimg.com/libs/require.js/2.1.9/require.min.js" ></script>这个引用百度CDN的requirejs文件,加载完毕后，加载同级目录下的main.js文件。熟悉Java的朋友，可以简单吧requireJs看做是个spring，管理依赖注入的容器
mian.js：这个主要是实现，把项目依赖的js文件，让requirejs管理起来，注入到对应的模块去使用，
J1.js：主要写了一些公共的方法，让继承它的子类去使用。通过define定义一个模块，第一个参数，指定此模块的依赖其它的模块，第二个参数，指 注入成功后，的回调函数处理
上述代码，如有问题，欢迎纠正，学习阶段…………….
这篇关于Web前端开发requireJs学习研究(一)的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
