sea.js与jquery.mobile-1.3.2，jquery结合实现模块化开发

阅读更多

这次的项目我选择了使用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的引用：

 
 
 
 

 





	

		

			

				

					
						
This's a test
						
這是一個測試
					
				
				

					
						
This's a test
						
這是一個測試
					
				
				

					
						
This's a test
						
這是一個測試
					
				
			
　	


  

 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中，然后一起封装，其他的大家有什么方法可以提出来，集思广益。

 

• 
• 大小: 17.5 KB

• demo.zip (228.1 KB)
• 下载次数: 14

• 查看图片附件