这次的项目我选择了使用seajs实现功能的模块化开发，但是在使用的过程中，发现，对jquery和jqueryMObile的封装有些难题，后来搜集了一下资料，加上对seajs的了解，终于找到了一种方法，能够方便的实现模块化开发，并且不会影响jqueryMobile的事件机制，当然方法不止一种，欢迎大家评鉴，共同进步。
先看一下文件结构(具体可看源代码)：
下面介绍对jquery和jqueryMobile的封装，肯定要改源代码了。
jquery：
define(function(){
//jquery 源代码
return $.noConflict();
})
jqueryMobile：
define(function (require, exports, moudles) {
return function (jquery) {
(function ($) {
//jqueryMobile源代码
})(jquery);
}
})
index.html的引用：
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" >
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="css/jquery.mobile-1.3.2.min.css" />
<script src="js/sea.js"></script>
<script>
seajs.config({
base : 'Modules/',//设置基路径，此路径是相对sea.js文件的路径
alias : {//这些简写路径现在是相对于base设置的，所以要返回上一层
"jquery" : '../jquery-1.10.2.min',
"jqueryMobile" : '../jquery.mobile-1.3.2.min'
}
});
seajs.use('main');//use的文件路径也是相对于base
</script>
</head>
<body>
<div data-role="page" data-add-back-btn="true" id="page3" data-title="page3" ><!--page开始-->
<div data-role="content"><!--content开始-->
<ol data-role="listview" data-inset="true">
<li>
<a href="#" data-iconpos="left">
<h3>This's a test</h3>
<p>這是一個測試</p>
</a>
</li>
<li>
<a href="#" data-iconpos="left">
<h3>This's a test</h3>
<p>這是一個測試</p>
</a>
</li>
<li>
<a href="#" data-iconpos="left">
<h3>This's a test</h3>
<p>這是一個測試</p>
</a>
</li>
</ol>
</div><!-- /page -->
</body>
</html> seajs的使用方法，在这里我就不再多说了，有兴趣的可以移步：http://seajs.org/docs/#docs
我么看到，主要的操作是在main.js中，下面看看main是怎么实现jqueryMobile 的调用的：
main.js:
define(function(require, exports, module){
var $ = require('jquery'),
jqueryMobile = require('jqueryMobile');//这里是jqueryMobile模块的引用
jqueryMobile($);//执行jqueryMobile 的默认操作（這是重點）
//下面就可以使用jqueryMobile的一些命令了，舉個栗子...
$(document).bind('pageshow',function(){
$.mobile.showPageLoadingMsg();
});
//运行了之后你会发现页面中有一个loading图片，这就是“$.mobile.showPageLoadingMsg()”的运行效果
});
要想在seajs中运行jqueryMobile，必须加载相应的模块，$ = require('jquery'),引用了jquery，并返回jquery对象为$，然后，引用jqueryMobile（它是在jquery基础上开发 的，所以必须先引用jquery），传递jquery對象$给jqueryMobile，这样就能使得jqueryMobile顺利执行了，总之记住一句话，在seajs的define中，要想正确的使用哪些库，必须先引用，我说的这种方法适用于所有jquery插件，大家可以放心使用。
还有一个更好的方法，index不变，改变对jqueryMobile的包装方法：
jqueryMobile：
define(function (require) {
var $ = require('jquery-2.0.3.min');//在这里直接引用jquery模块
//jqueryMobile源码
});
所以对jqueryMobile的引用也要改变了：
main：
define(function(require, exports, module){
var $ = require('jquery');
require('jqueryMobile');//这样更加的简洁
//...........
});
其他的方法当然也有，我们可以将jqueryMobile的源代码放入jquery中，然后一起封装，其他的大家有什么方法可以提出来，集思广益。
1305
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
