描述你的问题
之前项目中的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文件导入呢?
既然你都用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})
这可以保证在不同的模块标准和运行环境下都好用。
版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。