zoukankan      html  css  js  c++  java
  • 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","100px",height:"100px"});
    39     divTag.appendTo().css({border:"3px dotted yellow","100px",height:"100px"});
    40     // divTag.css("border","1px solid red");
    41     // divTag.css("width","200px");
    42     // divTag.css("height","200px");
    43 </script>
    44 </html>
  • 相关阅读:
    ElasticSearch 2 (10)
    zookeeper 配置
    zookeeper
    ES 聚合函数
    win 7安装 linux
    Elasticsearch分布式搜索集群配置
    Elasticsearch 插件安装
    为Elasticsearch添加中文分词,对比分词器效果
    .net 4.0 网站发布(转)
    ssm 网页
  • 原文地址:https://www.cnblogs.com/Jacklovely/p/6637441.html
Copyright © 2011-2022 走看看