文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

web前端:前端开发中使用”有限状态机“解决复杂的交互问题

软工小能手

软工小能手

2024-04-23 23:06

关注

  HTML、CSS、Javascript这三个是前端开发中最基本也是最必须的三个技能。前端的开发中,在页面的布局时,HTML将元素进行定义,CSS对展示的元素进行定位,再通过JavaScript实现相应的效果和交互。虽然表面看起来很简单,但这里面需要掌握的东西绝对不会少。在进行开发前,需要对这些概念弄清楚、弄明白,这样在开发的过程中才会得心应手。

  前端开发是有逻辑的,这点毋庸置疑。程序员的思维逻辑赋予了代码各种能力,但是前端开发中经常面对的是用户的操作。在一个比较复杂的页面中(貌似现在也很少有简单页面了),用户的操作是不可预见的,假如有很多按钮,每个按钮都会做一件自己独一无二的事,如果上帝保佑所有的这些操作,这些事件都彼此没有限制,而且结果互不影响,那没有问题。但在开发中好像没有这种好运气,所以经常需要协调和平衡这些函数之间的执行。

  如果你使用的是纯JS或者单独仅有jQuery的情况下,遇到这种让人焦头烂额的情形会尤为明显,前端MVC一定程度上隐藏了并处理了这些问题,但是也并不完全。这个时候你可能需要了解一下关于”有限状态机“的概念,前端开发中这应该是一个很有用的东西。

  描述一下”有限状态机“:

  有限状态自动机,简称状态机,是表示有限个状态以及在这些状态之间的转移和动作等行为的数学模型。

  状态总数(state)是有限的。

  任一时刻,只会处于一种状态中。

  在某种条件下,会从一种状态转变到另一种状态中。

  在维基百科中称:有限状态机FSM是设计和实现事件驱动程序内复杂行为组织原则的有力工具。

  对于前端来说,尤其是Javascript编程时,这个模型的意义就在于可以将其套用在很多对象上。具体个例子,比如一个按钮平时就是正常的按钮,当你点击后变成一个input。当然你可能会说这么简单的功能,我直接用jQuery甚至不用都可以,操作DOM显示和隐藏就好了。如果你还抱有这种天真的想法,我只能说你没遇到过让你痛不欲生的页面。。。当页面复杂到一定程度,单纯操作DOM去处理前端只会加快你疯掉的进程。

  这里对于Button套用有限状态机的模型,相当btn对象只有两个状态,显示状态和编辑状态。看看代码吧:

  varbtn={

  //当前状态

  currentState:'btn',

  //绑定事件

  initialize:function(){

  varself=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('InvalidState!');

  break;

  }

  }

  };

  上面就是有限状态机的写法,逻辑和层次上确实清晰了,对于状态越多的对象,就越适合这种写法。

  通过有限状态机的这种模式,我认为最重要的一点就是将用户的操作行为,也就是组件的事件响应(比如点击)与组件的行为表现分离开来.在确切的说,通过建立一个有限状态机的模型,我们完全不关心用户的点击行为具体做了什么,这时组件可能会有几种状态对应不同的表现形式,而用户触发的事件仅仅是切换了模型的状态.至于每个状态的具体表现和行为,我们完全可以单独定义,也就说这时一种行为和响应上的解耦.

  前端即网站前台部分,运行在PC端,移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展,HTML5,CSS3,前端框架的应用,跨平台响应式网页设计能够适应各种屏幕分辨率,完美的动效设计,给用户带来极高的用户体验。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-前端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