Hedgehog

正在学习前端,并寻求实习机会

 

开始用Webstorm开发是做Egret小游戏,那时对webstorm不是很熟悉(虽然现在也不是很熟悉),
所以对于Egret的ts编译不是很智能,每次都要手动去编译
可是看着网上的教程都弄不好,由于赶进度,就没花时间研究了
今天用到less的编译,就打算花时间弄一下
终于……恍然大悟的是,原来我一直把File watcher & External tools这两个的设置混淆了……难怪说弄不好

闲话说完,进入正题:
怎么安装nodejs怎么安装less这里就不说了,网上一搜一大堆

一、先看看file – setting – tools里面的界面(其实新建一个*.less文件,webstorm就会弹出提示叫设置file watcher的了)

二、File watcher 先看图
 右手边的加号减号就是对file watcher的增删改,没有类型就新建吧
主要是watcher setting里面的三个选项,其他的系统默认设置的就行了

1、执行的程序:直接就是less的cmd执行文件

2、 运行程序时所需要的参数:当前编辑的文件的路径

3、工作区间:当前编辑的文件的父级

三、External tools 看图,就是中间三个选项让小白的我混淆了……

这里的设置跟watcher 是不一样的

1、执行的程序:这时是node

2、这里在node里面执行有三个参数:node环境里的lessc,当前编辑的less文件(绝对路径),最终生成的css文件(只需要文件名+扩展名)

3、程序的工作空间:这里有了工作空间,所以生成的css文件会在这里生成

四、主要设置就是上面两步,file watcher的话,保存就会执行,那下面external tools怎么执行呢,有两种方法:

1、第一种就是在setting – appearance&behavior – keymap里面设置快捷键

2、第二种就是直接执行命令行,也是三个参数,不过这是最后生成的css的路径就要写全了,不然会生成到执行时的根目录去

F:\IIS>lessc F:\IIS\css\index.less F:\IIS\css\index.css

 

 

利用chrome可以同步移动端和PC端的web开发调试,前提是,Android系统版本必须4.0+,而且必须用chrome,或者Android 4.4系统版本以上的原生app里面的webview才可以。

由于Android 4.4的原生app webview 的调试暂时还比较少,所以,这里简单说一下chrome下的调试。

1、移动设备和PC设备必须安装了chrome 32以上的版本,移动设备必须为Android4.0+;

2、移动设备进入设置功能,设置为开发模式;

3、PC端chrome打开chrome://inspect/#devices,里面的选项打勾;

4、用数据线连接移动设备与PC设备;

5、手机开启usb调试模式(一般插了数据线会弹出提示);

6、然后在移动设备上用chrome打开你要调试的网址,这时,PC端会识别到移动设备上的chrome的浏览情况;

7、点击PC端的某网址下的inspect,就会弹出开发者模式,大功告成。

详情看下图:

 

如果想看看Android 4.4的原生app  webview调试,就看下图:

 

 

reset.css

@charset "utf-8";
body,div,p,ul,ol,li,textarea,form,input,h1,h2,h3,h4,h5,h6,dl,dt,dd,img,section,article,aside,header,footer,nav,figure,hgroup{margin:0;padding:0;font-size:100%;}
div,span,li,p,a{-webkit-tap-highlight-color:rgba(0,0,0,0);}
h1,h2,h3,h4,h5,h6{font-weight:normal;}
img{vertical-align: middle;border:none;}
ul,ol,li{list-style:none}
i,em{font-style:normal;}
p{line-height:22px;}
a:link,a:visited{text-decoration:none}
.clearfix:after{content:"";display:block;clear:both;height:0;overflow:hidden;}
.text_overflow{overflow:hidden;white-space:nowrap;-o-text-overflow:ellipsis;text-overflow:ellipsis;}
body{font-size:14px;font-family:"ff-tisa-web-pro-1","ff-tisa-web-pro-2","Lucida Grande","Hiragino Sans GB","Hiragino Sans GB W3","\5FAE\8F6F\96C5\9ED1",Helvetica,serif;}
a, img {
 -webkit-touch-callout: none; /* 禁止长按链接与图片弹出菜单 */
}
html, body {
 -webkit-user-select: none; /* 禁止选中文本(如无文本选中需求,此为必选项) */
 user-select: none;
}

