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 '
}
var builder ={
toHTML: function (obj) {
var html=this.item[obj.tag](this.attr(obj.attr), obj.option);
return '
},
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 '';
}
}
};