关于动态加载dom若干问题

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

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

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

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

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

       浏览器的加载过程是什么?这个问题你必须先搞清楚!根据网上众多大牛的分析来看,我总结了一下:首先你在本地打开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,我得个人经验)

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

       
关于动态加载dom若干问题
       这里的问题也是我想说的,你在这里绑定click都叫 .my 到底点哪一个!?关于动态加载dom若干问题其实顺着这位同学的思路往下走正确的打开方式应该是拿到所有的 .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

相关推荐