`

require.js模块加载器的基本用法

 
阅读更多

require.js是一种基于AMD规范的模块加载器,至于什么是AMD规范,就不在这里详细描述了,有兴趣了解的可以去问度娘(^_^)

 

主要用到的就是两个方法:defind, require...

 

require.config()    //  定义requirejs的相关配置

如:

 

requirejs.config({

   // 定义参数后缀,当require加载其他js文件时,会追加在请求url后,见下图

    urlArgs: "v="+new Date().getTime(),

   // 主目录,表示通过require加载的文件都是基于此目录下的文件

    baseUrl:"",
   // 定义模块映射,后面直接通过对应的key(如:"jquery")来引用模块

    paths: {

        C: 'js/common/common', 
        jquery: "lib/jquery.min"    
    },
   // 定义模块依赖

   shim: {       
// 表示js/common/common.js文件依赖jquery,requirejs在加载common.js时会自动先加载jquery,再加载common.js

       C: ['jquery'],  // 定义模块依赖的简写,也可以写为: C:{ deps:["jquery"]  }

       jquery: {

                exports: 'jQuery'

            }

   }

});

 

shim属性,专门用来配置不兼容的模块。

  (1)exports值(输出的变量名),表明这个模块外部调用时的名称;

  (2)deps数组,表明该模块的依赖性。

 

 

define 定义模块

参数:([模块名],[依赖项], 回调方法)

 

如:

controller/index.js

=====

// 如果有依赖的js模块可以写在“[]”内,如["jquery"],没有依赖项,则可以不传这个参数

define([“jquery"], function($){
   return {    // 将需要抛出给外部调用的对象return出来
       init: function(){
            console.log($("body").height());  // 输出body的高度
      }
   }
})

 

require 引入模块

参数:([模块名],回调方法)
如:

main.js

=====

// 引入controller/index

require(["controller/index"], function(indexController){
         indexController.init();  // 调用controller/index.js中定义的init方法
});

 

页面用法:

如: index.html

在页面中引入require.js(data-main:定义require.js的主入口模块

<script type="text/javascript" src="require.js" data-main="src/main"></script>

或者:
<script type="text/javascript">
   require(["controller/index"], function(indexController){
           indexController.init();  // 调用controller/index.js中定义的init方法
   });
</script>

 

  • 大小: 20 KB
分享到:
评论

相关推荐

    Javascript模块化编程(Require.js)

    Require.js是JavaScript的一个模块加载器,它引入了AMD(Asynchronous Module Definition)规范,为JavaScript提供了异步加载模块的能力,尤其适合在浏览器环境中处理大量依赖关系。 在JavaScript中,早期的编程...

    require.js.rar

    require.js是一个小巧但功能强大的JavaScript模块加载器,它遵循了Asynchronous Module Definition(AMD)规范,使得在浏览器端进行异步加载和组织模块成为可能。 1. require.js的核心功能: - **模块化**:...

    javascript高级模块化require.js的具体使用方法

    Require.js是一种JavaScript模块加载器,它遵循AMD(异步模块定义)规范,这种规范允许你以异步的方式加载JavaScript模块。它非常小巧,压缩后的大小只有14KB,适合用于管理前端JavaScript模块的加载,能够有效地...

    require.js的用法详解

    require.js是一种JavaScript模块加载器,设计用于解决JavaScript代码的组织和异步加载问题。在早期的网页开发中,所有的JavaScript代码通常被编写在一个文件里,随着项目规模的扩大,代码量增加,这种方法不再适用。...

    基于Require.js使用方法(总结)

    Require.js是一个JavaScript模块加载器,其主要作用是帮助页面管理JavaScript文件的依赖关系,并且能够异步加载JavaScript文件以提高页面加载的性能。使用Require.js的目的是为了解决在浏览器端开发时遇到的两个主要...

    require.js build

    `require.js` 是一个流行的JavaScript模块化加载器,它使得在浏览器端管理JavaScript代码变得更加有序和高效。在HTML5 Boilerplate(一个前端开发基础模板)中整合`require.js`,可以提升项目的构建质量和性能,特别...

    require+r.js打包

    Require.js是一个流行的AMD(Asynchronous Module Definition)模块加载器,它允许我们在浏览器环境中按需加载JavaScript模块。而r.js是Require.js的一个配套工具,专门用于构建和优化项目,包括合并、打包和压缩JS...

    require.js+vue开发微信上传图片组件

    Require.js是一个JavaScript文件和模块加载器,支持AMD规范,可以在浏览器中异步加载JavaScript模块,以提高页面性能。在开发微信上传图片组件时,我们可以将各个组件的html、js、css分别放在用组件名字命名的文件夹...

    requireJS require.js下载

    RequireJS 是一个JavaScript模块加载器。它非常适合在浏览器中使用,但它也可以用在其他脚本环境,就像 Rhino and Node。使用RequireJS加载模块化脚本将提高代码的加载速度和质量。【百度百科】

    一个结合了require.js+backbone的例子,适合初学者

    在"标签"中,"require"指的是Require.js,它是AMD模块加载器,用于按需加载和组织JavaScript代码,避免了全局变量污染和依赖关系的混乱。"backbone"则是Backbone.js的缩写,它提供了模型、视图、集合和路由器等核心...

    javascript模块化编程库require的用法.docx

    在这样的背景下,Require.js作为一种先进的JavaScript模块加载器,应运而生。它不仅支持AMD(Asynchronous Module Definition)规范,还能够有效地管理依赖关系,使得开发者能够更加清晰地组织代码结构,提高开发...

    require.js 加载过程与使用方法介绍

    Require.js是一个广泛使用的JavaScript模块加载器,它的主要目的是简化JavaScript模块的加载流程,解决传统上依赖于script标签顺序引入和可能出现的依赖问题。在传统的JavaScript开发中,随着功能的丰富和复杂性的...

    RequireJS一个JavaScript文件和模块加载器

    RequireJS 是一个JavaScript库,它的主要功能是作为一个模块管理和加载器。在JavaScript的世界里,由于其天然的异步性质,管理多个脚本文件的依赖关系往往变得复杂且困难。RequireJS 为此提供了解决方案,它引入了...

    第二次聊一聊JS require.js模块化工具的基础知识

    Require.js是一款流行的JavaScript模块加载器,它通过简单的配置和API帮助开发者实现模块化编程。本文旨在介绍Require.js的基础知识点,供对模块化工具感兴趣的同学参考。 首先,Require.js为JavaScript定义了三个...

    Require.js的基本用法详解

    ①:require.js是一个js脚本加载器,它遵循AMD(Asynchronous Module Definition)规范,实现js脚本的异步加载,不阻塞页面的渲染和其后的脚本的执行,并提供了在加载完成之后的执行相应回调函数的功能; ②:require....

    Sea.js模块化官方demo

    Sea.js 是一个轻量级的前端模块加载器,它遵循 CommonJS 规范,并且特别适用于浏览器环境。Sea.js 的出现为前端开发者提供了一种组织和管理代码的新方式,使得大型应用的构建变得更加有序和可维护。本篇文章将深入...

    dotjs-loader:用于webpack的doT.js模块加载器

    用于webpack的模块加载器 用法 安装 使用npm安装。 doT是一个对等依赖项,应单独安装: npm install --save-dev dot dotjs-loader 配置 在webpack.config.js配置加载器: module: { loaders : [ { test : / \. ...

    Javascript模块化编程(三)require.js的用法及功能介绍

    为了有效地管理这些模块,避免文件加载导致的性能问题以及复杂的依赖关系,require.js作为一种模块加载器应运而生。require.js遵循AMD(Asynchronous Module Definition)规范,允许异步加载JavaScript模块,使得...

Global site tag (gtag.js) - Google Analytics