要考虑Android低端机与2G网络场景下性能
发布前必要检查项

  • 所有图片必须有进行过压缩
  • 考虑适度的有损压缩,如转化为80%质量的jpg图片
  • 考虑把大图切成多张小图,常见在banner图过大的场景

加载性能优化, 达到打开足够快

  • 数据离线化,考虑将数据缓存在 localStorage
  • 初始请求资源数 < 4 注意!
  • 图片使用CSS Sprites 或 DATAURI
  • 外链 CSS 中避免 @import 引入
  • 考虑内嵌小型的静态资源内容
  • 初始请求资源gzip后总体积 < 50kb
  • 静态资源(HTML/CSS/JS/IMAGE)是否优化压缩?
  • 避免打包大型类库
  • 确保接入层已开启Gzip压缩
  • 尽量使用CSS3代替图片
  • 初始首屏之外的图片资源需延迟加载 注意!
  • 单页面应用(SPA)考虑延迟加载非首屏业务模块

运行性能优化, 达到操作足够流畅

  • 避免 iOS 300+ms 点击延时问题 注意!
  • 缓存 DOM 选择与计算
  • 避免触发页面重绘的操作
  • Debounce连续触发的事件(scroll/resize),避免高频繁触发执行
  • 尽可能使用事件代理,避免批量绑定事件
  • 使用CSS3动画代替JS动画
  • 避免在低端机上使用大量CSS3渐变阴影效果,可考虑降级效果来提升流畅度
  • HTML结构层级保持足够简单,推荐不超过 5 个层级
  • 尽能少的使用CSS高级选择器与通配选择器
  • Keep it simple

在线性能检测评定工具使用指南

  • 访问 Google PageSpeed 在线评定网站
  • 在地址栏输入目标URL地址,点击分析按钮开始检测
  • 按 PageSpeed 分析出的建议进行优化,优先解决红色类别的问题

参考:http://www.zjgsq.com/1339.html

 

开发中发现,在红米手机的webview里面,如果在同一个元素上同时设置了边框以及圆角,而且有背景颜色时,背景颜色会溢出,没有圆角效果。

其实这个是因为红米解析css的background时出了问题。

在css2引擎里,background的显示是不包括border的,意思是从padding开始;

可是在css2.1~css3引擎里,background的显示则是包括border的,意思是从border开始;

红米解析background时,background没有根据border的圆角而圆,而是溢出了,而去掉border,background还是能圆的。

所以,会出现这个问题,主要是元素加了边框,而且是圆角的,再加上有背景颜色。

要解决这个问题,就要把background从border移进去padding开始。

简单的说,就是再加上属性background-clip:padding-box;就可以解决这个问题了。

 

开发微站时发现一个bug,在小米1s的微信webview里面,当元素被设为position:fixed时,z-index有时候会失效。

测试了一下,发现是因为有些元素使用了-webkit-animation。

这是怎么一回事呢?当两个元素都设为position:fixed时,再给他们设z-index,这时,层级就不是按照正常的大者为上了。

而是先看看谁有-webkit-animation这个属性,哪个有就哪个为上。如果两个都有,这是才以正常层级划分。

先别急,除了是否有-webkit-animation这个属性之外,里面必须有渐变属性

@-webkit-keyframes name{
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(0deg); }
}

像上面的代码,虽然从0%-100%都没有变化,可是却不能省掉,不然就当做没有-webkit-animation属性一样,沉下去了。

 

一、借助script的异步跨域请求

先说跨域的问题,首先要指出的是,iframe里的js宿主对象一样也躲不开同源策略(Same Origin Policy),仅仅能解决二级域名的跨域而已,比如www.tudou.com和so.tudou.com,如果要请求某个八杆子打不到一起去的域名下的数据(例如你想搞mashup),建议老老实实的用script标签去请求JSONP罢。关于JSONP要附带说一下的是,jQuery对JSONP请求的封装方式很值得提倡:

$.getJSON(url, params + "&jsoncallback=?", function(json){
    /* do something */
});

