读书人

sea.js与jquery.mobile-1.3.2jquery

发布时间: 2013-12-19 00:33:34 作者: rapoo

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

下面介绍对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插件,大家可以放心使用。

????? 其他的方法当然也有,我们可以将jqueryMobile的源代码放入jquery中,然后一起封装,其他的大家有什么方法可以提出来,集思广益。

?

读书人网 >JavaScript

热点推荐