index.html

<body class="requireBODY" id="body"><div id="vuebox">{{ a }}<script src="require.js" data-main='main.js'></script>

//引入requirejs，配置data-mian属性，作为程序主入口

main.js

require.config({　　　　

	paths: {

		"jquery": "../../content/jquery-2.1.1.min",

		//"moudleA": "a",//（1-1）

		"moudleB": "b",

		"moudleC":"c",

		"vue":"vue.min"

	},

	shim: {

　　　　　　'jquery.window':  ['jquery'],//加载非AMD规范的模块定义依赖模块,jquery全屏幕滚动插件

		'vue':{'exports':'vue'},

		//'a':{deps:[], exports:'fna'},//exports定义导出全局函数(1-2)

　　　　}

});

//加载非AMD规范的模块

//config(1-1)  paths: {"moudleA": "a"}

require(['moudleA'],function(Amodule){

	//Amodule()//Amodule undefined is not a function 该模块未遵循AMD规范，所以并没有回传参数模块；

	fna()//但是a.js脚本已经引入，脚本内的 fna 函数已经引入全局，所以可以直接调用 fna 函数

})

//config(1-2) shim{'a':{deps:[], exports:'fna'}}//exports定义导出全局函数

require(["a"],function(Amodule){

	Amodule()//shim中定义的模块,将全局变量回传到回调函数中;实际这个变量引入后就在全局,与上种方法的区别是该方法导入模块的全局变量值 fna 作为参数传入了该回调函数

})

require(['moudleB'],function(Bmodule){

	Bmodule.moudleBfn()

	alert(Bmodule.moudleBmath)

	Bmodule.moudleBrequireC()

})

require(['jquery','jquery.window'],function(){

	$(document).ready(function(){

        var $windows = $('.window');

        $windows.windows({

            snapping: true,

            snapSpeed: 500,

            snapInterval: 1100,

            onScroll: function(s){},

            onSnapComplete: function($el){},

            onWindowEnter: function($el){}

        });

    });

})

require(['vue'],function(Vue){

	var vue = new Vue({

		'el':'#vuebox',

		data:{

			a:'aaaaaaaa'

		}

	})

})

　　

　

a.js

function fna(){

　　alert('moduleA')

}

b.js(两种定义模块方法)

b-1：

define(["require","exports","module",'jquery','moudleC'],function(e,t,m,moduleJQ,moduleC){

	var b1 = function (){

		alert($('body').attr('class'))

	}

	var b2 = 1000;	

	var requireC = e('moudleC').c//=moduleC.c ：导入c模块，引用c模块的方法

	t.moudleBfn = b1;//定义导出模块，也可以直接return

	t.moudleBmath = b2;

	t.moudleBrequireC = requireC;

//	return {

//		"moudleBfn":b1,

//		"moudleBmath":b2,

//		"moudleBrequireC":requireC

//	};

})

b-2

define(function(require,exports,module){

　　//这种方式并不像seajs一样按需加载，实际上也是前置加载

　　var $ = require('jquery')

    var b1 = function (){ alert($('body').attr('class')) }

    var b2 = 1000; //return;

 //在引用c模块前断点发现c模块还是引入了，因为RequireJS 内部通过 Function.prototype.toString() ，然后使用正则匹配所有的require 方法，将其转化为        define(['./mod1',./mod2']function(mod1,mod2);

 //这也就是为什么这种方式定义模块参数名只能是require，从而使用打包工具压缩代码时出现问题。

    var requireC = require('moudleC').c //导入c模块，引用c模块的方法

    exports.moudleBfn = b1;//定义导出模块，也可以直接return

    exports.moudleBmath = b2;

    exports.moudleBrequireC = requireC;

})

　　

　　

c.js

define(function(){

　　return {

　　　　c:function(){

　　　　　　return alert('moduleC')

　　　　}

　　};

})

　　

　　

