首页 > 代码库 > javascript 面向对象写法的简单小例子,方面以后参考
javascript 面向对象写法的简单小例子,方面以后参考
面向对象写法的简单小例子，也即是一个小模板，方便以后拿来参考，如果有误，请各位大神多多指点。
思想：主要给#box添加颜色和添加内容，一个方法是添加颜色，另一个方法是添加内容，然后编写的面向对象写法。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title></title></head><style>#box{ width:100px; height:100px; background:orange;}</style><body> <div id="box"></div></body></html><script> //构造函数 function MyBox(options) { //此刻option.box 指的是 box:document.getElementById(‘box‘) this.box = options.box; //每个方法最好分开来写 //切换颜色的方法 this.boxColor(); //给box添加内容 this.addSpan(); } //编写颜色的方法 MyBox.prototype.boxColor = function() { //那么在这里也就可以继承this.box 这个属性 var myBox = this.box; //这里创建一个span,这里只是演示，让我们在addSpan中也能访问到this.span this.span = document.createElement(‘span‘); var boxBlue = function() { myBox.style.background = ‘blue‘; } // 监听事件 box.addEventListener(‘click‘,boxBlue); } //添加span的方法 MyBox.prototype.addSpan = function() { var myBox = this.box; //继承下来的this.span 可以拿来这里用 var span = this.span; span.innerHTML = ‘请大神多多指教‘; myBox.appendChild(span); } //new 一个对象，然后参数又是一个对象; new MyBox({ box:document.getElementById(‘box‘) });</script>
javascript 面向对象写法的简单小例子,方面以后参考
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。