做IT,别浮躁。。。
Pages: 1/279 First page 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 Next page Final page [ View by Articles | List ]
Aug 25
IOS下日期问题(苹果浏览器Safari对JS函数库中newDate()函数中的参数的解析中不支持形如“2020-01-01”形式)
苹果浏览器safari对new Date(‘1937-01-01‘)不支持,用.replace(/-/g, "/")函数替换掉中划线即可
Aug 23

Flux 不指定

tommyhu , 14:54 , 大前端 , Comments(0) , Trackbacks(0) , Reads(16) , Via Original
Flux应用架构 http://reactjs.cn/react/docs/flux-overview.html

React+Redux
Vue+Vues
Tags:
Aug 19
解决了一个低端设备问题,原来一个页面时间使用了touch和click,而使用了e.preventDefault();不见效果,改为click后就可以了

一.click与300ms延迟

移动浏览器提供一个特殊的功能:双击(double tap)放大

300ms的延迟就来自这里,用户碰触页面之后,需要等待一段时间来判断是不是双击(double tap)动作,而不是立即响应单击(click),等待的这段时间大约是300ms。之前有过简单介绍: 黯羽轻扬:HTML5触摸事件

移动事件提供了 touchstart 、 touchmove 、 touchend 却没有提供tap支持,主流框架(库)都是手动实现了自定义tap事件,以求消除300ms延迟,提高页面响应速度。对于简单的页面,可以把 touchstart 或者 touchend 当作tap来用,但存在一些问题,比如手指接触目标元素,按住不放,慢慢移出响应区域,会触发 touchstart 事件执行对应的事件处理器(本不应该触发), touchend 事件也存在类似的问题。

此外, 使用原生touch事件也存在点击穿透的问题 ,因为click是在touch系列事件发生后大约300ms才触发的,混用touch和click肯定会导致点透问题,下面详细介绍
Aug 17
开始尝试用Ionic做些DEMO,基于angularjs提供数据双向绑定,提供了预制的css class界面样式(类似bootstracp)和angularjs的指令集,例如以下代码ion-header-bar为Ionic基于angularjs开发的内置指令,class="bar-positive"为css class,提供界面ui


当然,Ionic要做的是让前端的人也能玩Android和IOS的应用(就象nodejs一样,es6,es7让js也纯爷们起来,),并且无限趋近于原生,当然如果你玩的安卓开发和swif和溜也没必要搞这个了,毕竟native的体验终归是最好的

window下Ionic开发环境搭建,环境变量修改后已经打开cmd窗口需要重启,


1、下载JDK并配置Java运行环境
     http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html
     安装后需要进行如下配置:
     在“系统变量”中,设置3项属性,JAVA_HOME,PATH,CLASSPATH(大小写无所谓),若已存在则点击“编辑”,不存在则点击“新建”。

     1)JAVA_HOME
         C:\Program Files\Java\jdk1.8.0_45

         注意:JAVA_HOME指明JDK安装路径,就是刚才安装时所选择的路径,此路径下包括lib,bin,jre等文件夹。
Highslide JS
        

       2)Path
           %JAVA_HOME%\bin;
    在系统变量Path的值的最前面加入.否则可能在运行时,系统选择部署在前面的jre环境。
    注意:Path使得系统可以在任何路径下识别java命令
Highslide JS
          

       3)CLASSPATH
           .;%JAVA_HOME%\lib
          注意: 点好表示当前目录,不能省略
                 CLASSPATH为java加载类(class or lib)路径,只有类在classpath中,java命令才能识别
Highslide JS
          

         测试:“开始”->“运行”,键入“cmd”,键入命令“java -version”,出现下图画面,说明环境变量配置成功。
Highslide JS
        


2、下载Apache Ant 并将其bin目录路径添加进Path路径
      http://mirror.tcpdiag.net/apache/ant/binaries/
      下载完成后解压 ,如存放在C盘 Program Files目录下则Path中添加如下值 C:\Program Files\apache-ant-1.9.4\bin;
      并添加path环境变量(添加方法和java配置path变量是一样的,注意以 ; 隔开每个环境变量的值)
Highslide JS
      

3、 下载Android Studio
       http://rj.baidu.com/soft/detail/27390.html?ald

       1)由于下载Android SDK并非易事,需要配置代理或FQ;

       2)在使用中会有各种报错或提示更新sdk等乱七八糟问题,

       因此推荐下载Android Studio (百度软件中心下载速度不错),下载后进行安装,会提示选择SDK安装路径,我们主要使用的就是这个SDK。

       完成安装后向系统Path环境变量中添加两个值。分别是 Android SDK中tools目录的路径和platform-tools的路径。例如:

       C:\Program Files (x86)\Android\android-sdk\tools;
       C:\Program Files (x86)\Android\android-sdk\platform-tools;
