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)其他问题后续总结补充...

  • 相关阅读:
    MySQL客户端执行外部sql文件命令
    Java nextInt()函数
    JSP
    托管和非托管的区别。
    FTP软件Filezilla出现“读取目录列表失败”的解决办法
    Fiddler 抓包工具总结
    wampserver:Could not execute menu item.
    重装系统怎么恢复wampserver数据
    同时安装Xcode6和Xcode7导致出现N多UUID 模拟器解决办法
    打印沙漏
  • 原文地址:https://www.cnblogs.com/opps/p/4335936.html
Copyright © 2011-2022 走看看