用jsoncallback作为服务器端支持的标准jsonp参数,而每次执行这个方法都会用时间戳生成一个唯一的全局函数名,替换这个“?”,这个细节被封装到黑盒里,使用者不必了解,可以像普通的ajax请求一样,用匿名的回调函数作为最末尾的参数(这是jquery强调的风格),这种语法糖(syntactic sugar)的作用绝对不仅仅是让前端开发人员可以偷懒而已,对代码的可读性,兼容性和今后的维护都有好处。(我经常要向服务器端的开发人员解释这个道理,否则他们才不给你支持什么jsoncallback参数呢,直接给你返回一个“yy({……})”就算完工……囧)

二、利用前沿技术的跨域方法

当然了,我们还可以走一些目前来看比较野的路子来实现跨域,比如在页面里嵌入一个不到1K的swf,借助flashplayer向部署了crossdomain.xml的服务器请求数据,再用actionscript里的ExternalInterface类把数据还给javascript(我觉得这种方法忒有调用dll的感觉~大心)。

我们还可以指望ie8里支持的XDomainRequestAllowed,和firefox3.1支持的Access Control,甚至传说中的HTML5 socket……噢喔喔,多么甜美的梦……/掐一把脸蛋

三、用iframe直接发送跨域请求

跟script标签一样,iframe也可以用来替代ajax,而且在修改document.domain之后(比如上面提到的两个域名,可以设置document.domain = “tudou.com”),还可以解决部分跨域问题。

通过iframe请求数据的方法,最直接的莫过于在页面里动态的嵌入一个iframe标签,用它的src属性直接请求包含数据的网页,然后利用那个网页里的js把数据传给父页面,比如:

<iframe id="crossdomain" width="0" height="0" style="visibility:hidden;"src="http://yoursite.com/request_url/" ></iframe>

这种方法耦合的太紧,非常不推荐。你请求的URI代表一个资源,应该是单纯的数据,它会作为xml,json,js代码还是html来处理,这个并不重要,不应该把你的程序逻辑跟数据混杂到一起,数据也不应该因为跨域或不跨域,用iframe,script还是ajax来请求就变成完全不同的东西。

有人会说:为了让数据能够被JS处理,返回的内容难免有差异。——但是小的差异可以通过合理的封装隐藏起来,比如JQuery的getJSON方法

有人会说:请求的URI是一个动态页面,同样可以在URI里支持类似jsoncallback的参数,生成一个script标签和其中的JS代码,把数据“包裹”在JS里,比如请求“http://yoursite.com/request_url/?callback=cb1304344”,返回:

<script type="text/javascript">
document.domain="tudou.com";
top.cb1304344({ /* 数据 */ });
</script>

——首先,很多情况下你请求到的不会是动态页面,在这个到处都强调高负载的web世界里,你拿到的经常是squid之类的代理程序返回的缓存。其次,如果你请求的是HTML格式的文本,为了能作为JS代码来执行,服务器端必须对这段文本做转义和清理工作,而且安全性还不一定能保证(因为HTML里经常包含很多来自UGC的内容),如果你请求的是JSON格式的数据……那何必用iframe咧……直接嵌script罢……

四、用iframe直接请求数据的最佳实践

我推荐在上述方法的基础上做改良,首先在服务器端,直接返回数据本身,并且把数据“包裹”在一个textarea标签里,比如:

<textarea><div><p>yyyyy</p></div></textarea>

textarea的优点是可以支持任何格式的内容,而且这些内容不会在iframe子页面里解析(比如创建DOM树,执行JS),接下来前端要做的,只是在父页面里获取到子页面的DOM,把textarea的内容取出来(注意不能取innerHTML而要取value)。

这里存在一个判断iframe是否加载完成的问题,解决方法之一是在iframe标签上写onload事件,不过这样就需要显式的调用一个函数。

方法二如下:

(function(){
try{
   callback(document.getElementById('crossdomain').contentWindow.document.body.getElementsByTagName("TEXTAREA")[0].value);
}catch(e){
    setTimeout(arguments.callee,0);
    return;
}   
})();

最后我们可以封装出这样一个方法:

