总结


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. openCV 和GDI画线效率对比
			
    一. 由于项目需要,原来用GDI做的画线的功能,新的项目中考虑到垮平台的问题,打算用openCV来实现,故此做个效率对比. 二. 2点做一条线,来测试效率. 用了同样的画板大小---256*256的大 ...
    
			
    2. 
						
  2. UICollectionView使用方法补充(照片轮播墙)
			
    一 整体功能图和实现思路 1 完整的功能图: 2 实现功思路: 1> 流水布局(实现UICollectionView必需要的条件) 2> 自己定义cell(实现UICollectionVi ...
    
			
    3. 
						
  3. HttpClient基础教程                                                    分类：            C_OHTERS             2014-05-18 23:23    2600人阅读    评论(0)    收藏
			
    1.HttpClient相关的重要资料 官方网站:http://hc.apache.org/ API:http://hc.apache.org/httpcomponents-client-4.3.x/ ...
    
			
    4. 
						
  4. PatentTips - Method and system for browsing things of internet of things on ip using web platform
			
    BACKGROUND The following disclosure relates to a method and system for enabling a user to browse phy ...
    
			
    5. 
						
  5. URIEncoding
			
    http://thoughtfly.iteye.com/blog/1533481 http://docs.spring.io/spring/docs/current/spring-framework- ...
    
			
    6. 
						
  6. git 分支建立及合并
			
    分支的新建与合并 让我们来看一个简单的分支新建与分支合并的例子,实际工作中你可能会用到类似的工作流. 你将经历如下步骤: 开发某个网站. 为实现某个新的需求,创建一个分支. 在这个分支上开展工作. 正 ...
    
			
    7. 
						
  7. ECharts.js 超简单入门（本质canvas）
			
    ECharts.js 超简单入门(本质canvas) 一.总结 一句话总结:echarts这些图标的本质都是canvas. 二.ECharts.js学习(一) 简单入门 EChart.js 简单入门  ...
    
			
    8. 
						
  8. 关于ulimit -a中需要修改的两个值
			
    以root用户运行 ulimit -a 命令,其中有两个参数分别为: open files和max user processes   修改方法:  vi /etc/security/limits.co ...
    
			
    9. 
						
  9. [Ramda] Create a Query String from an Object using Ramda's toPairs function
			
    In this lesson, we'll use Ramda's toPairs function, along with map, join, concatand compose to creat ...
    
			
    10. 
						
  10. php如何实现万年历的开发（每日一课真是非常有效率）
			
    php如何实现万年历的开发(每日一课真是非常有效率) 一.总结 一句话总结: 1.判断每月有多少天: 通过data函数来判断,$days=date('t',$firstday); 2.判断每月的第一天 ...
    
			
    11.