index.html

  1. <body class="requireBODY" id="body"><div id="vuebox">{{ a }}<script src="require.js" data-main='main.js'></script>
  2. //引入requirejs，配置data-mian属性，作为程序主入口

main.js

  1. require.config({　　　　
  2. 	paths: {
  3. 		"jquery": "../../content/jquery-2.1.1.min",
  4. 		//"moudleA": "a",//（1-1）
  5. 		"moudleB": "b",
  6. 		"moudleC":"c",
  7. 		"vue":"vue.min"
  8. 	},
  9. 	shim: {
  10. 　　　　　　'jquery.window':  ['jquery'],//加载非AMD规范的模块定义依赖模块,jquery全屏幕滚动插件
  11. 		'vue':{'exports':'vue'},
  12. 		//'a':{deps:[], exports:'fna'},//exports定义导出全局函数(1-2)
  13. 　　　　}
  14. });
  15.  
  16. //加载非AMD规范的模块
  17. //config(1-1)  paths: {"moudleA": "a"}
  18. require(['moudleA'],function(Amodule){
  19. 	//Amodule()//Amodule undefined is not a function 该模块未遵循AMD规范，所以并没有回传参数模块；
  20. 	fna()//但是a.js脚本已经引入，脚本内的 fna 函数已经引入全局，所以可以直接调用 fna 函数
  21. })
  22. //config(1-2) shim{'a':{deps:[], exports:'fna'}}//exports定义导出全局函数
  23. require(["a"],function(Amodule){
  24. 	Amodule()//shim中定义的模块,将全局变量回传到回调函数中;实际这个变量引入后就在全局,与上种方法的区别是该方法导入模块的全局变量值 fna 作为参数传入了该回调函数
  25. })
  26.  
  27. require(['moudleB'],function(Bmodule){
  28. 	Bmodule.moudleBfn()
  29. 	alert(Bmodule.moudleBmath)
  30. 	Bmodule.moudleBrequireC()
  31. })
  32.  
  33. require(['jquery','jquery.window'],function(){
  34. 	$(document).ready(function(){
  35.         var $windows = $('.window');
  36.         $windows.windows({
  37.             snapping: true,
  38.             snapSpeed: 500,
  39.             snapInterval: 1100,
  40.             onScroll: function(s){},
  41.             onSnapComplete: function($el){},
  42.             onWindowEnter: function($el){}
  43.         });
  44.     });
  45. })
  46.  
  47. require(['vue'],function(Vue){
  48. 	var vue = new Vue({
  49. 		'el':'#vuebox',
  50. 		data:{
  51. 			a:'aaaaaaaa'
  52. 		}
  53. 	})
  54. })

　　

　

a.js

  1. function fna(){
  2. 　　alert('moduleA')
  3. }

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

  1. b-1：
  2. define(["require","exports","module",'jquery','moudleC'],function(e,t,m,moduleJQ,moduleC){
  3.  
  4. 	var b1 = function (){
  5. 		alert($('body').attr('class'))
  6. 	}
  7.  
  8. 	var b2 = 1000;	
  9.  
  10. 	var requireC = e('moudleC').c//=moduleC.c ：导入c模块，引用c模块的方法
  11.  
  12. 	t.moudleBfn = b1;//定义导出模块，也可以直接return
  13. 	t.moudleBmath = b2;
  14. 	t.moudleBrequireC = requireC;
  15.  
  16. //	return {
  17. //		"moudleBfn":b1,
  18. //		"moudleBmath":b2,
  19. //		"moudleBrequireC":requireC
  20. //	};
  21. })
  22. b-2
  23. define(function(require,exports,module){
  24. 　　//这种方式并不像seajs一样按需加载，实际上也是前置加载
  25. 　　var $ = require('jquery')
  26.     var b1 = function (){ alert($('body').attr('class')) }
  27.     var b2 = 1000; //return;
  28.  //在引用c模块前断点发现c模块还是引入了，因为RequireJS 内部通过 Function.prototype.toString() ，然后使用正则匹配所有的require 方法，将其转化为        define(['./mod1',./mod2']function(mod1,mod2);
  29.  //这也就是为什么这种方式定义模块参数名只能是require，从而使用打包工具压缩代码时出现问题。
  30.     var requireC = require('moudleC').c //导入c模块，引用c模块的方法
  31.     exports.moudleBfn = b1;//定义导出模块，也可以直接return
  32.     exports.moudleBmath = b2;
  33.     exports.moudleBrequireC = requireC;
  34. })

　　

　　

c.js

  1. define(function(){
  2.  
  3. 　　return {
  4. 　　　　c:function(){
  5. 　　　　　　return alert('moduleC')
  6. 　　　　}
  7. 　　};
  8. })

　　

　　

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. python 实用案例 supervisord管理进程详解

    Supervisor是由python语言编写,基于linux操作系统的一款服务器管理工具,用以监控服务器的运行,发现问题能立即自动预警及自动重启等功能.Supervisor类似于monit,monit ...

  2. Python [习题] 字典扁平化

    习题: 将以下字典扁平化,输出为 target 字典格式source = {'a': {'b': 1, 'c': 2}, 'd': {'e': 3, 'f': {'g': 4}}}target = { ...

  3. Linux下安装Redis php-redis扩展 redis重启shell脚本 超详细！

    前言 前面刚写过nosql其中三款热门产品的对比,这次主要写关于Redis的一些事情,Redis的介绍.安装以及扩展(php-redis,因为我是phper)安装等等.同时是写给我的朋友(cccjjj ...

  4. [smartMenu.js] 一个基于jquery的实用的右键拓展菜单栏插件

    正在为电子书阅读器添加精准易用的标记功能,其中一个方案是扩展阅读器界面的右键菜单栏,使得用户右键点击某个词.子句.段落的时候可以进行扩展操作. 右键菜单栏有很多基于jQuery的插件,其中灵活性比较强 ...

  5. gitlab一键安装+配置(备份+LADP认证)

    gitlab一键安装+配置(备份+LADP认证) #gitlab一键安装 #centos6 mini, GitLab社区版 #参考官方最新文档 https://www.gitlab.com.cn/in ...

  6. Django学习（2）数据宝库

    数据库是一所大宝库,藏着各种宝贝.一个没有数据库的网站,功能有限.在Django中,支持的数据库有以下四种: SQLite3 MySQL PostgreSQL Oracle 其中SQLite3为Dja ...

  7. video视频铺满

    1. 因项目需求,要在公司官网加一段视频,达到的效果是视频平铺整个网页,大小随网页变化:网上找了许久才找了了这么一个生僻的属性,只需给video加这么个样式就可以了:object-fit: fill; ...

  8. 关于promise的详细讲解

    到处是回调函数,代码非常臃肿难看, Promise 主要用来解决这种编程方式, 将某些代码封装于内部. Promise 直译为"承诺",但一般直接称为 Promise; 代码的可读 ...

  9. C#中如何使用断点操作调试程序

    Visual Studio调试器调试 当代码不能正常运行时,可以通过调试定位错误.常用的程序调试操作包括设置断点.开始.中断和停止程序的执行.单步执行程序以及使程序运行到指定的位置.下面将对这几种常用 ...

  10. 》》mui--图片轮播

    mui框架内置了图片轮播插件,通过该插件封装的JS API,用户可以设定是否自动轮播及轮播周期,如下为代码示例: //获得slider插件对象 var gallery = mui('.mui-slid ...