可参考建议js仿模块写法（有利结构清晰，不真是模块）

最新推荐文章于 2020-12-01 14:36:00 发布

原创最新推荐文章于 2020-12-01 14:36:00 发布 · 496 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#js #html

JavaScript点滴知识专栏收录该内容

126 篇文章

订阅专栏

本文介绍了一个简单的HTML页面如何通过JavaScript实现按钮点击事件的响应，并展示了如何在点击按钮后弹窗显示预设的消息。

html

<!DOCTYPE html>
<html lang="en">                     
<head>
   <meta charset="UTF-8">
   <title>Document</title>
   <meta content="telephone=no" name="format-detection">
   <meta http-equiv='Content-Type' content='text/html;charset=UTF-8' />
   <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1" />
   <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<button class="a">
   click
</button>
<script type="text/javascript" src="test.js"></script>
<script type="text/javascript">
   //test模块
   var test = objFn;

   $('.a').click(function(){
      test.al()
   })
</script>
</body>
</html>

/**  * test模块写法  * @type {{doAl: objFn.doAl, al: objFn.al}}  */ var objFn = {  /**  * 默认值  */  DEFAULT_STRING: '默认值',  /**  * 执行  */  doAl:function(){  alert(this.DEFAULT_STRING)  },  /**  * 去执行  */  al: function (){  this.doAl();  } }