OOA: 放大镜,等比例移动 选择元素 绑定事件 进入 显示 离开 隐藏 移动 遮罩层跟随鼠标移动 边界限定 计算移动的距离占了总距离的比例 根据比例,设置右侧图片的位置 OOD: function Magnifier(){ // 1. 选择元素 // 2. 绑定事件 } Magnifier.prototype.addEvent = function(){ // 进入事件 // 3. 显示 // 离开事件 // 4. 隐藏 // 移动事件 // 5. 跟随移动功能,计算比例,设置位置 } Magnifier.prototype.show = function(){ // 显...
作者:极客小俊 我不用拼过聪明人,我只需要拼过那些懒人 我就一定会超越大部分人! Blog博客园,原创web技术文章 个人博客: cnblogs.comjavaScript 面向对象之构造函数、工厂方式、字面量什么是面向对象编程? 面向对象的英文全称:Object Oriented Programming , 简称OOP首先我们要先了解面向过程的编程思想, 就是代码从上到下都没有封装的意思,某写代码裸露在外、没有模块化、代码杂乱无章的写法. 并且还不好维护,也不便于...
JavaScript面向对象程序设计之继承(一) 1. 原型链式继承 1.1 原型模式 原型模式是JavaScript中创建对象的一种最常见的方式。JavaScript是一种弱类型的语言,没有类的概念,也不是一种面向对象的语言。但是,在JavaScript中,借助函数的原型(也就是prototype)可以实现类的功能。 使用原型模式创建对象的基本做法如下: function Person (name) {this.name = name // 私有属性 } // 公共方法 Person.prototype.sayName = functio...
JavaScript对象及初识面向对象 1.对象1.1 对象是什么1.2 创建对象1.2.1 自定义对象1.2.2 内置对象2.构造函数和原型对象2.1 构造函数2.1.1 调用构造函数的步骤 2.2 原型对象 3.继承3.1 原型链3.2 对象继承3.2.1 借用构造函数3.2.2 组合继承1.对象 JavaScript中提供了常用的基本数据类型,这些数据类型如下: number (数值类型)String (字符串类型)boolean (布尔类型)null (空类型)nudefined (未定义类型)object :一种复杂...
JavaScript数据类型 number(数值类型)string(字符串类型)boolean(布尔类型)null(空类型)undefined(未定义类型)object:一种复杂的数据类型,该类型实例化的对象是一组数据和功能的集合 对象是什么 JavaScript中的对象与Java中的对象一样,对象是包含相关属性和方法的集合体。 在JavaScript中所有的事物都是对象,如字符串,数字,数组,日期等,对象是拥有属性和方法的数据。属性是与对象相关的值,方法是能够在对象上执行的动作。...
面向对象编程 一、面向对象的概念 ES有两种开发模式:函数式 面向过程 面向对象(OOP) 类:类是对象的类型模板 实例:实例就是根据类创建的对象 对象的组成: 属性 特性、特征 名词 变量方法 功能、行为 动词 函数 二、对象的创建 1.实例创建//学生对象var obj=new Object();obj.no='10001';obj.name='李四';obj.grade='二年级';obj.test=function(){console.log('考试中........');};2.字面量形式创建var obj = {};//实例obj.nam...
1.继承 面向对象原型继承JavaScript 类:模板 对象:基于的实例<script>var student={name:'xxh',age:3,run:function () {console.log(this.name+"run....")}};var xiaoming={name:'xiaoming'};xiaoming._proto_=student;var bird={fly:function () {console.log(this.name+"fly.....")}};xiaoming._proto_=bird;</script> 面向对象class继承class关键字是在ES6引入的1.义一个类,属性,方法 class Student{constructor(name){this...
4、构造函数至今,我们已经学习了非常多的调用函数的方式: 1对象打点调用2圆括号直接调用 ==>3定时器调用 ==>匿名 全局 直接叫上面两种函数,严格模式下里面的this都是undefined ,非严格模式下是windows4事件处理函数调用 ==>5数组枚举调用它们体现的不同点就是函数上下文不用,它们里面的this不一样!6新的函数调用方法!就是function被当作构造器用 new 运算符来调用函数!new 就是一个运行函数的运算符new运算符能够调用函数,还...
4、构造函数 至今,我们已经学习了非常多的调用函数的方式:1对象打点调用 2圆括号直接调用 ==> 3定时器调用 ==>匿名 全局 直接叫上面两种函数,严格模式下里面的this都是undefined ,非严格模式下是windows 4事件处理函数调用 ==> 5数组枚举调用 它们体现的不同点就是函数上下文不用,它们里面的this不一样! 6新的函数调用方法!就是function被当作构造器 用 new 运算符来调用函数!new 就是一个运行函数的运算符 'new运算符能够调...
【转】 前端笔记之JavaScript面向对象(一)Object&函数上下文&构造函数&原型链 一、对象(Object) 1.1 认识对象 对象在JS中狭义对象、广义对象两种。 广义:相当于宏观概念,是狭义内容的升华,高度的提升,范围的拓展。狭义:相当于微观概念,什么是“狭”?因为内容狭隘具体,范围窄所以称为“狭” l 狭义对象 就是用{}这种字面量的形式定义的对象,它是一组属性的无序集合var obj = {name : "小明",age : 12,sex : "男",hobb...
【转】 前端笔记之JavaScript面向对象(二)内置构造函数&相关方法|属性|运算符&继承&面向对象 一、复习 1.1复习上下文函数的调用方式上下文fun()windowobj.fun()objbox.onclick = funboxsetInterval(fun,1000) setTimeout(fun,1000)windowarray[8]()arraynew fun()秘密创建的新对象 要看清楚最终的函数调用者是谁。 IIFE也被当做函数直接运行,IIFE的this都是window对象 函数的arguments是类数组对象,比如传入的第0项参数是函数...
【转】 前端笔记之JavaScript面向对象(四)组件化开发&轮播图|俄罗斯方块实战 一、组件化开发 1.1组件化概述 页面特效的制作,特别需要HTML、CSS有固定的布局,所以说现在越来越流行组件开发的模式,就是用JS写一个类,当你实例化这个类的时候,页面上的效果布局也能自动完成。new Carousel(); 实例化后,页面中就有一个轮播图的布局结构,而且可以通过参数传递进去。 这个new里面封装了HTML、CSS、JS的业务逻辑。组件开发的规律...
全手打原创,转载请标明出处:https://www.cnblogs.com/dreamsqin/p/13745195.html, 多谢,=。=~(如果对你有帮助的话请帮我点个赞啦)重新学习JavaScript是因为当年转前端有点儿赶鸭子上架的意味,我一直在反思我的知识点总是很零散,不能在脑海中形成一个完整的体系,所以这次想通过再次学习将知识点都串联起来,结合日常开发的项目,达到温故而知新的效果。与此同时,总结一下我认为很重要但又被我遗漏的知识点~构造函数不使用...
事件基础事件概述JavaScript 使我们有能力创建动态页面,而事件是可以被 JavaScript 侦测到的行为。 简单理解: 触发--- 响应机制。 网页中的每个元素都可以产生某些可以触发 JavaScript 的事件,例如,我们可以在用户点击某按钮时产生一个 事件,然后去执行某些操作。时间三要素事件源(谁):触发事件的元素 事件类型(什么事件): 例如 click 点击事件 事件处理程序(做啥):事件触发后要执行的代码(函数形式),事件处理函数<...
前言 JavaScript 的核心是支持面向对象的,同时它也提供了强大灵活的 OOP 语言能力。本文从对面向对象编程的介绍开始,带您探索 JavaScript 的对象模型,最后描述 JavaScript 当中面向对象编程的一些概念。 面向对象编程 面向对象编程是用抽象方式创建基于现实世界模型的一种编程模式。它使用先前建立的范例,包括模块化,多态和封装几种技术。今天,许多流行的编程语言(如Java,JavaScript,C#,C+ +,Python,PHP,Ruby 和 Obj...