seajs + easyui

*

 *content seajs+easyui使用

 */

/**

 * 首先来看看在seajs中jquery和jquery插件如何使用

 */

1.jquery.js

define(function(require,exports,module)){

    //原jquery.js代码

    module.exports = $.noConflict(true);

}

2.jquery.combobox.js

依赖关系如下:

jquery.combobox.js    依赖 jquery.combo.js

jquery.combo.js       依赖 jquery.panel.js、jquery.validatebox.js

jquery.validatebox.js 依赖 jquery.tooltip.js

那怎么封装jquery.combobox.js及依赖的插件呢?

1)jquery.combobox.js

define(function(require,exports,module){

    return function($){

        require("plugins/jquery.combo");

        //插件代码

    }

});

2)jquery.combo.js

define(function(require, exports, module) {

    return function($) {

        require("plugins/jquery.validatebox")($);

        require("plugins/jquery.panel")($);

        //原jquery.combo.js代码

    }

});

3)jquery.validatebox.js

define(function(require, exports, module) {

    return function($) {

        require("plugins/jquery.tooltip")($);

        //原jquery.validatebox.js代码

    }

});

4)jquery.panel.js、jquery.tooltip.js

define(function(require, exports, module) {

    return function($) {

        //原jquery.validatebox.js/jquery.panel.js代码

        (function($){

            ......

        })(jQuery);

        //注意此处要把jQuery改为$,要不就在init.js中把实参改为jQuery

    }

});

/**

 * 相关实例

 */

a)index.html

<!doctype html>

<html>

<head>

    <meta charset="utf-8">

    <link rel="stylesheet" type="text/css" href="themes/default/easyui.css"/>

    <link rel="stylesheet" type="text/css" href="themes/icon.css"/>

</head>

<body>

    <select id="sel_refresh">

        <option value="0">不刷新</option>

        <option value="60">1分钟</option>

        <option value="120">2分钟</option>

    </select>

<script type="text/javascript" src="sea.js"></script>

<script type="text/javascript">

seajs.use("./init",function(init){

    init.initPage()

});

</script>

</body>

</html>

b)init.js

define(function(require,exports,module){

    //加载依赖模块

    var $ = require("jquery");

    require("./plugins/jquery.combobox")($);

    //私有属性和方法

    var name = "Benjamin_private";

    var setName = function(name){

        console.log("My name is "+ name);

    }

    //公有属性和方法

    module.exports = {

        name     : "Benjamin_public"

        initPage : function(){

            $("#sel_refresh").combobox({

                width:150,

                onSelect:function(rec){

                    console.log(rec);

                }

            });

        },

        setName : function(name){

            console.log("My name is "+ name);

        }

    }

});

c)jquery.combobox.js及依赖插件代码参见上面

/**

* 问题

*/

a)使用seajs+easyui 时 easyui框架的 jquery.parse.js 基本上每个控件都有用到,所以建议每个控件添加依赖时都增加这个依赖;更改这个文件时要注意,其文件中两个闭包都要更改实参。
b)避免缓存设置
可以在链接后加个时间戳,也可以直接配置
seajs.config({
debug : 2;
});

c)其中的各控件样式文件在此实例中没有设置按模块加载,自己可设置
d)其他问题后续总结补充...

你可能感兴趣的:(easyui)