window.TUI = window.$ = {};
/**
* @public 通过iframe异步请求数据
* @param {string}  url是请求的地址
* @param {function}  cb是处理返回数据的回调函数
*/
TUI.getIframeData = function(url, cb){
    var f = document.getElementById('crossdomain');
    if(f)
        f.src = url;
    else{
        var t = document.createElement("DIV");
        t.innerHTML = '<iframe id="crossdomain" width="0" height="0" style="visibility:hidden;" src="' + url + '" ></iframe>';
        document.body.appendChild(t.firstChild);
    }

    (function(){
    try{
       cb(document.getElementById('crossdomain').contentWindow.document.body.getElementsByTagName("TEXTAREA")[0].value);
    }catch(e){
        setTimeout(arguments.callee,0);
        return;
    }   
    })();
};

//像这样执行
$.getIframeData("http://yoursite.com/request_url/", function(data){
    /* do something */
});

只要再增加一个可选的param参数,这就是一个很标准的jQuery AJAX API,我们还可以在jQuery的$.get上面封装,增加一个是否跨域的判断,当这个request的URI修改成同样的域名后,自动切换到普通的AJAX方法来请求,把返回的文本用类似这样的正则/<(textarea)>(.+)<\/(textarea)>/删掉多余的字符,再传给回调函数,前端和服务器端都不用修改代码。

五、用iframe直接请求数据的缺陷

必须指出的是,iframe在ie里获取数据时会引发一些“小问题”,dojo的创始人Alex Russell把它们称作“灵异点击(phantom click)”和“噩梦般的指示器(throbber of doom)”,前者是指在iframe请求内容的时候会出现一次点击链接的音效(让用户怀疑闹鬼,多差的体验口牙!),后者是指iframe加载过程中,ie的界面上会出现正在读取的提示(比如左下的进度条,右上的图标)……好罢,其实以我个人的标准,这两个问题都可以无视……

这种方法还有一个明显的缺陷,就是只支持GET类型的请求。

六、用iframe结合ajax

不过iframe还有一种使用方法,不但可以避免上面提到的问题,也不需要服务器端做任何调整,简单来说:在iframe的src里调用一个包含ajax方法的页面,然后父页面调用这个方法来发起跟子页面同域名下的ajax请求。在土豆网的播放页面上,我使用这种方法请求用户评论统一接口里的HTML内容,例如这个WH40K:DOWII的视频:

获得评论部分HTML的接口类似这样:

http://comments.tudou.com/itemcomment.srv?method=get&iid=21283123&page=1&tm=5&ban=1

这个接口在独立的一组服务器上实现,在视频播放页,豆单播放页,豆单封面,相册,个人主页都会被调用。由于包含大量用户提交的内容和复杂的HTML结构,如果用JSON形式,前端后端处理起来都效率低,此外,提交新评论,回复,删除,也会用到comments.tudou.com这个域名下的接口,而这些操作显然需要POST类型的请求。在这种需求下,借助iframe的AJAX方法

首先在comments.tudou.com域名下部署一个供iframe调用的跨域文件,感觉很像flashplayer的crossdomain.xml……

http://comments.tudou.com/crossdomain/index.html

可以看到源文件里仅仅包含一个stand-alone的ajax方法……呃……你觉得很眼熟?不用怀疑,就是在jQuery源代码的基础上修改来的-___-b,支持最基本的需求。这个页面可以设置很长的过期头让浏览器缓存起来,因为不会再有变动。

在父页面里通过TUI.videoComment.request提供统一的接口,不做详述了,只列举其中访问跨域方法的部分:

(function(){
    try{
        $('#crossdomain')[0].contentWindow.TUI.ajax(o);   
    }catch(e){
        setTimeout(arguments.callee,500);
        return;
    }   
})();

七、总结一下

iframe适用于 ( 跨域的 && ( 返回大量数据 || 返回HTML内容 || 需要发POST请求 ) ) 的场合,除此之外还有comet里的串流技术(streaming)——本文不涉及。使用时需要注意保持资源的纯粹性,并尽可能隐藏那些跟其他异步请求差异很大的或包含hack的细节(比如嵌入iframe,触发回调函数,处理数据),设计出一致的,兼容性和扩展性良好的,不碍眼的接口XD

关于跨域还要补充一点:修改document.domain可能会产生一些无法预料的问题,比如在firefox里,document.styleSheets的cssRules属性会被拒绝访问。

 

转自:http://www.webjx.com/javascript/jsajax-14580.html

 

