这次的项目我选择了使用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中,然后一起封装,其他的大家有什么方法可以提出来,集思广益。
相关推荐
jquery-1.3.2-vsdoc.js jquery-1.8.3.min.js jquery-1.3.2.min.js jquery-1.4.1-vsdoc.js jquery-1.4.1.min.js jquery-1.4.2-vsdoc.js jquery-1.4.2.min.js jquery-1.4.3-vsdoc.js jquery-1.4.3.min.js ...
《jQuery 1.3.2:深入理解与应用》 jQuery是JavaScript库的杰出代表,以其简洁、易用的API闻名于世。本篇将详细探讨jQuery 1.3.2版本,包括其核心功能、优化特性以及在实际项目中的应用。 首先,jQuery的核心理念...
开发工具 commons-fileupload-1.3.2开发工具 commons-fileupload-1.3.2开发工具 commons-fileupload-1.3.2开发工具 commons-fileupload-1.3.2开发工具 commons-fileupload-1.3.2开发工具 commons-fileupload-1.3.2...
jquery.mobile-1.3.2.js
**jQuery UI 1.6rc6 的 `jquery.ui.all.js`** `jquery.ui.all.js` 是 jQuery UI 库的一个版本,版本号为 1.6rc6(Release Candidate 6)。jQuery UI 是一个基于 jQuery JavaScript 库的扩展,提供了丰富的用户界面...
赠送jar包:javax.annotation-api-1.3.2.jar; 赠送原API文档:javax.annotation-api-1.3.2-javadoc.jar; 赠送源代码:javax.annotation-api-1.3.2-sources.jar; 赠送Maven依赖信息文件:javax.annotation-api-...
jquery-1.3.2.min.js jquery-1.4.2.min.js jquery-1.4.4.min.js jquery-1.5.2.min.js jquery-1.6.4.min.js jquery-1.7.2.min.js jquery-1.8.3.min.js jquery-1.9.1.min.js jquery-2.0.0.min.js jquery-2.1.4.min.js ...
在这个压缩包文件"jquery.mobile-1.3.2.min"中,包含的核心组件是jQuery Mobile的最小化版本,这个版本在保持功能完整的同时,优化了文件大小,提高了页面加载速度。 一、jQuery Mobile简介 jQuery Mobile 是基于...
这个"commons-fileupload-1.3.2.jar"是该库的1.3.2版本,它支持Java Development Kit (JDK) 1.5及以上版本。在本文中,我们将深入探讨Apache Commons FileUpload库的核心功能、特性以及如何在实际项目中使用它。 ...
标题中的"commons-fileupload-1.2.1.jar与commons-io-1.3.2.jar"涉及的是两个在Java开发中常用的开源库,主要用于处理HTTP协议上传文件的需求。这两个库在JSP(JavaServer Pages)开发中尤为重要,因为它们简化了...
《jQuery Mobile 1.3.2:构建移动Web应用的利器》 jQuery Mobile 是一个专为触摸设备设计的前端框架,旨在简化移动Web应用程序的开发。版本1.3.2是该框架的一个重要里程碑,提供了丰富的功能和优化,使得开发者能够...
《jQuery 1.3.2:深入理解与应用》 jQuery是JavaScript库的杰出代表,以其简洁、高效的语法设计赢得了全球开发者的喜爱。在本文中,我们将深入探讨jQuery 1.3.2这一版本,包括它的核心特性、API文档以及实际应用...
开发工具 commons-io-1.3.2开发工具 commons-io-1.3.2开发工具 commons-io-1.3.2开发工具 commons-io-1.3.2开发工具 commons-io-1.3.2开发工具 commons-io-1.3.2开发工具 commons-io-1.3.2开发工具 commons-io-1.3.2...
该组件简单易用,可实现一次上传一个或多个文件,并可限制文件大小。 -下载后解压zip包,将commons-fileupload-1.1.1.jar,和commons-io-1.2.jar(这里我们用的是更新的版本,但是用法是一样的)复制到tomcat的webapps...
Commons FileUpload和Commons IO是Java开发中两个非常重要的库,尤其在处理文件上传功能时。这两个库由Apache软件基金会维护,是许多Java Web应用程序的标准组成部分。 `commons-fileupload-1.3.2.jar`是Apache ...
jquery-1.3.2.min.js和jquery-1.3.2.js一样,只是去掉空格回车之类的,项目开发完成后使用jquery-1.3.2.min.js 还有一个是gzip压缩过后的好像才10来kb,不过需要支持gzip的 所以没上传。 可以到http://jquery.com/...
在实际操作中,解压libzip-1.3.2.tar.gz后,用户会得到一个名为libzip-1.3.2的目录,其中包含源代码、文档、示例和构建脚本等。为了将libzip集成到PHP 7.3.20的编译流程中,开发者需要按照以下步骤进行: 1. 解压缩...
jquery-1.3.2-vsdoc2.js,