建立一个YUI实例
YUI().use('node' ...
其中的 'node' 使得我们可以利用DOM进行操作;
use方法会动态调用任何'node'所需要但不在页面上元素.如果需要动态加载,那么use方法最近的参数应该是一个在所有加载完成后才运行的函数(换言之就是所有加载完成后才执行的函数)---如果这个函数存在,这个函数不管动态加载是否必需进行,都会执行。
所以,使用YUI的较好模式是:
YUI().use('node' function(Y) ...
这个函数(use)提供了一个指向YUI实例的引用,所以我们可以封装所有实现代码在use的声明中,而不需要另外保存一个指向实例的外部引用.
完整的例子(来自YUI官方例子)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<title>YUI Core</title>
<style type="text/css">
/*margin and padding on body element
can introduce errors in determining
element position and are not recommended;
we turn them off as a foundation for YUI
CSS treatments. */
body {
margin:0;
padding:0;
}
</style>
<link type="text/css" rel="stylesheet" href="../../build/cssfonts/fonts-min.css" />
<script type="text/javascript" src="../../build/yui/yui-min.js"></script>
<!--there is no custom header content for this example-->
</head>
<body class="yui3-skin-sam yui-skin-sam">
<h1>YUI Core</h1>
<div class="exampleIntro">
<p>This example shows how to use the core of YUI.</p>
</div>
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<style>
#demo {
height: 100px;
width: 100px;
border: 1px solid black;
background-color: #8DD5E7;
text-align: center;
}
</style>
<div id="demo"></div>
<script>
YUI().use("node",
function(Y) {
var node = Y.one('#demo');
Y.log('Found node.. Setting style');
node.setStyle('backgroundColor', '#D00050');
node.set('innerHTML', '<strong>Changed!</strong>');
});
</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
</body>
</html>
use方法中的Y.one('#demo")调用了demo节点,并且通过DOM进行了操作
-----------------------------------------------------------------------------------------------------------------------------------------
下载是在页面中直接include所有额外的依赖模块的方法,这样使得不用动态调用.
<!--BEGIN SOURCE CODE FOR EXAMPLE =============================== -->
<!-- include all requirements for node -->
<script type="text/javascript" src="../../build/oop/oop.js"></script>
<script type="text/javascript" src="../../build/event-custom/event-custom.js"></script>
<script type="text/javascript" src="../../build/event/event.js"></script>
<script type="text/javascript" src="../../build/attribute/attribute.js"></script>
<script type="text/javascript" src="../../build/pluginhost/pluginhost.js"></script>
<script type="text/javascript" src="../../build/base/base.js"></script>
<script type="text/javascript" src="../../build/dom/dom.js"></script>
<script type="text/javascript" src="../../build/node/node.js"></script>
<style>
#demo {
border: 1px solid black;
background-color: #8DD5E7;
}
#demo strong {
font-weight: bold;
}
</style>
</head>
<body>
<div id="demo"></div>
<script>
YUI().use('*', //@ '*' 参数
function(Y) {
var node = Y.one('#demo');
var used = [];
Y.each(Y.Env._attached, function(v, k) {
used[used.length] = k;
});
used.sort();
node.set('innerHTML', '<strong>Modules Loaded:</strong> ' + used.join(', '));
});
</script>
<!--END SOURCE CODE FOR EXAMPLE =============================== -->
明显,use方法中的第一个参数 '*' 告诉use方法加载所有模块.
'*'是指代 在页面内的所有模块 的一个缩写,这样就可以避免使用冗长的模块名列表。
YUI().use('*' ...
你可以在'*'之后提供一个函数形参:这个函数会在YUI是列加载所有模块后执行.
这个函数提供一个形参:就是刚建立的YUI实例,当这个函数执行的时候,所有模块已经完成加载并且可以使用了。
YUI().use('*', function(Y) {
// the Y var passed in here will be our YUI instance
});
综上,YUI实例可以直接在页面内静态包含进来,这是一种调用模块(module)的方式;
-----------------------------------------------------------------------------------------------------------------------------------------
这个例子展示了多个 YUI实例如何运行;
YUI实例加载了 anim 模块(animation module 一个动画模块);
YUI().use('anim', function(Y) {
var anim = new Y.Anim({
node: '#demo',
to: {
height: 50,
width: 150
},
from: {
height: 100,
width: 100
},
direction: 'alternate',
iterations: 30,
duration: .5
});
anim.run();
});
简单的animation应用到id=demo的节点上
加载第二个模块 dd-drag 到YUI实例上;
YUI().use('dd-drag', function(Y) {
var dd = new Y.DD.Drag({
node: '#demo'
});
});
使得demo节点可以实现拖拽;
-----------------------------------------------------------------------------------------------------------------------------------------
下面的例子展示出如何利用extend实现类的继承层次;
Bird = function (name) { this.name = name; }; //Bird is a generic class Bird.prototype.flighted = true; // Default for all Birds Bird.prototype.isFlighted = function () { return this.flighted }; Bird.prototype.getName = function () { return this.name }; Chicken = function (name) { // Chain the constructors Chicken.superclass.constructor.call(this, name); }; // Chickens are birds Y.extend(Chicken, Bird); // Define the Chicken prototype methods/members Chicken.prototype.flighted = false; // Override default for all Chicken
------------------------------------------------------------------------------------------------------------------------------------------
下面的例子展示出如何利用argument来组合类;
YUI().use("node", function(Y) { // This method is in the 'oop' module. Since we require 'node' // for this example, and 'node' requires 'oop', the 'oop' module // will be loaded automatically. var Foo = function() { /* code specific to Foo */ this.publish('interestingMoment'); }; Foo.prototype.doSomething = function() { var eventData = {}; // -- do something interesting, add results to eventData -- eventData.statusText = 'bar'; // notify the subscribers, passing the event data this.fire('interestingMoment', eventData); } Y.augment(Foo, Y.EventTarget); var foo = new Foo(); // add some event listeners foo.on('interestingMoment', function (data) { var p = Y.one('#demo_p1'); p.set('innerHTML', 'I was notified of an interesting moment: ' + data.statusText); }); foo.on('interestingMoment', function (data) { var p = Y.one('#demo_p2'); p.set('innerHTML', 'I was also notified of an interesting moment: ' + data.statusText); });
Y.on('click', function() { foo.doSomething(); }, '#demo'); });
其中EventTarget是YUI事件库的一个类.
argument 与 extend 有所不同 argument 类似于 composite 主要是为类增加行为,但不是通过继承实现,所以argument并没有类型
耦合.
------------------------------------------------------------------------------------------------------------------------------------------
下面的例子展示了mix的运用:
var Logging = function () {
var logger = null;
return {
initLogger : function (logNode) {
if (!logger) {
logger = Y.one(logNode);
}
},
log : function (message) {
if (logger) {
logger.set('innerHTML', logger.get('innerHTML') + '<p>' + message + '</p>');
}
}
}
}();
var PageController = function () {
var app_const = 12345;
return {
getConst : function () {
return app_const;
},
logConst : function () {
this.initLogger('#demo_logger');
this.log('PageController class constant = ' + this.getConst() +
', logged courtesy of object augmentation via Y.mix.');
}
};
}();
Y.mix(PageController, Logging);
Y.on('click', PageController.logConst, '#demo_btn', PageController);
在这里例子中 mix 是用来增加一个行为集(Logging)到一个静态类(PageController)中;
mix与argument功能上十分相似,事实上,mix在内部确实用了argument.与argument不同的是,mix不仅仅可以在类定义时增加行为,mix可以工作于任何类,包括 object literals 和 类的实例.
------------------------------------------------------------------------------------------------------------------------------------------
Merge可以一系列的对象合并为一个merge set;
如果Merge的输入类是一个单独的类,那么输出类将是一个浅复制的类,意味着两个类是不同的,但所有非基本类型在输出输入类了都是指向同一个引用.
------------------------------------------------------------------------------------------------------------------------------------------
在YUI全局对象中,有一些非常有用的类型检测方法在Lang对象里面。
YUI().use("node", function(Y) {
// This method is in the core of the library, so we don't have to use() any
// additional modules to access it. However, this example requires 'node'.
var checkType = function (val) {
return {
'object' : Y.Lang.isObject(val),
'array' : Y.Lang.isArray(val),
'function': Y.Lang.isFunction(val),
'type' : Y.Lang.type(val)
};
};
var populateRow = function (e, data) {
var target = e.target;
cell = target.get('parentNode'),
row = cell.get('parentNode');
row.removeChild(cell);
var td0 = document.createElement('td'),
td1 = td0.cloneNode(false),
td2 = td0.cloneNode(false);
td3 = td0.cloneNode(false);
var results = checkType(data);
td0.appendChild(document.createTextNode(results['object'] ? 'Y' : 'N'));
td1.appendChild(document.createTextNode(results['array'] ? 'Y' : 'N'));
td2.appendChild(document.createTextNode(results['function'] ? 'Y' : 'N'));
td3.appendChild(document.createTextNode(results['type']));
row.appendChild(td0);
row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);
};
var foo = function () {};
var f = Y.one('#demo');
Y.on('click',populateRow, '#demo-1', Y, null);
Y.on('click',populateRow, '#demo-2', Y, []);
Y.on('click',populateRow, '#demo-3', Y, {});
Y.on('click',populateRow, '#demo-4', Y, foo);
Y.on('click',populateRow, '#demo-5', Y, new foo());
});