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

scripts文件夹有如下的文件

以下是index.html代码

  1.  <!DOCTYPE html>
  2.  <html>
  3.      <head>
  4.          <title>My Sample Project</title>
  5.          <!-- data-main attribute tells require.js to load
  6.               scripts/main.js after require.js loads. -->
  7.          <script data-main="scripts/main" src="scripts/require.js"></script>
  8.      </head>
  9.      <body>
  10.          <h1>My Sample Project</h1>
  11.      </body>
  12.  </html>

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

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

  1. <!--This sets the baseUrl to the "scripts" directory, and
  2.     loads a script that will have a module ID of 'main'-->
  3. <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中有如下代码：

  1. alert(123);

　　

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

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

  1. <!DOCTYPE html>
  2. <html>
  3.     <head>
  4.         <title>My Sample Project</title>
  5.         <!-- data-main attribute tells require.js to load
  6.              scripts/main.js after require.js loads. -->
  7.              <!--data-main="scripts/main" -->
  8.         <script src="scripts/require.js"></script>
  9.         <script type="text/javascript">
  10.         require(['scripts/main.js'],function(){});
  11.         </script>
  12.     </head>
  13.     <body>
  14.         <h1>My Sample Project</h1>
  15.     </body>
  16. </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. LINUX系统怎么关闭防火墙?

    所谓防火墙指的是一个由软件和硬件设备组合而成.在内部网和外部网之间.专用网与公共网之间的界面上构造的保护屏障.是一种获取安全性方法的形象说法,它是一种计算机硬件和软件的结合,使Internet与Int ...

  2. ubuntu glusterfs 配置调试

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAAqMAAADpCAIAAACfoakcAAAgAElEQVR4nO2d2XMjSX7f8c+sQ4GwHY

  3. spring tranaction 事务入门

    一.事务四个属性 原子性(atomicity).一个事务是一个不可分割的工作单位,事务中包括的诸操作要么都做,要么都不做. 一致性(consistency).事务必须是使数据库从一个一致性状态变到另一 ...

  4. Cocos2d-x创建新工程

    转自:http://www.cnblogs.com/andyque/archive/2011/09/27/2192920.html 而是新建一个工程.然后,我们不是copy文件夹.lib和dll了.我 ...

  5. 【JavaScript】出现即使设置了ID也获取不到的可能原因与window.onload

    有时候.在JavaScript中.即使设置了ID也有可能出现document.getElementById()获取不到的情况,然后你就開始想document是否写错之类的.事实上根本就不是你的代码的大 ...

  6. linux系统禁止root用户通过ssh登录及ssh的访问控制

    Linux系统默认情况下,是可以通过ssh以root权限登录的.但出于安全考虑,这样的权限是不合适的,因为黑客可能通过暴力破解你的root密码,然后进入你的系统,oh,damn it..... 同样是 ...

  7. [React] React Fundamentals: transferPropsTo

    the transferPropsTo method lets you easily push properties into your components to easily customize ...

  8. uuid_short() 源代码

    /* uuid_short handling. The short uuid is defined as a longlong that contains the following bytes: B ...

  9. How to Enable Multi-Touch

    This is a frequently asked question. Multi-touch feature is available on both iOS & Android port ...

  10. [转]VS2010 （C#）winform程序打包发布图解

    1.新建一个Windows窗体应用程序,例如项目名为monitor,功能略.新建的时候不要忘了创建解决方案. 2.在monitor解决方案上“右击”—— “添加”——“新建项目”,选择“其他类型项目” ...