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</ ...
随机推荐
- python 实用案例 supervisord管理进程详解
Supervisor是由python语言编写,基于linux操作系统的一款服务器管理工具,用以监控服务器的运行,发现问题能立即自动预警及自动重启等功能.Supervisor类似于monit,monit ...
- Python [习题] 字典扁平化
习题: 将以下字典扁平化,输出为 target 字典格式source = {'a': {'b': 1, 'c': 2}, 'd': {'e': 3, 'f': {'g': 4}}}target = { ...
- Linux下安装Redis php-redis扩展 redis重启shell脚本 超详细!
前言 前面刚写过nosql其中三款热门产品的对比,这次主要写关于Redis的一些事情,Redis的介绍.安装以及扩展(php-redis,因为我是phper)安装等等.同时是写给我的朋友(cccjjj ...
- [smartMenu.js] 一个基于jquery的实用的右键拓展菜单栏插件
正在为电子书阅读器添加精准易用的标记功能,其中一个方案是扩展阅读器界面的右键菜单栏,使得用户右键点击某个词.子句.段落的时候可以进行扩展操作. 右键菜单栏有很多基于jQuery的插件,其中灵活性比较强 ...
- gitlab一键安装+配置(备份+LADP认证)
gitlab一键安装+配置(备份+LADP认证) #gitlab一键安装 #centos6 mini, GitLab社区版 #参考官方最新文档 https://www.gitlab.com.cn/in ...
- Django学习(2)数据宝库
数据库是一所大宝库,藏着各种宝贝.一个没有数据库的网站,功能有限.在Django中,支持的数据库有以下四种: SQLite3 MySQL PostgreSQL Oracle 其中SQLite3为Dja ...
- video视频铺满
1. 因项目需求,要在公司官网加一段视频,达到的效果是视频平铺整个网页,大小随网页变化:网上找了许久才找了了这么一个生僻的属性,只需给video加这么个样式就可以了:object-fit: fill; ...
- 关于promise的详细讲解
到处是回调函数,代码非常臃肿难看, Promise 主要用来解决这种编程方式, 将某些代码封装于内部. Promise 直译为"承诺",但一般直接称为 Promise; 代码的可读 ...
- C#中如何使用断点操作调试程序
Visual Studio调试器调试 当代码不能正常运行时,可以通过调试定位错误.常用的程序调试操作包括设置断点.开始.中断和停止程序的执行.单步执行程序以及使程序运行到指定的位置.下面将对这几种常用 ...
- 》》mui--图片轮播
mui框架内置了图片轮播插件,通过该插件封装的JS API,用户可以设定是否自动轮播及轮播周期,如下为代码示例: //获得slider插件对象 var gallery = mui('.mui-slid ...