RequireJS 2.1.1 + jQuery 1.8.1 使用ABC
2012-10-28 13:26
267 查看
RequireJS是什么?可以用他来作什么?您可以继续阅读本文的参考连接,本文只为刚开始使用RequireJS来加载jQuery的朋友提供使用小提示.RequireJS的更多使用技巧可以访问其网官
A.RequireJS让我找不到北了
1.通常一个A网页引入一个B.js文件,A就可以使用B中定义的函数或变量,但为什么我下面的代码不好使呢?
解:
在RequireJS中,data-main的值其实是一个js地址,只不过扩展名省略不写,这在所有的配置和使用中是通用.
2.我在B.js中已成功加载的js文件,为什么A不能使用呢?我的代码如下:
解:
RequireJS作为AMD规范最好的实现者之一,AMD所定义的define 方法,可以用他来实现代码的模块化.只需要在B.js中填加:
同时你在哪个文件中require,哪么require来的js只能在当前的文件中访问,所以B.js中require来的jquery.js在A.html中看上去是加载成了,但它只服务于B.js
B.路径不对呀?
1.这个require路径我完全糊涂了,A.html我的js代码
为什么会找不到/js/jquery.js呀?
解:
require(dependencies,callback);中的dep是我們要载入的js,而其路径則是相对于/T/orange/images/main,而且一定不需要扩展名.这样写就没问题:
如果需要载入的文件太多,并且离data-main所在的目录又太深,可以用requirejs.config方法,在其中定义paths
C.用RequireJS比传统的写法还要多敲好几个字符呀?
1.原来我只需要依次这样写:
用RequireJS就成了这样:
而且还容易出错.太麻烦了!
解:
一直以來,我們都習慣使用 script 這個 HTML 標籤來載入 JavaScript 檔案。這種方式有兩種缺點:
無法在 JavaScript 程式中直接管理相依性,必須在 HTML 中處理。
雖然目前新式瀏覽器已經能夠以非同步的方式來載入 js 檔案,但是舊型瀏覽器還是會有阻塞 (blocking) 問題。
RequireJS 2.1.1引入了一个新的shim配置参数,可以帮你管理文件的依赖关系,你的RequireJS code可能是这样的:
参考网址:点击打开链接
点击打开链接
A.RequireJS让我找不到北了
1.通常一个A网页引入一个B.js文件,A就可以使用B中定义的函数或变量,但为什么我下面的代码不好使呢?
<script data-main="/T/orange/images/B" src="/js/require.js"></script>
解:
在RequireJS中,data-main的值其实是一个js地址,只不过扩展名省略不写,这在所有的配置和使用中是通用.
2.我在B.js中已成功加载的js文件,为什么A不能使用呢?我的代码如下:
requirejs.config({ baseUrl: '/js/' //这是一个相对应用的目录,如果你写成../js/哪就是相对B.js的目录 }); require(['jquery'],function($){ //my js code });
解:
RequireJS作为AMD规范最好的实现者之一,AMD所定义的define 方法,可以用他来实现代码的模块化.只需要在B.js中填加:
define(["jquery"], function($){ return window.jQuery; });
同时你在哪个文件中require,哪么require来的js只能在当前的文件中访问,所以B.js中require来的jquery.js在A.html中看上去是加载成了,但它只服务于B.js
B.路径不对呀?
1.这个require路径我完全糊涂了,A.html我的js代码
<script data-main="/T/orange/images/main" src="/js/require.js"></script> <script type="text/javascript"> require(['/js/jquery','require_common'],function($){ //my js code }); </script>
为什么会找不到/js/jquery.js呀?
解:
require(dependencies,callback);中的dep是我們要载入的js,而其路径則是相对于/T/orange/images/main,而且一定不需要扩展名.这样写就没问题:
require(['../../../js/jquery','require_common'],function($){ //my js code });
如果需要载入的文件太多,并且离data-main所在的目录又太深,可以用requirejs.config方法,在其中定义paths
<script type="text/javascript"> requirejs.config({ paths: { "jquery": "../../../js/jquery" } }); require(['jquery','require_common'],function($){ //my js code }); </script>
C.用RequireJS比传统的写法还要多敲好几个字符呀?
1.原来我只需要依次这样写:
<script type="text/javascript" charset="UTF-8" src="/js/jquery.js"></script> <script type="text/javascript" src="/js/nicEdit.js"></script> <script type="text/javascript" src="/js/halo.js"></script> <script type="text/javascript" charset="UTF-8" src="/T/orange/images/require_common.js"></script>
用RequireJS就成了这样:
require(['../../../js/jquery','../../../js/nicEdit','../../../js/halobox','require_common'],function($){ //my js code });
而且还容易出错.太麻烦了!
解:
一直以來,我們都習慣使用 script 這個 HTML 標籤來載入 JavaScript 檔案。這種方式有兩種缺點:
無法在 JavaScript 程式中直接管理相依性,必須在 HTML 中處理。
雖然目前新式瀏覽器已經能夠以非同步的方式來載入 js 檔案,但是舊型瀏覽器還是會有阻塞 (blocking) 問題。
RequireJS 2.1.1引入了一个新的shim配置参数,可以帮你管理文件的依赖关系,你的RequireJS code可能是这样的:
<script type="text/javascript"> requirejs.config({ paths: { "jquery": "../../../js/jquery", "halobox": "../../../js/halobox", "nicEdit":"../../../js/nicEdit", "require_common":"../templates/orange/images/require_common" }, shim:{ 'require_common':{ deps:['jquery','halobox','nicEdit'] }, 'halobox':{ deps:['jquery'], exports: 'halobox' } } }); require(['main','require_common'],function($){ //my js code alert(halobox.getShareSite()); }); </script>
参考网址:点击打开链接
点击打开链接
相关文章推荐
- requirejs使用AMD标准的jquery-ui
- artDialogv6和jQuery 2.x以及RequireJS配合使用
- 使用 requirejs 打包 jQuery 插件 datetimepicker 的问题记录
- 使用requireJS的shim參数,完毕jquery插件的载入
- 使用requireJS的shim参数,完成jquery插件的加载
- jquery.artDialog在requireJS中使用遇到的加载顺序问题
- requireJS(1)---使用requireJS的shim参数,完成jquery插件的加载
- Qualcomm_Snapdragon_VR_SDK 2.1.1版本简介及使用方法(13)
- 使用PLC的自动化制造系统2.1.1 Ladder Logic
- jquery validate使用说明
- IE中使用jquery的fadeIn()失效的问题
- js国际化解决方案(使用 jQuery.i18n.properties)
- jquery使用ajax实现实时刷新
- 使用谷歌jquery库文件的理由
- jQuery的ajax怎么使用?
- IE下使用jQuery重置iframe地址时内存泄露问题解决办法
- 使用Jquery解析Json基础知识
- jQuery中$.proxy()的原理和使用
- 使用Jquery--Jsp与servlet之间的数据交互
- 学习使用jquery iScroll.js移动端滚动条插件