requireJS简单应用
Posted 逍遥帝君
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了requireJS简单应用相关的知识，希望对你有一定的参考价值。
项目结构目录：
html页面
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title></title> </head> <body> <script type="text/javascript" data-main="/Jquery/require/app.js" src="/Jquery/require/require.js"></script> <div> 春江潮水连海平，海上明月共潮生。 滟滟随波千万里，何处春江无月明！ 江流宛转绕芳甸，月照花林皆似霰； 空里流霜不觉飞，汀上白沙看不见。 江天一色无纤尘，皎皎空中孤月轮。 江畔何人初见月？江月何年初照人？ 人生代代无穷已，江月年年只相似。 </div> <div id="best"> </div> </body> </html>
参数配置：
requireJS 常用的方法与命令也就两个，因此requireJS使用起来非常简单
- require
- define
define是用于定义模块，而require是用于载入模块以及载入配置文件。
require.config() 是用于配置参数的核心方法，它接收一个有固定格式与属性的对象作为参数，这个对象便是我们的配置对象。
在配置对象中 baseUrl 定义了基准目录，它会与 paths中模块的地址自动进行拼接，构成该模块的实际地址，并且当配置参数是通过script标签嵌入到html文件中时，baseUrl默认的指向路径就是该html文件所处的地址。paths 属性的值也是一个对象，该对象保存的就是模块key/value值。其中key便是模块的名称与ID，一般使用文件名来命名，而value则是模块的地址，在requireJS中，当模块是一个JS文件时，是可以省略 .js 的扩展名，比如 “index.js” 就可以直接写成 “index” 而当定义的模块不需要与 baseUrl 的值进行拼接时，可以通过 "/" 与 http:// 以及 .js 的形式来绕过 baseUrl的设定。
app.js
require.config({ // baseUrl: \'/jquery/bs/\' //另一个同名文件夹 baseUrl: \'/jquery/require/\', paths: { \'jquery\': \'http://cdn.webfont.youziku.com/wwwroot/js/jquery-1.10.2.min\' } }); //确定引用,没有这句代码，没法使用jquery require(["jquery"]);
require 提供的 data-main 属性，该属性是直接写在引入require.js的script标签上，在require.js 加载完毕时，会自动去加载配置文件 app.js。
require([\'BjTest\'], function (a) { var name = "小明"; alert(a.addName(name)); });
require([\'BjTest\', \'TjTest\'], function (a, b) { var name = "小明"; alert(a.addName(name)); alert(b.Apple(name)); });
通过 data-main 去加载入口文件，便会使配置对象中的 baseUrl 属性默认指向地址改为 app.js 所在的位置，相比之下我更加推荐这种方式，因为它更可能的方便快捷。
当我们的项目足够的庞大时，我也会推荐将入口文件作为一个普通的模块，然后在这个模块中，根据业务的不同再去加载不同的配置文件。
BjTest.js
define({ addName: function (n) { $("#best").text("人生得意须尽欢"); return "今天的测试用户名字是：" + n; }, fang: function (a, b, c) { return "京津新城:" + a + "小区，高铁站:" + b + "到北京：" + c + "分钟!"; } });
以上是关于requireJS简单应用的主要内容，如果未能解决你的问题，请参考以下文章