资讯专栏INFORMATION COLUMN

上云采购季！| 爆款云服务器低至4.6元/月，首单享0.9折

免费试用
首页/文章专栏/RequireJS学习

RequireJS学习

张利勇 / 3311人阅读

摘要：是一个文件和模块加载器。除了可以在浏览器中使用外，还可以用或等端环境。最新版可以在这里下载。基本用法假设你的工程目录结构如下首先，将放入目录。然后，在中引入用来加载。

RequireJS是一个JavaScript文件和模块加载器。除了可以在浏览器中使用外，还可以用Node或Rhino等Server端环境。

最新版可以在这里下载。

基本用法

假设你的工程目录结构如下：

project

index.html

js

  - lib
      - jquery.js
  - app
      - sub_app.js
      - app.js

首先，将requirejs.js放入js/lib目录。

project

index.html

js

  - lib
      - jquery.js
      - require.js
  - app
      - sub_app.js
      - app.js

然后，在index.html中引入

在app.js中，使用require方法加载其他脚本

requirejs.config({
    // 默认从js/lib目录加载
    baseUrl: "js/lib",
    // 如果模块ID以app开头，则从js/app目录加载
    // paths相对于baseUrl设定
    // 不要指定".js"后缀，因为paths可以是一个目录
    paths: {
        app: "../app",
        jquery: "jquery.min",
    }
});
 
// app入口
require(["app/sub_app"], function (sub) {
    sub.hello();
});

在sub_app.js中定义一个module

// define相对于baseUrl设定
define(["jquery"], function ($) {
    return {
        log: function (msg) {
            if (window.console && console.log) {
                console.log(msg);
            } else {
                alert(msg);
            }
        },
        hello: function () {
            this.log("Hello, I"m powered by jQuery " + $().jquery + "!");
        }
    };
});

现在，打开浏览器的控制台，应该能看到我们自定义的module成功使用jQuery输出了下面这句话：

Hello, I"m powered by jQuery 1.8.3!
海外云主机 云服务器 Requirejs requirejs例子 RequireJS入门 requirejs使用

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78560.html

相关文章

  • JS模块化工具 requirejs 学习文档

    摘要：模块化工具学习文档作为一个开发者，原来写代码都是流水账式的，一直想写出模块化的，但是前端工具多如牛毛，确都是针对于的打包工具。之中导入对应模块即可。如果设为，则禁用等待超时。 JS模块化工具 requirejs 学习文档 作为一个Java开发者，原来写js代码都是流水账式的，一直想写出模块化的js，但是前端工具多如牛毛，确都是针对于nodejs的打包工具。但是我在实际的开发过程中，并没...

    Galence 评论0 收藏0

  • RequireJS进阶:配置文件的学习

    摘要：概述强大灵活的运用是通过配置文件决定的。下面通过示例来进行深度的探讨配置文件的使用。配置文件的位置配置文件的位置和声明用法是相对于这个脚本文件来决定的。配置文件参数的介绍所有模块的查找根路径。 概述 Requires强大灵活的运用是通过配置文件决定的。通过配置文件我们可以给模块取别名、给模块加上版本标识、设置模块依赖、包装非模块等强大功能。同时RequireJS的优化器也大量使用了配...

    lemon 评论0 收藏0

  • RequireJS学习笔记

    摘要：如果有疑惑的地方，欢迎讨论，我是初学，希望能切磋和得到指点加载会阻塞页面加载默认异步加载文件方法一把放到页面底部加载方法二支持定义全局相对路径方法一自定义属性指定网页程序的主模块文件定义整个网页代码的入口文件的相对位置，以后此文件 如果有疑惑的地方，欢迎讨论，我是初学，希望能切磋和得到指点； js加载会阻塞页面加载： //requirejs默认异步加载js文件； 方法一...

    hersion 评论0 收藏0

  • angularjs + requirejs 完整的手脚架

    摘要：还记得一年半前转向后端的那种无助的感觉，独自一人摸黑走路，学习各种前端知识，走了不少弯路，现在终于算是入门了前端我相信不少人也有我当时同样的无助，所以我在空闲时间整理了下所用到的知识，便编写了一个手脚架，希望能给其他正学习前端的同学一些参考 还记得一年半前转向后端的那种无助的感觉，独自一人摸黑走路，学习各种前端知识，走了不少弯路，现在终于算是入门了前端～我相信不少人也有我当时同样的无助...

    anyway 评论0 收藏0

  • angularjs学习笔记——使用requirejs动态注入控制器

    摘要：最近一段时间在学习，由于觉得直接使用它需要加载很多的文件，因此想使用来实现异步加载，并动态注入控制器。手动启动，特别说明此处的不是那个框架，而是的一个手动启动框架的函数中完成了各模块的初始化，并且引入了。 最近一段时间在学习angularjs，由于觉得直接使用它需要加载很多的js文件，因此想使用requirejs来实现异步加载，并动态注入控制器。简单搜索了下发现好多教程写的都很复杂，所...

    王军 评论0 收藏0

发表评论

登陆后可评论

0条评论

张利勇

男|高级讲师
我要私信

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<