`

requirejs处理前端JS依赖

阅读更多

简介:

Requrejs遵循AMD规范,可以解决前端JS依赖问题,对于富客户端开发是不可少的。

使用:

在HTML文件中放入如下的标签,这里会载入require.js源码,并且执行scripts/main.js的内容。

这里main.js所在的目录将被定义问root directory, 以后的依赖定义都可以相对于这个目录。

 

 <script data-main="scripts/main" src="scripts/require.js"></script>

  

main.js中写入如下内容:

 

require(['jquery', 'canvas', 'app/sub'],
function   ($,        canvas,   sub) {
    //jQuery, canvas and the app/sub module are all
    //loaded and can be used here now.
});
 

 这里会查找scripts/jquery.js, script/canvas.js, scritps/app/sub.js,并将返回值作为参数。

 注意,这里就要求这三个js是返回了正确的对象,例如jquery.js应该访问一个jQuery的对象,简单说就是它们需要遵守AMD规范。

 

jQuery是遵守AMD规范的,下面是这方面的定义,对于没有遵循的库可以稍微DIY,让其返回正确值。

这里是jQuery关于AMD的定义。

 

if ( typeof define === "function" && define.amd && define.amd.jQuery ) {
	define( "jquery", [], function () { return jQuery; } );
}

  

怎么让js遵循AMD?

如果这个js没有依赖其他js文件,那么就可以直接在闭包最后返回一个该js的“功能对象”。

如果依赖其他文件,那么就需要类似这样写:

 

define(["./cart", "./inventory"], function(cart, inventory) {
        //return an object to define the "my/shirt" module.
        return {
            color: "blue",
            size: "large",
            addToCart: function() {
                inventory.decrement(this);
                cart.add(this);
            }
        }
    }
);

 

 

["./cart", "./inventory"]是该文件的依赖,"."开始表示相对于当前文件,而不是相对于root directory。返回的值的方式很灵活,可以像jquery那样返回封装好的对象,也可以直接用json封装。

 

更多配置实用见官网,可以指定一些路径缩写,例如这个application要获取一些public 的lib,我们可以把这个lib的路径配置上。例如,在main.js中添加

 

requirejs.config({
    //By default load any module IDs from js/lib
    baseUrl: 'js/lib',
    //except, if the module ID starts with "app",
    //load it from the js/app directory. paths
    //config is relative to the baseUrl, and
    //never includes a ".js" extension since
    //the paths config could be for a directory.
    paths: {
        app: '../app'
    }
});

 

 

 

 

分享到:
评论

相关推荐

    requireJS初学者完整例子

    RequireJS是前端开发中一款非常重要的模块化加载库,它主要解决了JavaScript在浏览器环境中异步加载和组织代码的问题。这个“requireJS初学者完整例子”提供了学习RequireJS的基础步骤和实践操作,帮助初学者快速...

    ionic项目应用requireJs前端模块化 示例

    在本文中,我们将深入探讨如何在 Ionic 项目中利用 RequireJS 进行前端模块化开发。RequireJS 是一个流行的 JavaScript 模块加载器和构建工具,它使得代码组织更加有序,便于维护和优化。Ionic 是一个基于 AngularJS...

    使用gulp和requirejs快速构建一个前端项目

    在前端开发领域,高效的工作流程和模块化管理是提高生产力的关键。`gulp` 和 `requireJS` 是两个非常...通过 `gulp` 实现文件的处理和打包,通过 `requireJS` 管理模块依赖,两者协同工作,大大提高前端开发的效率。

    前端项目-requirejs-tpl.zip

    1. `requirejs`: 这是RequireJS的核心库,用于管理JavaScript模块的加载和依赖关系。 2. `underscore.js` 或 `_template.js`: 这是UnderscoreJS库,或者其模板引擎的部分。 3. `templates`: 可能是一个目录,存放着...

    RequireJS代码文件依赖管理 - 入门代码演示

    RequireJS 是一个JavaScript库,主要用于优化前端开发中的代码组织和加载效率。它引入了模块化概念,通过异步加载方式解决传统HTML文档中标签引入JavaScript文件导致的阻塞问题,尤其在处理大量依赖关系时能显著提高...

    前端项目-requirejs-plugins.zip

    RequireJS是一款流行的JavaScript模块化加载器,它使得前端代码组织更加有序,易于维护,尤其在处理大型项目时更为高效。这个压缩包中的"requirejs-plugins"可能包含了针对RequireJS的一些扩展和优化工具,旨在提升...

    前端开源库-bedrock-requirejs

    在实际应用中,`bedrock-requirejs` 可以与其它前端工具链(如 Babel 转换 ES6+ 代码、PostCSS 处理 CSS、Webpack 或 Rollup 打包)配合使用,实现更高级的项目构建需求。同时,由于其基于 RequireJS,因此可以无缝...

    RequireJS的文件

    RequireJS 是一个JavaScript库,主要用于组织和管理前端的模块化代码。它引入了AMD(Asynchronous Module Definition)异步模块定义的加载机制,使得在浏览器环境中可以实现按需加载和并行加载JavaScript文件,从而...

    requirejs demo

    RequireJS 是一个 JavaScript 库,专门用于管理前端的模块化依赖。它引入了 AMD(Asynchronous Module Definition)规范,使得在浏览器环境中可以异步加载和组织JavaScript代码,从而解决了传统方式下JavaScript文件...

    RequireJS入门(一)

    RequireJS 是一个 JavaScript 模块加载器和打包工具,它使得在浏览器环境中可以实现模块化开发,解决了传统 JavaScript 文件依赖关系混乱的问题。本篇文章将对 RequireJS 的基本概念、使用方法及重要特性进行深入...

    前端开发模块化requireJS中文手册

    本文档将详细介绍如何使用 RequireJS 来组织和加载前端 JavaScript 模块。 #### 二、加载 JavaScript 文件 ##### 2.1 data-main 入口点 RequireJS 的核心功能之一是通过 `data-main` 属性来指定应用的入口点。这...

    快速理解RequireJs

    RequireJS的核心概念是AMD(Asynchronous Module Definition),这是一种处理JavaScript模块化的模式,允许模块和它们的依赖关系异步加载。 ## RequireJS的基本使用 1. **配置**: 在项目中,通常会有一个主入口...

    requireJS + angularJs的项目构架

    在实际应用中,可能会用到`bower`这样的包管理工具来管理前端依赖,以及`gulp`这样的构建工具自动化处理任务,如压缩、合并代码,优化图片,编译Sass或Less等。然而,根据描述,这个实例中并未包含这些工具,可能是...

    requireJs学习文档+demo

    RequireJS 是一个 JavaScript 文件和模块加载器,它使得在浏览器端使用异步方式来加载和组织脚本,从而解决了大型JavaScript应用中代码依赖管理和加载效率的问题。RequireJS 的设计思想深受 CommonJS 和 AMD...

    RequireJS 基础demo 1

    RequireJS 是一个JavaScript库,主要用于优化前端应用的加载和组织代码结构。它的核心理念是模块化,通过异步加载依赖关系来提升网页性能,尤其是在处理大量JavaScript文件时。本资源包是一个入门级的RequireJS演示...

    requirejs_Demo演示

    **requireJS**是一个JavaScript库,主要用于管理项目的模块依赖性,特别是在大型Web应用程序中。它引入了AMD(异步模块定义)规范,使得JavaScript模块化变得简单而高效,尤其是在需要加载大量脚本的情况下。...

    前端开源库-grunt-requirejs

    `grunt-requirejs`就是这样一个工具,它是前端开源库中的一个成员,专门用于结合`grunt`和`require.js`来构建JavaScript应用程序。本文将深入探讨`grunt-requirejs`的工作原理、主要功能以及如何在项目中进行配置和...

    requirejs原理演示

    RequireJS 是一种 JavaScript 模块化加载框架,它在浏览器端实现了 Asynchronous Module Definition ...通过实践和理解 `define` 函数、依赖管理和 `shim` 配置,开发者可以有效地利用 RequireJS 构建复杂的前端应用。

    requireJs+Jfinal 例子

    - 前后端分离:RequireJS负责前端的模块加载和依赖管理,Jfinal处理后端业务逻辑和数据提供,两者结合实现了前后端职责的明确划分。 4. 示例项目结构: - `jfinal_requireJs_demo`可能包含以下目录: - `src/...

    angularjs_requirejs demo

    **RequireJS** 则是一个JavaScript模块加载器和打包工具,它遵循AMD(Asynchronous Module Definition)规范,使得JavaScript可以实现异步模块加载,从而解决了大型项目中代码的组织和依赖管理问题。通过RequireJS,...

Global site tag (gtag.js) - Google Analytics