发表于: 2017-07-13 23:54:17
1 806
今天完成的事情:完成任务三,学习了JS有限状态机。
明天计划的事情:开始任务四,学习使用Jquery 。
遇到的问题:
1、如何创建div,以及如何将创建的div放到盒子里。
对于大盒子,它首先获取父元素的id,然后创建一个盒子并进行定义,var X=document.creatElement("p"); ,然后给其class值,X.className="Y";接着将盒子放到父元素中,X.appendChild;最后给其内部赋值,node2.innerHTML=i+1;即:
var node1 = document.createElement("p");
node1.className = "people";
node.appendChild(node1);
node1.innerHTML = newPeople[i];
2、什么是有限状态机?
有限状态自动机,简称状态机,是表示有限个状态以及在这些状态之间的转移和动作等行为的数学模型。他是把异步操作与对象的状态改变挂钩,当异步操作结束的时候,发生相应的状态改变,由此再触发其他操作。
简单来说其有三个特征:1、状态总数是有限的。2、在一定条件下,各个状态可以相互切换。3、在任何时刻,都只有一种表现状态。
收获:
1、学习了有限状态机。
2、熟练的操作DOM。
3、对有限状态机有了一个直观的了解。
对于Button套用有限状态机的模型,相当btn对象只有两个状态,显示状态和编辑状态。代码如下:
- var btn = {
- // 当前状态
- currentState: 'btn',
- // 绑定事件
- initialize: function() {
- var self = this;
- self.on("click", self.transition);
- },
- // 状态转换
- transition: function(event){
- switch(this.currentState) {
- case "btn":
- this.currentState = 'input';
- doSomething();
- break;
- case "input":
- this.currentState = 'btn';
- doSomething();
- break;
- default:
- console.log('Invalid State!');
- break;
- }
- }
- };
评论