zoukankan      html  css  js  c++  java
  • 数据渲染 XML

                                              数据渲染                       XML

    1.渲染数据

      (1)案例分析 原有的list中有三个li,并且每个li身上有onmouseover事件

         

      (1)字符串拼接,最常用的方法

          

        优点:只进行了一次DOM回流

        缺点:原有DOM的事件都会丢失

        原因:就在于innerHTML这个属性,这个属性是返回或设置DOM中的内容,以字符串形式返回,拼接完之后是string类型,而onmouse这些属性是DOM元素对象身上的,所以这些onmouse系列的属性就丢失了。

      (2)DOM循环

            

        优点:原有的DOM身上的事件不会丢失,不影响其他DOM

        缺点:DOM回流次数过多,严重影响网页性能

      (3)模板  模板的本质就是字符串

      (4)文档碎片

        优点:既不影响原有DOM的属性,也只回流一次

           

    DOM回流

      每当对DOM元素进行增删改的时候,浏览器就会重新加载一个,把新的结果渲染出来

    无论上面的四种方法,新增的li没有onmouseover事件,如果保证新增的li也拥有添加的事件,用DOM遍历添加事件是不行的,用事件委托

      

      事件委托利用的原理就是事件冒泡机制,但并不是所有的事件都有冒泡机制,比如onmouseenter,onmouseleave

     

    XML

      常见的数据存储格式有两种。一种是json 99.99% 另一种是XML

     注意事项:

      (1)要有XML声明;

      (2)要有一个根节点

      (3)XML必须是双标签

      (4)对大小写敏感

      (5)XML标签的属性值一定要加引号

          XML中的内容不要使用特殊符号<> $等

          文档中的空格会被保留

    ajax获取数据

      json格式 需要解析 string类型==》json类型"{'name':'zhang'}"==>{'name':'zhang'}

      用JSON.parse(),反过来 {“name”:'zhang'}==>"{‘name’:'zhang'}"

      用JSON.stringify() 

    注意事项:json 里面用双引号,外面只能用单引号

        

     

         

         

  • 相关阅读:
    Jetty容器集群配置Session存储到MySQL、MongoDB
    js清除浏览器缓存的几种方法
    Maven学习 (四) 使用Nexus搭建Maven私服
    ActiveMQ入门实例(转)
    SOAP Webservice和RESTful Webservice
    Redis集群搭建与简单使用
    如何设置SVN提交时强制添加注释
    linux下vi命令大全
    锦隆驾校考试场---大路
    锦隆驾校考试场---小路
  • 原文地址:https://www.cnblogs.com/yuanjingjing/p/10530247.html
Copyright © 2011-2022 走看看