Asynchronous JavaScript and XML (Ajax ) 是驱动新一代 Web 站点(流行术语为 Web 2.0 站点)的关键技术。Ajax 允许在不干扰 Web 应用程序的显示和行为的情况下在后台进行数据检索。使用 XMLHttpRequest 函数获取数据,它是一种 API,允许客户端 JavaScript 通过 HTTP 连接到远程服务器。Ajax 也是许多 mashup 的驱动力,它可将来自多个地方的内容集成为单一 Web 应用程序。

不过,由于受到浏览器的限制,该方法不允许跨域通信。如果尝试从不同的域请求数据,会出现安全错误。如果能控制数 据驻留的远程服务器并且每个请求都前往同一域,就可以避免这些安全错误。但是,如果仅停留在自己的服务器上,Web 应用程序还有什么用处呢?如果需要从多个第三方服务器收集数据时,又该怎么办?

理解同源策略限制

同源策略阻止从一个域上加载的脚本获取或操作另一个域上的文档属性。也就是说,受到请求的 URL 的域必须与当前 Web 页面的域相同。这意味着浏览器隔离来自不同源的内容,以防止它们之间的操作。这个浏览器策略很旧,从 Netscape Navigator 2.0 版本开始就存在。

克服该限制的一个相对简单的方法是让 Web 页面向它源自的 Web 服务器请求数据,并且让 Web 服务器像代理一样将请求转发给真正的第三方服务器。尽管该技术获得了普遍使用,但它是不可伸缩的。另一种方式是使用框架要素在当前 Web 页面中创建新区域,并且使用 GET 请求获取任何第三方资源。不过,获取资源后,框架中的内容会受到同源策略的限制。

克服该限制更理想方法是在 Web 页面中插入动态脚本元素,该页面源指向其他域中的服务 URL 并且在自身脚本中获取数据。脚本加载时它开始执行。该方法是可行的,因为同源策略不阻止动态脚本插入,并且将脚本看作是从提供 Web 页面的域上加载的。但如果该脚本尝试从另一个域上加载文档,就不会成功。幸运的是,通过添加 JavaScript Object Notation (JSON) 可以改进该技术。

 

1、什么是JSONP?

要了解JSONP,不得不提一下JSON,那么什么是JSON ?

JSON is a subset of the object literal notation of JavaScript. Since JSON is a subset of JavaScript, it can be used in the language with no muss or fuss.

JSONP(JSON with Padding)是一个非官方的协议,它允许在服务器端集成Script tags返回至客户端,通过javascript callback的形式实现跨域访问(这仅仅是JSONP简单的实现形式)。

 

2、JSONP有什么用?

由于同源策略的限制,XmlHttpRequest只允许请求当前源(域名、协议、端口)的资源,为了实现跨域请求,可以通过script标签实现跨域请求,然后在服务端输出JSON数据并执行回调函数,从而解决了跨域的数据请求。

 

3、如何使用JSONP?

下边这一DEMO实际上是JSONP的简单表现形式,在客户端声明回调函数之后,客户端通过script标签向服务器跨域请求数据,然后服务端返回相应的数据并动态执行回调函数。

HTML代码 (任一 ):

Html代码
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />  
<script type="text/javascript">  
    function jsonpCallback(result) {  
        //alert(result);  
        for(var i in result) {  
            alert(i+":"+result[i]);//循环输出a:1,b:2,etc.  
        }  
    }  
    var JSONP=document.createElement("script");  
    JSONP.type="text/javascript";  
    JSONP.src="http://crossdomain.com/services.php?callback=jsonpCallback";  
    document.getElementsByTagName("head")[0].appendChild(JSONP);  
</script>

或者

Html代码
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />  
<script type="text/javascript">  
    function jsonpCallback(result) {  
        alert(result.a);  
        alert(result.b);  
        alert(result.c);  
        for(var i in result) {  
            alert(i+":"+result[i]);//循环输出a:1,b:2,etc.  
        }  
    }  
</script>  
<script type="text/javascript" src="http://crossdomain.com/services.php?callback=jsonpCallback"></script>

 

JavaScript的链接,必须在function的下面。

服务端PHP代码 (services.php):

Php代码
<?php  

