跳转到内容
云网开系统开发手册

JS及框架接口的说明

界面多才考虑用框架网址（方便调界面），逻辑多界面少甚至没有，就建议用JS文件。JS文件可以很方便使用当前页面的全局变量，而框架的话，要套用window.parent.来调用，所以比较罗索，所以不推荐使用。

一般来说，还是推荐用JS文件，框架只适合界面比较多又复杂，但逻辑代码比较少才考虑使用框架。 JS文件，大家可以理解为PHP文件，而框架网页就相当于模板，一般不建议在模板中写太多程序。而在程序中可以放入少量的模板界面代码。

如下图所示,

框架网页的话,初始化被执行的是函数 init(); JS文件的话,初始化被执行的是类的方法init(); 比如 mod_class.signin.init()

init`是指当前模块被加载完毕时执行的.
如果要在所有模块都加载完毕的话,就要用另一个方法或函数 `finish

切换圈子房间的时候,不再执行init() 而是另一个函数或方法 repeat_init()

mod_class.signin.fn222() 这个是JS脚本互相被调用的方法格式 window.parent.mod_class.signin.fn222() 这个是框架网页互相被调用的方法格式，那就是在框架里边要加上window.parent. 注意要把signin换成相应模块的关键字,fn222 换成定义好的方法或函数 , 框架用函数定义, JS脚本用方法定义

JS脚本中的类的格式化如下

mod_class.signin = {




  init:function(res){
    this.fn1(res);
  },




  fn1:function(s){
    alert(s);
  },


  finish:function(res){
    //alert(res);
  },
}

其中 mod_class是全局用到的类，各插件可以互相调用。 比如 mod_class.signin.xxxx() 再次强调,在框架中使用的话,要加上window.parent.

在框架中就有函数

//页面加载完毕后被执行的函数
function init(res){
  //注册聊天数据初始加载成功的事件,但这个有可能不执行,因为加载顺序的问题
  window.parent.load_data.signin = function(res,type){
    if(type!='cknew'){
      get_cfg();
    }
  }


  var firstPageData = window.parent.first_page_data;
  if( typeof(firstPageData)!='undefined' ){  //框架滞后加载的情况
    get_cfg();
  }
}


//所有模块加载完毕后被执行的函数
function finish(res){
}

img

img

几个重要的方法函数

init()``logic_init()``once() 这三个函数(框架网页用函数)或方法(JS脚本用方法)页面初次加载都会被执行 once() 不管切换哪个圈子，都不会再执行，因为页面加载完毕后，只执行一次，就不会再执行，除非刷新当前网页。适合于页面的全局变量处理或者是界面的全局设置 init() 是为满足渲染界面的，PC端的模板不需要重复渲染，所以PC端仅执行一次，此时跟once() 等效，而在WAP端的话，因为界面UI跟据不同的圈子会重新加载局部界面，所以在WAP端的话，又随着圈子的切换而再次的执行，此时又跟 logic_init()等效。 logic_init()是根据切换不同的圈子，会重新执行，也包括初次加载的圈子都会执行一次的。也就是说，他是会跟着圈子的切换会重新再执行的。

once() 大家容易理解，只执行一次。

而 logic_init()``init()如何区别使用呢？针对不同的圈子要做不同的处理，那就用logic_init() 因为他保证了每次进入新的圈子，都要进行逻辑判断。比如签到功能，每进入一个圈子，都要做判断处理的。局部界面的渲染与局部界面元素的事件绑定，就用 init()。因为有的UI（多页模式比如PC端）可能不再刷新局部界面，有的UI（SPA单页模式比如WAP端）可能需要重新加载界面。 特别要注意：局部界面与全局界面又不一样，全局是不会重复加载的，因为SPA单页模式刷新加载的新界面也只是部分而已。

那如何区别局部界面与全局界面呢？凡是往body元素插入内容都是全局，比如$("body").append() 有这种情况的，就不能使用logic_init()``init() 只能使用 once() 避免换更圈子时出现异常。 以上所讲的，都是针对切换圈子的情况，不切换圈子，是不会发现异常的。

