niep.js说明文档

新建页面

示例代码：

<div class="page" id="page_userCenter" data-menu="4" data-title="起步学车 - 用户中心" data-preload="userInfo,userSubject,userAccount,appointRecord,userCoach,orderList,coachList,serviceList">

</div>

1. 每个页面都必须有一个固定的class：.page （默认隐藏） 。
2. 每个页面都有一个id，id的前缀为 page_ 。 例如用户中心页面，id命名为page_userCenter 。页面的id除去前缀部分，剩下部分即为当前页面的路径。例如page_userCenter这个页面，访问路径就是/niep?page=userCenter。
3. 使用data-menu标记，来指定本页面的菜单。无标记或者data-menu="-1"表示该页面无菜单栏。data-menu的值，用于指定具体哪个菜单项为当前选中项。请打开 NiepMenu.html这个文件，来查看具体的菜单项目。每一个菜单项目都会有一个 data-sort标记，用于指定当前菜单项的次序。举个例子：在创建页面时，指定了data-menu=4 , 那么页面显示时，就会显示菜单栏，并且菜单栏中添加了data-sort="4"的菜单项，就会显示为当前选中的项。
4. data-title标记用于存储当前页面的页面标题，显示于浏览器的当前页面标题位置。
5. data-preload标记用于标记当前加载完成时，需要预加载的页面的名称。如上示例，加载用户中心页面后，会预加载用户信息页面、用户学习进度页面、用户账户信息页面、用户预约练车记录页面…等等，预加载只会拉取该页面的html，并不会加载页面内的数据。

加载页面数据

<div data-unload="refresh" data-cmd="info_user" data-params="userCenter">

</div>

1. 在需要加载数据的位置，添加data-unload标记，添加了该标记的地方，会执行data-cmd标记指定的js方法，去处理html或者调取数据。data-unload有两个值可以选择使用：once适用于仅需加载一次的数据，例如拉取教练个人信息（在短时间内是不会更改的，所以只需要加载一次即可）。refresh适用于每次切换到该页面时，都需要重新拉取数据的场景（例如拉取教练排班信息）。
2. data-cmd标记用于指定此处执行的js方法的名称。命名规则为： info_ 、 list_ 、’query_’ 、deal_ 等功能性前缀，加场景化的名称。例如此处 data-cmd="info_user"，这个 info_user的js方法，处理的就是查询用户个人信息的数据 。
3. data-params用于附加一些额外的参数，在data-cmd指定的js方法中，根据此处参数的不同，进行不同的处理。多应用于一个js方法在2个及2个以上的地方被调用，需要区分调用的位置的场景。

function info_user(ts , params){
    ts.post( function(result){
        ts.ajaxFinished( result , function(){
            var data = result.data ;
            data['balance'] = (result.userBalance * 0.01).toFixed(2) ;
            var params = ts.data('params');
            if(params == 'userCenter'){
                ts.fill(data,function(){
                    //学习进度
                    var subject = data.subject ;
                    if(subject == 2){
                        ts.find('.learnedHour').text('科目二已学习' + data.subject_two + "个学时");
                    }else if(subject == 3){
                        ts.find('.learnedHour').text('科目三已学习' + data.subject_three + "个学时");
                    }
                });
            }else{
                ts.fill(data);
            }
            var need = data.need_comment ;
            if(!need){
                ts.find('.user_satisfaction').remove();
            }
        });
    });
}

此处命名了一个info_user的方法，用于发送ajax请求，来请求用户信息数据。在方法体的内部，使用了两个固定的方法：post() 和 ajaxFinished ，凡是需要发送ajax请求的方法，务必要调用这两个方法，post方法用于发送ajax请求，请求的url会自动生成，生成规则为： 网站根路径 + js方法名。此处在info_user方法中调用post方法，会自动生成一个请求路径：www.xxx.com/info/user，向这个路径去请求数据。该方法是对jQuery中$.post方法的重写，无需传入url参数。可以传入两个参数：发送请求的附加json数据以及请求回调方法。

ajaxFinished方法，封装了页面隐藏与显示逻辑，主要作用是保证页面数据加载完成后，显示页面。当请求结果返回status的值为’200’或’201’时，执行该方法内部的逻辑代码。该方法可以接收两个参数：ajax请求返回的结果，以及当结果返回status的值为’200’或’201’时需要进行何种处理。（强烈建议在niep-1.js中阅读一下这个方法的逻辑代码，适时可以对该方法进行改造。）

info_user方法可以接收两个参数，第一个是调起该方法的html元素对象，第二个是当前页面传入的参数。