requireJS基础使用的更多相关文章

  1. RequireJS基础（三）

    这篇来写一个具有依赖的事件模块event. event提供三个方法bind.unbind.trigger来管理DOM元素事件. event依赖于cache模块,cache模块类似于jQuery的$.d ...

  2. RequireJS基础（二）

    上一篇是把整个jQuery库作为一个模块.这篇来写一个自己的模块:选择器. 为演示方便这里仅实现常用的三种选择器id,className,attribute. RequireJS使用define来定义 ...

  3. JavaScript模块化编程之AMD - requireJS基础使用

    JavaScript模块化编程之AMD requireJS基础使用 标签(空格分隔): JavaScript 参考文章 AMD规范 AMD是"Asynchronous Module Defi ...

  4. requirejs基础教程

    一.初识requirejs 随着网站功能逐渐丰富,网页中的js也变得越来越复杂和臃肿,原有通过script标签来导入一个个的js文件这种方式已经不能满足现在互联网开发模式,我们需要团队协作.模块复用. ...

  5. RequireJS 基础（一）

    RequireJS由James Burke创建,他也是AMD规范的创始人. RequireJS会让你以不同于往常的方式去写JavaScript,你将不再使用script标签在HTML中引入JS文件,以 ...

  6. RequireJS基础知识

    RequireJS解决代码依赖问题,异步加载js,避免页面失去相应 RequireJS的目标是鼓励代码的模块化,它使用了不同于传统<script>标签的脚本加载步骤.可以用它来加速.优化代 ...

  7. 前端JS框架系列之requireJS基础学习

    1 背景 伴随着项目功能的不断扩充,客户体验的不断完善,实现交互逻辑的JS代码变得越来越多.起初,为了管理JS代码,我们把JS从页面中解放出来独立成文件,接着又把相似的交互代码提取到公共的JS页面中. ...

  8. requirejs——基础

    一.requirejs存在的意义: 我们引用外部JS文件通常是这样引用的: <script src="1.js"></script> <script ...

  9. requireJS入门基础

    参考  require.js详解 1.引用requireJS的html文件 <!DOCTYPE html> <head> <title>requireJS</ ...

随机推荐

  1. 【Win 10 应用开发】UI Composition 札记（八）：用 XamlLight 制作灯光效果

    前面老周已介绍过灯光的使用,如果你忘了,请用九牛二虎之力猛点击这里去复习一下.本篇老周再介绍另一种添加灯光的方法,这种方法是专为 XAML 元素而设计的,可以很方便地为可视化元素添加灯光效果. 不知道 ...

  2. struts2对于处理JSON的配置

    由于最近几年日益流行前后端分离模式,JSON作为数据载体也变得不可或缺.几乎所有的web框架都需要支持JSON,下面咱就一起了解下struts2是如何支持JSON的. 对于JSON的发送 这里有两种方 ...

  3. angularJS的一些用法

    AngularJS 事件指令: ng-click/dblclick ng-mousedown/up ng-mouseenter/leave ng-mousemove/over/out ng-keydo ...

  4. View处理常用方法封装

    处理View常用的一些方法:Drawable和Bitmap互相转换,Bitmap改变大小,dp.px互相转换,sp.px互相转换,根据Id查找Drawable,获取屏幕大小等方法. import an ...

  5. 安装 Qt 及所需 gcc 等

    嫌麻烦,下载离线安装包一次性装好 Qt 及 Qt Creator (Community) Qt 安装包下载地址 http://download.qt.io/official_releases/qt/ ...

  6. Libevent(2.1.8)中的事件结构和管理

    Libevent(2.1.8)中的事件结构体 这里的libevent版本为 2.1.8 . libevent中事件的结构体struct event,定义在event_struct.h 中, 这里我们简 ...

  7. python2.6升级2.7

    1.下载Python-2.7.3 #wget http://python.org/ftp/python/2.7.3/Python-2.7.3.tar.bz2   2.解压 #tar -jxvf Pyt ...

  8. Vue.js学习 — 微信公众号菜单编辑器(一)

    学习里一段时间Vue.js,于是想尝试着做一个像微信平台里那样的菜单编辑器,在这里分享下 具体样式代码查看项目github 创建一个vue实例 <!DOCTYPE html> <ht ...

  9. Codeforces 438D The Child and Sequence

    题意:给定一个n个数的序列,完成以下3个操作: 1.给定区间求和 2.给定区间对x取模 3.单点修改 对一个数取模,这个数至少折半.于是我们记一个最大值max,如果x>max则不做处理. #in ...

  10. Android数据绑定技术一，企业级开发

    PS:数据绑定,顾名思义是数据与一些控件或者用户账号等绑定,这样用的好处是便于管理.代码清晰,量少. 首先要了解什么是数据绑定? 为什么要用数据绑定? 怎么用数据绑定? 语法的使用 简单例子,数据绑定 ...