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)其他问题后续总结补充...
seajs + easyui [转]的更多相关文章
- angularjs + seajs构建Web Form前端(三) -- 兼容easyui
回顾 在上一章中使用了angular实现了ajax form和树形结构,经过以上两章对于angular的大致使用,对于angular也有了初步的认识,接下来的内容只会对angular的一些用法做简单的 ...
- angularjs + seajs构建Web Form前端(二)
回顾 上一篇讲解了引入bootstrap构建一个简单的登录页面,如何让angularjs自动启动并绑定视图,操作过程当中如何使用ui-bootstrap,继而完成简单功能后如何引入seajs后如何使n ...
- angularjs + seajs构建Web Form3
angularjs + seajs构建Web Form前端(三) -- 兼容easyui 回顾 在上一章中使用了angular实现了ajax form和树形结构,经过以上两章对于angular的大致使 ...
- bootstrap + angularjs + seajs构建Web Form前端2
bootstrap + angularjs + seajs构建Web Form前端(二) 回顾 上一篇讲解了引入bootstrap构建一个简单的登录页面,如何让angularjs自动启动并绑定视图,操 ...
- seajs使用方法
必须执行seajs.use()时,才能自动执行预加载项 <script src="/UILib/sea.js"></script> <script s ...
- 前端框架 EasyUI （2）页面布局 Layout
在 Web 程序中,页面布局对应用程序的用户体验至关重要. 在一般的信息管理类的 Web 应用程序中,页面结构通常有一个主工作区,然后在工作区上下左右靠近边界的区域设置一些边栏,用于显示信息或放置一些 ...
- 前端框架 EasyUI （1）熟悉一下EasyUI
jQuery EasyUI 官方网站 http://www.jeasyui.com/ .去年新开了个中文网 http://www.jeasyui.net/,不知道是不是官方的,不过看着挺像样.但是,广 ...
- 前端框架 EasyUI （0） 重新温习（序言）
几年前,参与过一个项目.那算是一个小型的信息管理系统,BS 结构的,前端用的是基于 jQuery 的 EasyUI 框架. 我进 Team 的时候,项目已经进入开发阶段半个多月了.听说整个项目的框架是 ...
- ASP.NET MVC5+EF6+EasyUI 后台管理系统（1）-前言与目录（持续更新中...）
开发工具:VS2015(2012以上)+SQL2008R2以上数据库 您可以有偿获取一份最新源码联系QQ:729994997 价格 666RMB 升级后界面效果如下: 任务调度系统界面 http: ...
随机推荐
- css table 布局
使用CSS表格 CSS表格能够解决所有那些我们在使用绝对定位和浮动定位进行多列布局时所遇到的问题.例如,“display:table;”的CSS声明能够让一个HTML元素和它的子节点像table元素一 ...
- BZOJ 4503 两个串（FFT）
[题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=4503 [题目大意] 给出S串和T串,计算T在S中出现次数,T中有通配符'?'. [题解 ...
- JWPlayer 使用小记
最后的效果 1.从官网下载JWPlayer 下载后的文件,标红部分是必要的文件. 2.Jquery可以使用1.6以上版本 <html><head> <title>G ...
- apache kafka系列之性能优化架构分析
apache kafka中国社区QQ群:162272557 Apache kafka性能优化架构分析 应用程序优化:数据压缩 watermark/2/text/aHR0cDovL2Jsb2cuY3Nk ...
- 极客Web前端开发资源大荟萃
前端开发已经成为当前炙手可热的技术之中的一个.本周我们除了给大家带技术相关资讯,另一些技术人员经常使用的站点.希望大家不要错过我们本周的内容.原文来自:极客标签 为神马说敲代码是非常艰难的 程序猿 做 ...
- ASP.NET页面之间数据传递的几种方法
1)Request.QueryString 在ASP时代,这个是较常用的方法,到了ASP.NET,好像用的人不多了,但是不管怎么说,这是一个没有过时,且很值得推荐的方法,因为不管是ASP还是ASP ...
- POJ 3630 Phone List（trie树的简单应用）
题目链接:http://poj.org/problem?id=3630 题意:给你多个字符串,如果其中任意两个字符串满足一个是另一个的前缀,那么输出NO,否则输出YES 思路:简单的trie树应用,插 ...
- C++内联函数、函数模板之于头文件
一.基本说明 C++标准中提到,一个编译单元是指一个.cpp文件以及它所include的所有.h文件,.h文件里的代码将会被扩展到包含它的.cpp文件里,然后编译器编译该.cpp文件为一个.obj文件 ...
- Linux C 简易聊天室
Linux下实现聊天室 介绍:程序在CentOS下,采用C语言实现,结构为Client/Server结构; 服务端程序通过共享存储区存储聊天数据,并发送给每个连接的客户端: 服务端程序和客户端程序都是 ...
- 【零基础学习iOS开发】【01-前言】01-开篇
本文目录 一.什么是iOS 二.主流手机操作系统 三.什么是iOS开发 四.学习iOS开发的目的 五.学习iOS开发的前提 从今天开始,我就开始更新[零基础学习iOS开发]这个专题.不管你是否涉足过I ...