Highslide JS
      



4、下载NodeJs并安装

     https://nodejs.org/download/
Highslide JS
      



5、安装Ionic 和 Cordova

    http://ionicframework.com/getting-started/

    运行“CMD” 键入“npm install -g cordova ionic” 根据网络环境,安装的时间有所不同。

npm install -g cordova ionic全局安装,在操作中本项目安装生成apk一直报错


    安装完成后,就可以创建一个Ionic项目“ionic start myApp tabs”

    进入myApp项目 “cd myApp”

    在浏览器中运行 "ionic serve"

    添加安装平台 “ionic platform add android”

    编译成apk “ionic build android”

    直接在手机上进行调试“ionic run”
Aug 5

 原文: What is WebAssembly and why it affects web developers!

你听说过 WebAssembly 吗?这是由 Google , Microsoft , Mozilla , Apple 等几家大公司合作发起的一个关于 面向Web的通用二进制和文本格式 的项目。 现在就让我们来看看WebAssembly到底是个啥?为什么它的出现和未来的发展跟我们每个人都息息相关,即使你并不是一个程序猿/媛~

至少在某种程度上,它将改变Web生态。

JavaScript–Web世界的汇编语言

我们有许多面向Web应用的开发规范,这些设计优良的规范让Web开发者们的工作变得更加的简单。我们很难想象自己所创建和网站或应用没有任何规则、编程语言、框架和开发理念可以遵循。

而将所有这些事情组合到一起的Web规范有一个众所周知的名字: JavaScript !

Aug 4

js闭包 不指定

tommyhu , 15:32 , 大前端 , Comments(0) , Trackbacks(0) , Reads(75) , Via Original
见过最实在的解释

闭包(closure)是Javascript语言的一个难点,也是它的特色,很多高级应用都要依靠闭包实现。
下面就是我的学习笔记,对于Javascript初学者应该是很有用的。
一、变量的作用域
要理解闭包,首先必须理解Javascript特殊的变量作用域。
变量的作用域无非就是两种:全局变量和局部变量。
Javascript语言的特殊之处,就在于函数内部可以直接读取全局变量。
  var n=999;
  function f1(){
    alert(n);
  }
  f1(); // 999
另一方面,在函数外部自然无法读取函数内的局部变量。
  function f1(){
    var n=999;
  }
  alert(n); // error
这里有一个地方需要注意,函数内部声明变量的时候,一定要使用var命令。如果不用的话,你实际上声明了一个全局变量!
  function f1(){
    n=999;
  }
  f1();
  alert(n); // 999
二、如何从外部读取局部变量?
出于种种原因,我们有时候需要得到函数内的局部变量。但是,前面已经说过了,正常情况下,这是办不到的,只有通过变通方法才能实现。
那就是在函数的内部,再定义一个函数。
  function f1(){
    var n=999;
    function f2(){
      alert(n); // 999
    }
  }
在上面的代码中,函数f2就被包括在函数f1内部,这时f1内部的所有局部变量,对f2都是可见的。但是反过来就不行,f2内部的局部变量,
对f1就是不可见的。这就是Javascript语言特有的"链式作用域"结构(chain scope),子对象会 "一级一级" 地向上寻找所有父对象的变量。
所以,父对象的所有变量,对子对象都是可见的,反之则不成立。
既然f2可以读取f1中的局部变量,那么只要把f2作为返回值,我们不就可以在f1外部读取它的内部变量了吗!
  function f1(){
    var n=999;
    function f2(){
      alert(n);
    }
    return f2;
  }
  var result=f1();
  result(); // 999
三、闭包的概念
上一节代码中的f2函数,就是闭包。
各种专业文献上的"闭包"(closure)定义非常抽象,很难看懂。我的理解是,闭包就是能够读取其他函数内部变量的函数。
由于在Javascript语言中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解成"定义在一个函数内部的函数"。
所以,在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁。
四、闭包的用途
闭包可以用在许多地方。它的最大用处有两个,一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中。
怎么来理解这句话呢?请看下面的代码。
  function f1(){
    var n=999;
    nAdd=function(){n+=1}
    function f2(){
      alert(n);
    }
    return f2;
  }
  var result=f1();
  result(); // 999
  nAdd();
  result(); // 1000
