首先，目录如下（根目录有一个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. [九度OJ]1008.最短路径问题

    原题链接:http://ac.jobdu.com/problem.php?pid=1008 题目描述: 给你n个点,m条无向边,每条边都有长度d和花费p,给你起点s终点t,要求输出起点到终点的最短距离 ...

  2. HDOJ-ACM1022(JAVA)

    这道题:是模拟出栈,判断出栈顺序的可能性. 基本上大家的做法都是直接模拟栈的出栈入栈并将顺序用0,1序列来表示,我暂时没想到什么好的思路. import java.util.*; import jav ...

  3. poj 2942--Knights of the Round Table （点的双连通分量）

    做这题简直是一种折磨... 有n个骑士,骑士之间相互憎恨.给出骑士的相互憎恨的关系. 骑士要去开会,围成一圈坐,相互憎恨的骑士不能相邻.开会骑士的个数不能小于三个人.求有多少个骑士不能开会. 注意:会 ...

  4. MySQL 数据库中用户表中口令登陆设置

    工具:MyEclipse8.5.apache-tomcat-6.0.43.MySQL5.6 问题:项目是同事发给我,正常运行之后,使用MySQL表里的管理员数据登陆时,提示“仅限于非总部工号登录!” ...

  5. A Tour of Go Multiple results

    A function can return any number of results. This function returns two strings. package main import ...

  6. js学习之原型prototype（一)

    1.javascript中的每个引用类型(原生的.和自定义的)都有prototype属性,Javascript中对象的prototype属性的解释是:返回对象类型原型的引用. A.prototype ...

  7. lucene创建索引简单示例

    利用空闲时间写了一个使用lucene创建索引简单示例, 1.使用maven创建的项目 2.需要用到的jar如下: 废话不多说,直接贴代码如下: 1.创建索引的类(HelloLucene): packa ...

  8. C++编译器函数模版机制剖析 - 函数模版的本质

    思考:为什么函数模板能够和函数重载放在一块.C++编译器是怎样提供函数模板机制的? demo 1 #include <cstdio> #include <iostream> u ...

  9. C# LINQ详解（一）

    原文标题:How does it work in C#?-Part 3 (C# LINQ in detail),作者:Mohammand A Rahman. 目录 LINQ 基础 扩展方法-幕后的工作 ...

  10. SQL Server查询数据库中所有的表名及行数

    SELECT a.name, b.rows FROM sysobjects AS a INNER JOIN sysindexes AS b ON a.id = b.id WHERE (a.type = ...