Pixi.JS——JavaScript面向对象项目
刘星火
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="./public/js/pixi.min.js"></script>
<title>Document</title>
</head>
<body>
<!-- 面向过程 -->
<!-- 1.和面 - 多少面粉 多少水
2.切面 - 多宽 多细
3.煮面 - 多长时间
4.拌面 - 多少酱 多少面
5.吃面 - 一口吃多少-->
<!-- 面向对象 -->
<!-- 1.找一个面馆
2.点一碗面
3.等着吃 -->
<!-- 面向对象：对面向过程的高度封装（高内聚低耦合） -->
<!-- 在开发过程中
+ 面向过程(轮播图)
==> 找到一个对象，能帮我完成轮播图
==> JS 本身没有，我们需要第三方
==> swiper:生成一个完成轮播图的对象
+ 我们：
==> 当你需要完成一个功能A的时候
==> 我们找到JS有没有这个完成功能A 的对象
==> 如果没有，我们制造一个“机器”
==> 这个“机器"可以制造完成 功能A 的对象 -->
<!-- “机器” 是什么
+ 能力：能创造一个有 属性 有 方法 的合理的 对象
+ 构造函数就是这个“机器” -->
<!-- 模拟：选项卡 -->
<!--
+ 面向过程
1.btns：[按钮1，按钮2，按钮3]
2.tabs：[盒子1，盒子2，盒子3]
3.事件：让btns 里面的成员添加点击事件，操作btns 和tabs里面的每一个
+ 抽象成对象
o = {
btns:[按钮1，按钮2，安妮3],
tabs:[盒子1，盒子2，盒子3]
方法：function(){
给o.btns 里面的每一个绑定事件
操作 o.btns 和 o.tabs 里面的每一个操作类名
}
}
+ 面向对象
=> 书写一个构造函数
=> 能创建一个对象包含三个成员
1.btns
2.tabs
3.方法，能操作自己的btns 和tabs的方法
=> 使用这个构造函数创建一个对象，根据你传递参数来实现选项卡效果
-->
<script>
// ******************js创建对象的四种方式****************
// 一.字面量(不推荐)
let o1 = {
name: 'jack',
age: 18,
gender: '男',
}
let o2 = {
name: 'Rose',
age: 20,
gender: '女',
}
// 二.内置构造函数创建
let o3 = new Object()
o3.name = 'jack'
o3.age = 18
let o4 = new Object()
o4.name = 'Rose'
o4.age = 20
// 三.工厂函数创建对象
// (1)先自己做一个工厂函数
// (2)使用自己做的工厂函数来创建对象
// 1.创建一个工厂函数
function createObj(name, age, gender) {
// 1-1,手动创建一个对象
let obj = {}
// 1-2 手动添加成员
obj.name = name
obj.age = age
obj.gender = gender
// 1-3 手动返回这个对象
return obj
}
// 2.使用工厂函数创建对象
let o5 = createObj('jack', 18, '男')
console.log(o5)
// 四.自定义构造函数创建(推荐使用构造函数创建对象)
// 1.自己书写一个构造函数
// 2.使用构造函数创建对象
// 构造函数
// + 就是普通函数，没有任何区别
// + 只有在你调用的时候和 new 关键字连用，才有构造函数的能力
// => 只要你和 new 关键字连用 this => 当前对象(new 前面的那个变量名)
// 1.创建一个构造函数
function createObj2(name, age, gender) {
// 1-1 自动创建一个对象
// 1-2 手动向对象上添加内容
this.name = name
this.age = age
this.gender = gender
// 1-3 自动返回这个对象
}
//创建对象
let o6 = new createObj2('jack',20,'男') //本次调用的时候，函数内部的this 就指向o1
</script>
</body>
</html>
类似资料：