技术分享

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

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

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

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

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

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

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

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

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

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

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

Sencha touch在除了提供一些常用的组件之外还有很多很多的组件，Ext.String就是其中用来专门对字符串进行处理的，所在在使用原生js对字符串进行处理之外，还可以使用Ext.String的组件来进行字符串的处理。常用的大概是让多余出来的部分变成省略号的ellipsis函数，其使用方法如下：ellipsis( value, length, word ) : Strin

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

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

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

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

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

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

JS可以说是一门面向对象的语言，因为它大量的使用对象，而且还有自己以原型对象为基础的继承的机制。JS从其他的面向对象的语言中获得灵感，从而形成了自己的以原型对象为基础的面向对象，而非像C++/JAVA那样以类为基础。JS有一种有效的方法来声明方法、常量以及其他的属性，即原型对象的方法，因为所有的js对象都继承自原型对象的所有属性。所有说原型对象是存放它们的理想的场所。这样一来的好处是可以大量减

滚动视差效果的实现原理是在同一个页面上将页面元素分为多层，例如可以分为背景、内容、贴图层，在滚动页面的时候让三者滚动的速度不一，从而在人的视觉上能够形成一种立体的近似效果。最近在做一个项目wiki的时候要用到滚动视差的东西，所以顺便记录一下。一般来说背景层是滚动里面最慢的，内容层可以和页面的滚动速度一致。较为简单的滚动视差效果两层就可以了，一个背景，然后在背景上滚动内容。CSS中用来定义背景滚

最近在做一个二维码的项目，所以在随便看的时候发现这个感觉挺不错的。jquery除了它自己非常出色的js功能之外还附带有数不清的插件，可以完成各种美好的效果和功能。jquery.qrcode就是其中一个，用来在线生成二维码。    qrcode插件在github上开源的地址在https://github.com/jeromeetienne/jquery-qrcode    它的后面附带有使用

JS的许多类库能够使得开发变得简单而高效，Highcharts.js就是其中的一个。用它来做各种图表嵌入到自己的页面之中去不仅简单而且可以形象的展现各种功能，如趋势走势，效率查看，概率分布等等。Highcharts.js具有很好的兼容性，而且可以制作几乎所有你能想到的图表，比如直线图、曲线图、柱状图等等，还有一些我们都不知道的图标也可以实现。它的另一个好处就是具有自动提醒的功能，即鼠标移动到图

JS中的最基本的命令之一：document.write（），用于简单的打印内容到页面上，可以逐字打印你需要的内容——document.write("content"),这里content就是需要输出的内容；当然还有一种情况，需要输出JS之中比如变量等等变化的东西，那么就需要用document.write(+variable);当然variable就是你想要输出的变量。既然可以输出变量，肯定会想

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

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

浏览器提供了大量的对象，用于表示页面上HTML所对应的元素。通常将它们的集合称为浏览器对象模型（BOM）。BOM在很大程度上依赖于我们所使用的是何种类型的浏览器以及浏览器的版本，如果不慎选择经常会出现兼容性问题。不过如果我们的代码能够遵循W3C标准，就能更大限度的兼容不同的浏览器。浏览器对象在最顶层的是window对象，代表了浏览器的框架以及浏览器相关的一切，web页面就加载在这个框架之中，甚

HTML DOM （文档对象模型）当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。HTML DOM 模型被构造为对象的树。HTML DOM 树通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。JavaScript 能够改变页面中的所有 HTML 元素JavaScript 能够

原来用node搭过一个简单的微博系统，最近因为需要重新翻出node来温习一下。看过node之后不得不惊艳于js这门语言虽然是脚本语言的威力，不仅前端离不开它而且可以凭借js自己去出色的实现一个后台，而且它的功能还远不止这些，而且越来越多的功能正在被发现出来。而且node的出现也可以算是颠覆了原先后台服务器语言的传统，不像PHP那样还需要Apache这些网页服务器的支持，它自己就可以把一切打包实现。

对于不同的URL请求，服务器应该有不同的反应。我们要为路由提供请求的URL和其他需要的GET及POST参数，随后路由需要根据这些数据来执行相应的代码。我们需要的所有数据都会包含在request对象中，该对象作为onRequest()回调函数的第一个参数传递。为了解析这些数据，需要调用额外的模块，分别是url和querystring模块。URL:This module has utiliti

1.基础准备：scrollTop() 方法返回或设置匹配元素的滚动条的垂直位置。scroll top offset 指的是滚动条相对于其顶部的偏移。如果该方法未设置参数，则返回以像素计的相对滚动条顶部的偏移。语法$(selector).scrollTop(offset)2.toggleClass() 对设置或移除被选元素的一个或多个类进行

all 集合返回对文档中所有 HTML 元素的引用。例如document.all(0)表示页面内第一个元素document.all[i]document.all[name]document.all.tags[tagname]all[] 是一个多功能的类似数组的对象，它提供了对文档中所有 HTML 元素的访问。all[] 数组源自 IE 4 并且已经被很多其他的浏览器所采用。

最近做的一个东西要求实现一个地图的编辑功能，首先要实现的是前端的地图的可视化编辑，即拖动POI、商店等等的图标到地图上，然后获取并且保存位置等等各项信息并且与后台进行交互等等。要用JS实现拖动的功能并不难，首先先需要准备一些JS的基础知识。target 事件属性可返回事件的目标节点（触发该事件的节点），如生成事件的元素、文档或窗口。语法event.target对于tar

典型的应用时鼠标滚轮滚动控制图片或者文字的大小，例如此类的转动鼠标滚轮实现缩放等等交互效果中，会用到 Mousewheel 事件。在大多数浏览器（IE6, IE7, IE8, Opera 10+, Safari 5+）中，都提供了 “mousewheel” 事件。滚轮事件的兼容性差异有些不拘一格，不是以往的IE8-派和其他派，而是FireFox派和其他派，杯具的是 Firefox 3.5+ 却

getBoundingClientRect() 来获取页面元素的位置document.documentElement.getBoundingClientRect该方法返回一个对象，从而获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置，即分别代表该元素上、左、右、下四条边界相对于浏览器窗口左上角（注意，不是文档区域的左上角）的偏移像素值。并且该方法已经不再是IE Onl

方法一、setAttributevar obj = document.getElementById("obj");obj.setAttribute("onclick", "javascript:alert('测试');");但是IE不支持用 setAttribute 设置某些属性，包括对象属性、集合属性、事件属性，也就是说用 setAttribute 设置 style、onclic

最近用到的几个比较好用的js的插件，一个是供延迟加载的lazyLoad.js，另外一个是提供滚动播放效果的TouchSlide.js附上用法传送门：lazyLoad:http://www.cnblogs.com/ahjesus/archive/2010/10/09/1998642.htmlTouchSlide:http://www.superslide2.com/TouchSlide/