总结


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. 6、USB Video Class Specification
			
    关于USB Class 将设备归为既定的类别,并对相应类别的设备的在USB协议的应用级协议和接口作出规范,这样只要按照类设备的标准实现驱动程序和设备,则一套驱动可以驱动这一类的所有设备,而这一类设备可 ...
    
			
    2. 
						
  2. 致ITFriend用户
			
    ) 全权处理,相关问题请和他沟通. 祝大家中秋节快乐,一家团团圆圆. 小雷FansUnion   湖北 武汉   2014年9月7日 --------------------------------- ...
    
			
    3. 
						
  3. 大数据(十四) - Storm
			
    storm是一个分布式实时计算引擎 storm/Jstorm的安装.配置.启动差点儿一模一样 storm是twitter开源的 storm的特点 storm支持热部署,即时上限或下线app 能够在st ...
    
			
    4. 
						
  4. CSS负边距margin的应用
			
    原文 简书原文:https://www.jianshu.com/p/75a178e65207 相关文章 CSS负margin的影响:https://www.cnblogs.com/shcrk/p/93 ...
    
			
    5. 
						
  5. hdu 2577 How to Type（DP）
			
    How to Type Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) Tota ...
    
			
    6. 
						
  6. 【Solr专题之九】SolrJ教程                                                    分类：            H4_SOLR/LUCENCE             2014-07-28 14:31    2351人阅读    评论(0)    收藏
			
    一.SolrJ基础 1.相关资料 API:http://lucene.apache.org/solr/4_9_0/solr-solrj/ apache_solr_ref_guide_4.9.pdf:C ...
    
			
    7. 
						
  7. .NET Framework基础知识（五）(转载)
			
    .程序集:是 .NET Framework 应用程序的构造块:程序集构成了部署.版本控制.重复使用.激活范围控制和 安全权限的基本单元. .程序集的优点:版本控制问题.最终解决DLL冲突 .程序集分为 ...
    
			
    8. 
						
  8. 【a702】贷款利率
			
    Time Limit: 10 second Memory Limit: 2 MB 问题描述 当一个人从银行贷款后,在一段时间内他将不得不每月尝还固定的分期付款.这个问题要求计算机出贷款者向银行支付的利 ...
    
			
    9. 
						
  9. 从Handler+Message+Looper源代码带你分析Android系统的消息处理机制
			
    PS一句:不得不说CSDN同步做的非常烂.还得我花了近1个小时恢复这篇博客. 引言 [转载请注明出处:http://blog.csdn.net/feiduclear_up CSDN 废墟的树] 作为A ...
    
			
    10. 
						
  10. [React Router v4] Style a Link that is Active with NavLink
			
    We often need to be able to apply style to navigation links based on the current route. In React Rou ...
    
			
    11.