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. JAVA基础面试(一)

    1.一个".java"源文件中是否可以包括多个类(不是内部类)?有什么限制? 可以有多个类,但只能有一个public的类,并且public的类名必须与文件名相一致. 2.Java有 ...

  2. Maven依赖分析

    背景 昨天帮一位同事排查了一个依赖冲突的问题.问题的现象就是在IntelliJ IDEA运行项目正常,但是打包(Maven assembly jar)之后传到服务器运行失败,报错:Caused by: ...

  3. 基于 nodejs 的 webSockt (socket.io)

    基于 nodejs 的 webSockt (socket.io) 理解 本文的业务基础是在基于 nodejs 的 socket.io 的直播间聊天室(IM)应用来的. 项目中具体的 框架如下 expr ...

  4. C语言之for循环

    #include<stdio.h>#include<stdlib.h>#include<time.h>int main(){ int i; for(i=1;i< ...

  5. propertychange 不起作用

    兼容性问题.将$("#systemLogSettings td[name='nMaxFileSize'] input").on("input propertychange ...

  6. SpringMvc架构下css、js、jpg加载失败问题

    SpringMvc架构下css.js.jpg加载失败问题 springMvc搭建成功后,页面出现一些错误,jsp.js等静态资源加载失败.导致页面没有显示任何样式以及 此处原因很简单,是因为相对路径在 ...

  7. 基于MySQL + Node.js + Leaflet的离线地图展示,支持百度、谷歌、高德、腾讯地图

    1. 基本说明 本项目实现了离线展示百度.谷歌.高德.腾讯地图.主要功能如下: 实现了地图瓦片图下载.存储.目前支持存储至MySQL Node.js服务调用MySQL中的瓦片图 Leaflet展示地图 ...

  8. 51Nod 1289 大鱼吃小鱼 栈模拟 思路

    1289 大鱼吃小鱼 栈模拟 思路 题目链接 https://www.51nod.com/onlineJudge/questionCode.html#!problemId=1289 思路: 用栈来模拟 ...

  9. Linux服务器制定mysql数据库备份的计划任务

    首先,创建一个shell脚本: Shell #!/bin/bash mysql_pwd="1234567890" mysql_dump="/usr/local/mysql ...

  10. 程序员的自我救赎---11.3:WinService服务

    <前言> (一) Winner2.0 框架基础分析 (二)PLSQL报表系统 (三)SSO单点登录 (四) 短信中心与消息中心 (五)钱包系统 (六)GPU支付中心 (七)权限系统 (八) ...