js创建HTML对象和元素

最新推荐文章于 2023-08-09 20:15:20 发布

amnotsuperior

最新推荐文章于 2023-08-09 20:15:20 发布

阅读量918

点赞数

分类专栏： web--js

web--js 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<script language="javascript">
var o = document.body;
//创建链接
function createA(url,text)
{
var a = document.createElement("a");
a.href = url;
a.innerHTML = text;
a.style.color = "red";
o.appendChild(a);
}
createA("http://blog.csdn.net/amnotsuperior/article/category/2330161","My Home Page ");
</script>

第一种模式：工厂方式

var lev=function(){  
  
   return "啊打";  
};  
function Parent(){  
       var  Child = new Object();   <span id="Codehighlighter1_126_381_Open_Text"><span style="color:#008000;">//</span><span style="color:#008000;"> 或者 var Child= new Object ;</span></span>
       Child.name="李小龙";  
       Child.age="30";  
       Child.lev=lev; 
       Child.showColor2=showColor; 
     <span id="Codehighlighter1_126_381_Open_Text"><span style="color:#000000;">  Child.showColor </span><span style="color:#000000;">=</span><span style="color:#000000;"> </span><span style="color:#0000ff;">function</span><span style="color:#000000;"> ()</span><span id="Codehighlighter1_255_275_Open_Text"><span style="color:#000000;">{   
<img src="https://i-blog.csdnimg.cn/blog_migrate/d18c02628675d0a2c816449d98bda930.gif" alt="" align="top" />        alert(</span><span style="color:#000000;">123</span><span style="color:#000000;">);
<img src="http://www.blogjava.net/Images/OutliningIndicators/ExpandedSubBlockEnd.gif" alt="" align="top" />    }</span></span><span style="color:#000000;"> ;    </span><span style="color:#008000;">//</span><span style="color:#008000;"> 记住，这里一定要用 ; 表示结束</span></span>
     return Child; <span id="Codehighlighter1_126_381_Open_Text"><span style="color:#008000;">//</span><span style="color:#008000;"> 不是 return this.Child ; 因为 this.Child===unfined</span></span> 
};  
  
var  x = Parent();  
alert(x.name);  
alert(x.lev());

使用这种方式必须创建对象的方法。每次调用 createCar()，都要创建 showColor(),意味着每一个对象
都有自己的 showColor 版本，事实上，每一个对象都共享了是同一个函数.
有些开发者在工厂函数外定义对象的方法，然后通过属性指向该方法。从而避免这个问题!!!!

function showColor2(){
    alert(this.color);
}
var oCar4 = createCar2('black');
oCar4.showColor2();

引用该对象的时候，这里使用的是 var x = Parent()而不是 var x = new Parent();因为后者会可能出现很多问题（前者也成为工厂经典方式,后者称之为混合工厂方式）

第二种模式：构造函数方式 function(){}

    var lev=function(){  
      
       return "啊打";  
    };  
    function Parent(){  
            
           this.name="李小龙";  
           this.age="30";  
           this.lev=lev;  
         
    };  
      
    var  x =new  Parent();  
    alert(x.name);  
    alert(x.lev());

与工厂方式相比，使用构造函数方式创建对象，无需再函数内部重建创建对象，而使用this指代，并而函数无需明确return
与第 1个存在相同问题方法重复

第3种模式：原型模式 .prototype.

    var lev=function(){  
      
       return "啊打";  
    };  
    function Parent(){  
            
         
    };  
      Parent.prototype.name="李小龙";  
      Parent.prototype.age="30";  
     Parent.prototype.lev=lev;  
      
    var  x =new  Parent();  
    alert(x.name);  
    alert(x.lev());

不能传递参数，函数属性都共享
alert(pcar1 instanceof PCar); // output "true"

第四种模式：混合的构造函数，原型方式（推荐)

    function Parent(){  
      this.name="李小龙";  
     this.age=32;  
         
    };   
    Parent.prototype.lev=function(){  
      
       return this.name;  
    };;  
      
    var  x =new  Parent();  
      
    alert(x.lev());

说明： 1.该模式是指混合搭配使用构造函数方式和原型方式

2.将所有属性不是方法的属性定义在函数中（构造函数方式）

将所有属性值为方法的属性利用prototype在函数之外定义（原型方式）

第五种模式：动态原型方式（推荐）

function Parent(){  
  this.name="李小龙";  
 this.age=32;  
;  
 if(typeof Parent._lev==="undefined"){  
            
       
     Parent.prototype.lev=function(){  
  
               return this.name;  
     }  
     Parent._lev=true;  
 }  
     
};   
  
  
var  x =new  Parent();  
  
alert(x.lev());

对于习惯使用其他开发语言的开发者来说，使用混合构造函数/原型方式感觉不那么和谐。批评构造函数/原型方式的人

认为，在构造函数内找属性，在外部找方法的做法不合理。所以他们设计了动态原型方式，以供更友好的编码风格。

动态原型方式的基本想法与混合构造函数/原型方式相同，即在构造函数内定义非函数的属性，而函数的属性则利用

原型属性定义。唯一的区别是赋予对象方法的位置。下面是使用动态原型方法重写的 Car 类:

*/

从而保证创建该对象的实例时，属性的方法不会被重复创建 (推荐使用)

转载创建对象： http://www.cnblogs.com/mizzle/archive/2011/07/06/2099342.html
转载：http://www.ffasp.com/content.asp?newsid=1253