上个星期五，2.14，一年一度的情人节，汹涌的疫情解救了一众每逢甜蜜节日只能吃狗粮的单身狗程序员，闲着无事，听了一节关于面向对象的课，以面向对象的方式选择英雄联盟的英雄，有点收获，分享一下。
面向对象与面向过程
很多人都知道面向对象和面向过程这两种编程方式，但是具体两者有什么区别，还是不能讲的很明白，以前我听过一个段子区分这两种方式，我认为简洁明了：
以妹子冲话费为例：
如果面向过程的方式，那需要几个步骤：打开手机-找到微信或者支付宝-打开程序-找到话费充值入口-输入手机号码-输入充值金额-输入支付密码-充值成功
如果以面向对象的方式，那就简单了，只需要找一个男朋友，充话费的时候，发出一条消息指令就可以完成充值了。
es6定义对象与模块化
对象定义
class Person {
constructor(name){
this.name = name
}
static num = 10; //静态属性 不需要实例化
fn () {
console.log('can write code')
}
}
let zhangsan = new Person('张三')
console.log(zhangsan)
class Man extends Person {
constructor(name){
super(name)
}
fn(){
super.fn(); //扩展父类方法
console.log('Man fn can write code')
}
}模块化
// module_a.js
const obj = {
name:'aicai'
}
//只能导出一个
export default obj
//导出多个
export let a = 10;
export let b = 10;
// 引用
// 导入
import myobj, {a,b} from './module_a.js'
console.log(myobj, {a,b})
import * as obj from './module_a.js'
console.log(obj)
// 按需导入 . 延迟导入
document.onclick = function(){
import('./module_a.js').then(res=>{
console.log(res)
})
}实例分析
面向对象进行开发，分以下步骤：
研究对象->抽象类->研究类之间关系->组织关系
英雄联盟从登陆到选择英雄，抽象类可分为：玩家类 英雄类 技能类 皮肤类 游戏管理类
各个类之间关系如下图：
理清了对象间关系我们就可以开始代码了：
------------------------------------定义对象-----------------------------------------
// 游戏类 实例化 实现用户登录
export default class Game {
construtor(){
this.player = null;
}
login (userName) {
this.player = new Player(userName);
this.player.addHero(new Yase())
this.player.addHero(new Luban())
}}
// 用户类 可以添加英雄
export default class Player {
constructor (name) {
this.name = name;
this.heros = []
}
addHero (hero) {
this.heros.push(hero)
}}
// 每个英雄类 姓名 图片 技能 皮肤登属性
export default class Yase {
constructor () {
this.name = '亚瑟';
this.icon = '';
this.skills = [new s16610,new s16620]; //实例化两个技能
this.skins = [];
}
}
// 技能 名称 图标等属性
export default class s16610 {
constructor(){
this.name = '契约之盾'
this.icon = ''
}
}
------------------------------------页面布局-----------------------------------------
<div class="body login">
<input type="text" class="user-name">
<div class="button">
登录
</div>
</div>
<div class="body game">
<div class="heros list-box">
<div class="title">
英雄列表
</div>
<div class="hero-box">
</div>
</div>
<div class="skills list-box">
<div class="title">
技能列表
</div>
<div class="skill-box">
</div>
</div>
<div class="user-info list-box">
<div class="title">
用户信息
</div>
<div class="info-row">
<span class="row-title">登录名:</span>
<span class="row-name"></span>
</div>
<div class="info-row">
<span class="row-title">当前英雄:</span>
<span class="row-hero"></span>
</div>
</div>
</div>
<style>
body{
margin:0;
padding:0;
}
.body{
position: fixed;
width: 100%;
height: 100%;
text-align: center;
}
.login{
width: 400px;
height: 300px;
margin:0 auto;
position: absolute;
top: 50%;
left:50%;
margin-left: -200px;
margin-top: -150px;
border: 1px solid #ccc;
padding:20px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
}
.login .button{
margin-left: 20px;
cursor: pointer;
}
.body.game{
display: none;
}
.game{
width: 700px;
height: 500px;
position: absolute;
top: 50%;
left:50%;
margin-left: -350px;
margin-top: -250px;
border: 1px dashed #ccc;
}
.list-box{
width: 30%;
height: 100%;
float: left;
}
.list-box .title{
width: 100%;
height: 40px;
line-height: 40px;
color: #000;
font-weight: bold;
}
</style>
------------------------------------面向对象编程-------------------------------------
import Game from './game/game.js';
let game = new Game();
let elements = {
login:{
loginView: document.querySelector('.login'),
loginName: document.querySelector('.user-name'),
loginButton: document.querySelector('.button')
},
game:{
gameView: document.querySelector('.game'),
nameView: document.querySelector('.game .user-info .info-row .row-name'),
heroView: document.querySelector('.game .heros .hero-box'),
heroshow: document.querySelector('.game .user-info .info-row .row-hero'),
skillView: document.querySelector('.game .skills .skill-box'),
}
}
elements.login.loginButton.onclick = function () {
let userName = elements.login.loginName.value;
console.log(userName)
if(userName !== ''){
game.login(userName) // 登录
elements.login.loginView.style.display = 'none';
elements.game.gameView.style.display = 'block';
// 显示用户
elements.game.nameView.innerHTML = game.player.name;
console.log(game)
// 显示英雄
game.player.heros.forEach(hero => {
let heroItem = document.createElement("div");
heroItem.classList.add('hero-name');
heroItem.innerHTML = `<span>${hero.name}</span`;
elements.game.heroView.appendChild(heroItem);
heroItem.onclick = function(){
elements.game.heroshow.innerHTML = hero.name;
console.log(game)
elements.game.skillView.innerHTML = ''
hero.skills.forEach(skill=>{
let skillItem = document.createElement("div");
skillItem.classList.add('hero-name');
skillItem.innerHTML = skill.name;
elements.game.skillView.appendChild(skillItem);
})
}
});
}
}-------------------------------------------------------------------------------------------------
git地址：https://github.com/aicai0/demo_object_programe.git
如有问题，欢迎探讨，如果满意，请手动点赞，谢谢！🙏
及时获取更多姿势，请您关注！！！
