面向对象编程：
面向：以什么为主，基于什么模式
对象：由键值对组成，可以用来描述事物，存储数据的一种数据格式
编程：使用代码解决需求
面向过程编程：
按照我们分析好的步骤，按步骤解决问题
优点：性能比面向对象高，适合跟硬件联系很紧密的东西
缺点：没有面向对象那么容易维护，复用，扩展
面向对象编程：
把事务分解成一个个对象，然后由对象之间分工与合作，分工明确，每一个对象都是功能中心
面向对象特性：封装性、继承性 、多态性
封装性：将一个功能封装起来，小封装
将多个函数封装起来，整体封装起来形成一个具体的对象
继承性：让一个不具有某些特性的对象，具有另一个对象的特征
多态性：多种形态，一个功能的不同应用场景
应用场景，创建场景
优点：灵活，代码可复用，容易维护和开发适合多人合作大型软件项目，可以设计出低耦合的系统使系统更加灵活、更加易于维护
缺点：性能比面向过程 低
OOP （Object Oriented，OO）面向对象编程
OOA 面向对象分析：需求，拆分成各种各样的小需求，按照分工协作的形式
不断的拆分，直到拆分成每一个步骤可以直接使用分工协作的方式解决
OOD 面向对象设计：高内聚，低耦合
1、创建对象
单体对象
var obj = {}；
var obj2 = new object（）；
多个对象：
人的对象具有自我节介绍的功能
工厂模式：
JS内置的工厂模式：
function CreatPeople(name,age,like){
this.name = name;
this.age = age;
this.like = like;
this.show = function(){
alert("我叫"+this.name+",今年"+this.age+"岁,喜欢"+this.like);
}
}
var obj = new CreatPe
ople("ABC",20,"PHP");
var obj2 = new CreatPeople("QWE",32,"Python");
obj.show();
obj2.show();
JS内置的工厂模式比传统的工厂模式更高效，复用性更强。
JS内置的工厂模式叫构造函数。
new的原理：
1.创建一个新的空对象
2.将这个对象的__proto__和函数的prototype做连接
3.将这个函数中的this改变，指向new新创建的对象
4.检测函数有没有返回对象，没有返回对象，就返回new创建的对象
构造函数，构造自定义的函数，会在函数中使用this、找到被构造出来的对象
隐患：一旦构造函数被直接执行，会错误的产生大量的全局变量
解决隐患：解决不了
自我约束：构造函数不要直接执行
防止误操作：行业习惯：为了防止构造函数被直接执行，产生大量的全局变量，一般将需要被构造的函数的首字母大写，
以此标志构造函数和正常函数的区别
function Fn(){
this.name = "root";
}
var f = new Fn()
console.log(f.name)
console.log(name)
this的指向问题
默认绑定：window
隐式绑定：执行对象
显示绑定：函数的方法，强行绑定
new绑定：将函数中的this指向了new出来的对象
【构造函数】
用来初始化新创建的对象的函数是构造函数。在例子中，Foo()函数是构造函数
【实例对象】
通过构造函数的new操作创建的对象是实例对象。可以用一个构造函数，构造多个实例对象
function Foo(){};
var f1 = new Foo;
var f2 = new Foo;
console.log(f1 === f2);//false
【原型对象及prototype】
构造函数有一个prototype属性，指向实例对象的原型对象。通过同一个构造函数实例化的多个对象具有相同的原型对象。经常使用原型对象来实现继承
function Foo(){};
Foo.prototype.a = 1;
var f1 = new Foo;
var f2 = new Foo;
console.log(Foo.prototype.a);//1
console.log(f1.a);//1
console.log(f2.a);//1
【constructor】
原型对象有一个constructor属性，指向该原型对象对应的构造函数
function Foo(){};
console.log(Foo.prototype.constructor === Foo);//true
由于实例对象可以继承原型对象的属性，所以实例对象也拥有constructor属性，同样指向原型对象对应的构造函数
function Foo(){};
var f1 = new Foo;
console.log(f1.constructor === Foo);//true
【proto】
实例对象有一个proto属性，指向该实例对象对应的原型对象
function Foo(){};
var f1 = new Foo;
console.log(f1.__proto__ === Foo.prototype);//true
案例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body{
width: 100%;
height: 100%;
/* background: url(img/bg.jpg); */
background-color: #000;
}
#container{
width: 100%;
height: 900px;
cursor: pointer;
position: relative;
left: 0;
top: 0;
overflow: hidden;
}
.fire{
width: 30px ;
height: 30px;
position:absolute ;
bottom: 0;
background: url(img/0.jpg) no-repeat;
border-radius: 50%;
background-size: cover;
}
.small-fire{
width: 100px;
height: 100px;
position: absolute;
border-radius: 50%;
background:url(img/500.gif) no-repeat;
background-size: cover;
}
</style>
</head>
<body>
<div id="container"></div>
</body>
<script src = "../move.js"> </script>
<script src = "../public.js"> </script>
<script>
// OOA:分析
// 烟花，点击出现烟花，运动到鼠标点击处炸开。运动到随机位置，删除
// 实现步骤：
// 1.创建主题烟花。设置样式，和初始位置
// 2.开始运动，从底部上升到鼠标高度。运动结束
// 3.删除主题烟花，创建随机烟花
// 4.立即运动，到终点，删除小烟花
// ood设计
// function Fire(){
// // 创建主题烟花，设置样式，位置
// this.init()
// }
// Fire.prototype.init = function(){
// // 主题烟花，设置样式，和位置
// 2.开始运动，运动结束
// this.animate()
// }
// Fire.prototype.animate = function(){
// 开始运动，删除主体烟花
// 3.创造小烟花
// this.createSmall()
// }
// Fire.prototype.createSmall = function (){
// // 创建小烟花，运动，删掉
// }
// ============================
function Fire (options){ //接受传参
this.x = options.x; //这里把鼠标点击的横坐标赋值给this的x
this.y = options.y; //这里把鼠标点击纵坐标赋值给this的y
this.cont = options.parent; //这里把点击事件的this赋值给了cont
// 运行创建烟花的封装函数
this.init(); //运行下面创建主体烟花的函数运行
}
Fire.prototype.init = function(){ //创造主体烟花的函数
//主题烟花的新建，样式，位置以及插入的设置
this.ele = document.createElement("div"); //创建一个元素节点，一个div元素并设置名称为ele
this.ele.className = "fire"; //这里把类名为"fire"的class类赋值给新增加的div元素ele
this.ele.style.left = this.x +"px"; //这里把烟花的定位left设置成鼠标点击x坐标，
this.cont.appendChild(this.ele); //这里把新创建的div元素ele插入到cont里面
this.animate(); //运行下一步，以回调函数的方式
}
Fire.prototype.animate = function(){ //创建一个 运动以及小烟花的函数
//开始运动，这里运行运动的封装函数move，（里面包含获取样式的封装函数）
move(this.ele,{ //move是之前封装的运动的函数，把插入的div元素和鼠标点击的y坐标赋给了的top，还有删除元素及运行下一个函数的回调函数，传给move，形成一个运动效果
top:this.y
},function(){
//主体烟花出现后，删除这个主体烟花，并创建小烟花
this.ele.remove();
this.createSmall()
}.bind(this)) //这里的bind是找回this
}
Fire.prototype.createSmall = function(){ //创建小烟花和删除小烟花函数
//创建小烟花，运动，然后删除
var num = random(10,20); //这里是创建小烟花的个数的随机数
var r = random(100,500)
// console.log(num);
for(var i=0;i<num;i++){ //循环遍历每一个小烟花，给他设置样式以及位置
let div = document.createElement("div"); //创建新的div
div.className ="small-fire"; //赋予样式
div.style.left = this.x +"px"; //设置定位的left为鼠标的x坐标
div.style.top = this.y +"px"; //设置定位的top为鼠标点击的坐标
div.setAttribute("i",i) //这里i的作用为给新生成的div一个编号，后期删除的效果会比较好
this.cont.appendChild(div); //在cont插入新创建的div
//生成烟花位置的随机数的坐标
// var l = random(0,this.cont.offsetWidth - div.offsetWidth); //烟花位置的l为从到cont的宽度和高度减去新创建的小烟花的高宽之间的随机数
// var t = random(0,this.cont.offsetHeight - div.offsetHeight);
// console.log(cont);
var l = parseInt(Math.cos(Math.PI/180*(360/num*i))*r)+this.x;
var t = parseInt(Math.sin(Math.PI/180*(360/num*i))*r)+this.y;
move(div,{ //move，生成运动传入元素div和位置（定位信息）
left:l,
top:t
},function(){
div.remove() //随即把插入的div删除
})
}
}
var ocont = document.getElementById("container"); //获取div元素
ocont.onclick = function(eve){ //设置点击事件，点击div产生事件
var e = eve ||window.event; //事件兼容以及获取事件
new Fire({ //构造一个面向对象的函数，并传参
x:e.offsetX, //把鼠标点击的横坐标赋值给x
y:e.offsetY, //把鼠标点击的纵坐标赋值给y
parent:this //把点击事件的this赋值给parent
});
}
-
javascript中=、==、===区别详解
javascript中=.==.===区别详解今天在项目开发过中发现在一个小问题.在判断n==""结果当n=0时 n==""结果也返回了true.虽然是个小问题 ...
-
JavaScript中return的用法详解
JavaScript中return的用法详解 最近,跟身边学前端的朋友了解,有很多人对函数中的this的用法和指向问题比较模糊,这里写一篇博客跟大家一起探讨一下this的用法和指向性问题. 1定义 t ...
-
javascript 中合并排序算法 详解
javascript 中合并排序算法 详解 我会通过程序的执行过程来给大家合并排序是如何排序的... 合并排序代码如下: <script type="text/javascript& ...
-
javascript中的this作用域详解
javascript中的this作用域详解 Javascript中this的指向一直是困扰我很久的问题,在使用中出错的机率也非常大.在面向对象语言中,它代表了当前对象的一个引用,而在js中却经常让我觉 ...
-
JavaScript中this的用法详解
JavaScript中this的用法详解 最近,跟身边学前端的朋友了解,有很多人对函数中的this的用法和指向问题比较模糊,这里写一篇博客跟大家一起探讨一下this的用法和指向性问题. 1定义 thi ...
-
JavaScript中数组Array方法详解
ECMAScript 3在Array.prototype中定义了一些很有用的操作数组的函数,这意味着这些函数作为任何数组的方法都是可用的. 1.Array.join()方法 Array.join()方 ...
-
JavaScript中的注释问题详解？ 部分3
注释:解释代码的含义,浏览器中不执行. 方便其他程序员了解代码 ,也可以注释自己不需要的代码(开发过程中)! 1. 单行注释 // 用于一行代码上面 2.多行注释 /* */ 用于一段代码上面 或者是 ...
-
JavaScript中的async/await详解
1.前言 async函数,也就是我们常说的async/await,是在ES2017(ES8)引入的新特性,主要目的是为了简化使用基于Promise的API时所需的语法.async和await关键字 ...
-
JavaScript中的execCommand()命令详解及实例展示
execCommand方法是执行一个对当前文档,当前选择或者给出范围的命令.处理Html数据时常用如下格式:document.execCommand(sCommand[,交互方式, 动态参数]) ,其 ...
随机推荐
-
彻底解决phpcms v9升级后,文章发布出现： Mysql 1267错误：MySQL Error : Illegal mix of collations 解决办法
彻底解决phpcms v9升级后,文章发布出现: MySQL Query : SELECT * FROM `withli_a`.`v9_keyword` WHERE `keyword` = '吼吼' ...
-
linux登录mysql
mysql -u 用户名 -p密码 mysql -u root -psqj888
-
转: css实现垂直居中的方法
利用 CSS 来实现对象的垂直居中有许多不同的方法,比较难的是选择那个正确的方法.我下面说明一下我看到的好的方法和怎么来创建一个好的居中网站. 用 CSS 实现垂直居中并不容易.有些方法在一些浏览器中 ...
-
UISwitch 开关控件
UISwitch iOS中的开关控件,只有两种状态,打开或关闭. aSwitch.tintColor = [UIColor redColor]; //关闭状态下的渲染颜色 aSwitch.onTint ...
-
Web browse的发展演变
Web browse 译为中文是网络浏览器或网页浏览器. Web浏览器如今可谓遍地开花,无论你最终选择了什么浏览器,你可能都会举得他们的功能性想当然的,但是你们可能不知道这些Web浏览器是20年发展的 ...
-
wxformbuilder在python如何使用
1使用builder 创建界面并进行布局 2选择python选项 得到相应代码 将代码保存在 一个py文件里面 创建一个新的入口文件 main.py import wx import UIfile c ...
-
[转载]AngularJS之Factory vs Service vs Provider
http://www.oschina.net/translate/angularjs-factory-vs-service-vs-provider http://tylermcginnis.com/a ...
-
PSI分析
"SI是对多个TS流的描述,它包含了PSI" PSI只提供了单个TS流的信息,使接收机能够对单个TS流中的不同节目进行解码:但是,它不能提供多个TS流的相关业务,也不能提供节目的类 ...
-
【基础】一个简单的MVC实例及故障排除
Controller: public ActionResult Index() { string setting = "ApplicationServices"; var conn ...
-
apache配置httpd.conf相关
1.apache开启压缩AddOutputFilterByType 找到并打开apache/conf目录中的httpd.conf文件 在httpd.conf中打开deflate_Module,head ...
