sea.js+jQuery+jQueryMobile的模块化开发

由于现在整个前端都尽量要使用模块化开发，因此不可避免需要使用到前置依赖组件（AMD:如require.js）或就近依赖组件（CMD:如sea.js）。

        本文主要是sea.js对jquery及依赖jquery的插件如jQueryMobile的模块化整合。当然还涉及到grunt等自动化管理工具。这些都是做前端模块化开发必不可少的知识。对sea.js还不熟悉的同学请先移步到sea.js官网

用一个案例说明：

目录结构：

index.html文档：

<div class="container">
    <!--礼包列表-->
    <ul class="list">
        <li class="item">
            <i class="icon icon-gift"></i>
            <h4>新手大礼包</h4>
            <p>钻石*50、白银宝箱*2、白银钥匙*2、白银匙*2、 法杖*2、百宝箱*2、金钥匙*2</p>
            <input type="button" value="领取" class="gift-btn get-btn J_getBtn" data-role="none"/>
        </li>
        <li class="item">
            <i class="icon icon-gift"></i>
            <h4>五一集赞礼包</h4>
            <p>钻石*50、白银宝箱*2、白银钥匙*2、白银匙*2、 法杖*2、百宝箱*2、金钥匙*2</p>
            <input type="button" value="复制" class="gift-btn copy-btn" data-role="none"/>
        </li>
    </ul>
</div>

jquery.js的CMD规范：

define( function(require, exports, module) {
//下面为jquery源码

    return $.noConflict(true);
});

jQueryMobile.js的CMD规范：

define( function(require, exports, moudles) {
    return function(jQuery) {
//jqueryMobie.js源码

   };
});

注意，因为jqueryMobile并非默认支持CMD规范，因而要手动修改源码，将

(function ( root, doc, factory ) {
	if ( typeof define === "function" && define.amd ) {
		// AMD. Register as an anonymous module.
		define( [ "jquery" ], function ( $ ) {
			factory( $, root, doc );
			return $.mobile;
		});
	} else {
		// Browser globals
		factory( root.jQuery, root, doc );
	}
}( this, document, function ( jQuery, window, document, undefined ) {
//中间保留的源码

}));

这段代码删除，以便后来将jquery整个对象传递给jqueryMobile实现扩展。

接下来便可使用grunt打包，最后在index.js中，需要把jquery对象传给jQueryMobile实现扩展

define(function(require, exports, moudule){
var $ = require('jquery');
    require('jqueryMobile')($);//将$对象赋给jqueryMobile
//测试下jqueryMobile是否引入成功
$(function(){
        //点击领取
                $('.J_getBtn').on('tap',function(e){
                    console.log('mm');
                });
    });
})

点击领取按钮，最后可以发现在控制台看到

当然，我只是踩了好几个坑才摸索出这个方法，应该还有其他方法。希望大家集思广益，找出更简单有效的方法。