//服务端返回JSON数据  
$arr=array('a'=>1,'b'=>2,'c'=>3,'d'=>4,'e'=>5);  
$result=json_encode($arr);  
//echo $_GET['callback'].'("Hello,World!")';  
//echo $_GET['callback']."($result)";  
//动态执行回调函数  
$callback=$_GET['callback'];  
echo $callback."($result)";

如果将上述JS客户端代码用jQuery的方法来实现,也非常简单。

$.getJSON
$.ajax
$.get

客户端JS代码在jQuery中的实现方式1:

Js代码
<script type="text/javascript" src="jquery.js"></script>  
<script type="text/javascript">  
    $.getJSON("http://crossdomain.com/services.php?callback=?",  
    function(result) {  
        for(var i in result) {  
            alert(i+":"+result[i]);//循环输出a:1,b:2,etc.  
        }  
    });  
</script>

客户端JS代码在jQuery中的实现方式2:

Js代码
<script type="text/javascript" src="jquery.js"></script>  
<script type="text/javascript">  
    $.ajax({  
        url:"http://crossdomain.com/services.php",  
        dataType:'jsonp',  
        data:'',  
        jsonp:'callback',  
        success:function(result) {  
            for(var i in result) {  
                alert(i+":"+result[i]);//循环输出a:1,b:2,etc.  
            }  
        },  
        timeout:3000  
    });  
</script>

客户端JS代码在jQuery中的实现方式3:

Js代码
<script type="text/javascript" src="jquery.js"></script>  
<script type="text/javascript">  
    $.get('http://crossdomain.com/services.php?callback=?', {name: encodeURIComponent('tester')}, function (json) { for(var i in json) alert(i+":"+json[i]); }, 'jsonp');  
</script>

其中 jsonCallback 是客户端注册的,获取 跨域服务器 上的json数据 后,回调的函数。

http://crossdomain.com/services.php?callback=jsonpCallback

这个 url 是跨域服务 器取 json 数据的接口,参数为回调函数的名字,返回的格式为

Js代码
jsonpCallback({msg:'this is json data'})

 

Jsonp原理:
首先在客户端注册一个callback, 然后把callback的名字传给服务器。

此时,服务器先生成 json 数据。
然后以 javascript 语法的方式,生成一个function , function 名字就是传递上来的参数 jsonp.

最后将 json 数据直接以入参的方式,放置到 function 中,这样就生成了一段 js 语法的文档,返回给客户端。

客户端浏览器,解析script标签,并执行返回的 javascript 文档,此时数据作为参数,传入到了客户端预先定义好的 callback 函数里.(动态执行回调函数)

使用JSON的优点在于:

  • 比XML轻了很多,没有那么多冗余的东西。
  • JSON也是具有很好的可读性的,但是通常返回的都是压缩过后的。不像XML这样的浏览器可以直接显示,浏览器对于JSON的格式化的显示就需要借助一些插件了。
  • 在JavaScript中处理JSON很简单。
  • 其他语言例如PHP对于JSON的支持也不错。

JSON也有一些劣势:

  • JSON在服务端语言的支持不像XML那么广泛,不过JSON.org上提供很多语言的库。
  • 如果你使用eval()来解析的话,会容易出现安全问题。

尽管如此,JSON的优点还是很明显的。他是Ajax数据交互的很理想的数据格式。

 

主要提示:

JSONP 是构建 mashup 的强大技术,但不幸的是,它并不是所有跨域通信需求的万灵药。它有一些缺陷,在提交开发资源之前必须认真考虑它们。

第一,也是最重要的一点,没有关于 JSONP 调用的错误处理。如果动态脚本插入有效,就执行调用;如果无效,就静默失败。失败是没有任何提示的。例如,不能从服务器捕捉到 404 错误,也不能取消或重新开始请求。不过,等待一段时间还没有响应的话,就不用理它了。(未来的 jQuery 版本可能有终止 JSONP 请求的特性)。

JSONP 的另一个主要缺陷是被不信任的服务使用时会很危险。因为 JSONP 服务返回打包在函数调用中的 JSON 响应,而函数调用是由浏览器执行的,这使宿主 Web 应用程序更容易受到各类攻击。如果打算使用 JSONP 服务,了解它能造成的威胁非常重要。

 

转自:http://justcoding.iteye.com/blog/1366102

 

