标签：

面向东西

东西 : (黑盒子)不了解内部布局, 知道外貌的各类操纵.

面向东西 : 不了解道理的情况下 会使用成果 .

面向东西是一种通用思想,并非编程中能用,任何工作都能用.

编程语言的面向东西的特点：

? 封装 : 看不到里面的对象 , 用好外貌成果.

? 担任 : 从父类担任一些要领 , 属性 , 子类又有一些新的特性.

? 多态

? 抽象 ： 抽取一个成果里面多个核心的成果模块。

? 思想： 高内聚、低耦合

? 低耦合 ：每个成果模块之间耦合度要低

? 高内聚 ：模块内部要紧密相连

面向东西的气势派头 都是 从 new 开始的 js东西的分类：

宿主东西、内置东西 （Math）、内部东西（ new ）

结构函数: 通过 new 挪用的

东西是通过结构函数构建出来的，，东西用来存储数据

结构函数 -> 东西 -> 存储数据

为了区分结构函数与普通函数： 结构函数的首字母 大写 结构函数 与 普通函数的区别

普通函数如果内部没有return的时候 , 返回的是undefined

结构函数内部没有return返回值的时候，返回的结构出来的东西。

结构函数内部的this指向，指向的是当前东西。

总结：结构函数在new的时候构建东西，会在内部自动返回一个this 指向结构的东西。