另外还有一个

load_data.xxx= function(res,type){
}
xxx` 是模块的关键字,这里代表每次加载到会话数据的时候执行的. type=='cknew'的时候，代表是新刷新出来的数据，否则就是第一页的数据。按下面的操作方法，那效果也等同于`logic_init()
load_data.xxx= function(res,type){
  if(type!='cknew'){
        //这里执行的代码,效果等同于用logic_init()
    }
}

最后要讲一下finish() 这个函数或方法是在所有模块都加载完毕后才执行的。因为所有模块的加载顺序是不确定的，比如签到插件想在视频直播的时候就不显示，那么就只能用这个函数来处理，只有这个函数才能判断当前视频直播模块是否有视频数据在直播，因为这个时候所有模块都加载完毕了，才能进行判断。 这个也只执行一次，once() 中的代码，其实也可以放在这里执行，唯一的区别是，这里要等待所有模块加载完毕才执行，就是时间上要晚一些而已，本质上是没有区别，就是时间上的区别。

JS文件共有4个关键类

mod_class.xxx= {
  finish:function(res){
  },
  logic_init:function(res){
  },
  once:function(){
  },
  init:function(res){


  },
}




//类接口,WebSocket下发消息的回调接口
ws_onmsg.xxx= function(obj){
  if(obj.type=='zhibo_sync_goplay'){  //通知访客打开播放器
  }else if(obj.type=='zhibo_sync_control'){
  }
}




//类接口,加载到聊天会话数据时执行的
load_data.xxx= function(res,type){
}


//内容渲染
format_content.xxx= function(res,type){
｝

mod_class.xxx 是必须存在的 ws_onmsg.xxx``load_data.xxx``format_content.xxx 这3个是定义为一个方法,不再是一个类. 务必要注意 ws_onmsg.xxx 是Websock消息回调接口 load_data.xxx 是从数据库加载的消息回调接口 format_content.xxx 是从数据展示出来后,重新渲染处理.比如增加删除按钮,或者是变成图文展示.

内容重新渲染，使聊天内容更炫

mod_class.xxx 是必须存在的 ws_onmsg.xxx 是Websock消息回调接口 load_data.xxx 是从数据库加载的消息回调接口 除了以上三个类之外,还有一个类 format_content.xxxx 对显示的数据重新处理渲染

比如下面的代码 文件路径是 \public\static\libs\bui\pages\hongbao\init.js 就可以实现对原来普通的DIV进行更炫的展示 聊天数据中红包的原始代码是(即存放在数据库那里是很简洁的)

又或者可以对图片实现幻灯片的效果展示.

<div class='hack-hongbao' data-id='72' data-title='ewrew'>有人发红包了!</div>

通过下面的处理就可以显示成图片,你也可以进行更丰富的展示，包括添加删除按钮，也是这样处理的

//对渲染出来的数据,进行重新转义显示
format_content.hongbao = function(res,type){
  if(in_pc==true){
    $(".office_text .hack-hongbao").each(function(){
      var id = $(this).data("id");
      var title = $(this).data("title");
      var str = `<a href="#" title="${title}" onclick="layer.open({type: 2,title: '${title}',shadeClose: true,shade: 0.3,area: ['600px', '600px'],content: '/index.php/p/hongbao-content-show/id/${id}.html'});"><img src="/public/static/plugins/voicehb/hongbao.png"></a>`;
      $(this).html(str);
    });
  }else{
    //显示红包
    router.$(".chat-panel .hack-hongbao").each(function(){
      var id = $(this).data("id");
      var title = $(this).data("title");
      var str = `<div onclick="layer.open({type: 2,title: '${title}',shadeClose: true,shade: 0.3,area: ['95%', '80%'],content: '/index.php/p/hongbao-content-show/id/${id}.html'});"><img src="/public/static/plugins/voicehb/hongbao.png"></div>`;
      $(this).html(str);
    });
  }
}

img