*

 *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. 2015腾讯暑期实习生 Web前端开发 面试经历 --作者imwtr

    1.现在有100亿个数字大小为1到10亿的数字,在这100亿个数字里边只有一个数字出现的次数是奇数次的,你用什么方法,找出这个数字呢? 答:显然至少要全部过一遍,可以用位运算,遍历数组,最后剩下的数字 ...

  2. Your build settings specify a provisioning profile with the UUID “65a1f48d-2fa3-44eb-8142-627d9d4455b1”, however, no such provisioning profile was found.

    Your build settings specify a provisioning profile with the UUID “65a1f48d-2fa3-44eb-8142-627d9d4455 ...

  3. BZOJ 1012 最大数maxnumber

    Description 现在请求你维护一个数列,要求提供以下两种操作: 1. 查询操作.语法:Q L 功能:查询当前数列中末尾L个数中的最大的数,并输出这个数的值.限制:L不超过当前数列的长度. 2. ...

  4. C# 课堂总结3-语句

    一.顺序语句 二.条件,分支语句 1.if语句 关键是能够熟练运用 if的嵌套.要考虑好所有的情况. 如果说 条件是两种+情况相互对应的,那么就可以只用 if 与else .但必须要想好 每个else ...

  5. Hadoop学习笔记（1）概述

    写在学习笔记之前的话: 寒假已经开始好几天了,似乎按现在的时间算,明天就要过年了.在家的这几天,该忙的也都差不多了,其实也都是瞎忙.接下来的几点,哪里也不去了,静静的呆在家里学点东西.所以学习一下Ha ...

  6. linux里source、sh、bash、./有什么区别

    在linux里,source.sh.bash../都可以执行shell script文件,那它们有什么不同吗? ----------- 1.source source a.sh 在当前shell内去读 ...

  7. [LeetCode]题解（python）：070-Climbing Stairs

    题目来源: https://leetcode.com/problems/climbing-stairs/ 题意分析: 爬楼梯,一次可以爬一步或者两步.如果要爬n层,问一共有多少种爬法.比如说,如果是3 ...

  8. java生成随机字符串

    学习java comparable特性时候,定义如下Student类,需要需要随机添加学生姓名以及学号和成绩,这是java如何随机生成名字,根据我的查询,我找到目前java库支持两种方法. 1. or ...

  9. 关于Python的self指向性

    Python的self是指向类的实例化对像,而不是类本身,每次调用类的实例化即self指向此实例化对像,如下代码: class Person: def __init__(self,name): sel ...

  10. IOS 页面之间的传值（主讲delegate）

    IOS的Delegate,通俗一点说就是页面之间的传值. 总结一下现在知道的IOS页面之间传值的方式有三种 1.使用NSNotification发送通知的传值 主要是通过NSNotificationC ...