说明（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一样的链式编程。

 <!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <title>Document</title>

 </head>

 <body>

 </body>

 <script type="text/javascript">

     // 画一个div框

     // 过程的方法

     // var divTag = document.createElement("div");

     // divTag.style.border = "1px solid red";

     // divTag.style.width = "200px";

     // divTag.style.height = "100px";

     // divTag.style.backgroundColor = "pink";

     // document.body.appendChild(divTag);

     // 面向对象的方法

     var DivTag = function(){

         this.DOM = document.createElement("div")

         this.appendTo = function(){

             document.body.appendChild(this.DOM)

             return this;

         };

         // 注意，此处for in循环对于json来说，i是键名，而不是索引

         this.css = function(option){

             for(var i in option){

                 this.DOM.style[i] = option[i];

             }

             return this;

             // this.DOM.style[name] = value;

         };

     };

     var divTag = new DivTag();

     divTag.appendTo();

     divTag.css({border:"1px dotted blue",width:"100px",height:"100px"});

     divTag.appendTo().css({border:"3px dotted yellow",width:"100px",height:"100px"});

     // divTag.css("border","1px solid red");

     // divTag.css("width","200px");

     // divTag.css("height","200px");

 </script>

 </html>

JavaScript高级 面向对象（1）--添加一个div标签的更多相关文章

  1. JavaScript高级 面向对象（5）--内存逻辑图画法

    说明(2017.3.30): 1. 使用软件diagram designer,DiagramDesignerSetup1.28.zip,很小只有1M多,我用的自带画图软件.教学视频是“JavaScri ...

  2. 使用yii的layout，加入<?php echo $content; ?>这句话时，它会自动在子页面上面添加一个div包裹

    使用yii的layout,加入<?php echo $content; ?>这句话时,它会自动在子页面上面添加一个div包裹,而且div的id命名为id=content,这个和已有id重复 ...

  3. JavaScript高级 面向对象（10）--onload与jq中ready的区别

    说明(2017.4.2): 1. 在body中放一个img标签,src链接一张图片,那么页面会先读取html的document文档,然后再读取外部资源(这里没加onload其实就是从上往下顺序读取). ...

  4. JavaScript高级 面向对象（8）--浅拷贝代码实现

    说明(2017.3.31): 1. 浅拷贝,只有值属性,没有引用属性. 2. 在原对象里面添加一个copy方法,返回本对象内的所有值属性. <!DOCTYPE html> <html ...

  5. JavaScript高级 面向对象的程序设计 （一）《JavaScript高级程序设计（第三版）》

    创建对象 继承 面向对象的语言都有一个表示---类.通过类我们可以创建多个具有相同属性的对象.但是,在JS中并没有类的概念,所以JS的对象也和其他语言的对象不同. 对象的定义:无序的属性集合,其属性可 ...

  6. JavaScript高级 面向对象的程序设计 （二）《JavaScript高级程序设计（第三版）》

    二.继承 OO是面向对象语言最为有魅力的概念.一般的OO语言都实现了两种继承,接口继承和实现继承.接口继承只继承方法签名,而实际继承继承了实际的方法. 而在JS中,函数没有签名,所以无法实现接口继承. ...

  7. JavaScript高级 面向对象（13）--构造函数的执行过程

    说明(2017-4-2 21:50:45) 一.构造函数是干什么用的: 1. 初始化数据的. 2. 在js给对象添加属性用的,初始化属性值用. 二.创建对象的过程: 1. 代码:var p = new ...

  8. JavaScript高级 面向对象（11）--对象的动态特性-关联数组用法

    说明(2017.4.2): 1. 对象的动态特性: (1)在js中,一个对象需要属性,就可以利用“对象名.属性 = 值”的方式为其添加,只要赋值成功,对象就新增这个属性. (2)对象属性的访问形式: ...

  9. JavaScript高级 面向对象（9）--深拷贝代码实现

    说明(2017.4.1): 1. 深拷贝要把对象里的“方法”也复制一份出来,“方法”里的“方法和属性”再判断深浅进行拷贝. 2. 办法就是写一个函数deepCopy,里面判断深浅拷贝,然后每个对象都添 ...

随机推荐

  1. 自定义网站的icon和收藏夹图标

    定制网站收藏夹图标的方法有两种: 第一种方法: 第一步,当然是准备一个能体现您的主页的风格和个性的图标.比较简便的办法除了下载,就是将您的网站的logo做成一个图标. 第二步,将这个图标文件命名为:f ...

  2. Linux 添加硬盘设备

    fdisk命令用于管理磁盘分区,格式为:“fdisk [磁盘名称]”. 管理Linux系统中的硬盘设备最常用的方法就当属是用fdisk命令了,这条命令提供了添加.删除.转换分区等等功能于一身的“一站式 ...

  3. tomcat 的配置文件 server.xml 详解

    server.xml位于$TOMCAT_HOME/conf目录下,作为整个 tomcat 服务器最核心的配置文件,server.xml的每一个元素都对应了 tomcat中的一个组件,通过对xml中元素 ...

  4. PHP-中文在计算机中的存储

    经常我们打开外国网站的时候出现乱码,又或者打开很多非英语的外国网站的时候,显示的都是口口口口口的字符, WordPress程序是用的UTF-8,很多cms用的是GB2312. ● 为什么有这么多编码? ...

  5. Cannot refer to the non-final local variable user defined in an enclosing scope 内部类定义在方法内，方法定义的参数（形参）无法被内部类直接访问，需要用final定义

    为什么匿名内部类参数必须为final类型 1)  从程序设计语言的理论上:局部内部类(即:定义在方法中的内部类),由于本身就是在方法内部(可出现在形式参数定义处或者方法体处),因而访问方法中的局部变量 ...

  6. 连表查询都用Left Join吧 以Windows服务方式运行.NET Core程序 HTTP和HTTPS的区别 ASP.NET SignalR介绍 asp.net—WebApi跨域 asp.net—自定义轻量级ORM C#之23中设计模式

    连表查询都用Left Join吧   最近看同事的代码,SQL连表查询的时候很多时候用的是Inner Join,而我觉得对我们的业务而言,99.9%都应该使用Left Join(还有0.1%我不知道在 ...

  7. python学习笔记013——内置函数dir()

    1 描述 dir() 函数 不带参数时,返回当前范围内的变量.方法和定义的类型列表: 带参数时,返回参数的属性.方法列表. 如果参数包含方法__dir__(),该方法将被调用. 如果参数不包含__di ...

  8. Form_Form Builder的常用方法（概念）

    2014-07-07 Created By BaoXinjian

  9. Linux内核中锁机制之内存屏障、读写自旋锁及顺序锁

    在上一篇博文中笔者讨论了关于原子操作和自旋锁的相关内容,本篇博文将继续锁机制的讨论,包括内存屏障.读写自旋锁以及顺序锁的相关内容.下面首先讨论内存屏障的相关内容. 三.内存屏障 不知读者是是否记得在笔 ...

  10. Python 列表 pop() 方法

    描述 Python 列表 pop() 方法通过指定元素的索引值来移除列表中的某个元素(默认是最后一个元素),并且返回该元素的值,如果列表为空或者索引值超出范围会报一个异常. 语法 pop() 方法语法 ...