zoukankan      html  css  js  c++  java
  • 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({
                    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)其他问题后续总结补充...

  • 相关阅读:
    HDOJ 4259 Double Dealing
    第三课 MongoDB 数据更新
    百度语音识别API初探
    几种常见排序算法的java实现
    HDU 1051 Wooden Sticks 贪心题解
    离线安装Cloudera Manager5.3.4与CDH5.3.4
    Unix哲学
    如何在管理层变动中存活下来
    SWTError: No more handles [gtk_init_check() failed] running platform tests (on Linux)
    "xxadmin" user: No protocol specified 错误
  • 原文地址:https://www.cnblogs.com/opps/p/4335936.html
Copyright © 2011-2022 走看看