RequireJS 2.1.1 + jQuery 1.8.1 使用ABC
来源:互联网 发布:淘宝提醒买家付款 编辑:程序博客网 时间:2024/05/01 07:18
RequireJS是什么?可以用他来作什么?您可以继续阅读本文的参考连接,本文只为刚开始使用RequireJS来加载jQuery的朋友提供使用小提示.RequireJS的更多使用技巧可以访问其网官
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 codealert(halobox.getShareSite());});</script>
参考网址:点击打开链接
点击打开链接
- RequireJS 2.1.1 + jQuery 1.8.1 使用ABC
- requireJS(1)---使用requireJS的shim参数,完成jquery插件的加载
- requirejs使用AMD标准的jquery-ui
- requireJs 使用
- RequireJs使用
- requireJs 使用
- artDialogv6和jQuery 2.x以及RequireJS配合使用
- 使用requireJS的shim参数,完成jquery插件的加载
- wcf abc开发1
- requirejs的用法(1)
- requireJs 调用Jquery-UI
- requirejs+jquery表单验证
- 【RequireJS 学习笔记】RequireJS 学习笔记 1 —— RequireJS 界的 Hello World
- (1) git/github原理与基本操作ABC中的ABC
- Codeforces Beta Round #1 ABC
- Jquery Validate插件+requireJs库
- 使用requirejs管理js
- RequireJs 使用注意点
- 图基本算法介绍:广度优先搜索、深度优先搜索、拓扑排序、最强连通分支(概念篇)
- 打包ios程序。。。
- String、集合的方法总结
- \(^o^)/。。。。银行怎么敢少给我钱。。。。
- linux下的vim + ctags +cscope 的使用
- RequireJS 2.1.1 + jQuery 1.8.1 使用ABC
- 想起那些瞬间,还是会心痛
- 10-16学习笔记
- 一点记录
- ListView详解3
- 非主流伤感日志_我把心尘封,我把爱埋葬
- 10-23学习笔记
- 处理ASProtect的Advanced Import Protect的一些想法和过程(1)
- 命令行运行android模拟器