JavaScript模块化开发中怎么处理'事件'与'动作'

Question

ES6中可以使用export和import的方式进行模块化开发。但是在实际开发环境中，个人遇到个很不解的地方。用户与页面进行交互主要是通过click、change等事件进行触发的，事件触发后然后进行一系列的操作，在开发中，我将触发事件后进行的动作独立出来成为一个模块，但是响应事件这段该怎么处理呢？目前我是根据每个功能单独建立了两个js文件，一个是用于编写动作的[eventname]-action.js文件，一个是用于触发事件的evnet.js文件，然后用gulp将所有的evnet.js文件合并成一个app.js文件后再用webpack打包。但是这样我感觉没有体现出模块化开发，跟我之前用文件名来区分功能，然后用gulp合并成一个文件没什么区别啊。
这是我的一段代码片段:

//events/updateSort.js
import updateSort from './action/AdminLogin/updateSort-action.js';
$(function(){
    const inputNode = $('.category-sort');
    inputNode.on('change',function(){
        const sortId = $(this).val(),
              categoryId = $(this).parents('tr').find('.category_id').text();
        const promise = updateSort({url:'category/updatesort',method:'get',data:{sortId:sortId,categoryId:categoryId}});
        promise.then(function(data){
            data.status=='success'?alert('更新排序成功'):alert('更新排序失败');            
        });
    });    
});

//actions/updateSort-action.js
const updateSort = function(obj){
    const promise = new Promise(function(resolve,reject){
        $.ajax({
            type:obj.method,
            url: obj.url,
            data:obj.data,
            success:function(data){
                resolve(data);
            },
            error:function(data){
                reject(data);
            }
        });
    });
    return promise;
}
export default updateSort;

Answer 1

这就是模块化。

历史上，JavaScript 一直没有模块（module）体系，无法将一个大程序拆分成互相依赖的小文件，再用简单的方法拼装起来。其他语言都有这项功能，比如 Ruby 的require、Python 的import，甚至就连 CSS 都有@import，但是 JavaScript 任何这方面的支持都没有，这对开发大型的、复杂的项目形成了巨大障碍。

ES6 模块的设计思想，是尽量的静态化，使得编译时就能确定模块的依赖关系，以及输入和输出的变量。CommonJS 和 AMD 模块，都只能在运行时确定这些东西。比如，CommonJS 模块就是对象，输入时必须查找对象属性。