// 面向过程
// 按照用例的顺序一步步执行的程序过程，叫做面向过程
// 用例，用户操作的实例
// 面向对象
// 任何事物都属于对象，因此我们将所有事物归类设置，根据类别创建不同对象
// 根据这些不同的对象组合完成整个项目
// 类别 对象
// 类别是一种抽象的概念 对象是根据类别实际创建出来的案例
// 把根据类别创建出案例的过程叫做实例化对象
案例
// 若干个小方块，颜色不同，一起向右运行，
// 点击一个小方块，就会停止，再点击继续前进，每个方块直接不会互相影响
代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div class="div1"></div> <script> // rect类 class Rect{ // 构造函数 // 三个变量 box; bool=false; // 定位变量的储存值x x=0; constructor(){ // 把新建的div赋值给全局变量box 构造函数内调用全局变量要用this this.box=this.createElement(); } // 创建元素 createElement() { // 找到窗口里的div元素赋值给变量div let div=document.createElement("div"); // 设置div的样式 背景颜色处理函数 侦听事件及处理函数 返还数据到div div.style.width="50px"; div.style.height="50px"; div.style.position="absolute"; div.style.backgroundColor=this.randomColor(); div.addEventListener("click",e=>this.clickHandler(e)); return div; } // 随机颜色处理函数 randomColor(){ // 声明函数color 添加一个颜色起始的# let color="#"; // for 循环添加六位随机0-16的数转换为16进制添加到color for(let i=0;i<6;i++){ color+=Math.floor(Math.random()*16).toString(16); } // 传出color数据 return color; } // 创建元素并添加到 这里的传参parent是body appendTo(parent){ // 如果parent的数据类型是字符串 if(typeof parent==="string"){ // parent相当于窗口下的找到的parent parent=document.querySelector(parent); } console.log(parent); // 报错说，parent对象没有appendchild方法，我们打印检查 null // 创建box的元素到body内 parent.appendChild(this.box); } // 点击事件处理函数 clickHandler(e){ // 每次点击bool值发生改变 取反相等 起到一个开关的作用 this.bool=!this.bool; } // 控制创建元素的left定位 update(){ // 如果这时的bool是true 直接返回不执行 if(this.bool) return; // 全局变量x累加2 this.x+=2; // 点击元素的left样式值等于全局样式x的值，实现一直往右位移 this.box.style.left=this.x+"px"; // 是this.x 不是x } } // main类 class Main{ // 新建一个空数组 list=[]; // 构造函数 constructor(){ // for循环 i最小0 最大9 累加 for(let i=0;i<10;i++){ // 当使用实例化对象时，会执行Rect类型中constructor方法 let box=new Rect(); // 把box的数据创建并添加到class名为div1的元素中 box.appendTo(".div1"); // 这里是div1 不是div // 把list的元素全部添加到box里 this.list.push(box); } // 设置每一个元素的函数执行时间为16毫秒的间隔 setInterval(()=>this.animation(),16); } // 把数组里得到的元素分别创建 animation(){ for(let i=0;i<this.list.length;i++){ this.list[i].update(); } } } new Main(); </script> </body> </html>
分析总结：在面向对象编程中的全局变量可以不用let或var声明，函数的function前缀也省略了，调用变量前缀要加this，以及函数也要添加this前缀。