Question

阅读文章https://css-tricks.com/how-do-you-structure-javascript-the-module-pattern-edition/后，我在项目中做了类似的事情 - 创建了结构：

＆＃13;

var SomeStructure = {

	
	var1: $('#tag1'),
	
	init: function() {
		
		this.var1.on('click', function (e) {
			SomeStructure.mouseClick(e);
		});
    },
    mouseClick: function(e) {
      e.preventDefault();
      alert("tag clicked");
    }
  
 }

SomeStructure.init();

＆＃13;

div {
  cursor: pointer;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="tag1">Click me!</div>

＆＃13;

我的代码正常运行，但我想知道是否可以重写代码：

this.var1.on('click', function (e) { SomeStructure.mouseClick(e); });

这样在单行$（＆＃39;＃tag1＆＃39;）之后调用函数mouseClick，以一些更简洁的方式在一行中没有匿名函数，类似于： this.var1.on('click', this.mouseClick);

但是这种方式没有e ..

提前谢谢。

Answer 1

我必须为事件监听添加一个新函数ListenEvents，以便可以在里面添加许多新的侦听器来制作清晰的工作流对象（如此处所述http://derickbailey.com/2015/08/07/making-workflow-explicit-in-javascript/）：

`var SomeStructure = { var1：$（'＃tag1'）， init：function（）{ this.ListenEvents（）;

},
ListenEvents: function() {
    self = SomeStructure;
    self.var1.on('click', self.mouseClick);
},
mouseClick: function() {
  alert("tag clicked");
}

}

SomeStructure.init（）;`

如何在模块模式版本中以正确的方式调用事件

1 个答案: