# docs

**Repository Path**: wxl0209/docs

## Basic Information

- **Project Name**: docs
- **Description**: No description available
- **Primary Language**: Java
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2018-06-27
- **Last Updated**: 2021-03-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# json-view

#### 开发缘由 (2016-06月)

- 这里是列表文本大多数web应用中，其服务器保存的数据绝大多数是不变的；用户请求同一个url，很大可能都会是同一份数据，不仅消耗网络资源，给服务器带来不必要的压力，同时随着网络的不稳定，会在视觉上给用户以一种服务缓慢的现象。因此，将有效数据在客户端持久存储，并加上过期时间，可以有效解决以上问题。
- 2、在2014到2016年代，前后端分离，前端开发好页面模板后交付给后端，由后端通过JSP渲染模板或通过 ajax 获取数据后拼接模板再插入到页面中，如此一来，大量的开发工作将用于数据和模板的拼接，再渲染到页面上，不仅代码乱，难调试，效率也极其低下。

#### 功能说明
该库是json数据渲染及缓存方案，将请求的所有json数据持久存储（存储时间取决于服务器一并返回的有效时间，以秒为单位），渲染页面时，将数据自动绑定到页面对应的元素中。

#### 现存问题
本项目由原生js编写，非常欠缺扩展性和规划设计。仅支持数据绑定，无法编辑绑定逻辑，绑定动作功能有限，好在博客系统页面数据不多，功能并不复杂，凑合可以用。

#### 文件说明
jsonview-core.js是json数据渲染的核心库.
jsonview-app.js是提供用户使用的通过ajax请求json数据的对外函数，有且仅有一个用于请求json数据的函数
  
####  客户端使用说明
在页面中引入以上两个js文件
在html元素上标记标签，进而可实现json数据的自动化渲染
  
####  标签说明，共由最初的4个标签扩展到7个标签

1. JsonView: 在元素的class上定义，该库以此标记用于处理需要渲染的html元素，如 <p class="JsonView" scope="json">{user.name}</p>
  
2. 这里是列表文本scope：在标记JsonView的元素上使用，该标记将绑定本次请求及返回的数据，并自动化渲染填充json数据。

    * 绑定函数是jsonview-app.js中提供的函数 sendJsonRequest，其中第四个参数definescope，即绑定本次请求及返回数据的入口。
    * sendJsonRequest 请求的数据，会根据html元素上同样标记scope的值来进行渲染。需要注意的是，当这个参数为空时，将以from标记作为绑定，若from标记为不存在，最终会以此请求路径（包括请求参数）作为本次数据的绑定。同一个请求，不同的请求参数，往往返回的数据不尽相同，因此需要客户端自己定义scope值，以便能引用到已经存储的json数据。
 
3. from: 该标记用于说明数据已经在客户端，本库会以其定义的值作为解析入口，去查找绑定的json数据，对其渲染,from标签如果没有定义scope，则会默认加上scope
  
    例如：		
    ```
     
    <tr class="JsonView" from="serverInfo:allow:id=2" jfor=".">
        <td>{.}</td>
    </tr>
    ```
    定义的参数之间用：号分隔
    
    第一个参数为scope的定义，例子中表示该元素将从servrInfo绑定的数据中取值
    
    第二个参数表示将从serverInfo绑定的数据中，取出以allow为键的值的数据
    
    第三个参数表示将从allow中筛选出id为2的那条数据，最终渲染html元素，此时就要保证allow对应的数据为列表类型的数据，其中每列都有id属性
   
4. jfor标签，用于指明是将当前html节点循环，通常用于返回的列表形式的json数据结构。

    jfor 其值依然遵循条件筛选，.符号表示当前绑定的数据的根节点，"user.arrs"表示自根节点的user属性下的arrs所表示的列表值。
   
5. jsonkey标签，该标签用于指定存库的key，类似于数据库中的主键，通过他来将存储的数据取出并展示，同时发送请求中必须携带这个的属性的列表,具有该属性的所有标签均会自动加上jfor="."

    例如主键为id时：jsonKey="id"，发送的ajax参数中也应有{id:[数组id列表]}，此时请求将被过滤，部分从客户端缓存库中获取
   	仅限于列表类型的返回数据
   
6. flush标签，对于列表类型的返回数据，flush标签会使数据自动刷新重新渲染，没有此属性则追加展示。非列表的返回数据只会有刷新操作。
   
7. noshow标签：一般为了展示平滑，需要将标记为JsonView的节点加上 style="display:none"隐藏 或者 style="opacity:0" 透明度为0,数据渲染完成后会自动隐藏转为显示
   	此标签为了让数据渲染完之后依然不显示，即后台操作
   
    #### 服务端返回json格式说明  
    服务端返回的json数据必须是如下结构：
    
    ```
    {
        code : 只有返回200的值才会被本库标记处理,
        data : json数据，
        cacheTime : 有效时间，以秒为单位，
        message	: 错误消息
    }
    ```

    ```
    <!-- 本地获取 scope为person绑定数据下的所有数据中，id为1的那部分数据，并渲染 -->
    <test class="JsonView" from="person:.:id=1">
        <span>{id}</span>
    </test>
     
    <!-- 本地获取 scope为person绑定数据下的所有数据，并渲染 -->
    <test jfor="." class="JsonView" from="person">
        <span>第一层{id}</span>
            <person jfor="list">
            <span>第二层{id}</span>
            <span>{personName}</span>
        </person>
    </test>
     			
    <!-- 返回的列表数据将以id为主键的形式进行本地存储 (缓存时效内)，同时每次请求都会刷新这部分节点进行渲染，不追加-->
    <testObj class="JsonView center_cen" scope="person" jsonkey="id" flush>
    <span>第一层{id}</span>
        <person jfor="list">
        <span>第二层{id}</span>
        <span>{personName}</span>
        </person>
    </testObj>
     			
    <!-- 返回的列表数据在之前的渲染结果之上追加展示-->
    <testObj jfor="." class="JsonView center_cen" scope="person">
        <span>第一层{id}</span>
        <person jfor="list">
        <span>第二层{id}</span>
        <span>{personName}</span>
        </person>
    </testObj>
     			
    <!-- 首先将节点隐藏，返回的数据对其进行渲染，再自动显示出来，flush属性对于非列表的数据无效-->
    <testObj style="display:none" class="JsonView center_cen" scope="single">
        <span>第一层{id}</span>
    </testObj>
    
    ```

    #### 发送请求
    ```
    <script type="text/javascript">
        function test(id) {
            sendJsonRequest("/test",{"id":id},null,"person");
        }
        function test(id) {
            sendJsonRequest("/test",{"id":id},function(data){
            // 没有定义scope时，数据会以url+参数的形式作为scope，将数据缓存。同样的url及参数将不发送请求
                alert(data);
            });
        }
    </script>
    ```