首页 > 代码库 > JavaScript高级 面向对象（1）--添加一个div标签
JavaScript高级 面向对象（1）--添加一个div标签
说明（2017.3.28）：
1. JavaScript是一种基于对象的多范式编程语言，不是面向对象，但离开对象不能活。
范式编程是指编程习惯、方式，分为过程式、对象式和函数式编程。
2. 面向对象是指，使用对象进行开发，面向对象是对面向过程的封装。
3. JavaScript面向对象的三个特点，抽象性、继承性和封装性。
抽象性是指，抽取出核心属性和方法，不在特定条件下不能确定对象的具体意义。
继承性是指，把我没有的属性和方法拿来使用，并变成自己的属性和方法。
封装性是指，把方法和属性打包成一个对象。
4. JavaScript的对象就是键值对的集合。
键值是数据（基本数据，复合数据，空数据），就叫属性。
键值是函数，就叫方法。
5. 例子是在body里面添加一个div并设置样式。
第一次，采用过程的方法，先添加div，再分别设置样式。
第二次，采用面向对象的方法，把创建出来的div作为一个属性DOM，添加div到body作为方法appendTo()，设置样式作为方法css()。
第三次，将css()的参数设置为json格式对象，只要调用一次css()方法就可以了。
第四次，每个方法最后返回this，实现像jquery一样的链式编程。
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 </head> 7 <body> 8 9 </body> 10 <script type="text/javascript"> 11 // 画一个div框 12 // 过程的方法 13 // var divTag = document.createElement("div"); 14 // divTag.style.border = "1px solid red"; 15 // divTag.style.width = "200px"; 16 // divTag.style.height = "100px"; 17 // divTag.style.backgroundColor = "pink"; 18 // document.body.appendChild(divTag); 19 // 面向对象的方法 20 var DivTag = function(){ 21 this.DOM = document.createElement("div") 22 this.appendTo = function(){ 23 document.body.appendChild(this.DOM) 24 return this; 25 }; 26 // 注意，此处for in循环对于json来说，i是键名，而不是索引 27 this.css = function(option){ 28 for(var i in option){ 29 this.DOM.style[i] = option[i]; 30 } 31 return this; 32 // this.DOM.style[name] = value; 33 }; 34 }; 35 36 var divTag = new DivTag(); 37 divTag.appendTo(); 38 divTag.css({border:"1px dotted blue",width:"100px",height:"100px"}); 39 divTag.appendTo().css({border:"3px dotted yellow",width:"100px",height:"100px"}); 40 // divTag.css("border","1px solid red"); 41 // divTag.css("width","200px"); 42 // divTag.css("height","200px"); 43 </script> 44 </html>
JavaScript高级 面向对象（1）--添加一个div标签
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。