模块化／组件化开发
赶紧加入 Vue.js 的大本营吧（怎么感觉跟打广告似的）！

webpack分包可以异步加载

let btn = document.querySelector('.btn');
let pluginFoo = false;
btn.addEventListener('click', function() {
    require.ensure([], function(require) {
        let Foo = require('./bundles/plugin.js');//点击时加载
        if (!pluginFoo) { //避免重复加载
            pluginFoo = new Foo('异步加载成功');
        } else {
            return;
        }
        pluginFoo.show(); //调用
    }, 'plugin');
});

可以看控制台Network里，一开始plugin.js是没有的，点击后才加载进来

登录做个页面，弹窗里打开的是登录页面。

这一类重用度比较高的组件，当然封装成一个独立的组件或者类比较合适。
首先，肯定是在 js 里面做封装。 如果是两三年前，一般是采用模板库 + jquery 这一套实现；现在有了 react/vue 这种视图组件，顺其自然就得到了封装。

我比较土鳖的人，所以题主看一个方案：

// main.js
$('.J-Login').click(function() {
    var loginHtml = '<input><input><button>';
    // show html
    return false;
});

老方法 是 借用webpack 把 弹层css 分离单独一个css文件，js里面拼接弹层html字符串 和弹层功能处理，把这个函数块 丢进jquery 原型中去。

看情况，一般这属于公共组件或代码！

这么写不如利用面向对象把一个弹窗登录页封装起来，当你点击的时候直接触发就好了，当然用React/vue这些会快速的不是一点点