编写一套前端框架,基于jQuery,笔记及心得

这段时间一直在忙某平台的前端改版,目前已调试得比较满意,这个时间,把思路和难点做一下整理,巩固一些知识点。

思路

  1. 为节省网络资源,JQuery及用到的插件、公共函数、公共动作监听(采用delegate),均只在首次打开时加载;
  2. 定义load方法和reload方法,通过ajax方式实现无闪烁更换内容和伪刷新;
  3. 监听所有a标签的点击动作和form的submit动作,通过ajax实现无闪烁更换内容;
  4. 定义一套json接口,用于实现与后端action的对接;
  5. 通过artdialog插件实现一套完整的弹出窗口机制和消息反馈机制;
  6. 为19201080和1280800定义两套CSS,根据窗口大小自动适配;
  7. 定义Loading遮罩层,防止用户误操作或二次操作引发异常;
  8. 对权限拦截信息进行捕获,提供无阻碍的弹出窗口重新登录,提升用户体验;

规范

  1. 兼容Webkit、Firefox、IE7及以上版本IE;
  2. 主结构和公共模块采用ID定义样式,单独内容采用class定义样式;

难点

  1. IE不支持地址栏更改:

    html5支持通过history.pushState进行历史记录编辑,间接允许修改地址栏,但ie对html5的支持并不完整

    解决方案:

    目前IE是没办法实现地址栏更改的,所以思路只能往回倒,我之所以要更改地址栏,原因是当用户强制刷新后能停留在当前页面,而不是首次进来的页面(因为该平台采用了ajax实现无闪烁更换内容,故地址栏不能动态变更的话,是一直停留在原页面的)。那么,这个强制刷新自动回到当前页面的问题可以这样分两步来解决:

    1. 采用井号带着记录当前地址的字符串作伪跳转,来令地址栏进行变更

       try{
           var state = {title : url,url : url};
           history.pushState(state, url, url);
       }catch(e){
           //不支持html5
           location.href='#ieaddress'+base64encode(url);
       }
      
    2. 当刷新页面时,根据地址栏后井号的字符串取得刷新前的停留地址,进行redirect

       try{
           var basecode=(location.href.split('#ieaddress'))[1];
           location.href=base64decode(basecode);
       }catch(e){}
      
  2. setTimeout和setInterval注销方案

    由于单独页面的JS在读取时执行,若页面用到setTimeout和setInterval,则必须在切换页面后彻底执行clear清理,否则将继续占用资源和导致BUG的出现

    解决方案:

    这里我定义了公共变量用来储存setTimeout和setInterval,在变换页面时遍历并clear

    1. 定义公共变量和自定义一套方法

       gboTimer=new Array();
       function oSetInterval(func,t){
           gboTimer[gboTimer.length]=setInterval(func,t);
       }
      
    2. 在load和reload时遍历并清除所有timeout和interval

       for(var timeri=0;timeri<gboTimer.length;timeri++){
           try{clearInterval(gboTimer[timeri]);}catch(e){}
       }
      
  3. load方法要求步骤清晰考虑周全

    1. 对地址进行分析(井号不置理睬,外网地址直接跳转)
    2. 地址属于无闪烁刷新范畴,则显示loading遮罩层,开始执行更换程式
    3. 判断地址是绝对地址还是相对地址,若是相对地址,则需要做地址转换,原因在难点1已提及,地址只会保留首次登陆的地址,所以直接取得的相对地址很可能是错误的
    4. ajax访问新页面并取得代码
    5. 代码分析,若返回为权限不足专用代码,则弹出登录遮罩层,开启无刷新重新登录程式
    6. 销毁所有定时任务和循环任务,难点2中已提及
    7. 代码有效,则通过正则表达式取得核心部分代码,替换至本页的核心位置
    8. 地址栏更新,难点1中已提及
    9. 核心内容美化(radio/checkbox和select在加载后进行美化,这属于特殊需求的范畴,可忽略)
    10. 隐藏loading遮罩层,结束更换程式
若您觉得我的博文对您有帮助,欢迎点击下方按钮对我打赏
打赏