requireJS简单入门学习

概要

requireJS,翻译成中文即"需要js",说白了就是加载js文件用的。怎么加载呢?,即遵循AMD规范的模块化加载。除了AMD规范还有一个叫做CMD规范,遵循CMD规范的模块加载器,比较有名的应该是国内的淘宝首席架构师”玉伯“写的SeaJS了,而且这货听说还能加载css文件,似乎很niubility! 但是今天讲的是requireJS,至于二者的优缺点请参考:http://www.zhihu.com/question/20342350,后来发现最火的答案居然是seaJS的作者写的,看来作者还是很在乎别人对SeaJS的评价。

ok,回到原题,有人会问为什么要使用基于模块的形式加载js文件呢?我的答案是不一定要用这种形式,使用这种形式是因人而异,因项目而异的,如果做大型网站的话,使用模块的形式会比较规范,维护也比较容易,架构也比较清晰,反正多学点东西没坏处。而且现在很多的js前端框架也开始支持兼容模块化的加载方式了,比如大名鼎鼎的,作为一个PE无人不知的Jquery,还有Node,Dojo,等。下面来看看jquery-ui的一个button组件的一小段代码,就知道怎么回事了。

<pre name="code" class="html">(function( factory ) {
	if ( typeof define === "function" && define.amd ) {

		// AMD. Register as an anonymous module.
		define([
			"jquery",
			"./core",
			"./widget"
		], factory );
	} else {

		// Browser globals
		factory( jQuery );
	}
}(function( $ ) {
//your plugin code
 //你的插件or模块代码
});

这是一种兼容的方法,如果你使用了AMD加载器(如requireJS)的话,define的类型就是function,然后就会按照AMD的规范来定义此插件(模块),关于如何按AMD规范来定义插件,请参考:http://requirejs.org/docs/api.html#define。如果你没有使用加载器的话则按照一般的方法定义,这样的话就可以按照普通的方法正常使用了。

现在我们应该知道,requireJS只能正确加载按照AMD规范定义的插件,通过只要对普通的插件进行简单的修改即可,不过现在越来越多的插件开始兼容AMD规范了。好了,现在来看看如何使用requireJS来加载插件吧。

一个小例子

那就用jquery-UI做例子吧,首先建立一个如下结构的工程目录:

├── index.html
├── js
│   ├── app.js
│   ├── jquery-ui
│   │   ├── accordion.js
│   │   ├── autocomplete.js
│   │   ├── button.js
│   │   ├── core.js
│   │   ├── datepicker.js
│   │   ├── dialog.js
│   │   └── ...
│   ├── jquery.js
│   └── require.js

我们可以看到,所有js文件都放在了js目录中,jquery.js和require.js直接位于js目录中,并且所有的jquery UI的文件都位于jquery-ui目录中。app.js则包含我们的主要代码。

不过你也可以使用其他的目录结构,不过可能需要进行一些配置修改,这样requireJS才知道如何找到这些依赖的文件,可以参考change
some configuration

现在这些文件都准备好了,如何使用它们呢?请看index.html中的代码:

<!doctype html>
<html lang="en">
<head>
    ...
</head>
<body>

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

</body>
</html>

我们只需要加载require.js文件即可,注意这里只能加载这个一个文件,否则会报错的,详细请参考:http://requirejs.org/docs/errors.html#mismatch。这里还需要注意data-main属性,这里是js/app.js,这里的意思是等reuire.js加载完后会自动执行app.js中的代码。不信的话,可以在app.js中加一条console.log();测试一下。

/* app.js */
console.log( "loaded" );

下面就可可以app.js使用require()这个函数来加载你想要的js文件了,如:

require([ "jquery-ui/autocomplete" ], function( autocomplete ) {
    ...
});

这样就会异步加载jquery-ui/autocomplete.js和它所依赖的js文件(jquery.js,jquery-ui/core.js,jquery-ui/wedget.js等)。

当这些依赖的文件全部加载完成后,就会执行后面的回调函数。

下面是使用jquery-UI中的一个例子:

require([ "jquery-ui/autocomplete" ], function( autocomplete ) {
    autocomplete({ source: [ "One", "Two", "Three" ] }, "<input>" )
        .element
        .appendTo( "body" );
});

你也可以吧jquery加载进来,这样就可以像使用jquery那样使用了:

require([ "jquery", "jquery-ui/autocomplete" ], function( $ ) {
    $( "<input>" )
        .autocomplete({ source: [ "One", "Two", "Three" ]})
        .appendTo( "body" );
});

ok,终于把这个例子介绍完了,尽管很粗糙,但是有个印象就行了,毕竟是入门,如果需要更深入的研究可以到reqiureJS官网查看更多细节和原理。

时间: 2024-08-07 07:29:38

requireJS简单入门学习的相关文章

android的简单入门学习

话说光配环境就整死我了, 不是说多么难, 是最近google被屏了, 很多sdk里面需要下载的东西都下不下来, 坑爹啊.  最后跟扫拉稀要了一个他配置好的,才运行了. android目录分析: assets 资产目录,存放文件,这些文件会被打包到应用程序的apk(安装包) bin 编译后的文件目录 gen 目录自动生成的目录 project.properties 代表编译的版本 target = "" 来修改编译版本 libs 支持jar包 会被添加到android depend 目录

【转】requirejs简单入门

博主今天正式工作啦,工作中用到了js模块化技术,这里转来一个入门教程,很易懂,转给同样刚入门的你们~~ 原地址:http://www.ruanyifeng.com/blog/2012/11/require_js.html 一.为什么要用require.js? 最早的时候,所有Javascript代码都写在一个文件里面,只要加载这一个文件就够了.后来,代码越来越多,一个文件不够了,必须分成多个文件,依次加载.下面的网页代码,相信很多人都见过. <script src="1.js"&

Matplotlib简单入门学习

因为学习机器学习以及试图通过python实现相应的算法,因此学习了Matplotlib中的画图,那么就问到,问啥不用matlab呢,答:多一门技术,多一口饭:而且发现Matplotlib的画图功能还是蛮强大的,这次仅仅只是学习了以前在MATLAB里面会的相应的东西,然后学习一下在python中对应的知识. matplotlib在Python中应用最多的2D图像的绘图工具包,使用matplotlib能够非常简单的可视化数据.在matplotlib中使用最多的模块就是pyplot.pyplot非常接

requireJS简单的学习门户网站

总结 requireJS.这翻译成中国"必须js".说白了就是装js文件与.如何装好了?.这是继AMD标准化的模块化装.除了AMD另一种规范称为CMD规范.跟随CMD兼容模块加载.的淘宝首席架构师"玉伯"写的SeaJS了,并且这货听说还能载入css文件.似乎非常niubility! 可是今天讲的是requireJS,至于二者的优缺点请參考:http://www.zhihu.com/question/20342350,后来发现最火的答案竟然是seaJS的作者写的,看来

numpy简单入门学习

为了快速的学习numpy,只要参阅了官网的快速入门教程进行学习,官网的网址:https://docs.scipy.org/doc/numpy-dev/user/quickstart.html.虽然和matlab的操作大同小异,但是还是需要很多明确的python的概念,比如序列,列表以及元组的概念,当然这也是python里面需要注意最多的基本的数据类型.现将学习的基本过程叙述如下: numpy是通过python语言实现的用于科学研究中的计算.可以方便的进行代数计算.傅里叶计算等.这是Numpy学习

SDL 简单入门学习

write by 九天雁翎(JTianLing) -- blog.csdn.net/vagrxie 讨论新闻组及文件 概要 实际学习使用SDL创建窗体,并绘制图形. 前言 今天想要做一个简单的demo,由于一部分须要使用objective C,所以还须要跨平台,我才发现,我了解的东西还真没有一个适合做这样事情的,Cocos2D For IPhone只能在IPhone下跑,HGE只能在Windows下跑,Orx尽管可以跨平台,可是非常显然,用于做简单的demo太麻烦了,由于我须要的不过一个简单的D

Spring.Net 简单入门学习

Spring.NET IoC容器的用法. 通过简单的例子学习Spring.Net 1.先创建一个控制台程序项目. 2.添加IUserInfoDal 接口. namespace Spring.Net { public interface IUserInfoDal { void Show(); } } 3.添加AdoNetUserInfoDal类和EFUserInfoDal类,继承IUserInfoDal接口. AdoNetUserInfoDal.cs public class AdoNetUser

Spark的Streaming和Spark的SQL简单入门学习

1.Spark Streaming是什么? a.Spark Streaming是什么? Spark Streaming类似于Apache Storm,用于流式数据的处理.根据其官方文档介绍,Spark Streaming有高吞吐量和容错能力强等特点.Spark Streaming支持的数据输入源很多,例如:Kafka.Flume.Twitter.ZeroMQ和简单的TCP套接字等等.数据输入后可以用Spark的高度抽象原语如:map.reduce.join.window等进行运算.而结果也能保存

JSTL简单入门学习实例

Maven依赖: <dependency> <groupId>javax.servlet</groupId> <artifactId>jstl</artifactId> <version>1.2</version> </dependency> 建立页面index.jsp <%@ page language="java" contentType="text/html; char