requireJS初学

requireJS初学

requireJS的由来

  前端技术虽然在不断发展之中,却一直没有质的飞跃。这些框架的使用效率以及开发质量在很大程度上都取决于开发者对其的熟悉程度,以及对JavaScript的熟悉程度。从一个框架迁移到一个新的框架,开发者很有可能还会按照原有框架的思维去思考和解决问题。这其中的一个重要原因就是JavaScript本身的灵活性。庆幸的是,一直有人在去不断的尝试和改进,CommonJS就是其中的一个重要组织。他们提出了许多新的JavaScript架构方案和标准,希望能为前端开发提供引导,提供统一的指引。

  AMD规范就是其中比较著名一个,全称是Asynchronous Module Definition,即异步模块加载机制。从它的规范描述页面看,AMD很短也很简单,但它却完整描述了模块的定义,依赖关系,引用关系以及加载机制。

  AMD规范是JavaScript开发的一次重要尝试,它以简单而优雅的方式统一了JavaScript的模块定义和加载机制,并迅速得到很多框架的认可和采纳。这对开发人员来说是一个好消息,通过AMD我们降低了学习和使用各种框架的门槛,能够以一种统一的方式去定义和使用模块,提高开发效率,降低了应用维护成本。

requireJS是什么?

  既然AMD是一种模块化的规范,那么requireJS是什么呢,通过我这几天的学习,我学到的requireJS就是一个采用了AMD规范的模块加载器,它可以根据不同页面对不同模块的需求,按照你的设置依次加载并执行所有的 JavaScript 文件。

为什么要使用requireJS?

  之前学习了模块化,以及正常编写javascript会遇到的一些问题:单文件变量命名冲突问题(全局污染)、前端多人协作问题、文件依赖问题(循环依赖)、按需加载等等,而使用requireJS这样一个模块加载器,这些问题都可以迎刃而解了。

  可以看出,我们使用 Require JS 主要有两个目的:1、解耦代码,方便代码重用和管理;2、加速页面加载,内置优化引擎(需服务器支持),自动异步加载依赖项,将所有需要加载的文件自动合并为一个文件,减少 HTTP 请求。

requireJS如何去定义一个模块?

  当我们根据模块化的基础概念设计模块时,那么requireJS是如何把我们的设想变为实际的模块的呢?关键字:define。

  define( [module-name?], [array-of-dependencies?], [module-factory-or-object] );

  nmodule-name: 模块标识,可以省略(官方最佳实践推荐不写)

  narray-of-dependencies: 所依赖的模块,可以省略。

  nmodule-factory-or-object: 模块的实现,或者一个JavaScript对象。

requireJS如何去使用一个模块?

  当我们定义了一个模块后如何去使用呢?关键字:require。

  require( [array-of-module], [callback-or-object] );

  narray-of-module: 使用到的模块。

  callback-or-object: 加载完使用模块执行的回调,或者一个JavaScript对象。

  备注:另外requireJS还支持许多使用方式,例如直接引用JS文件、引用非AMD规范文件等等,详情见官网。

requireJS如何去配置模块?

  require.config( [object] );

  object:配置的模块对象,属性包含baseUrl(根路径)、paths(配置加载模块路径,格式{ "file": "path+filename" })、shim、waitSeconds等等。

  还可以将配置写在自定义JS文件中,只需在引用requireJS文件的script标记中添加属性data-main即可,例如: 

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

  main.js文件内容:

require.config({
    baseUrl: "",
    paths : { },
    shim: { }
});

  如果主页中有入口的require,那么建议放到main.js文件中。

是不是对requireJS有一个认识了呢,^_^

  

时间: 2024-10-05 02:57:20

requireJS初学的相关文章

【requireJS路径加载】与程序员小卡的交流

这两天正好看到了程序员小卡同学的一篇博客,里面对requireJS路径的解析做了一些说明,里面有点问题待解决,我这里正好知道一点,所以整理成文,不知对小卡同学是否有帮助. http://www.cnblogs.com/chyingp/p/3677425.html http://www.cnblogs.com/chyingp/p/requirejs-path-resolve.html 首先以其例子为例: requirejs.config({ baseUrl: 'js' }); // 依赖lib.j

