dojo 中对象扩展与原型继承的实现

dojo 是一款优秀的javascript框架,通常我们可以在复杂的企业级应用中看到它的身影。

dojo 提供了两个方法来实现继承 dojo.mixindojo.extend

dojo.mixin 作用在对象上,它负责扩展一个对象
dojo.extend 作用在实例上,他负责扩展实例(本质上是扩展产生实例的类)

而这两个方法的底层实现是dojo._mixin。

因此,我将这一部分抽出,并进行分析。

(function(){
// 创建一个命名空间
var dojo = {};
// 初始化一些变量
var extraNames, extraLen, empty = {};
    // 判断是否为ie浏览器,如果不是则将 dojo._extraNames 设为空数组
    // 如果是则将其设置为["hasOwnProperty", "valueOf", "isPrototypeOf",
    // "propertyIsEnumerable", "toLocaleString", "toString", "constructor"]
    for(var i in {toString: 1}){ extraNames = []; break; }
    dojo._extraNames = extraNames = extraNames || ["hasOwnProperty", "valueOf", "isPrototypeOf",
    "propertyIsEnumerable", "toLocaleString", "toString", "constructor"];
    extraLen = extraNames.length;
 
    dojo._mixin = function(/*Object*/ target, /*Object*/ source){
    var name, s, i;
    // 历遍源对象
    for(name in source){
        // 将源对象中的属性依次赋给s
        s = source[name];
        // 如果目标对象不存在属性name 或者 目标对象中属性name 的值不等于s
        // 同时这个属性不是js Object 对象的保留属性
        if(!(name in target) || (target[name] !== s && (!(name in empty) || empty[name] !== s))){
            // 更新目标对象
            target[name] = s;
        }
    }
 
    // IE doesn't recognize some custom functions in for..in
    // 如果是ie浏览器 --> dojo._extraNames 数组不为0
    if(extraLen && source){
        for(i = 0; i < extraLen; ++i){
            // 调用数组中的那些方法
            name = extraNames[i];
            s = source[name];
            // 用 dojo._extraNames 中的方法检查是否可将源对象扩展到目标对象中
            if(!(name in target) || (target[name] !== s && (!(name in empty) || empty[name] !== s))){
                target[name] = s;
            }
        }
    }
 
    return target; // Object
}
 
dojo.mixin = function(/*Object*/obj, /*Object...*/props){
    // 如果目标为空,初始化一个对象
    if(!obj){ obj = {}; }
    // 调用dojo_mixin() 扩展目标对象
    for(var i=1, l=arguments.length; i<l; i++){
        dojo._mixin(obj, arguments[i]);
    }
    return obj; // Object
}
 
dojo.extend = function(/*Object*/ constructor, /*Object...*/ props){
    for(var i=1, l=arguments.length; i<l; i++){
         // 调用dojo_mixin() 扩展构造函数的原型链
        dojo._mixin(constructor.prototype, arguments[i]);
    }
    return constructor; // Object
}
 
window.dojo = dojo;
})();
 
var obj = {
    age: 24
}
 
// 调用 dojo.mixin 方法扩展obj对象
obj = dojo.mixin(obj,{name:"zhangsan"});
 
alert(obj.name + "'s age is " + obj.age == "zhangsan's age is 24");
 
var User = function (){};
 
var obj = new User();
 
// 调用 dojo.extend 方法扩展 User 对象的原型链
User = dojo.extend(User,{
    saybye: function(){
        return "byebye";
    }
});
 
// obj 对象具备了saybye()的方法
alert(obj.saybye() == "byebye");

原文链接(162 views)|暂无评论(赶紧抢沙发)

取消透明度继承的方法

文中的内容使用叠盖的方法组合而成,已经没有继承了,文章标题,有歧义,回复中有朋友提出来了这一点,这里补充说明。

最近做活动页面的时候,遇到一个透明层的问题。当父级元素设置透明度后,子元素继承(inherit)了父元素的透明度值。在网上找了一下,虽然Google到一个取消透明度继承的,但是那个方法用到太多的CSS HACK,指不定什么时候浏览器升级了,这些HACK就成了地雷。于是自己琢磨了一个办法,取消了透明度的继承,并且没有使用到HACK。

思路:
利用相对定位和绝对定位。相对定位撑开高度,绝对定位充当透明层。相对定位的元素盖在绝对定位的层上。

问题:
绝对定位中没有内容,要事先声明有一个绝对高的高度,但是不能超过32768像素。

Demo:
http://www.zhangjingwei.com/demo/fix_opacity/

样式表如下

body {
	background:url(http://www.google.com/intl/en_ALL/images/logo.gif) repeat;
}
#wrap_1 {
	width:300px;
	padding:20px;
	color:#F00;
	background:#000;
	position:relative;
	filter:alpha(opacity=50);
	-ms-filter:"alpha(opacity=50)";
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity:0.5;
}
#wrap_2 {
	width:300px;
	padding:20px;
	color:#F00;
	position:relative; /*父元素为相对定位*/
	overflow:hidden;
}
#wrap_2_content {
	position:relative; /*内容相对定位,盖在透明层上*/
}
#wrap_2 .fixopacity {
	width:340px;
	background:#000;
	height:32768px; /*一个足够高的高度*/
	position:absolute; /*使用绝对定位*/
	top:0;
	left:0;
	z-index:-1; /*置于最低层*/
	filter:alpha(opacity=50);
	-ms-filter:"alpha(opacity=50)";
	-moz-opacity:0.5;
	-khtml-opacity: 0.5;
	opacity:0.5;
}
.bk10 {height:10px; font-size:1px; clear:both; overflow:hidden;}

HTML代码如下

<div id="wrap_1">
  <h1>没有取消透明度的继承的样子</h1>
  <p>当我们设置了父级元素透明度的时候,子元素往往都会继承这个透明度。本例旨在演示取消这个透明度。<br />
    <br />
    <img src="http://at.the9.com/images/library/common/library_logo.png" width="105" height="113" /></p>
</div>
<div class="bk10"></div>
<!-- 主代码 -->
<div id="wrap_2">
  <div id="wrap_2_content">
    <h1>取消透明度的继承的样子</h1>
    <p>当我们设置了父级元素透明度的时候,子元素往往都会继承这个透明度。本例旨在演示取消这个透明度。<br />
      <br />
      <img src="http://at.the9.com/images/library/common/library_logo.png" width="105" height="113" /></p>
  </div>
  <div class="fixopacity"></div>
</div>
<!-- 主代码 -->

原文链接(1,334 views)|评论 (15)