首先，目录如下（根目录有一个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. vijos P1459 车展（Treap，中位数）

    P1459车展   描述 遥控车是在是太漂亮了,韵韵的好朋友都想来参观,所以游乐园决定举办m次车展.车库里共有n辆车,从左到右依次编号为1,2,…,n,每辆车都有一个展台.刚开始每个展台都有一个唯一的 ...

  2. Struts2使用拦截器完成权限控制示例

    http://aumy2008.iteye.com/blog/146952 Struts2使用拦截器完成权限控制示例 示例需求:    要求用户登录,且必须为指定用户名才可以查看系统中某个视图资源:否 ...

  3. editpuls查找替换通配符

    1  \t    Tab character.         tab符号 2  \n    New line.              新的一行(换行符) 3  .     Matches any ...

  4. 归并排序，递归法，C语言实现。

    利用归并排序法对序列排序的示意图(递归法): 一.算法分析:利用递归的分治方法:1.将原序列细分,直到成为单个元素:2.在将分割后的序列一层一层地按顺序合并,完成排序.细分通过不断深入递归完成,合并通 ...

  5. 为Android安装BusyBox

    大家是否有过这样的经历,在命令行里输入adb shell,然后使用命令操作你的手机或模拟器,但是那些命令都是常见Linux命令的阉割缩水版,用起来很不爽.是否想过在 Android上使用较完整的she ...

  6. [二]poi实践一

    1.创建时间格式的cell 2.创建不同格式的cell(字符串.布尔.数值) 3.读取遍历xls文件 4.抽取excel的内容

  7. 【腾讯Bugly干货分享】手游热更新方案xLua开源：Unity3D下Lua编程解决方案

    本文来自于腾讯Bugly公众号(weixinBugly),未经作者同意,请勿转载,原文地址:http://mp.weixin.qq.com/s/2bY7A6ihK9IMcA0bOFyB-Q 导语 xL ...

  8. Entity Framework 教程(转)

    预备知识    2 LINQ技术    2 LINQ技术的基础 - C#3.0    2 自动属性    2 隐式类型    2 对象初始化器与集合初始化器    3 匿名类    3 扩展方法    ...

  9. java实现window phone推送通知

    package com.windowphone.text; import java.io.IOException;import java.io.OutputStream;import java.net ...

  10. 操作系统-mac安装linux（Ubuntu）

    mac安装linux 安装linux,分为两步: 1. 制作linux启动U盘 2. 通过启动U盘,安装Ubuntu系统 Mac OS X下创建USB启动盘 格式化USB驱动盘 下载Ubuntu桌面版 ...