一般网站的 隐藏Dom是怎么维护的

Question

比如登录注册这种弹窗，可能很多页面都会用到。

是把代码放在js里面吗

Answer 1

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

Answer 2

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是没有的，点击后才加载进来

Answer 3

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

Answer 4

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

Answer 5

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

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

Answer 6

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

Answer 7

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

Answer 8

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