HTM5
分页: 1/1 第一页 1 最后页 [ 显示模式: 摘要 | 列表 ]
5月20

getOffsetTop

18:52大前端 » HTM5  From: 本站原创
如果拿到的offsetTop为0,则往上循环得到设置滚动的root 容器的高度
        getOffsetTop (herfId) {
          let offsetTop = 0
          try {
            if (document.getElementsByClassName(herfId).length > 0) {
              let eleId = document.getElementsByClassName(herfId)[0]
              let par = eleId.offsetParent
              if (par.dataset.id == 带滚动的根容器id){ 
                // 当节点为body可直接使用offsetTop获取距离
                offsetTop += eleId.offsetTop// 获取高度
              } else {
                while (par) {  
                  // 循环获取当前对象与body的高度
                  offsetTop += par.offsetTop;
                  par = par.offsetParent;
                }
              }
            }
          } catch (e) {
            console.log(`getOffsetTop:${e.message}`)
          }
          return offsetTop
        }
8月24
HTML5 提供了两种在客户端存储数据的新方法:

localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储



然而,今天我要说的是“localStorage如何实现定时存储”,正常情况下,localStorage存入key-value后,可以永久使用(前提:不清理cookie操作).
但是,项目中,我们或许需要实现1.需要在间隔某段时间后,刷新所存的值;2.存储一段时间,而非永久;

