- 浏览: 149955 次
- 性别:
- 来自: 福建
文章分类
最新评论
-
caibinghong:
Ahua772 写道非常好,谢谢了,但是运行的图片怎么没有加载 ...
用于WebKit的CSS诀窍 -
Ahua772:
非常好,谢谢了,但是运行的图片怎么没有加载出来呢
用于WebKit的CSS诀窍 -
caibinghong:
呃是一个方法,现在改过来了,当时考的时候没有改!现在最底层是i ...
关于innerHTML 赋值问题 -
jayrao5566:
js的正确写法不是 .innerHTML = '<op ...
关于innerHTML 赋值问题 -
caibinghong:
在JQ与EXT里都解决的挺好的。http://caibingh ...
关于innerHTML 赋值问题
http://www.planabc.net/2010/04/08/study_sandbox_pattern_in_yui3/
简化了一下 YUI3 中的沙箱实现 方式:
if (typeof Sandbox === 'undefined' || !Sandbox) {
Sandbox = function(o) {
var self = this;
if (!(self instanceof Sandbox)) { // 允许没有 new 操作符的实例化
return new Sandbox(o);
} else {
self._init();
self._config(o);
// 预加载某些指定模块
/* self._setup(); */
// 返回实例本身,支持链式模式
return self;
}
};
}
// Sandbox的(类)静态属性
Sandbox.Env = {
/* sidx: 0 , */
mods: {}
};
(function() {
var p, i,
SLICE = Array.prototype.slice,
/* instances = {}, */
time = new Date().getTime(),
win = window,
doc = document;
Sandbox.prototype = {
// 格式化配置参数
// NOTE:本着简单适用的原则,取消了原先 YUI 中对 loader 的支持
_config: function(o) {
var c = this.config, i, j, m, mods;
o = o || {};
// mods = c.modules;
for (i in o) {
if (i == 'win') {
c[i] = o[i].contentWindow || o[i];
c.doc = c[i].document;
} else {
c[i] = o[i];
}
}
},
/**
* 初始化沙箱实例
* @private
*/
_init: function() {
var self = this,
G_Env = Sandbox.Env,
Env = self.Env;
if(!Env) {
self.Env = {
mods: {},
_used: {},
_attached: {},
_loaded: {}
};
Env = self.Env;
/* if (G_Env && self !== Sandbox ) {
Env._sidx = ++ G_Env.sidx;
Env._guid = ('sandbox_' + Env._sidx + '_' + time).replace(/\./g, '_');
}
self.id = Env._guid;
instances[self.id] = self; */
}
self.constructor = Sandbox;
self.config = {
win: win || {},
doc: doc || {}
};
},
// 预留预加载某些指定模块,接口可根据实际需要扩展
/* _setup: function(o) {}, */
/**
* 添加模块
* @method add
* @param name {string} 模块名
* @param fn {Function} 模块对应的函数
* @param version {string}
* @param details 可选配置:
* requires - {array} 在本模块执行之前附加的必须的模块数组
* use - {array} 在本模块执行之后附加的模块数组
*
*/
add: function(name, fn, details) {
Sandbox.Env.mods[name] = {
name: name,
fn: fn,
details: details || {}
};
return this; // chain support
},
/**
* 执行与 Sandbox 实例相关联的模块:details.requires--》fn--》details.use
* @method _attach
* @param r {array} 模块列表数组
* @private
*/
_attach: function(r) {
var mods = Sandbox.Env.mods,
self = this,
attached = self.Env._attached,
i, l = r.length, name, m, fn, d, req, use;
for (i = 0; i < l; i = i+1) {
name = r[i];
m = mods[name];
if (!attached[name] && m) {
attached[name] = true;
fn = m.fn;
d = m.details;
req = d.requires;
use = d.use;
if (req) {
self._attach(req);
}
if (fn) {
fn(self);
}
if (use) {
self._attach(use);
}
}
}
},
/**
* 绑定模块至 Sandbox 实例
* @param modules* {string} 1-n 个模块 (uses arguments array)
* @param *callback {function} callback function 如果包括,必须是最后一个参数。
*
* Sandbox().use('planabc.net')
* Sandbox().use('planabc.net',function(){})
* Sandbox().use('planabc.net','planabc.com')
* Sandbox().use('planabc.net','planabc.com',function(){})
* Sandbox().use('*'); // use all available modules
*
*/
use: function() {
var self = this,
a = SLICE.call(arguments, 0),
mods = Sandbox.Env.mods,
used = self.Env._used,
loader,
firstArg = a[0],
callback = a[a.length-1],
k, i, l,
r = [],
process = function(name) {
// 添加模块至附加的模块列表
r.push(name);
// 一个模块仅附加一次
if (used[name]) {
return;
}
var m = mods[name], req, use, j, jl, t, tl,
d = m.details;
if (m) {
used[name] = true;
req = d.requires;
use = d.use;
}
// 附加上 requires 模块
if (req) {
for (j = 0,jl = req.length ; j < jl; j = j + 1) {
process(req[j]);
}
}
// 附加上 use 模块
if (use) {
for (t = 0, tl = use.length; t < tl; t = t + 1) {
process(use[t]);
}
}
},
onComplete;
if (typeof callback === 'function') {
a.pop();
} else {
callback = null;
}
onComplete = function() {
if (callback) {
callback(self);
}
};
// Sandbox().use('*');
if (firstArg === "*") {
a = [];
for (k in mods) {
if (mods.hasOwnProperty(k)) {
a.push(k);
}
}
if (callback) {
a.push(callback);
}
return self.use.apply(self, a);
}
l = a.length;
// 处理所有必须和附加的模块
for (i = 0; i < l; i = i + 1) {
process(a[i]);
}
self._attach(r);
onComplete();
return self; // chain support
}
};
})();
发表评论
-
gulp独立分文件夹打包
2018-12-27 09:04 1488dazi.91uu.net 是如何打包资源文件呢。 基本的 ... -
定义文档兼容性,让IE按指定的版本解析我们的页面
2013-10-19 11:00 881使用文档兼容性的方法比较容易,就是在我们要反馈给客户端的HT ... -
js 删除数组几种方法
2013-09-20 22:40 827var arr=['a','b ... -
减少图片请求,分批加载图片
2013-09-14 09:35 1243var lazyLoad = { Init: ... -
flash重复请求加载问题
2013-09-07 10:55 751flash重复请求加载问题 当一个div里头放一个f ... -
新一代 javascript 模板引擎 artTemplate ,使用中的问题
2013-09-06 15:44 1161artTemplate 新一代 javascript ... -
jQuery.event自定义事件机制-jQuery.event.special范例
2013-08-16 17:19 802什么时候要用到自定义函数?有些浏览器并不兼容某类型的事件, ... -
javascript对数组的操作
2013-07-30 14:32 8151. shift:删除原数组第一项,并返回删除元素的值;如 ... -
web应用的优化规则
2012-12-20 11:03 649中文 英文 1、 减少http请求 1、M ... -
如何提高网页的效率(上篇)——提高网页效率的14条准则
2012-12-20 10:29 681如何提高网页的效率(上篇)——提高网页效率的14条准则 ... -
谈iframe内存释放问题(转载)
2012-12-19 16:39 1261(转载)随着Ajax的发展,使用javascript的RIA应 ... -
nodeType常量与dom操作方法
2012-11-27 10:55 797接口 nodeType常量 ... -
responseXML为空?
2012-11-14 12:00 600responseXML为空? 这个问题困住我一个月多, ... -
javascript 面向对象写法
2012-07-15 22:58 831//原型方法 function ClassA(){ } C ... -
javascript 验证 国际格式 电话号码
2012-07-03 15:38 0如,中国国际代号是0086,我们要让外国人直接和我们联系表述如 ... -
使用Fiddler提高前端工作效率 (实例篇)
2012-06-08 08:54 868在上一篇(使用Fiddler提高前端工作效率 (介绍篇) ... -
使用Fiddler提高前端工作效率 (介绍篇)
2012-06-08 08:54 905http://www.kuqin.com/webp ... -
CSS实现星状评分效果 – CSS Star Rating
2012-05-17 11:32 2393CSS实现星状评分效果 – CSS Star Ratin ... -
移动平台WEB前端开发技巧汇总
2012-05-17 11:29 0原名《移动平台3G手机网站前端开发布局技巧汇总》,由武方 ... -
javascript 中的protoype的解释
2012-04-17 09:53 1010JavaScript prototype 的深度探索 ...
相关推荐
在YUI3中,Tree View是一个重要的组件,用于展示层次结构数据,比如文件系统、组织结构等。这篇博文“YUI3 中tree的两种实现”探讨了如何在YUI3中创建和管理树形结构。 1. **YUI3 TreeView组件** YUI3 TreeView...
YUI3的Node模块是对DOM操作的进一步抽象,它提供了一种链式调用的方式,使DOM操作更为简洁。在“yui3-master.zip”的“node”模块中,可以找到`Y.Node`, `Y.all`等方法,它们使得DOM操作更加符合JavaScript的编程...
Dialog组件是YUI3中的一个重要部分,它允许开发者创建可交互的弹出窗口,常用于提示信息、确认操作、展示详细内容等场景。 ### 1. Dialog组件的基本结构 Dialog组件由几个关键部分组成: - **容器(Container)**...
在YUI 3中,主要强调了模块化和轻量化设计,它采用了CommonJS规范,允许开发者按需加载所需的功能,降低了页面的加载时间。YUI 3包含了一系列核心模块,如Event(事件处理)、Node(DOM操作)、IO(异步数据交互)等...
YUI3 引入了粒度更细的模块管理方式,通过异步 HTTP 请求加载模块、然后执行回调来加载和使用模块。现场有很多人提出疑问,大家无非关心的是“效率”二字。个人以为在现阶段,这种方式有一点激进,否能为广大用户所...
本文档主要介绍了YUI的核心功能及其在网页开发中的应用。 #### YAHOO工具库提供的方法 ### 1.1. 命名空间管理 - **`znamespace`**:YUI提供了一种简单的方式来管理全局命名空间。例如,在使用YUI时,默认会自动...
标题:“YUI+Ant 实现JS CSS压缩” 在Web开发中,为了提高页面加载速度和优化用户体验,开发者通常会使用代码压缩工具来减少JavaScript(JS)和CSS文件的大小。YUI Compressor是 Yahoo! 推出的一款开源的压缩工具,...
1. **模块系统**:YUI3引入了模块化设计,允许开发者按需加载组件,降低页面的初始化时间。模块可以通过`YUI.use()`方法来加载,实现了代码的异步加载和依赖管理。 2. **事件系统**:YUI的事件处理机制强大且灵活,...
YUI模块作为YUI3中的单一核心模块,它充当了整个框架的基础。所有使用YUI3的页面都需要包含这个核心模块,以便能够动态地加载所需的其他模块及其依赖项。 - **YUI实例**: 每个页面可以共享一个YUI实例,也可以根据...
从YUI2到YUI3看前端的演变
1. **模块系统**:YUI3引入了CommonJS风格的模块系统,允许开发者通过`YUI.use()`方法加载所需模块,实现按需加载,减少页面初始化时的加载量。 2. **事件处理**:YUI3提供了强大的事件系统,支持DOM事件、自定义...
YAHOO YUI 中文文档 AJAX 详细 比较好用
4. **事件处理**:YUI 提供了一套完善的事件系统,可以方便地监听和处理页面中的各种事件,如点击、滚动、键盘输入等。 5. **AJAX 支持**:通过 Connection Manager 提供 AJAX 功能,允许异步与服务器进行通信,...
总的来说,YUI提供了一套完整的工具集,涵盖了从基本的DOM操作到复杂的UI构建和事件处理,是JavaScript开发者实现高效、可维护的前端应用的强大武器。这份汉语版的YUI使用文档对于中国开发者来说,无疑是一个宝贵的...
在3.9.0 r2这个版本中,YUI提供了丰富的组件和工具,帮助开发者创建高效、可维护且用户体验优良的Web应用。 一、YUI的核心特性 1. **模块化**:YUI采用AMD(Asynchronous Module Definition)模块加载机制,允许...
这些方法与jQuery类似,但YUI3的设计更加面向对象,如`Node`和`Selector`模块,它们提供了更加高效和灵活的方式来处理DOM元素。 **事件处理** YUI3的事件系统支持DOM事件绑定、解绑和触发,以及自定义事件。它还...
Yahoo! UI Library (YUI) 是一个开放源代码的 JavaScript 函数库,为了能建立一个高互动的网页,它采用了AJAX, DHTML 和 DOM 等程式码技术。它也包含了许多 CSS 资源。
- **知识点**:YUI3允许开发者单独加载特定模块,这种方式可以实现按需加载,提高页面性能。 - **应用场景**:适用于大型应用,可以根据用户行为动态加载所需模块,提高用户体验。 4. **加载不同的默认皮肤** - ...
在这个例子中,左中右三个模块的划分,正是通过YUI的Container组件和Grids CSS实现的,它们使得页面结构清晰,代码可读性强。 接下来,我们要讨论的是YUI的模块化设计。YUI遵循了“按需加载”的原则,这意味着...