关于动态加载dom若干问题

在这里用若干这个词只是装个逼，主要问题只有俩个。第一：获取不到加载的dom；第二：动态操作dom时减少dom操作。

很多前端开发的初级工程师总会时不时被要求帮忙写个ajax请求啊、处理一下数据呗。。。 ╮(╯_╰)╭

面对各位大佬们地欺压，我选择沉默。

不过想来也好，多练练也没什么不对。本人作为刚毕业的只有一年实习经验的小白来说，这个问题我遇到过俩次，第一次在我百般努力下，没有成功最终项目组长告诉了我方法，让我这个从后端转来的人感到十足的挫败感；第二次在遇到的时候，嘿嘿。。。我能放过她嘛？

首先遇到这个问题的时候，先不要慌。我本着既然是问题那我一定要追本溯源把她连根拔下才解气，所以咱们还是先明白为什么会出现这个问题。

浏览器的加载过程是什么？这个问题你必须先搞清楚！根据网上众多大牛的分析来看，我总结了一下：首先你在本地打开html页面时，你得让浏览器(主要是其内核webkit、Gecko)先解析你得html让他的内核知道你要做个什么样的东西比如说它的骨架是什么(html标签，其实是dom -。-)，它的外观是什么样(css)，它需要摆什么pose(position、js中修改dom位置)等，也就是解析html - 加载外部样式表和脚本 - 脚本在文档内解析并执行；通过上面的准备浏览器接受了你得大部分代码，他将html dom完全构造起来；最后一步是加载图片与其他外部内容；最后网页完成加载。

顺序是：解析html - 加载外部样式表和脚本 - 脚本在文档内解析并执行 - dom完全被构造成型(渲染与布局完成) - 加载图片和外部内容 - 网页完成加载。

在获得后台(php/java+mysql)返回数据后如果你们的后台未对数据进行处理(json)，那你得先打出返回的数据，自己将其转化为json后方便处理。在保证返回的数据后，我相信很多同学都会，for/for-in/foreach，我还是建议你用foreach效率问题网上数据一大推，主要还是js是异步的，用foreach会避免一些莫名其妙的问题。利用foreach将json数据解析，然后拼接：

                    var givenData = JSON.parse(data);
                    var eval_msg = eval(data);
                    eval_msg.forEach(function(item){
                        rowStr='<tr><td><span>'+item.create_date+'</span></td><td>'+item.recharge_num+'</td></tr>';
                        $('#htRecordChargeTable'+dataID).append(rowStr);

});

然后，循环添加dom。这样子有问题么？当然是没有，但是不完美。dom操作太频繁会影响网页layout(也就是我上面所说的布局)，循环操作dom，循环影响布局，循环影响网页加载。╮(╯_╰)╭，这不是我们想要的，所以我们要尽量做到一次性操作dom，代码如下：

                    eval_msg.forEach(function(item){
                        rowStr+='<tr><td><span>'+item.create_date+'</span></td><td>'+item.recharge_num+'</td></tr>';
                    });
                    $('#htRecordChargeTable'+dataID).append(rowStr);

所以我们循环操作被添加的dom字符串，如上的rowStr，全部拼接后一次性apped进去。(这是问题2，我得个人经验)

这里选取，知乎上一位网友的问题描述(其实我有点手懒 - -。)：

这里的问题也是我想说的，你在这里绑定click都叫 .my 到底点哪一个！？其实顺着这位同学的思路往下走正确的打开方式应该是拿到所有的 .my 然后利用each函数添加click事件，但是这又得循环了，并不是我们想要的。然后呢，我们可以问后台将id放到返回的数据中，然后我们可以在添加dom时，把id拼进去，直接添加onclik函数利用this.id把id传进去，这样我们就能知道到底点哪一个。上代码：

for(var i = 1; i <= obj.allNum; i++){
                    var dataID=obj.all+'_'+i';
                    str+='<li><a href="javascript:void(0)" class="page_num" id='+dataID+' onclick="enumPage(this.id)">'+i+'</a></li>';
                }
                $('#prev_page').after(str);

然后在外部，写一个enumPage函数即可：

 function enumPage(enumPageId){
        var dataId = enumPageId;
        var id=dataId.split('_')[1];
...
}

以上均个人总结，还希望与大家一起交流。

关于动态加载dom若干问题

猜你喜欢