requireJS基础使用
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基础使用的更多相关文章
- RequireJS基础(三)
这篇来写一个具有依赖的事件模块event. event提供三个方法bind.unbind.trigger来管理DOM元素事件. event依赖于cache模块,cache模块类似于jQuery的$.d ...
- RequireJS基础(二)
上一篇是把整个jQuery库作为一个模块.这篇来写一个自己的模块:选择器. 为演示方便这里仅实现常用的三种选择器id,className,attribute. RequireJS使用define来定义 ...
- JavaScript模块化编程之AMD - requireJS基础使用
JavaScript模块化编程之AMD requireJS基础使用 标签(空格分隔): JavaScript 参考文章 AMD规范 AMD是"Asynchronous Module Defi ...
- requirejs基础教程
一.初识requirejs 随着网站功能逐渐丰富,网页中的js也变得越来越复杂和臃肿,原有通过script标签来导入一个个的js文件这种方式已经不能满足现在互联网开发模式,我们需要团队协作.模块复用. ...
- RequireJS 基础(一)
RequireJS由James Burke创建,他也是AMD规范的创始人. RequireJS会让你以不同于往常的方式去写JavaScript,你将不再使用script标签在HTML中引入JS文件,以 ...
- RequireJS基础知识
RequireJS解决代码依赖问题,异步加载js,避免页面失去相应 RequireJS的目标是鼓励代码的模块化,它使用了不同于传统<script>标签的脚本加载步骤.可以用它来加速.优化代 ...
- 前端JS框架系列之requireJS基础学习
1 背景 伴随着项目功能的不断扩充,客户体验的不断完善,实现交互逻辑的JS代码变得越来越多.起初,为了管理JS代码,我们把JS从页面中解放出来独立成文件,接着又把相似的交互代码提取到公共的JS页面中. ...
- requirejs——基础
一.requirejs存在的意义: 我们引用外部JS文件通常是这样引用的: <script src="1.js"></script> <script ...
- requireJS入门基础
参考 require.js详解 1.引用requireJS的html文件 <!DOCTYPE html> <head> <title>requireJS</ ...
随机推荐
- 4)C语言指针(C自考学习)
指针和指针变量 指针就是地址,地址是一种数据类型.指针变量也是变量,但只能存放地址类型的数据,可以称为"地址型"变量. 1)内存单元和地址 一个程序运行时,程序本身和程序中用到的数 ...
- idea for Mac 代码提示设置
1 打开idea. 2 command+, 打开设置 ,移除Cyclic Expand Word 的快捷键 3 设置basic的快捷键为 option+/ 4,自动提示大小写敏感关闭 apply ...
- canvas动画之动态绘出六边形
先上 demo: http://en.jsrun.net/W5iKp/show 这两天我一直在研究这个动画,花了大量的时间来想是如何实现的, 一开始我是想在进入 canvas 时按时间来用 lineT ...
- selenium与表格的二三事
今天遇到的问题是selenium与表格中行和列的问题! 我想要做的事情是统计当前的table有多少行,表格形式如下如所示: 图中所示为2行,我的定位方式是这样的 : table=driver.find ...
- 获取或设置当前窗口contextmenu事件的事件处理函数
在浏览器中 鼠标右键点击会显示默认的 自带的菜单,那么如何禁止 和更改呢? 1) 禁止右键 window.oncontextmenu = funcRef; //funcRef是个函数引用 列子: w ...
- 关于PHP新手学习的一些指导与建议,新手快到我碗里来!
新手小白想要系统性学好PHP开发,首先需要了解需要学些什么,然后给自己定下来一个学习路线,然后就朝着这个路线奋斗吧! 关于学习路线:(1) 熟悉HTML/CSS/JS等网页基本元素,完成阶段可自行制作 ...
- C# Dictionary根据Key排序
using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace Cons ...
- 网页设计——5.table布局
今天做一个大的页面,主要是对table布局的理解: 代码: <table cellspacing=0 border=1 style="bordercolor:#C0C0C0;" ...
- tensorflow 安装升级
对于已经安装过的tensorflow,执行以下命令升级到最新版: pip3 install -U tensorflow 目前最新版本1.4
- Codeforces 558E A Simple Task
题意:给定一个字符串,以及m次操作,每次操作对字符串的一个子区间进行升序或降序排序,求m次操作后的串 考虑桶排,发现线段树可以模拟桶排的过程,所以对26个字母分别建立线段树即可 #include< ...