欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2022-06-05 22:39:24
...

这次的项目我选择了使用seajs实现功能的模块化开发,但是在使用的过程中,发现,对jquery和jqueryMObile的封装有些难题,后来搜集了一下资料,加上对seajs的了解,终于找到了一种方法,能够方便的实现模块化开发,并且不会影响jqueryMobile的事件机制,当然方法不止一种,欢迎大家评鉴,共同进步。

先看一下文件结构(具体可看源代码):

sea.js与jquery.mobile-1.3.2,jquery结合实现模块化开发
            
    
    博客分类: seajsjqueryMobilejqueryweb前端 seajs模块加载jqueryjqueryMobile 

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

 

  • sea.js与jquery.mobile-1.3.2,jquery结合实现模块化开发
            
    
    博客分类: seajsjqueryMobilejqueryweb前端 seajs模块加载jqueryjqueryMobile 
  • 大小: 17.5 KB