首先，目录如下（根目录有一个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. bzoj 2282 [Sdoi2011]消防（树的直径，二分）

    Description 某个国家有n个城市,这n个城市中任意两个都连通且有唯一一条路径,每条连通两个城市的道路的长度为zi(zi<=1000). 这个国家的人对火焰有超越宇宙的热情,所以这个国家 ...

  2. HW3.22

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

  3. Python模块导入及使用经验回顾 [ 持续更新 ]

    1,若需要导入的模块并不是一个简单的*.py文件,而是在Lib目录下的一个文件夹,则要注意检查这个文件夹下有无__init__.py文件(该文件虽然经常为空,但是缺失该文件,对模块的导入有很大的影响) ...

  4. A Tour of Go Slices

    A slice points to an array of values and also includes a length. []T is a slice with elements of typ ...

  5. JavaScript constructors, prototypes, and the `new` keyword

    Are you baffled(阻碍:使迷惑) by the new operator in JavaScript? Wonder what the difference between a func ...

  6. SQL SERVER 导入EXCEL的存储过程

    1.先在查询分析器里执行 exec sp_configure "show advanced options",1 reconfigure exec sp_configure &qu ...

  7. MariaDB-5.5.33a 编译安装

    交代一下内核的信息 [root@localhost soft]# uname -r 2.6.32-71.el6.x86_64 创建mariadb用户组 [root@localhost mariadb- ...

  8. 程序员提高工作效率的15个技巧【Facebook】

    程序员提高工作效率的15个技巧[Facebook] 作者: habadog 日期: 2015 年 02 月 13 日发表评论 (0)查看评论 程序员提高工作效率的15个技巧[Facebook] 1,D ...

  9. javascript中使用md5函数

    javascript中使用md5函数 这对于js来讲本来是没有的,现在可以自己定义一个md5的函数,达到加密效果. var hexcase = 0; function hex_md5(a) { if ...

  10. SQLite数据库如何存储和读取二进制数据

    SQLite数据库如何存储和读取二进制数据 1. 存储二进制数据 SQLite提供的绑定二进制参数接口函数为: int sqlite3_bind_blob(sqlite3_stmt*, int, co ...