Javascript面向对象及组件开发（二）面向对象的写法

最新推荐文章于 2024-06-29 21:48:54 发布
最新推荐文章于 2024-06-29 21:48:54 发布
阅读量447 收藏
点赞数
分类专栏： 前端Javascript相关操作说明 文章标签： javascript 函数 面向对象 对象
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/gujinapenggu5/article/details/50437100
版权

面向对象的写法

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>无标题文档</title>  
  6. <script>  
  7.   
  8. function 构造函数(){  
  9.     this.属性  
  10. }  
  11.   
  12. 构造函数.原型.方法 = function(){};  
  13.   
  14.   
  15. var 对象1 = new 构造函数();  
  16. 对象1.方法();  
  17. </script>  
  18. </head>  
  19.   
  20. <body>  
  21. </body>  
  22. </html>  

面向对象的选项卡

  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5. <title>无标题文档</title>  
  6. <style>  
  7. #div1 div{ width:200px; height:200px; border:1px #000 solid; display:none;}  
  8. .active{ background:red;}  
  9. </style>  
  10. <script>  
  11.   
  12. /*window.onload = function(){  
  13.     var oParent = document.getElementById('div1');  
  14.     var aInput = oParent.getElementsByTagName('input');  
  15.     var aDiv = oParent.getElementsByTagName('div');  
  16.       
  17.     for(var i=0;i<aInput.length;i++){  
  18.         aInput[i].index = i;  
  19.         aInput[i].onclick = function(){  
  20.             for(var i=0;i<aInput.length;i++){  
  21.                 aInput[i].className = '';  
  22.                 aDiv[i].style.display = 'none';  
  23.             }  
  24.             this.className = 'active';  
  25.             aDiv[this.index].style.display = 'block';  
  26.         };  
  27.     }  
  28.       
  29. };*/  
  30.   
  31. //先变型:  
  32. //尽量不要出现函数嵌套函数  
  33. //可以有全局变量  
  34. //把onload中不是赋值的语句放到单独函数中  
  35.   
  36.   
  37. var oParent = null;  
  38. var aInput = null;  
  39. var aDiv = null;  
  40.   
  41. window.onload = function(){  
  42.       
  43.     oParent = document.getElementById('div1');  
  44.     aInput = oParent.getElementsByTagName('input');  
  45.     aDiv = oParent.getElementsByTagName('div');  
  46.   
  47.     init();  
  48.       
  49. };  
  50.   
  51. function init(){  
  52.     for(var i=0;i<aInput.length;i++){  
  53.         aInput[i].index = i;  
  54.         aInput[i].onclick = change;  
  55.     }  
  56. }  
  57.   
  58. function change(){  
  59.     for(var i=0;i<aInput.length;i++){  
  60.         aInput[i].className = '';  
  61.         aDiv[i].style.display = 'none';  
  62.     }  
  63.     this.className = 'active';  
  64.     aDiv[this.index].style.display = 'block';  
  65. }  
  66.   
  67. </script>  
  68. </head>  
  69.   
  70. <body>  
  71. <div id="div1">  
  72.     <input class="active" type="button" value="1">  
  73.     <input type="button" value="2">  
  74.     <input type="button" value="3">  
  75.     <div style="display:block">11111</div>  
  76.     <div>22222</div>  
  77.     <div>33333</div>  
  78. </div>  
  79. </body>  
  80. </html>  


  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5. <title>无标题文档</title>  
  6. <style>  
  7. #div1 div{ width:200px; height:200px; border:1px #000 solid; display:none;}  
  8. .active{ background:red;}  
  9. </style>  
  10. <script>  
  11.   
  12. /*window.onload = function(){  
  13.     var oParent = document.getElementById('div1');  
  14.     var aInput = oParent.getElementsByTagName('input');  
  15.     var aDiv = oParent.getElementsByTagName('div');  
  16.       
  17.     for(var i=0;i<aInput.length;i++){  
  18.         aInput[i].index = i;  
  19.         aInput[i].onclick = function(){  
  20.             for(var i=0;i<aInput.length;i++){  
  21.                 aInput[i].className = '';  
  22.                 aDiv[i].style.display = 'none';  
  23.             }  
  24.             this.className = 'active';  
  25.             aDiv[this.index].style.display = 'block';  
  26.         };  
  27.     }  
  28.       
  29. };*/  
  30.   
  31. //先变型:  
  32. //尽量不要出现函数嵌套函数  
  33. //可以有全局变量  
  34. //把onload中不是赋值的语句放到单独函数中  
  35.   
  36.   
  37. /*var oParent = null;  
  38. var aInput = null;  
  39. var aDiv = null;  
  40.   
  41. window.onload = function(){  
  42.       
  43.     oParent = document.getElementById('div1');  
  44.     aInput = oParent.getElementsByTagName('input');  
  45.     aDiv = oParent.getElementsByTagName('div');  
  46.   
  47.     init();  
  48.       
  49. };  
  50.   
  51. function init(){  
  52.     for(var i=0;i<aInput.length;i++){  
  53.         aInput[i].index = i;  
  54.         aInput[i].onclick = change;  
  55.     }  
  56. }  
  57.   
  58. function change(){  
  59.     for(var i=0;i<aInput.length;i++){  
  60.         aInput[i].className = '';  
  61.         aDiv[i].style.display = 'none';  
  62.     }  
  63.     this.className = 'active';  
  64.     aDiv[this.index].style.display = 'block';  
  65. }*/  
  66.   
  67. //改成面向对象:  
  68. //全局变量就是属性  
  69. //函数就是方法  
  70. //Onload中创建对象  
  71.   
  72. //改this指向问题 : 事件或者是定时器,尽量让面向对象中的this指向对象  
  73.   
  74. window.onload = function(){  
  75.       
  76.     var t1 = new Tab();  
  77.     t1.init();  
  78.       
  79. };  
  80.   
  81. function Tab(){  
  82.     this.oParent = document.getElementById('div1');  
  83.     this.aInput = this.oParent.getElementsByTagName('input');  
  84.     this.aDiv = this.oParent.getElementsByTagName('div');  
  85. }  
  86.   
  87. Tab.prototype.init = function(){  
  88.     var This = this;  
  89.     for(var i=0;i<this.aInput.length;i++){  
  90.         this.aInput[i].index = i;  
  91.         this.aInput[i].onclick = function(){  
  92.             This.change(this);  
  93.         };  
  94.     }  
  95. };  
  96.   
  97. Tab.prototype.change = function(obj){  
  98.     for(var i=0;i<this.aInput.length;i++){  
  99.         this.aInput[i].className = '';  
  100.         this.aDiv[i].style.display = 'none';  
  101.     }  
  102.     obj.className = 'active';  
  103.     this.aDiv[obj.index].style.display = 'block';  
  104. };  
  105.   
  106. </script>  
  107. </head>  
  108.   
  109. <body>  
  110. <div id="div1">  
  111.     <input class="active" type="button" value="1">  
  112.     <input type="button" value="2">  
  113.     <input type="button" value="3">  
  114.     <div style="display:block">11111</div>  
  115.     <div>22222</div>  
  116.     <div>33333</div>  
  117. </div>  
  118. </body>  
  119. </html>  

  1. <!DOCTYPE HTML>  
  2. <html>  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
  5. <title>无标题文档</title>  
  6. <style>  
  7. #div1 div,#div2 div{ width:200px; height:200px; border:1px #000 solid; display:none;}  
  8. .active{ background:red;}  
  9. </style>  
  10. <script>  
  11.   
  12. /*var arr = [4,7,1,3];  
  13. arr.sort();  // 1 3 4 7  
  14.   
  15. var arr2 = [4,7,1,3];  
  16. arr2.push(5);  
  17. arr2.sort(); // 1 3 4 5 7  
  18. */  
  19.   
  20. window.onload = function(){  
  21.       
  22.     var t1 = new Tab('div1');  
  23.     t1.init();  
  24.     t1.autoPlay();  
  25.       
  26.     var t2 = new Tab('div2');  
  27.     t2.init();  
  28.     t2.autoPlay();  
  29.       
  30. };  
  31.   
  32. function Tab(id){  
  33.     this.oParent = document.getElementById(id);  
  34.     this.aInput = this.oParent.getElementsByTagName('input');  
  35.     this.aDiv = this.oParent.getElementsByTagName('div');  
  36.     this.iNow = 0;  
  37. }  
  38.   
  39. Tab.prototype.init = function(){  
  40.     var This = this;  
  41.     for(var i=0;i<this.aInput.length;i++){  
  42.         this.aInput[i].index = i;  
  43.         this.aInput[i].onclick = function(){  
  44.             This.change(this);  
  45.         };  
  46.     }  
  47. };  
  48.   
  49. Tab.prototype.change = function(obj){  
  50.     for(var i=0;i<this.aInput.length;i++){  
  51.         this.aInput[i].className = '';  
  52.         this.aDiv[i].style.display = 'none';  
  53.     }  
  54.     obj.className = 'active';  
  55.     this.aDiv[obj.index].style.display = 'block';  
  56. };  
  57.   
  58. Tab.prototype.autoPlay = function(){  
  59.       
  60.     var This = this;  
  61.       
  62.     setInterval(function(){  
  63.           
  64.         if(This.iNow == This.aInput.length-1){  
  65.             This.iNow = 0;  
  66.         }  
  67.         else{  
  68.             This.iNow++;  
  69.         }  
  70.           
  71.         for(var i=0;i<This.aInput.length;i++){  
  72.             This.aInput[i].className = '';  
  73.             This.aDiv[i].style.display = 'none';  
  74.         }  
  75.         This.aInput[This.iNow].className = 'active';  
  76.         This.aDiv[This.iNow].style.display = 'block';  
  77.           
  78.           
  79.     },2000);  
  80.       
  81. };  
  82.   
  83. </script>  
  84. </head>  
  85.   
  86. <body>  
  87. <div id="div1">  
  88.     <input class="active" type="button" value="1">  
  89.     <input type="button" value="2">  
  90.     <input type="button" value="3">  
  91.     <div style="display:block">11111</div>  
  92.     <div>22222</div>  
  93.     <div>33333</div>  
  94. </div>  
  95.   
  96. <div id="div2">  
  97.     <input class="active" type="button" value="1">  
  98.     <input type="button" value="2">  
  99.     <input type="button" value="3">  
  100.     <div style="display:block">11111</div>  
  101.     <div>22222</div>  
  102.     <div>33333</div>  
  103. </div>  
  104. </body>  
  105. </html>  









