JS
学习笔记
- 因为
html
里面创建了一个AcGame类的一个对象 因此在html
里直接调用用js
写的一个对象从而达到用js
渲染html
的功能 html源码:
{% load static %} <!--查找并载入静态文件static的文件夹-->
<head>
<!--引入jQuery的css-->
···
<!--引入jQuery的js-->
···
<!--引入自己写的game.css-->
<link rel="stylesheet" href="{% static 'css/game.css' %}">
<!--引入自己写的game.js-->
<script src="{% static 'js/game.js' %}"></script>
</head>
<body style="margin: 0">
<div id="ac_game_01"></div> #div id 且生成一个div对象!!!
<script>
$(document).ready(function(){
let ac_game = new AcGame("ac_game_01"); <!--创建AcGame对象ac_game-->
});
</script>
</body>
- 在
js/src
下创建总js
文件zbase
编写AcGame
对象
class AcGame {
#constructor:构造函数 创建对象后会执行!!
constructor(id) {
this.id = id; #div_id
#定义一个html的div变量一般前面会加上$
this.$div_acgame = $('#'+id); #通过div_id绑定的html下的div变量
this.menu = new AcGameMenu(this); #创建一个AcGameMenu对象menu
this.start();
}
start() {
}
}
- 在
js/src/menu
下的zbase.js
创建AcGameMenu
对象
class AcGameMenu
{
#root就是html中创建的AcGame对象ac_game
constructor(root)
{
this.root = root;
#定义一个html的div变量menu $('')里面就是html的内容!!!!
this.$menu = $(`
#div变量 和css挂钩
<div class="ac-game-menu" >
</div>
`);
#html下的div变量:ac_game.div_acgame后面添加div变量menu 实现渲染!!!!
this.root.$div_acgame.append(this.$menu);
}
}
- 用js渲染html原理:
- 1、在web.html里有一个div变量div_acgame(div id=ac_game_01)等待添加其他div变量
-
2、在web.html里又有一个js对象ac_game 里面存了div_acgame 所以在js对象里对ac_game添加其他的div变量就ok了!!!
-
详细前端代码就不写了 大概思路都一样 利用js对象和函数实现动态处理
- 监听系统注释:
#add_listening_events()、hide()均为AcGameMenu的函数
add_listening_events() {
let outer = this; #outer定义为该AcGameMenu对象
#当div变量single_mode被点击
this.$single_mode.click(function(){
outer.hide(); // 隐藏这个Menu
#root为outer下的AcGame对象 从而可创建里面的AcGamePlayground对象
outer.root.playground = new AcGamePlayground(outer.root);
});
}
hide(){
this.$menu.hide();
}