1.从面向过程到面向对象的过渡 

  1 <!DOCTYPE html>
  2 <html lang="en">
  3   <head>
  4     <title></title>
  5     <meta charset="UTF-8">
  6     <meta name="viewport" content="width=device-width, initial-scale=1">
  7     <!--<link href="css/style.css" rel="stylesheet">-->
  8     <style>
  9       div{
 10         width:100px;
 11         height:200px;
 12         margin-top:20px;
 13       }
 14       p{
 15         width:100px;
 16         height:200px;
 17         margin-top:20px;
 18       }
 19       .className{
 20         background: #f94 !important;
 21       }
 22     </style>
 23   </head>
 24   <body>
 25     <div></div>
 26     <div class="div2"></div>
 27     <div id="div3"></div>
 28     <p></p>
 29     <p></p>
 30     <script>
 31       // 一、面向对象的基本用法，和jquery的基本实现方式
 32       // 1.需求：给div设置背景颜色
 33       // 面向过程的基本做法
 34       // 1.获取元素，2.设置样式（简单来看并没有什么不妥，但是我们现在又要给别的元素设置样式呢，那么是不是代码就会重复？）
 35       // 下面我们使用面向过程的方式实现一遍
 36       var divs = document.querySelectorAll('div')
 37        for (var i = 0; i < divs.length; i++) {
 38          divs[i].style.backgroundColor = 'pink'
 39        }
 40       //  思考：那我们现在还要将所有的p元素的背景颜色做设置呢？是不是又要重新复制一遍上面的代码？
 41 
 42       // 二、为了不重复上面的代码，对于初学者我们第一个也许会想到，函数的封装（其实函数的封装就是面向对象的启蒙）下面我们使用函数的封装来实现一遍上面的需求
 43       // 获取元素的函数
 44       var getEles = function (element) {
 45         return document.querySelectorAll(element)
 46       }
 47       // 设置样式的函数
 48       var setStyle = function (eles, color) {
 49         for (var i = 0; i < eles.length; i++) {
 50           eles[i].style.backgroundColor = color
 51         }
 52       }
 53       // 现在我们先对所有的div元素设置背景颜色
 54       setStyle(getEles('div'), '#333')
 55       // 现在我们再对所有的p元素设置背景样式
 56       setStyle(getEles('p'), '#0f4')
 57 
 58       // 思考：加入我现在只要更改其中某一个元素的背景样式呢，显然我们封装的园区元素的函数就不有点不适用了，怎么办呢，在封装一个函数？其实是可行的
 59       // 但是有一个问题就是，获取dom元素的方式有很多种，哪我们就要封装很多方法，然而这里有一个问题，就是全局变量污染问题
 60       // 那为了解决这个问题，我们可以将所有的方法封装到一个统一的对象里面
 61       var jquery = {
 62         // 这里是获取元素模块
 63         getEles: {
 64           selectAll: function (eles) {
 65             return document.querySelectorAll(eles)
 66           },
 67           selectId: function (id) {
 68             return document.getElementById(id)
 69           },
 70           selectClass: function (className) {
 71             return document.getElementsByClassName(className)
 72           }
 73         },
 74         // 这里是设置样式的模块
 75         setStyle: {
 76           setBgColor: function (eles, color) {
 77             if (eles.length) {
 78               for (var i = 0; i < eles.length; i++) {
 79                 eles[i].style.background = color
 80               }
 81             } else {
 82               eles.style.backgroundColor = color
 83             }
 84           },
 85           setClass: function (eles, className) {
 86             for (var i = 0; i < eles.length; i++) {
 87               eles[i].className = className
 88             }
 89           }
 90         }
 91       }
 92       // 设置全部div的背景颜色
 93       jquery.setStyle.setBgColor(jquery.getEles.selectAll('div'), 'red')
 94       // 设置全部p的背景颜色
 95       jquery.setStyle.setBgColor(jquery.getEles.selectAll('p'), 'yellow')
 96       // 根据id设置背景
 97       jquery.setStyle.setBgColor(jquery.getEles.selectId('div3'), 'blue')
 98       // 根据className设置样式
 99       jquery.setStyle.setClass(jquery.getEles.selectClass('div2'), 'className')
100     </script>
101   </body>
102 </html>

 

posted @ 2017-06-01 00:23  豆浆油条123  阅读(518)  评论(0)    收藏  举报