首先，目录如下（根目录有一个index.html文件、有一个scripts文件夹）：

scripts文件夹有如下的文件

以下是index.html代码

 <!DOCTYPE html>

 <html>

     <head>

         <title>My Sample Project</title>

         <!-- data-main attribute tells require.js to load

              scripts/main.js after require.js loads. -->

         <script data-main="scripts/main" src="scripts/require.js"></script>

     </head>

     <body>

         <h1>My Sample Project</h1>

     </body>

 </html>

RequireJS的目标是鼓励代码的模块化，它使用了不同于传统<script>标签的脚本加载步骤。可以用它来加速、优化代码，但其主要目的还是为了代码的模块化。它鼓励在使用脚本时以module ID替代URL地址。

RequireJS以一个相对于baseUrl的地址来加载所有的代码。 页面顶层<script>标签含有一个特殊的属性data-main，require.js使用它来启动脚本加载过程，而baseUrl一般设置到与该属性相一致的目录。下列示例中展示了baseUrl的设置：

<!--This sets the baseUrl to the "scripts" directory, and

    loads a script that will have a module ID of 'main'-->

<script data-main="scripts/main.js" src="scripts/require.js"></script>

　　

baseUrl亦可通过RequireJS config手动设置。如果没有显式指定config及data-main，则默认的baseUrl为包含RequireJS的那个HTML页面的所属目录。

RequireJS默认假定所有的依赖资源都是js脚本，因此无需在module ID上再加".js"后缀，RequireJS在进行module ID到path的解析时会自动补上后缀。你可以通过paths config设置一组脚本，这些有助于我们在使用脚本时码更少的字。

有时候你想避开"baseUrl + paths"的解析过程，而是直接指定加载某一个目录下的脚本。此时可以这样做：如果一个module ID符合下述规则之一，其ID解析会避开常规的"baseUrl + paths"配置，而是直接将其加载为一个相对于当前HTML文档的脚本：

  • 以 ".js" 结束.
  • 以 "/" 开始.
  • 包含 URL 协议, 如 "http:" or "https:".

在main.js中有如下代码：

alert(123);

　　

在浏览器中浏览查看index.html

另一种方式是在引入require.js时不设置data-main，后面通过代码形式装载：

<!DOCTYPE html>

<html>

    <head>

        <title>My Sample Project</title>

        <!-- data-main attribute tells require.js to load

             scripts/main.js after require.js loads. -->

             <!--data-main="scripts/main" -->

        <script src="scripts/require.js"></script>

        <script type="text/javascript">

        require(['scripts/main.js'],function(){});

        </script>

    </head>

    <body>

        <h1>My Sample Project</h1>

    </body>

</html>

该代码可以达到同样的效果

参考资料：

http://www.requirejs.cn/

requirejs实践一 加载JavaScript文件的更多相关文章

  1. requirejs实践二 加载其它JavaScript与运行

    上一篇中介绍了requirejs加载JavaScript文件,在这一篇中介绍加载JavaScript后执行代码 这次是test2.html文件, <!DOCTYPE html> <h ...

  2. 两种动态加载JavaScript文件的方法

    两种动态加载JavaScript文件的方法 第一种便是利用ajax方式,第二种是,动静创建一个script标签,配置其src属性,经过把script标签拔出到页面head来加载js,感乐趣的网友可以看 ...

  3. 页面异步加载javascript文件

    昨天听一同事说的异步加载js文件,可以提高页面加载速度.具体方法如下:(function() {  var ga = document.createElement('script'); ga.type ...

  4. javascript 动态加载javascript文件

    /* loadFile(data, callback): 动态加载js文件 data: 存放需要加载的js文件的url("url" || ["url", &qu ...

  5. requirejs按需加载angularjs文件

    之前分享了一篇用ocLazyLoad实现按需加载angular js文件的博客.本来当时想会使用一种方法就行了.可最近刚好有时间,在网上查找了一下requirejs实现angular js文件按需加载 ...

  6. 详谈LABJS按需动态加载js文件

    为了提高页面的打开和加载速度,我们经常把JS文件放在页面的尾部,但是有些JS必须放在页面前面,这样就会增加页面的加载时间:于是出现了按需动态加载的概念,这个概念就是当页面需要用到这个JS文件或者CSS ...

  7. JavaScript动态加载js文件

    /********************************************************************* * JavaScript动态加载js文件 * 说明: * ...

  8. Atlassian JavaScript load error（配置Atlassian的时候报无法加载script文件）

    等我弄好的时候,发现报错的图已经成为历史了,所以就没有截图了. Atlassian JavaScript load error We tried to load scripts but somethi ...

  9. javascript动态加载js文件主流浏览器兼容版

    一.代码示例: <html> <head> <meta http-equiv="Content-Type" content="text/ht ...

随机推荐

  1. c++ 派生类向基类转换的可访问性

    对于c++面向对象一直很疑惑,这次决定下功夫把它弄明白 一.派生类和基类之间的类型转换 首先理解,派生类含有基类的所有成分,只不过有些就算在派生类的成员函数也不能访问而已. (1)派生类和基类的自动转 ...

  2. dev/null和dev/zero区别 以及换回设备(loopback device)

    转自:http://blog.chinaunix.net/uid-20729677-id-765105.html dev/zero,是一个输入设备,你可你用它来初始化文件. /dev/zero---- ...

  3. 删除共享内存后key为0x00000000的问题

    一开始是 ------ Shared Memory Segments -------- key shmid owner perms bytes nattch status root dest gyf ...

  4. HW3.7

    import java.util.Scanner; public class Solution { public static void main(String[] args) { Scanner i ...

  5. HDOJ-ACM1015(JAVA) 运用 组合、全排列实现

    转载声明:原文转自:http://www.cnblogs.com/xiezie/p/5573934.html 这个题目的题意:(自己结合百度翻译,简单的翻译了一下) “这个项目是在一个在二楼图书馆一幅 ...

  6. 2013 ACM/ICPC Asia Regional Changsha Online–C (模拟)

    题目描述 略... 题解 注意控制精度即可....变量全部定义成double,结果round就行....妈蛋....被这题目恶心死了.... 代码: #include <iostream> ...

  7. UVA 557 - Burger(概率 递推）

     Burger  When Mr. and Mrs. Clinton's twin sons Ben and Bill had their tenth birthday, the party was ...

  8. 最新版postgresql+pgboucer安装

    安装postgresql: wget https://pgbouncer.github.io/downloads/files/1.7.2/pgbouncer-1.7.2.tar.gz wget htt ...

  9. java.util.Map按照key值合并的value的Collection 集合中。

    用java实现把多个map的内容合并的一个resultMap中 代码大致如下 /**  * @author Shalf  */ public class MapUtil { /** * 把partMa ...

  10. 小编接地气——第六届中国云计算大会攻略Q&amp;A

    2014年5月20-23日,第六届中国云计算大会在北京召开. 花个1000多元,在工作日请假来參加大会,不能让大家白跑一趟而是物有所值. 小编写了大会攻略Q&A,分享给各位 Q:为什么要參加关 ...