`

前端设计思路之require.js的使用

 
阅读更多

AMD(Asynchronous Module Definition)规范提出了一种基于模块化的异步加载javascript代码的机制,它推荐开发人员将javascript代码封装进一个个模块,对全局对象的依赖变成了对其他模块的依赖,无需再声明一大堆的全局变量。通过延时和按需加载来解决各个模块的依赖关系。

CommonJS的AMD规范中只定义了一个全局的方法:

define(id?,dependencies?,factory);该方法用来定义一个javascript模块,开发人员可用这个方法来将部分功能封装在define方法体内。

id:标示该模块的标识,为可选参数。

dependencies:是一个字符串array,标示该模块依赖其他所有模块标识

factory:一个用于执行该模块的方法,它可以使用前面dependencies里面声明的其他依赖模块的返回值作为参数,若该方法有返回值,当该模块被其他模块依赖时,返回值就是该模块的输出。

 

require.js的作用:

1.引入需要使用的命名空间(顺便加个别名也可);

2.将自己的代码放到命名空间中,避免全局污染;

下面我们来看一下requireJS的具体写法,新建一个独立的myRequire.test.js文件,输入下面的代码;

define(['myRequire.core'],function(xxx){

      return{

           MyTest : function (){alert('hello world!');}

     }

});

 引入命名空间: ‘myRequire.core’,并起一个别名:xxx

 将自己的代码放入define中,避免全局化的冲突。

3.在定义好模块后我们该如何使用呢?require.js提供了一个函数,require()
require函数加载依赖并执行回调,与define不同的是,它不会把回调注册成模块:

require(['jquery'],function($){
    //这个函数加载依赖后执行回调代码
    console.log($);
});

 

 

 

 

 

 

 

 

 

 

 

分享到:
评论

相关推荐

    require.js.rar

    总的来说,require.js和AMD规范为JavaScript开发带来了一种全新的模块化和异步加载思路,极大地优化了前端开发流程,降低了项目复杂性,提高了开发效率。理解并掌握require.js的使用,对于任何JavaScript开发者来说...

    携程大前端框架NFES-携程魏晓军.pdf

    本文将详细介绍NFES的设计思路、技术特点以及实际应用场景。 #### 二、业界现状与内部挑战 ##### 1. 业界现状 根据2018年的统计数据,前端技术的发展趋势呈现出多样化的特点,包括但不限于: - **TWA(Techless ...

    前端架构体系技术.docx

    三、Polymer/Angular2 思想与设计思路 * Import 技术 * Template 和 Script 引入方式 * CSS 样式命名空间隔离 *Simple复用第三方库 * ReactJS 原理与使用 * Virtual DOM 单向数据绑定 * JS 执行语法方式 * UI 由...

    JsStringTool_more_platform.zip

    `sum.txt` 可能是项目的总结文件,包含了工具类的设计思路、使用说明或更新日志,帮助开发者理解和使用这个库。 总之,`JsStringTool_more_platform.js` 是一个强大的跨平台字符串工具类,它简化了多语言环境下字符...

    qartjs生成艺术二维码

    **正文** 在IT行业中,二维码(Quick Response Code)已经成为...通过掌握并运用这个库,开发者可以创造出富有吸引力和个性的二维码,提升用户体验,拓宽设计思路。在数字时代的今天,这样的工具无疑具有很高的价值。

    Components:一些小组件

    通过学习和使用这个项目,开发者不仅可以掌握require.js的模块化开发方式,还能深入了解Moye库的组件设计思路,以及如何利用JavaScript实现前端组件。同时,这也是一个实践前端组件化开发、优化代码结构和提升代码...

    前端开源库-node-enumerable

    "node-enumerable" 就是一个这样的开源库,专门为前端开发设计,旨在为Node.js环境提供类似C# LINQ(Language Integrated Query)的功能,并且完全适配ES6语法,同时使用TypeScript进行编写,确保了代码的类型安全...

    前端开源库-panto-logger

    `panto-logger` 的设计思路是简化开发者的日志处理过程,让开发者能够更加专注于业务逻辑的实现。 首先,`panto-logger` 提供了多种日志级别,包括 `info`、`debug`、`warn` 和 `error` 等。这些级别对应于不同严重...

    JS中的模块规范(CommonJS,AMD,CMD(少用))

    **CMD** 规范是由国内的前端框架Sea.js提出的,其设计思路与AMD类似,但更加注重模块间的依赖顺序。在CMD中,模块可以按需加载,而且允许模块的动态加载。 CMD规范的主要特点包括: - CMD同样使用`define()`函数...

    前端开源库-wait-for-event

    "wait-for-event"库的设计思路基于JavaScript的事件驱动模型。在浏览器环境中,许多操作如用户交互、网络请求等都是异步进行的,这就涉及到了事件和事件处理。当一个事件发生时,会触发相应的事件处理函数。然而,...

    前端开源库-utftables

    "utftables"是一个专为前端设计的开源库,它的主要功能是生成准表格式的数据输出,尤其适用于无依赖关系的命令行界面(CLI)工具。这个库的精巧之处在于它小巧且高效,无需额外的依赖,可以轻松集成到项目中。 ...

    基于jspm王道考研购物网站--lw.zip

    jspm是一个前端模块管理和打包工具,它在JavaScript社区中广泛用于管理与加载ES6模块,提供了一种更现代的方式来替代传统的require.js或browserify等工具。这个项目可能是为了帮助考研学生了解和实践Web开发技术,...

    前端开源库-panto-transformer

    PANTO是一个模块化的构建工具,它的设计思路是将构建过程拆分为一系列可复用的"transformers"(转换器)。每个转换器专注于完成特定的任务,如编译ES6到ES5,处理CSS预处理器,或者优化图片。这样的设计使得PANTO...

    前端开源库-ianstormtaylor-minify

    这个库的核心优势在于其设计思路:保持API的简洁和易用性,同时实现高效的压缩效果。在实际开发中,开发者可以快速集成并轻松地对三种主要的前端资源进行压缩,无需深入理解复杂的压缩算法。 ### JavaScript 压缩 ...

    JavaScript异步执行辅助工具ocSteps.zip

    ocSteps 是一个JavaScript异步执行辅助工具,主要用于支持 Node.js 中的大量异步API以及操作,以及前端浏览器里的异步任务(例如Ajax)。如果你听说过“回调地狱”这个词,那么,__ocSteps__ 的用途就很好解释了:...

    Javascript模块化编程(三):模块化编程实战,试用SeaJS

    SeaJS虽然在浏览器环境中使用,但其设计思路和API很大程度上借鉴了CommonJS。 3. SeaJS 的核心概念: - `seajs.use`: 用于加载模块并执行回调,它是SeaJS的入口点。 - `seajs.config`: 配置SeaJS的行为,如定义...

    Versus AI Duel Game in JavaScript Free Source Code.zip

    本篇文章将深入探讨一个基于JavaScript实现的“Versus AI Duel Game”,通过分析源代码,我们将揭示其中的关键技术和设计思路,为JavaScript游戏开发者提供宝贵的参考。 1. **基础架构** 这款游戏的实现离不开...

    Seajs源码详解分析

    总结来说,Sea.js 的源码中融合了多种前端模块化设计思路,虽然其已经被时代所淘汰,但其代码设计上的巧妙和简洁性至今仍然值得我们学习和研究。通过深入了解和分析 Sea.js 的源码,可以让我们对前端模块化的演进...

    WAPDiff:Node 和 Express 实验和探索

    **标题与描述解析** 标题“WAPDiff:Node 和 Express 实验和探索”指的是一个关于比较和探讨Node...如果你希望深入学习或实践这部分内容,可以解压文件,查看代码实现,运行项目,并尝试理解作者的设计思路和实验过程。

    前端开源库-http-hash-mocker

    HTTP哈希模拟的基本思路是,将前端发出的HTTP请求的URL作为输入,通过哈希算法(如MD5或SHA)计算出一个唯一标识,这个标识与预定义的数据模板进行匹配,从而返回相应的模拟数据。这种方式允许开发者快速地为任何API...

Global site tag (gtag.js) - Google Analytics