1、-webkit-tap-highlight-color:rgba(255,255,255,0)可以同时屏蔽ios和android下点击元素时出现的阴影。备注:transparent的属性值在android下无效。

2、-webkit-appearance:none可以同时屏蔽输入框怪异的内阴影。

3、-webkit-transform:translate3d(0, 0, 0)在ios下可以让动画更加流畅(这个属性会调用硬件加速模式),但是在android下不可乱用,很多见所未见的bug就是因为这个。

4、@-webkit-keyframes可以预定义很多你所想到的动画,然后通过-webkit-transition来调用。

5、-webkit-background-size可以做高清图标,不过一些低版本的android只能识别background-size,所以有必要两个都要写上;用这个属性的时候推荐树勇cover这个值,可以自动去匹配宽和高。

6、text-shadow多用这个属性,可以美化文字效果。

7、border-radius、box-shadow、gradient、border-image,不解释,可以精简代码。

8、android、ios4及以下,固定宽/高块级元素的overflow:scroll/auto失效,属于浏览器的bug,可借助第三方工具实现。

9、ios5+可以通过scrollTo(0,0)来自动隐藏浏览器地址栏。

10、width可是宽度,initial-scale初始化缩放比例,maximum-scale允许用户缩放的最大比例,minimum-scale允许用户缩放的最小比例,user-scalable是否允许用户缩放。

11、允许用户添加到主屏幕,并提供webapp的支持。

12、css3动画会影响你的自动聚焦,所以自动聚焦要在动画执行之前来做,或者直接舍弃。

13、使用media query适配不同屏幕。

14、如果涉及较多域外链接,DNS Prefetching可以帮你做DNS预解析。

15、如果你希望你的站点更多地在SNS上传播,那么Open Graph Protocol会比较适合你。

16、当用iScroll时候,不能使用:focus{outline:0}伪类,否则滑动会卡。

转自:http://bbs.cherislive.com/forum.php?mod=viewthread&tid=289

 

涉足了一下sencha touch ,它也属于ExtJs框架的一种,看了很多天,糊里糊涂的,虽然有API,可是不懂它的机制还是没啥用……

后来看了很多博文,才略懂一二啊

或者步骤可以这样说:

1、下载sencha touch 的开发文档,里面包括了example ,2.1.0版本及低版本的还包含API,新版本的连到了官网。
2、下载Sencha Cmd 工具,利用DOC命令,可以直接build一个app初版。
3、sencha touch 开发工具配置代码提示,具体方法可以网上再搜。

4、了解sencha touch 的机制:
网上看了很多入门代码,稍微总结一些心得,不知道是否正确,请大牛指教

(1)用DOC命令build出来的app初版里面包含以下

  • app – 放着模型(Models),视图(Views),控制器(Controllers)和存储(Stores)的目录。
  • app.js – 主Javascript入口,在这里开始编辑js。
  • app.json – 配置文件,用来创建你的应用的缩小(minified)版本。
  • index.html – 你的应用的HTML文件。
  • packager.json – 配置文件,用来打包成iOS和Android应用。
  • resources – CSS和图片。
  • sdk(touch) – Sencha Touch SDK的拷贝。你不应该修改这个文件夹中的内容。

(2) Ext.application()和Ext.setup()
一个app一开始,主函数是这两个的其中一个 。
Ext.setup() 是微型的,用于移动设备页面级别的构建;
而Ext.application() 可以实现Ext.Setup 的所有功能,并且创建应用对象,可以充分利用sencha创建的各种应用和功能。
从使用角度来看 Ext.application 适用于MVC框架(比较大型的项目),Ext.setup 则不适用。
Ext.applications 提供深度的应用的连接和访问历史的支持,通过路由引擎技术,可以实现页面的刷新及历史页面的回退等等功能。
Ext.applications()搭配 launch:function(){}

 Ext.application({ name: 'Sencha', launch: function() {} })

Ext.setup()搭配onReady:function(){}

 Ext.setup({ name: 'Sencha', onReady: function() {} })

(3)Ext.define(string,object)
Ext.define(string,object)是自定义添加类(组件),也很常用,不多解释,发链接好了
http://extjs.org.cn/node/544 (还有其他五篇,也可以看一下)
主要要注意的是,string 是类(组件)的名字,object是对象{},里面包含各种自定义的属性和方法
自定义出来的类(组件),使用前必须用Ext.creat()  new一下