面向东西实现流程: 1. 全局变量作为属性 2. 把东西的要领放在prototype 3. new实例化东西 4. this指向 function 结构函数名称 首字母大写(){ this.属性 = 属性值 //挪用初始化要领 this.init(); } 结构函数名称 首字母大写 .prototype = { //初始化要领 : 整合各个成果模块 init : function(){ //挪用绑定事件模块 this.eventBind(); }, fn1 : function(){ }, fn2 : function(){ }, eventBind : function(){ } } new 结构函数名称 首字母大写 (); 面向东西实现简版轮播图 分析： 成果模块拆分 1: 图片移动 2：下一张的成果 3：上一张的成果 4：事件绑定模块 // 结构Banner函数 function Banner(){ this.oimgbox = document.querySelector('.imgbox'), this.oimg = document.querySelectorAll('img'), this.obtn = document.querySelectorAll('span'), this.distance = this.oimg[0].offsetWidth, this.count = 0 ; //挪用初始化模块 this.init(); } // Banner.prototype = { //初始化模块 init : function(){ this.oimgbox.style.width = this.oimg.length * this.distance + 'px'; this.eventBind(); }, //图片移动模块 toimg : function(){ move(this.oimgbox,{'left': -this.distance * this.count}) }, //下一张 next : function(){ if(this.count >= this.oimg.length - 1){ this.count = 0; }else{ this.count++; } this.toimg(); }, //上一张 pre : function(){ if(this.count <= 0 ){ this.count = this.oimg.length - 1; }else{ this.count--; } this.toimg(); }, //事件绑定模块 eventBind : function(){ addEventListener(this.obtn[1],'click',this.next.bind(this)); addEventListener(this.obtn[0],'click',this.pre.bind(this)); } } new Banner(); 面向东西实现选项卡效果 function Tab(){ this.obtn = document.querySelectorAll('span'); this.oarticle = document.querySelectorAll('article'); this.init(); } Tab.prototype = { init : function(){ this.eventBind(); }, // 断根类名 clearClass : function(){ for(let i = 0 ,k = this.obtn.length; i < k; i++){ this.obtn[i].className = ''; this.oarticle[i].className = ''; } } , addClass :function(index){ this.clearClass(); this.obtn[index].className = 'active'; this.oarticle[index].className ='show'; }, eventBind : function(){ for(let i = 0, k = this.obtn.length; i<k; i++){ // this.obtn[i].addEventListener('click',this.addClass.bind(this,i)); this.obtn[i].addEventListener('click',this.addClass.bind(this,i)); } } } new Tab(); 随机点名 <div class="box">随机点名</div> <span class="btn">开始</span> 1.初始化 2.文字变革 按时器 3.开始 4.结束 5.判断什么时候开始,什么时候结束 6.控制flag 6.事件绑定 <script> var arr =['黄子韬','白敬亭','范世錡','黄景瑜','秦霄贤','彭昱畅','汪苏泷','侯明昊','秦凯旋']; function RandomName(){ this.box = document.querySelector('.box'); this.btn = document.querySelector('.btn'); this.flag = false; this.init(); } RandomName.prototype = { init : function(){ this.eventBind(); }, textChange : function(){ var _this = this; clearInterval(this.timer); this.timer = setInterval(function(){ //每隔一段事件生成一个下标 let num = parseInt(Math.random() * arr.length); //按照随机的下标 取到名字 然后交给 box； _this.box.innerHTML = arr[num]; //添加随机颜色 _this.box.style.color = randomColor(); },100) }, //开始 startTxt : function(){ this.btn.innerHTML = '开始'; }, //暂停 stopTxt : function(){ this.btn.innerHTML = '暂停'; }, //判断是否开始 isStart : function(){ if(this.flag){ this.textChange(); this.stopTxt(); }else{ clearInterval(this.timer); this.startTxt(); } }, //控制flag controlFlag : function(){ this.flag = this.flag ? false : true; //用flag控制 开始 或 暂停 this.isStart(); }, //evntBind: eventBind : function(){ this.btn.addEventListener('click',this.controlFlag.bind(this)); } } new RandomName(); </script> 鼠标拖拽 function Drag(){ this.div = document.querySelector('div'); //界说一个空变量 this.fn = null; this.init(); } Drag.prototype ={ init : function(){ this.eventBind(); }, //鼠标按下 获取位置 Down : function(e){ e = e || window.event; this.x = e.offsetX; this.y = e.offsetY; //绑定鼠标移动事件 fn 挪用 move() document.addEventListener('mousemove',this.fn = this.Move.bind(this)); document.addEventListener('mouseup',this.Up.bind(this)); }, //鼠标移动 Move : function(e){ e = e || window.event; let l = e.clientX - this.x, t = e.clientY - this.y; this.div.style.left = l +'px'; this.div.style.top = t + 'px'; }, //鼠标抬起 绑定事件不移动 Up : function(){ document.removeEventListener('mousemove',this.fn); }, eventBind : function(){ //鼠标按下 this.div.addEventListener('mousedown',this.Down.bind(this)); } } new Drag(); 面向东西实现完整版轮播图 <script> function Banner(){ this.oimgbox = document.querySelector('.imgbox'); this.oimg = document.getElementsByTagName('img'); this.obtn = document.querySelectorAll('span'); this.ocricle = document.querySelector('.circlebox'); this.osection = document.querySelector('section'); this.timer = null; this.distance = this.oimg[0].offsetWidth; this.count = 0; this.init(); } Banner.prototype = { //初始化 init : function(){ this.clone(); this.autoplay(); this.setWidth(); this.addLi(); this.addClass(); this.eventBind(); }, setWidth : function(){ this.oimgbox.style.width = this.oimg.length * this.distance +'px'; }, //克隆图片 clone : function(){ this.firstimg = this.oimg[0].cloneNode(); this.oimgbox.appendChild(this.firstimg); }, // 图片移动 toImg : function(){ move(this.oimgbox,{'left' : -this.distance * this.count}); }, //下一张 next : function(){ if(this.count >= this.oimg.length -1){ this.oimgbox.style.left = 0; this.count = 1; }else{ this.count++; } this.toImg(); this.clearClass(); this.oli[this.count >= this.oimg.length -1 ? 0:this.count].className = 'active'; }, //上一张 pre : function(){ if(this.count <= 0){ this.oimgbox.style.left = -this.distance *(this.oimg.length - 1) + 'px'; this.count = this.oimg.length -2; }else{ this.count--; } this.toImg(); this.clearClass(); this.oli[this.count].className = 'active'; }, //按时器 autoplay : function(){ var _this = this; clearInterval(this.timer); this.timer = setInterval(() => { _this.next(); }, 3000); }, //断根按时器 clearTimer : function(){ clearInterval(this.timer); }, //添加圆点 addLi : function(){ for(let i = 0 ;i < this.oimg.length -1; i++){ this.createLi = document.createElement('li'); this.ocricle.appendChild(this.createLi); } this.oli = document.getElementsByTagName('li'); this.oli[0].className = 'active'; }, //断根类名 clearClass : function(){ for(let i = 0 ,k = this.oli.length;i<k;i++){ this.oli[i].className = ''; } }, addClass : function(){ for(let i = 0,k = this.oli.length;i<k;i++){ addEventListener(this.oli[i],'mou搜索引擎优化ver',()=>{ this.clearClass(); this.oli[i].className = 'active'; this.count = i; this.toImg(); }) } }, //事件挪用 eventBind : function(){ addEventListener(this.obtn[0],'click',this.next.bind(this)); addEventListener(this.obtn[1],'click',this.pre.bind(this)); addEventListener(this.osection,'mou搜索引擎优化ver',this.clearTimer.bind(this)); addEventListener(this.osection,'mou搜索引擎优化ut',this.autoplay.bind(this)); } } new Banner(); </script>

js - 面向东西 - 小案例：轮播图、随机点名、选项卡、鼠标拖拽

标签：

原文地点：https://www.cnblogs.com/zhaoxinran997/p/12189337.html