jquery如何与ES6结合?

发布于
2016-02-13

描述你的问题

之前项目中的js代码都是直接使用jquery，以 $(document).ready(function(){xxxxx}) 的形式写在html中。这样的代码看起来很low不说，还很难以维护。为了实现js和html的分离，我将$(document).ready(function(){xxxxx}) 这样的代码转移到了js文件中。

在后来, 项目中引入了es6, 非页面相关的js(不操作dom或者不监听DOM事件的js)都直接以es6 modules的形式组织起来了。可是 $(document).ready(function(){xxxxx}) 这样的代码如何封装成 es6 module 供其它js文件来import呢？

我目前的解决方法

我目前是将页面相关的js(也就是操作dom或者监听DOM事件的js)按照功能来分模块，比如用户管理模块就叫user.js，其中包含后台中用户管理(用户列表，添加/编辑用户资料)的相关页面，以及前台个人资料(如编辑个人信息等)相关页面的js。伪代码如下:

// user.js
$(document).ready(function(){
    $('.front .profile .btn-edit').click(function(){
        // 点击个人资料页面中编辑按钮的响应方法
        ...
    });
    
    ...
    
    $('.backend .user-list .btn-del').click(function(){
        // 点击管理后台中用户列表页面的删除用户按钮的响应方法
        ...
    });
    
    ...
});

这样，如果当前页面是个人资料修改页面，那肯定不存在 .backend .user-list .btn-del 这个元素， $('.backend .user-list .btn-del').click() 自然也就无效。同理，如果在后台用户管理的用户列表页面， $('.front .profile .btn-edit').click() 也就无效，如此页面相关的js肯定不会冲突。

但是这样的问题是，web项目中大部分的js代码都是页面相关的js(操作dom或者需要相应dom事件的js)。这样user.js这个文件就很大, 我想将其拆分成多个js文件，然后通过 import 的方式引用到入口文件中，再通过webpack打包。可是，$(document).ready(function(){xxxxx}) 这样的代码如何写才可以让其它js文件导入呢？

jquery ecmascript-6

阅读 21.8k

3 个回答

littlelyon

✓ 已被采纳

可是，$(document).ready(function(){xxxxx}) 这样的代码如何写才可以让其它js文件导入呢？

这个我没太明白你什么意思啊。

既然你都用webpack了，把$(document).ready(function(){xxxxx})放到entry文件中就可以了呀,至于其中你划分的小模块，都封装成module然后import进来就好，反正最后也是用使用webpack打包好的bundle.js。

如果你是想问怎么封装module文件，一般有个模板:

(function (global, factory) {
  typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
  typeof define === 'function' && define.amd ? define(factory) :
  global.YourGlobalVar = factory();
}(this, function () {xxxxx})

这可以保证在不同的模块标准和运行环境下都好用。

大神勿喷。

jQuery本身兼容了amd和CommonJS的规范，可以直接require，不需要全局引入

let $ = require('jquery');

//还是用标准的on方法更好一些    
$(
    $('.backend .user-list .btn-del').on('click', ()=>{
        // 点击管理后台中用户列表页面的删除用户按钮的响应方法
        ...
    });
);