*

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

seajs + easyui [转]的更多相关文章

  1. angularjs + seajs构建Web Form前端(三) -- 兼容easyui

    回顾 在上一章中使用了angular实现了ajax form和树形结构,经过以上两章对于angular的大致使用,对于angular也有了初步的认识,接下来的内容只会对angular的一些用法做简单的 ...

  2. angularjs + seajs构建Web Form前端(二)

    回顾 上一篇讲解了引入bootstrap构建一个简单的登录页面,如何让angularjs自动启动并绑定视图,操作过程当中如何使用ui-bootstrap,继而完成简单功能后如何引入seajs后如何使n ...

  3. angularjs + seajs构建Web Form3

    angularjs + seajs构建Web Form前端(三) -- 兼容easyui 回顾 在上一章中使用了angular实现了ajax form和树形结构,经过以上两章对于angular的大致使 ...

  4. bootstrap + angularjs + seajs构建Web Form前端2

    bootstrap + angularjs + seajs构建Web Form前端(二) 回顾 上一篇讲解了引入bootstrap构建一个简单的登录页面,如何让angularjs自动启动并绑定视图,操 ...

  5. seajs使用方法

    必须执行seajs.use()时,才能自动执行预加载项 <script src="/UILib/sea.js"></script> <script s ...

  6. 前端框架 EasyUI （2）页面布局 Layout

    在 Web 程序中,页面布局对应用程序的用户体验至关重要. 在一般的信息管理类的 Web 应用程序中,页面结构通常有一个主工作区,然后在工作区上下左右靠近边界的区域设置一些边栏,用于显示信息或放置一些 ...

  7. 前端框架 EasyUI （1）熟悉一下EasyUI

    jQuery EasyUI 官方网站 http://www.jeasyui.com/ .去年新开了个中文网 http://www.jeasyui.net/,不知道是不是官方的,不过看着挺像样.但是,广 ...

  8. 前端框架 EasyUI （0） 重新温习（序言）

    几年前,参与过一个项目.那算是一个小型的信息管理系统,BS 结构的,前端用的是基于 jQuery 的 EasyUI 框架. 我进 Team 的时候,项目已经进入开发阶段半个多月了.听说整个项目的框架是 ...

  9. ASP.NET MVC5+EF6+EasyUI 后台管理系统（1）-前言与目录（持续更新中...）

    开发工具:VS2015(2012以上)+SQL2008R2以上数据库  您可以有偿获取一份最新源码联系QQ:729994997 价格 666RMB  升级后界面效果如下: 任务调度系统界面 http: ...

随机推荐

  1. TCP/IP笔记 三.运输层(2)——TCP 流量控制与拥塞控制

    TCP 的流量控制与拥塞控制可以说是一体的.流量控制是通过滑动窗口实现的,拥塞避免主要包含以下2个内容: (1)慢开始,拥塞避免 (2)快重传,快恢复 1.流量控制——滑动窗口 TCP采用大小可变的滑 ...

  2. opencv-python 学习笔记1：简单的图片处理

    一.主要函数 1. cv2.imread():读入图片,共两个参数,第一个参数为要读入的图片文件名,第二个参数为如何读取图片,包括cv2.IMREAD_COLOR:读入一副彩色图片:cv2.IMREA ...

  3. Windows Azure 社区新闻综述（#73 版）

    欢迎查看最新版本的每周综述,其中包含有关云计算和 Windows Azure的社区推动新闻.内容和对话. 以下是过去一周基于您的反馈汇集在一起的内容: 文章.视频和博客文章 ·   Windows A ...

  4. c++ - fcgio.cpp:50: error: 'EOF' was not declared in this scope - Stack Overflow

    c++ - fcgio.cpp:50: error: 'EOF' was not declared in this scope - Stack Overflow fcgio.cpp:50: error ...

  5. 第一次当Uber司机，就拉到漂亮妹纸

    黑马哥的Uber司机端装上很久了,一次活儿也没拉,心里一直有一种当“张师傅”的冲动.黑马哥当Uber司机,肯定不是为了图挣钱,也不是因为Uber有“新约炮神器”的称号,能通过“拉活”来泡妹纸.黑马哥体 ...

  6. ie6兼容性，还需要测试么？迷茫。。。

    最近公司网站在谷歌,火狐上测试都没有问题,但是在ietest,ie6上出现兼容问题 ,由于ietest好几次打开ie6都报错(尝试卸载重新安装几次无果),下载virtualbox安装自带ie6的xp系 ...

  7. C++如何将一个整数输出为小数

    double a=3;                      //一定是double不能是int cout.setf(ios::fixed); cout.precision(2); cout< ...

  8. Product（大数相乘）

    Description The problem is to multiply two integers X, Y. (0<=X,Y<10250) Input The input will ...

  9. 【转】VPN服务器配置详解

    参考博文: VPN服务器配置详解   等公司上服务器开始配置 vpn

  10. codeforces 374D. Inna and Sequence 线段树

    题目链接 给m个数, n个操作, 一个数列, 初始为空.一共有3种操作, 在数列末尾加0, 加1, 或删除位置为a[i]的数, a[i]为初始给的m个数, 如果a[i]大于数列长度, 那么什么也不发生 ...