require.js的简单使用

全局配置main.js:

var version = +new Date();
require.config({urlArgs: 'v=' + version, // 根路径设置，paths下面全部都是根据baseUrl的路径去设置baseUrl: '../addons/ewei_shopv2/static/js/app/',paths: {// 引入文件的路径'jquery': '../dist/jquery/jquery-1.11.1.min','jquery.gcjs': '../dist/jquery/jquery.gcjs','Rx':'../dist/Rx/Rx.min','bridgeSelf':'../dist/bridge/bridge_self','clipboard':'../dist/clipboard.min'},// 用来配置不兼容的模块，意思是：该模块没有module.exports,// jquery就有module.exports输出值shim: {'foxui':{//foxui需要依赖jquery，所以得加depsdeps:['jquery']},},//map"告诉RequireJS在任何模块之前，都先载入这个模块waitSeconds: 0
});

自定义模块:

dist/moduleA.js
define(function() {var modal = {};modal.init = function(){console.log('我是一个独立的模块A');}return modal;
});dist/moduleB.js
define(function() {var modal = {};modal.init = function(){console.log('我是一个独立的模块B');}return modal;
});dist/moduleC.js
define(['dist/moduleA','dist/moduleB'], function(moduleA,moduleB) {var modal = {};modal.init = function(){console.log('我是引用了moduleA和moduleB的模块C');moduleA.init(); //我是一个独立的模块AmoduleB.init(); //我是一个独立的模块B}return modal;
});

使用:

 <!--先引入require.js-->
<script src="js/plugin/require.js"></script><!--再引入全局配置-->
<script src="js/main.js"></script>
<script>   //用require引入要引入的模块，[]：已经在main.js里面的Paths设置好了的可以直接引用名称,例如jquery和Rx//function（），小括号里面对应[]里面值，按顺序在()给变量名require(['jquery','Rx','dist/moduleC'],function ($,'Rx','moduleC') {moduleC.init();/*moduleC.init()运行结果*///我是引用了moduleA和moduleB的模块C//我是一个独立的模块A//我是一个独立的模块Bconsole.log($('.rechargeInput').val()); // jquery方法Rx.Observable.fromEvent($('#rechargeInput'), 'input'); //rxjs方法})
</script>

require.js的简单使用相关推荐

require.js 的简单运用 --兰
功能描述: 1.简单的require.js的运用 2.BaseUrl运用(加载不同文件夹下的路径) 3.shim运用(依赖:比如jquery-ui 需要依赖jquery) 4.require方法调用( ...
require.js理解
前言实习过程学习了require.js的相关内容,也在网上查阅了一部分资料,相比于其他框架,require.js更为简单易学,也更容易使用. 下面我就简单介绍我所认识的require.js,希望大家 ...
html引入layer.js,require.js引用jquery、layer的简单实例用法
来源: 未知发布时间: 2017-10-13 次浏览用法: 第一步在html页面上引入JS: 第一个require.js,注意引用的时候加了一个data-main="./index&qu ...
Require.js
前言前段时间粗略的扫过一次require.js,当时没怎么在意,结果昨天看到index里面的代码就傻了,完全不知道从哪开始看啦,所以require与backbone的学习还要加紧才行. 由于前端所占 ...
require.js基本认识
基本API require会定义三个变量:define,require,requirejs,其中require === requirejs,一般使用require更简短 define 从名字就可以看出 ...
jQuery 对AMD的支持（Require.js中如何使用jQuery）
AMD 模块 AMD(异步模块定义,Asynchronous Module Definition)格式总体的目标是为现在的开发者提供一个可用的模块化 JavaScript 的解决方案. AMD 模块格 ...
5月学习总结（Ant-Design，mustache，require.js，grunt）
一.Ant-Design学习因为Ant-Design是基于React实现的,之前自己也学过一段时间的React,对React还是相对比较熟悉的,在学习Ant-Design也还不算吃力. 最开始是从源 ...
electron 解压zip_node.js实现简单的压缩/解压缩功能示例
本文实例讲述了node.js实现简单的压缩/解压缩功能.分享给大家供大家参考,具体如下: 压缩的例子非常简单的几行代码,就完成了本地文件的gzip压缩. var fs = require('fs') ...
javascript基础修炼——手把手教你造一个简易的require.js
require.js造轮子示例代码托管在我的代码仓:http://www.github.com/dashnowords/blogs 一. 概述许多前端工程师沉浸在使用脚手架工具的快感中,认为req ...

require.js的简单使用

require.js的简单使用相关推荐

最新文章

热门文章