技术分享

最近要做个手机html5的页面，做些知识储备，重要的点记录下来以备后续。

后台在向前台返回数据时肯定是以分页的形式来返回的，很少会有直接一坨都全部返回给前台。那么前台就需要分页的去接收来自后台的数据。ST里面的listpaging组件就是用来做分页的，它在页面最下方添加了一个‘load>nextPage: function(options) { if(this.currentPage2 == null) { this.currentPage2 = 1;

1.DataView组件可以显示列表，图像等等的组件或者元素，特别适用于数据仓库频繁更新的情况。比如像显示新闻或者微博等等的很多相同样式的组件的列表这种一次性从后台或者数据源拿取很多数据展示的样式。比如官网给的简单的示例：var touchTeam = Ext.create('Ext.DataView', { fullscreen: true, store: {

最近项目中遇到跨域的问题，拟采用CORS的方法进行解决。纠结了好几天，被一起的小伙伴解决掉了这个问题。^_^浏览器报错：XmlHttpRequest error: Origin null is not allowed by Access-Control-Allow-Origin.肯定是跨域的问题，如果用jsonp或者proxy的方式进行修改的话未免需要太大的工程量，所以采用CORS这种比较简单

最近写前台请求后台，遇到这样的报错“Origin null is not allowed by Access-Control-Allow-Origin.”，上网时查了一下是跨域请求的问题。比如你使用chrome打开一个本地的html页面，那么我认为现在你的机器就是一个站点，这个html就是运行在这个站点上，如果你要在这个html页面中通过xmlhttprequest获取百度的页面源码信息，就有点跨

XTemplate能够很方便的在页面中编写一段可以使用数据仓库中数据的html代码。官网中给出的XTemplate类的一些除了编写html代码之外的方法：A template class that supports advanced functionality like:Autofilling arrays using templates and sub-templates

很好的一篇外国博文，不解释，讲解很详细，不会请有道： http://innofied.com/simplest-slide-navigation-with-sencha-touch-2-2/

1.list组件是一个很强大的组件。用于以一览表的形式或者列表的形式展示应用程序中的大量的数据。该组件使用XTemplate模版来显示数据，同时与数据仓库进行绑定。所以当数据仓库中的数据发生变化的时候，List组件会将这个变化反映在页面上。Ext.DataView.List组件继承自DataView组件。简单的创建一个list:var myList = Ext.create('Ext.Li

应用程序的界面发生改变后，可以通过路由让应用程序的界面返回到改变之前的状态，例如浏览器中页面之间的切换等等都可以用路由来实现。

1.Ext.Menu：用来设置sencha中的菜单的组件，可以被添加到屏幕的左右上下四个位置，如果再和touch事件结合的话应该可以实现滑动出现菜单的功能，虽然只是猜想，但这是后面一定要实现的效果。var menu = Ext.create('Ext.Menu', { items: [ { text: 'Settings',

1.关于sencha对于样式表的使用，配置文件中有一个app.json是专门的app配置文件。"css": [ { "path": "resources/css/app.css", "update": "delta" } ],其中这句指明了css文件的路径，想要修改其中的样式只需在app.css中添加或者修

最近写代码遇到问题，报错说jquery-1.10.2.min.map NOT FOUND。但是我检查了几遍代码发现代码中没有问题，而且根本就没有包含甚至提到jquert-1.10.2.min.map这个文件，去网上查了一下找到了问题出现的原因所在：首先.map文件是何许人也，min.map文件是在压缩文件时，为还原原有未压缩js文件中相关变量而存在的伴侣文件，也就是文件的变量名替换对应信息、变

最近用到在web页面里面实现拨打电话的功能，在网上查找了很多解决方案，实验之后下面的两个比较好用：一键拨打号码一键发送短信微信内部自带的浏览器也是支持的

最近看雅虎黄金34条，学习下优化网站性能的方法。其中有一条：“为文件头指定Expires或Cache-Control”，具体来说指对于静态内容：设置文件头过期时间Expires的值为“Never expire”永不过期；而对于动态内容：使用恰当的Cache-Control文件头来帮助浏览器进行有条件的请求。这一条可以和雅虎34条的第一条联系起来，那就是尽量减少http的请求次数（雅虎34条

最近看了几篇关于css hack的文章，觉得不错整理一下。css hack很多人不理解它的原理，其实大家都知道对于不同的浏览器，CSS的解析程度不一样，因此会导致生成的页面效果不一样；特别是对于IE这种蛇精病的浏览器来说，这个时候我们就需要针对不同的浏览器（特别是IE）去写不同的CSS，这个过程就叫做css hack.而不是那个hack，可以说css hack是一种借助于不同浏览器之间规则

Meta标签详解，在网上转的，希望对大家有用　　引言　　您的个人网站即使做得再精彩，在“浩瀚如海”的网络空间中，也如一叶扁舟不易为人发现，如何推广个人网站，人们首先想到的方法无外乎以下几种：　　　　●　在搜索引擎中登录自己的个人网站　　　　●　在知名网站加入你个人网站的链接　　●　在论坛中发帖子宣传你的个人网站　　很多人却

最近用到scrolloTop()想去获取滚动条距离顶部的距离，结果只有chrome下面可以正常的获取scrollTop，结果ff和ie下这个值都等于0，使得许多效果比如屏幕滚动等等均无法正常实现。究其原因是scrollTop()在各个浏览器中的兼容性问题，在ff和ie，以及是否有doctype声明的时候都会有不同的效果。下面是兼容各种浏览器的写法，分别为获取当前的scrollTop和设置scr

最近接触一些前端模块化的东西。模块化

最近看chrome开发者工具的一些使用方法和技巧，有个系列的写的不错，直接给传送门：1.

前端的部分逻辑有时候控制前端的显示，比如记录收藏数目等等。有时候多次重复点击会造成前端显示的bug。所以需要有部分逻辑判断去筛除掉重复多次的点击。实现部分代码如下，主要是通过setTimeout去加以判断，即无论点击几次，间隔一定时间才会去触发一次事件，从而只产生一次的记录： var i=0; //判断点击次数寄存 var closetimer = nul

js中的一切都是对象，对象是所有一切的基础。好像很屌的样子。q

将标签设置为空链接有两种方式，第一种是href="#"，另外一种是href="javascript:void(0);"。两种方式都设置了标签为空链接，但是两种方式还是有些不同的地方。href="#"，当点击的时候会跳转到页面的顶部，相当于点击了一个锚点，在URL的后面也会出现一个#的标识符号。而href="javascript:void(0);"则是要执行一个javascript的表达式。

通过js的命名空间可以实现对于自己定义的函数或者对象的封装。js并没有像是c++,java那样自带命名空间，其所谓的命名空间是通过作用域+匿名函数来实现的，从而可以对自己的函数代码进行一定的封装，而不用害怕发生重定义等等情况。通过js命名空间，可以去自定义自己的函数库，从而有效的进行封装和规划。js命名空间示例代码： (fun

IE6有诸多奇葩，不支持position:fixed就是其中之一。所以在做一些比如固定在顶部或者底部或者固定元素的效果时需要考虑兼容IE6的这个问题。解决方案是用Ie6的hack。*html {/* 只有IE6支持 */ background-image: url(about:blank); background-attachment: fixed; /* 固定背景 */}

最近在网上找了些websocket的资料看了下，node和tornado等等本身已经实现了websocket的封装，所以使用起来会比较简单，php如果想要写websocket还需要自己跑一整套流程，比较麻烦。根据网上的资料写了一个简单的websocket的demo，果真炫酷掉渣天，我是用tornado，网上多是实现实时聊天室的例子，想要实现点对点的聊天功能还需要在send函数那里加条件，目测是

data URI scheme通俗的来讲就是将一张图片直接塞到HTML中而不是通过HTTP请求去获取。这样从表面上看会减少一次HTTP的请求，实现了对于网页的优化（不过看了其他一些文章data URI因为将图片采用了base 64的编码方式进行表达，所以还是需要进行HTTP去下载内容，而且这样的渲染方式同时也加大了内存，cpu等等的压力，因此选择的时候需要进行性能方面的权衡）。比如一张图片

因为sencha touch的语法大部分是基于extjs的，而extjs大部分是基于json的，所以好好预习一下extjs的语法还是很重要的。extjs是封装的javascript的一个框架，相比原生的js，它更注重结果，所以它的调用形式很固定比较简洁，不像原生js那样要逐字逐句地去实现。1.值的数组表示方法：json在表示值的数组的时候可以提高可读性，并且有效的减少复杂性；json中的一条记

跨平台的app开发看起来很美好的样子，原来做过JQM以及JQ MOBI还有一些ISCROLL之类的框架，不过做在一般的手机上略微有些卡卡的感觉。但是随着手机硬件的一直进步，相信以后跨平台将会是一种趋势。HTML5和CSS3的美好的效果，如果能够加上流畅的运行，那一定能给和native app瓜分天下的。最近和别人一起做一个创业的项目，原来开发了android和ios的版本，不过由于native会有

AJAX，很久以前就听到过，因为又有个足球队的名字叫做“阿贾克斯”，所以感觉很酷的样子。现在很多地方都要用到，把重要的一些东东记下来先。Ajax即是Asynchronous JavaScript + XML的简写，它是用Javascript来进行绑定和调用，通过使用XMLHttpRequest同服务器进行异步通信，用Dom模型来交互、动态的显示，最后再用CSS+XHTML来进行表示，通过这一些列技

浏览器可以说是应用最为广泛的应用，chrome、fireforks、safari等开源浏览器占据了浏览器市场的半壁江山。浏览器的主要功能是将用户选择得web资源呈现出来，它需要从服务器请求资源，并将其显示在浏览器窗口中，资源的格式通常是HTML，也包括PDF、image及其他格式。用户用URI(Uniform Resource Identifier 统一资源标识符)来指定所请求资源的位置。

最近发现了chrome的一个屌爆了的功能。语音输入，经测试准确率很高。而且支持中文和英文口语输入，其他语言应该也是可以支持的。运用这个可以在搜索框中加入语音输入功能，不过目前只有Chrome 11及以上版本才支持。可以用chrome浏览器在这里试试效果，点击话筒即可：实现起来也非常简单，为input添加名为 x-webkit-speech 的属性就行了。样式如下：

水平居中的实现在写样式中经常会用到。因此简单的记录一下。一、margin和width实现水平居中第一种方法是最古老的实现方案，也是最常见的方案，在分页容器上定义一个宽度，然后配合margin的左右值为“auto”实现效果。具体用margin: 0 auto; 或者定义好容器的宽度之后，分别定义margin-left和margin-right均为auto。

Inline-block是元素display属性的一个值。这个名字的由来是因为，可以简单的解释为inline+block ；display设置这个值的元素，兼具行内元素（ inline elements）跟块级元素（block elements）的特征。块级元素（block elements）来源于CSS盒子模型。块级元素包含width height,padding,border与marg

最近做一个项目前端要用到scrollTo和滚动视觉差。顺便把两个东西拿出来温习一下。HTML DOM里面定义了scrollTo方法，用法：scrollTo(xpos,ypos)，把内容滚动到当前的指定位置。但是这个充其量只能说是移动而不能说是滚动，似乎没有滑动的效果显示出来。好在JQuery提供了足够多方便的插件，其中一个就能够提供平滑滚动的功能，是平滑哦~插件叫做jquery.scrol

通过指定CSS属性float的值,从而使元素向左或向右浮动,然后由后继元素向上移动以填补前面元素的浮动而空出的可用空间。CSS的float属性，作用就是改变块元素对象的默认显示方式，HTML标签设置了float属性之后，它将不再独自占据一行，从而可以实现多个元素同处一行的效果。Float的功能很强大，但是如果没有好好掌握而使用很可能会成为你调试样式的噩梦。使用Float样式，如果没有清除浮动，

最近向服务器上上传页面，原本服务器有页面的，已经用JS把它们覆盖掉了，不过在上传过页面后又发现有些样式被原来的样式依然覆盖着。审查元素后发现，有的元素的样式里面有如下的样式提示：element.style{ top:30px;}在我上传的CSS里面没有定义但是上传之后却出现了。在网上百度了一下，出现问题的原因可能是system.css中定义的样式或者是js所致，根本原因在于C

写页面的时候在chrome，fireforks等页面上显示正常，但是换成IE9之后就完全没有样式了。IE真是个奇葩的怪胎。它的报错信息是’CSS 因 Mime 类型不匹配而被忽略‘，也就是说所有的.css文件全部都不起效果了。去网上查了一些资料，有很多与这个问题相关的回答。首先要明白Mine类型是个什么。MIME类型就是设定某种指定扩展名的文件用一种应用程序来打开的方式类型，当该扩展名文件被访

几乎所有应用的头像和图标除了方的还是方的，但从PATH开始，其出色的UI和交互让众多APP在前端设计上开始独下匠心。PATH中的用户头像图标也开始了使用最美的图形——圆形，一改原来单调的方形。虽然圆形的头像图标看起来很美很新颖，但是实现起来却是很简单，主要运用了border属性去限定头像图片的边界，从而将其规定为自己想要的形状。所用到的主要起作用的属性border-radius,用来设置或

做前端的时候很难不会遇到浏览器的兼容问题，特别是遇到IE这种奇葩浏览器的时候。浏览器兼容存在的一个问题是不同浏览器的标签默认的外补丁和内补丁不同，也是在IE存在的时候体现出来。这种情况下不加样式控制的情况下，各自的margin 和padding差异较大。解决方法是在CSS开头写一句 *{margin:0;padding:0;}。这是最常见的也是最易解决的一个浏览器兼容性问题，几乎所有的CS

Jquery本身可以实现滚的功能，不过有点太粗糙，与其说是滚，还不如是跳。因此需要一些插件来去实现平滑的滚动的效果。最近做wiki发现了几个不错的插件。jquery.smooth-scroll就是很不错的一款实现此功能的插件。插件信息官网：https://github.com/kswedberg/jquery-smooth-scrollDemo：http://plugi