总结


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. Android多线程研究（9）——读写锁
			
    一.什么是锁 在Java的util.concurrent.locks包下有关于锁的接口和类如下: 先看一段代码: package com.codeing.snail.test; public clas ...
    
			
    2. 
						
  2. KMP小结
			
    1. KMP模版: 代表题目:POJ 3641 Oulipo KMP http://blog.csdn.net/murmured/article/details/12871891 char P[MAX ...
    
			
    3. 
						
  3. Latex表格制作记录
			
    Latex表格制作记录 主要功能 合并表格的行列 长表格的使用 makecell例程借鉴 效果图 参考代码 \documentclass{ctexart} \usepackage{indentfirs ...
    
			
    4. 
						
  4. [疯狂Java]JDBC：事务管理、中间点、批量更新
			
    1. 数据库事务的概念:     1) 事务的目的就是为了保证数据库中数据的完整性.     2) 设想一个银行转账的过程,假设分两步,第一步是A的账户-1000,第二步是B的账户+1000.这两个动 ...
    
			
    5. 
						
  5. js进阶 12-1 jquery的鼠标事件有哪些
			
    js进阶 12-1 jquery的鼠标事件有哪些 一.总结 一句话总结:1+3*2+1+1,其中里面有两组移入移出,一组和click,总结就是click(3个),hover(5个),mousemove ...
    
			
    6. 
						
  6. Range锁（也即范围锁）
			
    浅析SQL Server在可序列化隔离级别下,防止幻读的范围锁的锁定问题 本文出处:http://www.cnblogs.com/wy123/p/7501261.html (保留出处并非什么原创作品权 ...
    
			
    7. 
						
  7. 【u108】取数游戏
			
    Time Limit: 1 second Memory Limit: 128 MB [问题描述] 一个N×M的由非负整数构成的数字矩阵,你需要在其中取出若干个数字,使得取出的任意两个数字不相邻(若一个 ...
    
			
    8. 
						
  8. java的对象锁和对象传递
			
    1.对象传递 在JAVA的參数传递中,有两种类型,第一种是基本类型传递,比如int,float,double等,这样的是值传递,第二种是对象传递,比方String或者自己定义的类,这样的是引用传递.  ...
    
			
    9. 
						
  9. 【死磕Java并发】—–J.U.C之AQS（一篇就够了）
			
    [隐藏目录] 1 独占式 1.1 独占式同步状态获取 1.2 独占式获取响应中断 1.3 独占式超时获取 1.4 独占式同步状态释放 2 共享式 2.1 共享式同步状态获取 2.2 共享式同步状态释放 ...
    
			
    10. 
						
  10. CVE­-2014-3566
			
    https://access.redhat.com/articles/1232123 https://tools.ietf.org/html/draft-ietf-tls-downgrade-scsv ...
    
			
    11.