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 globalsfactory( 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');                });    });})

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

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