这个别名机制类似jQuery的noConflict。jQuery所占用的全局变量有两个:jQuery与$。你也可以说它们是其命名空间,整个框架就以树状式“单足独立”地建立于其上。但是由于我的东西是框架,换言之存在许多文件(如果你没有把它整合到一个文件的话),除了核心模块外,其他模块通过"require"方法动态加载到这个树状结构的命名空间上。可是,如果我把它的命名空间占用了,那些其他模块并不能非常智能地找到新的命名空间,因此我们需要一个永久性命名空间,如Ext的Ext。但这些简单的名字有很大机率被人占用的,因此,这名字应该足够长,足够复杂,非常没有意思,只能通过程序生成。因此我的框架搞了两个命名空间,一个是"dom",另一个是 escape(document.URL.split("#")[0])。对于这样单页面的application,它的命名空间便可以随页面而改变了。"#"是防止使用锚点导致document.URL发生改变的。
下面就是一个小小的实验:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta content="IE=8" http-equiv="X-UA-Compatible"/>
<title>别名机制 by 司徒正美 </title>
<style type="text/css">
#box {
200px;
height:200px;
border:1px solid black;
position:absolute;
left:20ex;
top:100px;
background-color:#EEE8AA;
}
</style>
<link rel="kinetic-stylesheet" type="text/css" href="demo.kss" />
<script type="text/javascript">
var dom = {name:"别人的框架"};//一样使用dom做命名空间
//================我的库=================
(function(window,undefined){
var dom = {
name:"我的库"
},
_dom = window.dom//把别人的框架保存到一个临时变量中
//永久性命名空间,如果这个名字被其他框架占用就没救了
//永久性命名空间是用于模块加载时,让新模块找到当前类框架的
var namespace = escape(document.URL.split("#")[0]);
dom.alias = function(newName) {
//如果不指定新名,则随机生成一个,换言之,则进入忍者模式,需要用一个变量来接受它
newName = newName || "dom"+Math.random();
window.dom = _dom;
return window[namespace] = window[newName] = dom;
}
window[namespace] = window.dom = dom;
})(window);
window.onload = function(){
var a = dom.alias("$$");
alert(a.name);
alert(window.dom.name)//让与别人
alert($$.name)//测试新的命名空间
alert(window[escape(document.URL.split("#")[0])].name)//测试永久性命名空间
}
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
具体用法看我的文档(已放出)