在这段代码中,result实际上就是闭包f2函数。它一共运行了两次,第一次的值是999,第二次的值是1000。
这证明了,函数f1中的局部变量n一直保存在内存中,并没有在f1调用后被自动清除。
为什么会这样呢?原因就在于f1是f2的父函数,而f2被赋给了一个全局变量,这导致f2始终在内存中,而f2的存在依赖于f1,
因此f1也始终在内存中,不会在调用结束后,被垃圾回收机制(garbage collection)回收。
这段代码中另一个值得注意的地方,就是"nAdd=function(){n+=1}"这一行,首先在nAdd前面没有使用var关键字,因此nAdd是一个全局变量,而不是局部变量。
其次,nAdd的值是一个匿名函数(anonymous function),而这个匿名函数本身也是一个闭包,
所以nAdd相当于是一个setter,可以在函数外部对函数内部的局部变量进行操作。
五、使用闭包的注意点
1)由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。
解决方法是,在退出函数之前,将不使用的局部变量全部删除。
2)闭包会在父函数外部,改变父函数内部变量的值。所以,如果你把父函数当作对象(object)使用,把闭包当作它的公用方法(Public Method),
把内部变量当作它的私有属性(private value),这时一定要小心,不要随便改变父函数内部变量的值。
六、思考题
如果你能理解下面两段代码的运行结果,应该就算理解闭包的运行机制了。
代码片段一。
  var name = "The Window";
  var object = {
    name : "My Object",
    getNameFunc : function(){//alert(this.name);//My Object
      return function(){
        return this.name;// 空
      };
    }
  };
        alert(this.name);// The Window
  alert(object.getNameFunc()()); // 空

代码片段二。
  var name = "The Window";
  var object = {
    name : "My Object",
    getNameFunc : function(){
      var that = this;
      return function(){
        return that.name;
      };
    }
  };
  alert(object.getNameFunc()()); // My Object

一层访问一层,不能跨层访问
Aug 4

随着Web App的发展,越来越多的移动端App使用HTML5的方式来开发,除了一些HybridApp以外,其他一部分Web App还是通过浏览器来访问的,通过浏览器访问就需要联网发送请求,这样就使得用户在离线的状态下无法使用App,同时Web App中一部分资源并不是经常改变,并不需要每次都向服务器发出请求,出于这些原因,HTML5提出的一个新的特性:离线存储。通过离线存储,我们可以通过把需要离线存储在本地的文件列在一个manifest配置文件中,这样即使在离线的情况下,用户也可以正常使用App。

怎么用

首先来讲解下离线存储的使用方法,说起来也很简单。只要在你的页面头部像下面一样加入一个manifest的属性就可以了。

<!DOCTYPE HTML> <html manifest = "cache.manifest"> ... </html>

然后cache.manifest文件的书写方式,就像下面这样:

CACHE MANIFEST #v0.11  CACHE:  js/app.js css/style.css  NETWORK: resourse/logo.png  FALLBACK: / /offline.html

离线存储的manifest一般由三个部分组成:
1.CACHE:表示需要离线存储的资源列表,由于包含manifest文件的页面将被自动离线存储,所以不需要把页面自身也列出来。
2.NETWORK:表示在它下面列出来的资源只有在在线的情况下才能访问,他们不会被离线存储,所以在离线情况下无法使用这些资源。不过,如果在CACHE和NETWORK中有一个相同的资源,那么这个资源还是会被离线存储,也就是说CACHE的优先级更高。
3.FALLBACK:表示如果访问第一个资源失败,那么就使用第二个资源来替换他,比如上面这个文件表示的就是如果访问根目录下任何一个资源失败了,那么就去访问offline.html。

浏览器怎么解析manifest

那么浏览器是怎么对离线的资源进行管理和加载的呢?这里需要分两种情况来讨论。

        
  •     

    在线的情况下,浏览器发现html头部有manifest属性,它会请求manifest文件,如果是第一次访问app,那么浏览器就会根据manifest文件的内容下载相应的资源并且进行离线存储。如果已经访问过app并且资源已经离线存储了,那么浏览器就会使用离线的资源加载页面,然后浏览器会对比新的manifest文件与旧的manifest文件,如果文件没有发生改变,就不做任何操作,如果文件改变了,那么就会重新下载文件中的资源并进行离线存储。

        
  •     
  •     

    离线的情况下,浏览器就直接使用离线存储的资源。

Aug 3

 A curated list of delightful Node.js packages and resources.

Inspired by the awesome list thing.

Packages

Pages: 1/279 First page 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 Next page Final page [ View by Articles | List ]