解决思路,由于localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用。所以我们需要在存取方面重新处理,先上代码:
[codes=c#]
//定时 缓存
var MyLocalStorage ={    
    Cache : {      
      /**
       * 总容量5M
       * 存入缓存,支持字符串类型、json对象的存储
       * 页面关闭后依然有效 ie7+都有效
       * @param key 缓存key
       * @param stringVal
       * @time 数字 缓存有效时间(秒) 默认60s
       * 注:localStorage 方法存储的数据没有时间限制。第二天、第二周或下一年之后,数据依然可用。不能控制缓存时间,故此扩展
       * */
      put : function(key,stringVal,time){
        try{
          if(!localStorage){return false;}
          if(!time || isNaN(time)){time=60;}
          var cacheExpireDate = (new Date()-1)+time*1000;
          var cacheVal = {val:stringVal,exp:cacheExpireDate};
          localStorage.setItem(key,JSON.stringify(cacheVal));//存入缓存值
          //console.log(key+":存入缓存,"+new Date(cacheExpireDate)+"到期");
        }catch(e){}  
      },
      /**获取缓存*/
      get : function (key){
        try{
          if(!localStorage){return false;}
          var cacheVal = localStorage.getItem(key);
          var result = JSON.parse(cacheVal);
          var now = new Date()-1;
          if(!result){return null;}//缓存不存在
          if(now>result.exp){//缓存过期
            this.remove(key);          
            return "";
          }
          //console.log("get cache:"+key);
          return result.val;
        }catch(e){
          this.remove(key);
          return null;
        }
      },/**移除缓存,一般情况不手动调用,缓存过期自动调用*/
      remove : function(key){
        if(!localStorage){return false;}
        localStorage.removeItem(key);
      },/**清空所有缓存*/
      clear : function(){
        if(!localStorage){return false;}
        localStorage.clear();
      }
    }//end Cache
}
//调用方法1.存入用户信息1天,并取出
var user = {name:'demo1',nickName:'测试账号'}
MyLocalStorage.Cache.put("cookieKey",user,1*24*60*60);//存储一天
MyLocalStorage.Cache.get("cookieKey");//得到的是Object {name: "demo1", nickName: "测试账号"},如果过期,此处取到的是空字符串
//调用方法2.存入字符串1分钟
var str = "xxx存入localStorage";
MyLocalStorage.Cache.put("cookieKey",str,60);//存储一天
//其他移除、清空等操作,在此我便无需写了,相信各位一看便知。

[/codes]

那如何实现数据过期则查询后台的数据,数据未过期,就使用存储的数据呢?
ajax请求数据为例:
[codes=c#]
function getHotList(){
  //本地无数据或数据过期,则通过请求查询数据库,同时将查询得到的结果,存入本地,下次刷新页面,无需请求数据库,直接使用本地数据,提升效率
  var cacheKey = "CACHE-HotWords";
  $(".search-hot-words").html("");
  if($(".search-hot-words").length==0){return false;}
  try{
    var cache = MyLocalStorage.Cache.get(cacheKey);
    if(cache){
      $(".search-hot-words").html(cache);
      return false;
    }
  }catch(e){}

  $.post(basePath+"hotwords/list",{limit:7,t:new Date()-1},function(result){
    try{
      result = JSON.parse(result);
      if(result.status!=1){return false;}
      if(result.data.length>0){/*no data hide*/
        var hotTags = "";
        for(var i = 0,max = result.data.length ; i < max; i++){
          hotTags += ''+result.data[i][0]+'';
        }
        $(".search-hot-words").html(hotTags);
        MyLocalStorage.Cache.put(cacheKey,hotTags,24*60*60);//24小时 此处存入的直接是html代码片段,(可以直接存入后台返回的json)因人而异
      }
    }catch(e){}
  });
}

[/codes]
最后提醒各位, 1.使用此方式存储(包括localStorage,sessionStoraage),需注意用户隐私:重要机密信息就不要使用localStorage了,慎重使用,毕竟客户端都可以读取值。 2.localStorage比较适用于存储不经常更新且不太重要的数据。
5月2

Flex 布局教程

12:48大前端 » HTM5  From: 本站原创
11月15
典型的场景
点击button请求一个同步的ajax,在ajax之前show loading效果,gif或之类,当展现的效果是 loading并没有show出来,这是因为ajax阻塞了ui的渲染,下面的方法可以参考
方法一:
使用settimeout
[codes=c#]
showloading();
settimeout(function(){
$.ajax({...});
},100)
[/codes]

方法二:
上面的图片在IE与Chrome浏览器不显示,在firefox里面正常,通过Chrome debug模式发现,它是会显示的,由于后面的计算是JQuery同步操作,需要过长时间计算,导致界面UI卡死(来不及展示)。
浏览器的渲染(UI)线程和js线程是互斥的,在执行js耗时操作时,页面渲染会被阻塞掉。当我们执行异步ajax的时候没有问题,但当设置为同步请求 时,其他的动作(ajax函数后面的代码,还有渲染线程)都会停止下来。即使DOM操作语句是在发起请求的前一句,这个同步请求也会“迅速”将UI线 程阻塞,不给它执行的时间。这就是代码失效的原因。
jQuery在1.5版本之后,引入了Deferred对象,提供的很方便的广义异步机制。
deferred对象就是jQuery的回调函数解决方案,deferred对象的含义就是"延迟"到未来某个点再执行。
$.ajax()操作完成后,如果使用的是低于1.5.0版本的jQuery,返回的是XHR对象,你没法进行链式操作;如果高于1.5.0版本,返回的是deferred对象,可以进行链式操作。
解决方法:使用JQuery Deferred对象。
[codes=c#]
var getWordCount = function(。。。){
        var defer = $.Deferred();
        var urlStr = "postcommit.html?I_SOURCE=getxliff";
        $.ajax({
            url : urlStr,             //async : false,表示异步执行。
            success: function(dataStr){
                      defer.resolve(dataStr);
            }
        });        
        return defer.promise();
   }

var myTotalprice = function(。。。){
                           //当getWordCount() 执行完成后,执行done()以下操作。就跟同步效果一样。
                          $.when(getWordCount(。。。)).done(function(dataStr){
                                       alert(dataStr);
                           });                  
   }
[/codes]
10月3

 随着HTML5和CSS3的飞速发展,越来越多语义化的标签和炫酷的特性被应用到web应用开发中来,各大浏览器厂商纷纷开始支持这些新特性,web开发人员也都兴趣十足地试用这些新特性开发出更绚丽有趣的应用,但是各大浏览器对这些新特性参差不齐地支持(尤其是令人头疼的IE)所带来的版本兼容性问题始终都是萦绕在开发人员心头的噩梦。传统的使用习惯使得我们很难摒弃老版本浏览器,开发人员只能选择令人厌烦的手工测试,测试,再测试。

为了解决这一难题,Modernizr应运而生了。它的名字听起来有点像Modernize, 确实,该名字起源于使得开发体验能够更现代化的目的,但它并非试图使旧的浏览器现代化,也就是使它支持这些新特性(尽管你确实可以通过添加shim/polyfill脚本来让浏览器支持某些不支持的新特性,后面会介绍)。

8月11
APP开发模式通常分为Web APP与Native APP原生模式两种,这两种模式均各自有自己的优势,到底是采用Native App开发还是采用Web App开发一直是业界争论的焦点,但是随着HTML5的发展及云服务普及,采用HTML5进行Web App开发正在成为一种趋势,用户可以根据应用特点和需求进行选择,亦可选择两者混合模式:

Native App开发

Native App开发即我们所称的传统APP开发模式(原生APP开发模式),该开发针对IOS、Android等不同的手机操作系统要采用不同的语言和框架进行开发,该模式通常是由“云服务器数据+APP应用客户端”两部份构成,APP应用所有的UI元素、数据内容、逻辑框架均安装在手机终端上。

Web App开发

Web App开发即是一种框架型APP开发模式(HTML5  APP 框架开发模式),该开发具有跨平台的优势,该模式通常由“HTML5云网站+APP应用客户端”两部份构成,APP应用客户端只需安装应用的框架部份,而应用的数据则是每次打开APP的时候,去云端取数据呈现给手机用户。



原生APP开发及Web APP开发模式的区别

Web APP需开发“html5云网站”和“APP客户端”,昆明天度网络公司总结这类型APP应用呈现以下特点:

(1)每次打开APP,都要通过APP框架向云网站取UI及数据;

(2)手机用户无法上网则无法访问APP应用中的数据。

(3)框架型的APP无法调用手机终端的硬件设备(语音、摄像头、短信、GPS、蓝牙、重力感应等)

(4)框架型APP的访问速度受手机终端上网的限制,每次使用均会消耗一定的手机上网流量;

(5)框架型APP应用的安装包小巧,只包含框架文件,而大量的UI元素、数据内容刚存放在云端;

(6)APP用户每次都可以访问到实时的最新的云端数据;

(7)APP用户无须频繁更新APP应用,与云端实现的是实时数据交互;

适用企业:电子商务、金融、新闻资讯、企业集团需经常更新内容的APP应用。

Native App(原生型APP)需要开发“云服务器数据中心”和“APP客户端”,昆明天度网络公司总结这类型的APP应用呈现以下特点:

(1)每次获取最新的APP功能,需要升级APP应用;

(2)原生型APP应用的安装包相对较大,包含UI元素、数据内容、逻辑框架;

(3)手机用户无法上网也可访问APP应用中以前下载的数据。

(4)原生型的APP可以调用手机终端的硬件设备(语音、摄像头、短信、GPS、蓝牙、重力感应等)

(5)APP应用更新新功能,涉及到每次要向各个应用商店进行提交审核。

适用企业:游戏、电子杂志、管理应用、物联网等无需经常更新程序框架的APP应用。

到底该如何选择Web App和Native App开发模式

移动Web无所不在,移动Web是目前唯一的支持各种设备访问的平台,与桌面Web一样,移动Web支持各种标准的协议。移动Web也是唯一一个可供开发者发布移动应用的平台,它将各种移动交互与桌面任务有效地连接了起来;而开发Native App可以充分利用设备的特性,而这一点往往是Web浏览器做不到的,所以对一个产品本身而言,Native App是最佳的选择。下面几节将讨论一下Native App的一些主要功能。
8月6
touchstart:触摸开始的时候触发

touchmove:手指在屏幕上滑动的时候触发

touchend:触摸结束的时候触发

而每个触摸事件都包括了三个触摸列表,每个列表里包含了对应的一系列触摸点(用来实现多点触控):

touches:当前位于屏幕上的所有手指的列表。

targetTouches:位于当前DOM元素上手指的列表。

changedTouches:涉及当前事件手指的列表。

每个触摸点由包含了如下触摸信息(常用):

identifier:一个数值,唯一标识触摸会话(touch session)中的当前手指。一般为从0开始的流水号(android4.1,uc)

target:DOM元素,是动作所针对的目标。

pageX/pageX/clientX/clientY/screenX/screenY:一个数值,动作在屏幕上发生的位置(page包含滚动距离,client不包含滚动距离,screen则以屏幕为基准)。 

radiusX/radiusY/rotationAngle:画出大约相当于手指形状的椭圆形,分别为椭圆形的两个半径和旋转角度。初步测试浏览器不支持,好在功能不常用,欢迎大家反馈。
[codes=c#]
var obj = document.getElementByIdx_x('id');
obj.addEventListener('touchmove', function(event) {
     // 如果这个元素的位置内只有一个手指的话
    if (event.targetTouches.length == 1) {
     event.preventDefault();// 阻止浏览器默认事件,重要
        var touch = event.targetTouches[0];
        // 把元素放在手指所在的位置
        obj.style.left = touch.pageX-50 + 'px';
        obj.style.top = touch.pageY-50 + 'px';
        }
}, false);
[/codes]
7月26
我现在使用的浏览器是Chrome版本 32.0.1664.3 m Aura,发现该版本的Chrome每次打开页面滚动页面对于position:fixed的元素会抖动,然而在重新应用position:fixed,抖动就不存在了,或者F5刷新页面后也不会抖动。

目前可能可以解决的方法目前可以解决的方法我也尝试了一些,只剩下几个。

第一种,给fixed的元素添加css的样式,我试过,这个可以解决此闪动的问题。
-webkit-transform: translateZ(0);

第二种,设置css。我是在不复杂的页面做的测试。
html, body {height:100%;overflow:auto;margin: 0;}
注意,引入这个CSS可能会导致原来的页面布局出现问题,慎重。我的同事也说,这个是为了解决IE6系列的fixed抖动问题。

第三种,引入jquery1.7.2的类库。
引入jQuery的方法不知道为什么可以,但是引入了1.11.0的版本就无法解决这个问题。很奇怪。
7月26

移动h5自适应布局

23:35大前端 » HTM5  From: 本站原创
问题一,分辨率Resolution适配:
不同屏幕宽度,html元素宽高比和字体大小,元素之间的距离自适应,使用rem单位。

问题二,单位英寸像素数PPI适配:
使用rem单位,文字会发虚。段落文字,使用px单位,用media query或js来适配。标题文字可以直接使用rem单位。

问题三,设备像素比例DPR适配:
1物理像素在

显示效果不合需求。要根据devicePixelRatio来修改meta标签的scale

参考:
http://www.html-js.com/article/2402
http://isux.tencent.com/web-app-rem.html
https://github.com/amfe/lib.flexible

demo如下:
[codes=c#]



    
    
    移动h5自适应布局
    


    
动态更改html元素大小

    

    

    



[/codes]
8月31
  2011年,作为WEB行业中关注的焦点之一就是HTML5的发展。笔者也在很多站长网看多许多这方面的文章,但是笔者发现好像很少有能直接提出是否HTML5标准的WEB页面可以影响到站点的流量及真正的与优化有关系的文章。笔者将在即将结束的2011年发表关于一年来笔者对于HTML5的认识。首先我们先要知道新标准在WEB上有什么优点及缺点。

  HTML5的优缺点

  HTML5作为WEB标准的最新版本自认而然有许多显得改进。其中HTML5使WEB在用户的可用性和友好体验度上达到一定的提高;HTML5上有几个新的标签,这可以使开发人员可以更加开放方便的构建站点;可以更好的支持多媒体的元素,这包含视频和音频;可以很好的解决FLASH的局限性;在站点页面的抓取和索引方面,HTML5会更有优势;可以被大量的涌入移动应用程序APP及游戏的开发等等。

  当然HTML5也有一定的缺点,我们可以这么说:Html5可以使WEB更加的美好,但是这天还不是现在。由于HTML5还出去起步阶段,目前并不能很好的被浏览器所支持。目前主流的浏览器都趋向于支持HTML5,但是仍还存在许多的不兼容不支持。
分页: 1/1 第一页 1 最后页 [ 显示模式: 摘要 | 列表 ]