Javascript 学习体会

JavaScript一种直译式脚本语言,是一种动态类型、弱类型、基于原型的语言,内置支持类型。

javascript是一种基于java基本语句和控制流之上的简单简化,所以java和javascript在许多语法上是一致的,并且javascript也具有面向对象,事件驱动和安全性的特性,只是没有java那么完整而已。

//通过“{}”创建对象,对象的成员以键值对的形式存放在{}中,多个成员之间使用逗号分隔。


//封装:这些表单项,以面向对象的思维来看,就是一个个对象。既有相同的基本特征,又有各自不同的地方。这些表单相当于一个个类,elements继承了这些类。体现了面向对象的封装性

var elements= [

{

tag:'input',

text:'姓名',

attr:{type:'text',name:'user'},

option:null

},

{

tag:'input',

text:'性别:',

attr:{type:'radio',name:'gender'},

option:{m:'男',w: '女'}

},

{

tag:'input',

text:'爱好',

attr:{type:'checkbox',name:'hobby[]'},

option:{swimming:'游泳',reading:'读书',running:'跑步'}

},

{

tag:'select',

text:'住址:',

attr:{name:'area'},

option:{'':'--请选择--',bj:'北京',sh:'上海',sz:'深圳'}

},

{

tag:'input',

text:'自我介绍:',

attr:{name:'introduce',row:'5',cols:'50'},

option:null

},

{

tag:'input',

text:'',

attr:{type:'submit',value:'提交'},

option:null

}

];

var elements= [//多态:同一个操作作用于不同的对象

{

tag:'input',

text:'姓名',

attr:{type:'text',name:'user'},

option:null

},

{

tag:'input',

text:'性别:',

attr:{type:'radio',name:'gender'},

option:{m:'男',w: '女'}

},

{

tag:'input',

text:'爱好',

attr:{type:'checkbox',name:'hobby[]'},

option:{swimming:'游泳',reading:'读书',running:'跑步'}

},

];

//生成create()实例

var html=new FormBuilder(elements).create();

document.getElementById('form').innerHTML=html;

//将表单生成器封装成一个构造函数,在匿名函数中定义的变量和函数,都不会污染全局作用域,也体现了面向对象的封装性。

(function (window) {

var FormBuilder =function (data) {

this.data=data;

};

window.FormBuilder=FormBuilder;//FormBuilder作为传入对象的属性,而且window对象是全局的,所以当上述代码执行后,就可以直接使用FormBuilder

})(window);

继承:Javascript规定,每一个构造函数都有一个prototype属性,指向另一个对象。这个对象的所有属性和方法,都会被构造函数的实例继承,因此不变的方法被定义在prototype上面。不变的属性,方法都可以定义成 .prototype. ;以FormBuilder.prototype.create来说,如果有另外一个想要继承它的话 直接可以A.prototype=FormBuilder.prototype,但是有缺点的是为了防止继承链紊乱,写A.prototype.contructor=A的时候相当于把FormBuilder.prototype.contructor也给改了,也可以直接写A.prototype=new FormBuilder();也需要写A.prototype.contructor=A防止继承链紊乱。 这样利用原型对象可以保存一些公共的属性和方法。当访问某个对象中的不存在的属性或方法时,会自动调用原型中的属性和方法。也就是继承

FormBuilder.prototype.create=function () {

var html='';

for(var k in this.data){

var item ={tag:'',text:'',attr:{},option:null};

for(var n in this.data[k]){

item[n]=this.data[k][n];

}

html+= builder.toHTML(item);

}

return '

'+html+'
';

}

var builder ={

toHTML: function (obj) {

var html=this.item[obj.tag](this.attr(obj.attr), obj.option);

return ''+obj.text+''+html+'';

},

attr:function (attr) {

var html='';

for(var k in attr){

html+= k +'="'+ attr[k] +' " ';

}

return html;

},

item: {

input:function (attr,option) {

var html= '';

if(option === null){

html+='';

}else{

for(var k in option){

html+= '

html+=option[k]+'';

}

}

return html;

},

select:function (attr,option) {

var html='';

for(var k in option){

html += '';

}

return '';

},

textarea:function (attr) {

return '';

}

}

};

你可能感兴趣的:(Javascript 学习体会)