产品经理学技术(3)-JS代码浅析

在之前的文章里讲过,产品经理懂技术,不需要撸起袖子写代码,懂技术原理就行。当然,如果好奇程序猿们每天对着屏幕敲敲打打的是什么,想认真学习一门语言,我推荐从JS入门,它的语法相对易上手,感觉比Java简单。。。

在众多的在线学习网站中,推荐慕课网,JS的每个知识点它都讲解得非常详细,而且提供真实的代码辅助你理解,你可以直接按照提示,补充代码验证结果。这篇文章的JS代码,就是从慕课网复制而来,侵删。如下图所示

代码与运行结果

左侧的【点击提交】是代码的运行结果,此时用鼠标点击【点击提交】,会输出“两数和为14 ”。可以看到,<script></script>标签里就是JS代码,包含一个名为add2()的方法,而在下面的<form></form>标签中,也有一个方法add2(),两者之间有什么联系?下面就来详细分析一下。如下图所示

代码详细分析

当鼠标点击【点击提交】,<form></form>标签中的代码监听到点击事件,调用并执行事先写好的方法add2(),输出了“两数和为14”的结果。

以上只是很简单的一个鼠标点击事件,真实的业务场景下,监听事件类型更多更复杂,比如还有鼠标经过事件onmouseover,鼠标移开事件onmouseout,光标聚焦事件onfocus等。延伸到移动端,监听的事件就变成滑动事件,向上滑动事件,向下滑动事件等。这一个个事件,对应的是用户一个个特定的动作;执行方法及输出,对应的是系统响应用户特定的动作并给出反馈。两者构成所谓交互的基本过程。

还有一点,我发现事件的监听与方法的执行是分离的。监听是HTML,属于界面;方法是JS,属于逻辑,代码通过“调用”实现两者的沟通。这样将界面与逻辑分开写的方式,与MVC模型不谋而合,低耦合性使代码更易于维护与修改。

综上就是对一小段JS代码的简单分析,如有错误或不妥,不吝赐教,谢谢啦!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 175,986评论 25 709
  • ——贾平凹的独行世界,写给每个孤独的行路人 独行是一场心灵的隐居,真正的洒脱...
    时光中的旅行阅读 3,273评论 0 0
  • 每天早晨我都顶着迷雾出发 去找她 这一片湖辽阔又深远 我看不到她半分影子 也听不见她的脚步和叹息 我竭力呐喊遍遍呼...
    如兰子阅读 1,607评论 0 4

友情链接更多精彩内容