总结


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

ok,回到原题，有人会问为什么要使用基于模块的形式载入js文件呢？我的答案是不一定要用这样的形式，使用这样的形式是因人而异，因项目而异的，假设做大型站点的话，使用模块的形式会比較规范。维护也比較easy，架构也比較清晰。反正多学点东西没坏处。并且如今非常多的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做样例吧，首先建立一个例如以下结构的project文件夹：


├── 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官方网站查看很多其他的细节和原则。




版权声明：本文博客原创文章，博客，未经同意，不得转载。


												


											
requireJS简单的学习门户网站的更多相关文章
	

    
								
  1. Tuxedo学习门户网站
		
    中间件简介: 介于客户机和server之间的夹层,突破了传统的c/s架构,为构建大规模,高性能.分布式c/s应用程序提供了通信.事物,安全.容错等基础服务,屏蔽了底层应用细节,应用程序不必从底层开发, ...
    
		
    2. 
						
  2. MyBatis学习门户网站（一）
		
    需要jar包:mybatis-3.x.x.jar .假设需要和spring综合,此外,我们需要增加相关的包 1:看到项目文件夹 不要在意红色 2:依照步骤: 1:增加jar包 2:创建数据源(conf ...
    
		
    3. 
						
  3. 简单的自动化使用--使用selenium实现学习通网站的刷慕课程序。注释空格加代码大概200行不到
		
    简单的自动化使用--使用selenium实现学习通网站的刷慕课程序.注释空格加代码大概200行不到 相见恨晚啊 github地址 环境Python3.6 + pycharm + chrom浏览器 +  ...
    
		
    4. 
						
  4. SharePoint Online 创建门户网站系列之定制栏目
		
    前 言 SharePoint Online自带的库就带有二级页面和详细页面,也就是Allitems页面和DispForm页面,但是实在不够美观,尤其对于门户网站这一企业门面来说,更是无法接受. 下面, ...
    
		
    5. 
						
  5. 外网主机访问虚拟机下的Web服务器_服务器应用_Linux公社-Linux系统门户网站
		
    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...
    
		
    6. 
						
  6. （转）转一份在 51testing 上的讨论——如何测试一个门户网站是否可以支持10万用户同时在线？
		
    转自:http://www.cnblogs.com/jackei/archive/2006/11/16/561846.html 这个帖子的内容比较典型,大家有兴趣可以也思考一下. 先是楼主提出问题:  ...
    
		
    7. 
						
  7. 循序渐进BootstrapVue，开发公司门户网站（3）--- 结合邮件发送，收集用户反馈信息
		
    在我们公司门户网站里面,如果有需要,我们可以提供一个页面给用户反馈信息,以便获得宝贵的用户信息反馈或者一些产品咨询的记录,一般这个结合邮件发送到负责人的邮箱即可.本篇随笔结合后端发送邮件的操作,把相关 ...
    
		
    8. 
						
  8. SharePoint Online 创建门户网站系列之创建栏目
		
    前 言 SharePoint Online的栏目,简单描述即显示在首页上的各个模块信息,这里,我们主要介绍我们首页上的栏目,包括简介类型.新闻列表类型.图片类型: 下面,让我们开始在SharePoin ...
    
		
    9. 
						
  9. SharePoint Online 创建门户网站系列之图片滚动
		
    前 言 创建SharePoint Online栏目我们之前已经介绍过了,具体就是内容编辑器方式.自带WebPart方式和JavaScript读取后台数据前台做展示的三种: 但是,对于复杂的展示来说,这 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. 【rlz01】完全数
			
    Time Limit: 3 second Memory Limit: 2 MB 问题描述 所谓完全数,就是这个数除了它本身的约数之和也等于这个数,比如说6的约数有1.2.3,而1+2+3=6,所以6是 ...
    
			
    2. 
						
  2. ZOJ FatMouse' Trade 贪心
			
    得之我幸,不得,我命.仅此而已. 学姐说呀,希望下次看到你的时候依然潇洒如故.(笑~) 我就是这么潇洒~哈哈. 感觉大家比我还紧张~ 我很好的.真的 ------------------------- ...
    
			
    3. 
						
  3. [SCSS] Write similar classes with the SCSS @for Control Directive
			
    Writing similar classes with minor variations, like utility classes, can be a pain to write and upda ...
    
			
    4. 
						
  4. 段的创建表user_segments                                                    分类：            H2_ORACLE             2013-08-10 11:13    714人阅读    评论(0)    收藏
			
    1.段的定义及类型 Oracle中的段(segment)是占用磁盘空间的一个对象,最常见的段类型包括: l  聚簇cluster l  表table l  表分区 tablepartition l   ...
    
			
    5. 
						
  5. 正确使用pthread_create，防止内存泄漏
			
    近日,听说pthread_create会造成内存泄漏,觉得不可思议,因此对posix(nptl)的线程创建和销毁进行了分析.   分析结果:如果使用不当,确实会造成内存泄漏. 产生根源:pthread ...
    
			
    6. 
						
  6. thinkphp3.1的验证码
			
    代码中写 public function verify(){ import('ORG.Util.Image'); ob_clean(); Image::buildImageVerify(); } ht ...
    
			
    7. 
						
  7. 关于DP与背包
			
    听说过动态规划(DP)的同学应该都知道有背包问题的存在. 首先我们来了解一下动态规划 基本思想: 动态规划算法通常用于求解具有某种最优性质的问题.在这类问题中, 可能会有很多可行解.没一个解都对应于一 ...
    
			
    8. 
						
  8. Ubuntu su 认证失败
			
    在使用Ubuntu作为开发环境时经常须要在全局安装一些依赖框架等.这个时候就经常须要用到root权限.可是在Ubuntu下第一次使用su命令时会提示认证失败:查找资料后发现Ubuntu下root权限默 ...
    
			
    9. 
						
  9. 从 BM 到 RBM
			
    1. 拓扑结构上 如下图示,在拓扑结构上,RBM(受限的玻尔兹曼机)与 BM(玻尔兹曼机)的最大区别在于: RBM 取消了可见层的层内连接以及隐含层的层内连接,主要在于 BM 的层内连接使得其学习过程 ...
    
			
    10. 
						
  10. FullPage.js全屏滚动插件解说
			
    1.主要功能 1).支持鼠标滚动 2).多个回调函数 3).支持手机.平板触屏事件 4).支持css3动画 5).支持窗口缩放 6).窗口缩放时自动调整 7).可设置滚动宽度.背景颜色.滚动速度.循环 ...
    
			
    11.