总结


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. zeros() 函数——MATLAB
			
    zeros函数——生成零矩阵 ones函数——生成全1阵 [zeros的使用方法] B=zeros(n):生成n×n全零阵. B=zeros(m,n):生成m×n全零阵. B=zeros([m n]) ...
    
			
    2. 
						
  2. POJ 3211 Washing Clothes 0-1背包
			
    题目大意: xxx很懒,但他有个漂亮又勤奋的女友 (尼玛能不能不刺激我,刚看到这题的时候发现自己的衣服没洗!!!) 可以帮他洗衣服. 洗衣服的时候要求不同的颜色的衣服不能同时洗.一人洗一件的话,问最短 ...
    
			
    3. 
						
  3. 【Python排序搜索基本算法】之拓扑排序
			
    拓扑排序是对有向无环图的一种排序,满足例如以下两个条件: 1.每一个顶点出现且仅仅出现一次. 2.若A在序列中排在B的前面.则在图中不存在从B到A的路径. 如上的无环有向图,v表示顶点:v=['a', ...
    
			
    4. 
						
  4. Android App优化之延长电池续航时间
			
    禁用广播接收器 确保广播接收器在真正须要时才运行指令,在onResume中当中广播接收器,在onPause中禁用. 在manifest文件里声明广播接收器时,事先默认配置成禁用的 <receiv ...
    
			
    5. 
						
  5. C#操作SqlServer MySql Oracle通用帮助类
			
    C#操作SqlServer MySql Oracle通用帮助类 [前言] 作为一款成熟的面向对象高级编程语言,C#在ADO.Net的支持上已然是做的很成熟,我们可以方便地调用ADO.Net操作各类关系 ...
    
			
    6. 
						
  6. angular自定义指令相关知识及代码
			
    原文地址 https://www.jianshu.com/p/0c015862156d 大纲 1.自定义指令之——属性指令 2.自定义属性指令的运行原理 3.自定义属性指令代码实践 4.自定义结构指令 ...
    
			
    7. 
						
  7. EChats+Ajax之柱状图的数据交互
			
    原文链接:https://blog.csdn.net/qq_37936542/article/details/79723710 一:下载 echarts.min.js 选择完整版进行下载,精简版和常用 ...
    
			
    8. 
						
  8. 【C#】万事开头难（二）&lt;机房重构&gt;
			
    前言 机房将要进行完了,之所以仍然使用这个题目,是由于我想告诉自己.无论面对多么未知的事物.不要害怕,去做就好.在这么多天的机房重构中,发现了好多问题,也攻克了好多问题,今天,就把我解决的问题分享给大 ...
    
			
    9. 
						
  9. 【转】C++11 并发指南五(std::condition_variable 详解)
			
    http://www.cnblogs.com/haippy/p/3252041.html 前面三讲<C++11 并发指南二(std::thread 详解)>,<C++11 并发指南三 ...
    
			
    10. 
						
  10. JavaScript经典面试题（二）
			
    前言: 近年来T行业就业者越来越多,有关于编程行业的高薪工作也变得越来越难找,竞争力越来越大,想要在众多的应聘者当中脱颖而出,面试题和笔试题一定要多加研究和琢磨,以下记录的是自己的面试过程之中遇到的一 ...
    
			
    11.