在之前的文章里讲过，产品经理懂技术，不需要撸起袖子写代码，懂技术原理就行。当然，如果好奇程序猿们每天对着屏幕敲敲打打的是什么，想认真学习一门语言，我推荐从JS入门，它的语法相对易上手，感觉比Java简单。。。
在众多的在线学习网站中，推荐慕课网，JS的每个知识点它都讲解得非常详细，而且提供真实的代码辅助你理解，你可以直接按照提示，补充代码验证结果。这篇文章的JS代码，就是从慕课网复制而来，侵删。如下图所示
代码与运行结果
左侧的【点击提交】是代码的运行结果，此时用鼠标点击【点击提交】，会输出“两数和为14 ”。可以看到，<script></script>标签里就是JS代码，包含一个名为add2()的方法，而在下面的<form></form>标签中，也有一个方法add2()，两者之间有什么联系？下面就来详细分析一下。如下图所示
代码详细分析
当鼠标点击【点击提交】，<form></form>标签中的代码监听到点击事件，调用并执行事先写好的方法add2()，输出了“两数和为14”的结果。
以上只是很简单的一个鼠标点击事件，真实的业务场景下，监听事件类型更多更复杂，比如还有鼠标经过事件onmouseover，鼠标移开事件onmouseout，光标聚焦事件onfocus等。延伸到移动端，监听的事件就变成滑动事件，向上滑动事件，向下滑动事件等。这一个个事件，对应的是用户一个个特定的动作；执行方法及输出，对应的是系统响应用户特定的动作并给出反馈。两者构成所谓交互的基本过程。
还有一点，我发现事件的监听与方法的执行是分离的。监听是HTML，属于界面；方法是JS，属于逻辑，代码通过“调用”实现两者的沟通。这样将界面与逻辑分开写的方式，与MVC模型不谋而合，低耦合性使代码更易于维护与修改。
综上就是对一小段JS代码的简单分析，如有错误或不妥，不吝赐教，谢谢啦！
网友评论