午夜玫瑰钻
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
javascript进阶面向对象ES6
weixin_45732235的博客
06-21 562
js进阶部分知识笔记
面向对象-基础（ES5与ES6对比）
dou_xiaobao的博客
10-26 360
一、ES5的面向对象 1、概括：类和构造函数一样 2、属性和方法分开写的 3、具体案例讲解 //定义一个类（构造函数） function User(name, pass) { this.name = name this.pass = pass } 在js中，每个构造函数都有一个原型属性prototype，因为这个属性的值通常是一个对象，又叫原型对象！通常在这个原型对象中，会包含一个constructor属性指向该原型对象的构造函数。 //定义构造函数user的原型方法 User.pro
面向对象及组件开发（一）面向对象简介
王二狗
05-22 439
1.面向过程式写法<script type="text/javascript"> //面向过程的写法 function test(){} for(){} if(){} </script>2.面向对象式写法<script type="text/javascript"> /** * we are always using obj,such as arra
面向对象及组件开发（六）工厂模式之原型
王二狗
05-22 286
我们创建的每一个函数都有一个 prototype 属性，这个属性是一个指针，指向一个对象，而这个对象的用途是包含可以由特定类型的所有实例共享的属性和方法。使用原型对象的好处是可以让所有对象实例共享它所包含的属性和方法。换句话说，不必在构造函数中定义对象实例的信息，而是可以将这些信息直接添加到原型对象中。<script type="text/javascript"> //能够共享的放在
面向对象及组件开发（七）传统选项卡和面向对象选项卡编写
王二狗
05-22 278
1.传统方式编写选项卡<!DOCTYPE html> <html> <head> <title></title> <style type="text/css"> *{margin: 0;padding: 0} #box{ height: 100px; width: 250px; m
tab面向对象写法
Handsome_fan的博客
05-13 805
面向对象可以说是一种思维方式，它将世界上的万事万物抽象出来变成一个一个的单元，面向对象也是一种编程的技术，适用于大型信息系统的开发。tab是在网页中常见的一种特效（组件），本文将会讲解如何用面向对象的方式来实现tab效果。 在讲解tab的面向对象的实现方式之前，我会先用过程式的方法来将tab选项卡特效实现一遍，让大家在对比中学习。 其中的html结构如下： &amp;lt;button class=...
关于前端js面向对象编程以及封装组件的思想
Godwei99的博客
06-29 577
关于前端js面向对象编程以及封装组件的思想 原文:https://www.cnblogs.com/chenhuichao/p/8202588.html demo-richbase 用来演示怎么使用richbase来制作组件的例子 作为一名前端工程师，写组件的能力至关重要。虽然javascript经常被人嘲笑是个小玩具，但是在一代代大牛的前仆后继的努力下，渐渐的也摸索了一套组件的编写方式。 ...
面向对象编程
qq_32429257的博客
05-24 330
分享-前端业务场景的一些代码优化 前端开发基本每天都在写业务代码，有些场景我们可以用更好更优雅的方式去处理。今天给大家分享下我在实际业务场景下对代码的一些思考与优化，和大家探讨下。主要是两个方面： 如何利用js对象key唯一性简化代码逻辑 如何利用异步和队列简化重复代码逻辑 如何利用js对象key简化代码 1. 利用对象来简化if else或者switch case 先简单举例说个业务场景： 运单可能有待发车、运输中、待收货、待回单、已收货…等状态，我们需要根据不同状态来显示不同的文案和图标
【鸿蒙实战开发】HarmonyOS开发-面向对象
最新发布
HarmonyOS_001的博客
06-29 1027
有很多小伙伴不知道该从哪里开始学习鸿蒙开发技术？也不知道鸿蒙开发的知识点重点掌握的又有哪些？自学时频繁踩坑，导致浪费大量时间。结果还是一知半解。所以有一份实用的鸿蒙（HarmonyOS NEXT）全栈开发资料用来跟着学习是非常有必要的。获取这份完整版高清学习路线，请点击→[鸿蒙全栈开发学习资料]这份鸿蒙（HarmonyOS NEXT）资料包含了鸿蒙开发必掌握的核心知识要点，内容包含了。
JavaScript面向对象
狗哥的博客
08-13 119
JS面向对象的详细介绍推荐阅读《JavaScript高级程序设计（第3版）》一书，本文主要对ES6和JS面向对象做一对比，仅此而已。 1、面向对象 ES6之前面向对象写法： function User(name,pass) { // 是一个类， (User既是一个类，也是构造函数) this.name = name;//添加属性 this.pass = pas...
MooCSS模块化面向对象的css写法
08-10
《MooCSS：模块化面向对象的CSS写法详解》 在现代Web开发中，CSS已经从简单的样式语言发展为复杂、高效的样式管理系统。MooCSS（Module-Oriented Object CSS）是一种基于模块化和面向对象思想的CSS编写方式，旨在...
原生js实现无缝轮播（包括面向对象的写法）
12-13
本教程将深入探讨如何使用原生JavaScript实现一个无缝轮播效果，同时结合面向对象编程思想进行代码组织，提高代码复用性和可维护性。 ### 1. 基本思路 无缝轮播的核心在于通过改变图片的位置或CSS属性，使得用户...
js面向对象游戏开发，飞机大战
11-17
在JavaScript的世界里，面向对象编程（Object-Oriented Programming，OOP）是一种常见的设计模式，尤其在游戏开发中，它能帮助我们构建复杂且可扩展的代码结构。本项目"js面向对象游戏开发，飞机大战"是利用...
mofumui-R0508:一款基于JQuery，Requare框架的建立起来的具有面向对象特性的便于灵活组织各个组件的UI库
05-17
一款基于JQuery，Requare框架的建立起来的具有面向对象特性的便于灵活组织各个组件的UI框架。用极少的代码和语言去组织网页内容。它是一个以JS渲染界面为主的界面库，也就是使用它你可以尽量避免写HTML,CSS代码。且...
javaScript中封装的各种写法示例（推荐）
01-19
前言 在javascript的世界里，写法是个神奇的现象，真是百家齐开放啊！每次看到老外写的js组件，思想和写法都怪异，就没看到一个js结构基本相同的代码出来。...主要对封装进行研究，因为前后台都会涉及到面向对象的概
js判断input中是否有值问题
热门推荐
午夜灬玫瑰焰钻的博客
11-03 1万+
js判断input中是否有值问题 A B var inputA = document.getElementById('inputAId'); var inputB = document.getElementById('inputBId'); function getA(){ if(inputA.value != ''){     alert('提交InputA
使用插件jquery.PrintArea.js，打印样式信息的解决办法
午夜灬玫瑰焰钻的博客
08-05 7364
使用jquery.PrintArea.js打印局部网页样式的时候，发现样式打印不出来解决办法如下 一、看css的引用文件方式 　　1、直接在内部的元素中使用”style”属性来定义样式，比如：<div style=”width:800px;”></div> 　　2、在<head>元素中使用”style”元素来指定 　　3、使用<link>...
JavaScript escape() 函数详解
午夜灬玫瑰焰钻的博客
01-06 2951
escape()函数用于对字符串进行编码，并返回一个可在所有计算机上读取的编码字符串。 该函数属于Global对象，所有主流浏览器均支持该函数。但目前已不推荐使用该函数，尤其是不能用来对URI进行编码。 语法 escape()函数已过时，请使用encodeURI()或encodeURIComponent()函数替代该函数。 escape()函数的语法如下： escape(
JavaScript unescape() 函数详解
午夜灬玫瑰焰钻的博客
01-06 1531
unescape()函数用于对已经使用escape()函数编码的字符串进行解码，并返回解码后的字符串。 该函数属于Global对象，所有主流浏览器均支持该函数。但目前已不推荐使用该函数，尤其是不能用来对URI进行解码。 语法 unescape()函数已过时，请使用decodeURI()或decodeURIComponent()函数替代该函数。 unescape()函数的语法
js面向对象技术基础
06-24
此外，JavaScript还提供了许多其他的面向对象技术，如原型继承、封装、多态和抽象，使得开发者可以开发出更优雅、可维护和可重用的代码。如果你想学习JavaScript的面向对象技术，可以参考上面提到的资料，它详细叙述...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值