requireJS

1.用于ADM(基于模块的异步加载JavaScript代码的机制)js模块开发 2.下载requireJS 3.好处: 1)有效防止命名冲突(js多时可能很多全局变量容易重复) 2)声明不同的js文件之间的依赖 3)模块化的开发 4.常用方法: requirejs.config:为模块指定别名 requirejs:将写好的模块引入并编写主代码 define:编写模块,在相应地方来引用 5.例子: 1)引入模块入口data-main是入口;<script data-main="js/main

requireJS(一)

一:为什么要使用requireJS? 很久之前,我们所有的JS文件写到一个js文件里面去进行加载,但是当业务越来越复杂的时候,需要分成多个JS文件进行加载,比如在页面中head内分别引入a.js,b.js,c.js等,如下所示: <script src="js/app/a.js"></script> <script src="js/app/b.js"></script> <script src="js/

JS模块化工具requirejs教程02

基本API require会定义三个变量:define,require,requirejs,其中require === requirejs,一般使用require更简短 define 从名字就可以看出这个api是用来定义一个模块 require 加载依赖模块,并执行加载完后的回调函数 前一篇中的a.js: define(function(){ function fun1(){ alert("it works"); } fun1(); }) 通过define函数定义了一个模块,然后再页面

Angular-ui-router + oclazyload + requirejs实现资源随route懒加载

本文主要说明在用AngularJS开发web应用中如何实现lazyload,使用AngularJS需要在前端实现路由功能,本文就介绍利用此点实现前端资源的懒加载. 问题 目前大部分AngularJS的应用用requirJS组织模块,但是很多都没有使用lazyload功能,在app.js中启动时将全部依赖加载进来,在模块功能较少,前端资源少的情况下没问题.那么问题来了,依赖资源过多时怎么办? build时利用grunt-contrib-requirejs提取合并文件,减少http请求,但是存在问题

STM32初学Keil4编译时出现 Error:Failed to execute &#39;BIN40/Armcc&#39;

一种是在系统开始--运行里输入cmd,查看armcc状态.详情见推文: http://blog.csdn.net/hicui/article/details/7350805(笔记记录,请勿见怪) 都没有问题的话,那么可以尝试: 在keil里的菜单栏依次选择Project->Manage->Components,Environment andBooks(CEB)(或者直接点击工具栏的图标), 然后在CEB里选择Folders/Extensions标签页,在RealView Folder里选择ke

mongodb 初学 目录

mongodb 初学 索引 啦啦啦 MongoDB 教程 NoSQL 简介 MongoDB 简介 Windows 平台安装 MongoDB Linux平台安装MongoDB mongodb 在 Ubuntu系统上的安装及卸载 Mongodb启动命令mongod参数说明 Mac OSX 平台安装 MongoDB MongoDB 概念解析 MongoDB - 连接 MongoDB 创建数据库 MongoDB 删除数据库 MongoDB 插入文档 MongoDB 更新文档 MongoDB 删除文档 M

初学ArcGIS API for JavaScript

初学ArcGIS API for JavaScript 对于初学者来说,关于esri提供的一些样式和dojo自带的一些样式还是需要有一定的了解,这块在<WebGIS开发从基础到实践>讲解的特别详细,在这里以笔记的形式来帮助自己加以理解和记忆. esri.css样式主要用于ESRI提供的小部件与组件,比如地图.信息框等.此外,还可以引用Dojo提供的样式表,Dojo提供了4组样式,分别是claro\tundra\soria以及nihilo,每种是一组定义用户界面的字体.颜色与大小等设置.在Arc

初学 Python(十一)——切片

初学 Python(十一)--切片 初学 Python,主要整理一些学习到的知识点,这次是切片. #-*- coding:utf-8 -*- ''''' 切片 ''' L = ['name','age','sex','address','company'] #取前2个 print L[0:2] print L[:2] #取倒数第一个 print L[-1] #取后两个 print L[-2:] #取倒数第二个 print L[-2:-1] print len(L) #隔一个数取一次,从第一个数开