(4)xtype和xclass ,声明类型
每当使用xtype,就要牵扯一些东西,应该说是前提吧

Ext.Loader.setPath({
'Ext': 'touch/src'   //这里用"Ext"代替组件的路径,在源文件那里可以找到组件的文件夹群,一般是在src下,而且一般app.js是跟touch同级
 });
Ext.application({
name: 'myapp',    //app的名字
requires: [             //xtype,要new对象(组件),要先requires它们
'Ext.MessageBox',    //这里是引用sencha touch自带的组件,Ext代表刚才设置的路径,后面的MessageBox等代表引用哪个组件
'Ext.Video',
'Ext.TitleBar'
],
launch:function(){}
})

当上面requires了组件之后,下面xtype就可以这样使用了

xtype: 'titlebar' //一般用在items下面的组件的属性

items : [{
 xtype : 'titlebar',
 docked : 'top',
 title : '预约看房',
 items : []
}]

===============华丽丽的分割线===============
xtype是xclass的简称
举例
先Ext.define()一个类

Ext.define({
 'AddressBook.view.Main',
{
......
}
})

然后创建并添加到viewport

Ext.Viewport.add({
 xclass: 'AddressBook.view.Main'
})

或者创建并添加到某容器里面

items : [{
 xclass : "AddressBook.view.Main"  //这样就整个组件了
}]

xclass 就等于 Ext.create(name)

Ext.Viewport.add( Ext.create( 'AddressBook.view.Main' ) )

注意:大括号没了

(5)xtype : ‘button’ 对应事件函数 handler : function(){}

暂时学到这点东西,如果有后续,会加上

Sencha Touch 2 快速入门系列:

http://blog.csdn.net/ardy_c/article/details/7419434

 
Gesture事件,包括手指点击(click),轻拂(flick),双击(double-click),手指的分开、闭合(scale)、转动(rotate)等一切手指能在屏幕上做的事情
它只在有两根或多根手指放在屏幕上的时候触发
事件处理函数中会得到一个GestureEvent类型的参数
它包含了手指的scale(两根移动过程中分开的比例)信息和rotation(两根手指间连线转动的角度)信息
这个事件是对touch事件的更高层的封装,和touch一样,它同样包括gesturestart,gesturechange,gestureend。
gesturestart // 当有两根或多根手指放到屏幕上的时候触发
gesturechange // 当有两根或多根手指在屏幕上,并且有手指移动的时候触发
gestureend // 当倒数第二根手指提起的时候触发,结束gesture
gesture事件触发过程:
Step 1、第一根手指放下,触发touchstart
Step 2、第二根手指放下,触发gesturestart
Step 3、触发第二根手指的touchstart
Step 4、立即触发gesturechange
Step 5、手指移动,持续触发gesturechange,就像鼠标在屏幕上移动的时候不停触发mousemove一样
Step 6、第二根手指提起,触发gestureend,以后将不会再触发gesturechange
Step 7、触发第二根手指的touchend
Step 8、触发touchstart!注意,多根手指在屏幕上,提起一根,会刷新一次全局touch!重新触发第一根手指的touchstart
Step 9、提起第一根手指,触发touchend

Gesture事件的处理和Touch类似,我们一般会在gesturechange的时候利用GestureEvent对象中的信息来
做一些事情:
var angle = event.rotation;
var scale = event.scale;

这样能够取得scale和rotation信息,然后我们可以:
e.target.style.webkitTransform = ‘scale(‘ + e.scale + startScale + ‘) rotate(‘ + e.rotation +
startRotation + ‘deg)’;

ps:如果你要滚动body,只需要一根手指轻轻拂动屏幕,但是你要滚动一个内部div或者iframe,则需要动用两根手指。
我们必须利用touchevent,在它的回调函数中用代码来实现scroll。这里介绍一个段很不错的
多触式滚动组件:iscroll-4
http://cubiq.org/scrolling-div-on-iphone-ipod-touch
用起来很简单,new一个iScroll对象,传入需要滚动的inner element作为参数就行了。

© 2012 Hedgehog Suffusion theme by Sayontan Sinha