分类目录归档:Javascript

关于javascript的教程,心得及应用

Javascript基础纪要:判断是否是数字

本文属于《Javascript基础纪要》系列文章.

在JS中,在判断一个变量是否是数字时,最快的方法是:

1
typeof v === 'number'

如果是如此简单,那么本文就没有存在的必要了.这里的坑在于,通过new Number(1)这样创造的数字,用typeof判断时会得到object而不是number(虽然几乎没人会用这种蛋疼的方法来创建数字…). 继续阅读Javascript基础纪要:判断是否是数字

HTML5的postMessage使用记要

HTML5提出了一个新的用来跨域传值的方法,即postMessage(这个名字太通俗了所以你最好看看是不是自己写过一个同名的把它覆盖了)。幸运的是IE8就开始支持了。

我们假设有两个网站,1.com与2.com,我在1.com的页面上通过iframe或window.open或超链接打开了一个2.com的网页,此时我要在2.com上做操作的时候,给1.com传值,让1.com有所变化。这个过程就是个跨域的过程。

如果你对window.open熟,你就会知道通过window.open打开的网页(我们称之为子网页),可以通过window.opener对象,访问到把它打开的页面(父网页),这样一来,调用父页面的函数就是非常简单的事了。但是,在跨域的条件下,window.opener就成了一个空对象,“没有权限”,浏览器会这么告诉你。 继续阅读HTML5的postMessage使用记要

Javascript拼接HTML字符串的方法列举及思路

拼接字符串的方法介绍

字符串拼接基本上在任何编程语言中都是非常普通而常用的功能,Javascript里也是如此。其中对HTML字符串的拼接算是比较难的,我就经常被大量的属性及引号的嵌套搞得苦不堪言。

常规但很不好用的方法

下面是一个最常用的拼HTML字符串的写法:

1
var li = '<li class="li '+dd.class+'" id="li+'+i+'"><span>'+dd.text'</span></li>';

这种方法是最好理解的(同时也可以说是执行效率最高的),但缺点也很明显:繁琐,非常容易出错,维护起来麻烦,而且代码几乎没有重用性,即使下次碰到长得差不多的还是得重写拼的语句。
继续阅读Javascript拼接HTML字符串的方法列举及思路

Javascript:来一个AJAX封装函数

前不久换工作了,最近一直在出差,忙得跟狗一样,所以博客都荒废许久了.

最近的工作中涉及到大量的ajax操作,本来该后台做的事也要我来做了.而现在使用的ajax函数是一个后台人员封装的—-但他又是基于jquery的ajax,所以离开了jquery这个函数就毫无作用了.而且我觉得,jquery的ajax方法是很完善的了,可以直接用,如果都有jquery了,那么他的ajax就不用白不用了.我缺少的是一个能在没有jquery的情况下使用的ajax方法.

所以我也花一天时间写了一个,参数与调用方法类似于jquery的ajax.就叫xhr吧,因为xhr=XMLHttpRequest.
继续阅读Javascript:来一个AJAX封装函数

Javascript最简单的把html字符串编码的方法

html字符串是指'<div id=”a”>aklsdjfklsjdfl</div>’这样的带html特殊符号的字符串,我们通常要对他进行处理再输出以免输出成了真正的html元素,也就是把<变成&lt;这样的html符号代码。

如果字符串很长,里面特殊符号很多,我们该怎么简单而高效的把他们全部转码呢?循环?正则表达式?都不用!且看:

1
function bian(a){return new Option(a).innerHTML}

这就是全部了!使用方法:

1
2
3
function bian(a){return new Option(a).innerHTML}
var a = '<div id="a">aklsdjfklsjdfl</div>';
alert(bian(a));

此方法来自于:https://gist.github.com/jed/964847,非常感谢原作者!

html5 Canvas画图教程26:用transform来实现位移,缩放,旋转等

本文属于《html5 Canvas画图系列教程》,本文有些长.

前面我讲过在canvas中实现图形的变换,这是比较简单的,因为都是用的直观的函数.今天我还是要实现同样的图形变化效果,但不同的是我要用一个看起来就让人心碎的方法,就是transform,也就是矩阵matrix.

其实我对Matrix的认识只限于他是一部很好看的电影(即黑客帝国),在没看此电影前,我根本不知道有矩阵这个名字,而且矩阵这名字又不霸气,我听了除了不明白为什么要叫这么个怪名字之外没什么感觉;看了电影,然后又知道矩阵是个数学上的东西后,我就知道要糟,作为一个数学白痴的我希望永远不要和矩阵打上交道.

无奈我居然做了程序员!

不说这些伤心事了.我要提前告诉大家,虽然前面讲的scale,tranlate,rotate是独立的方法,但实际上他们之所以能产生变化,都是因为他们操作了矩阵.而canvas的transform,就是直接操作矩阵,所以理论上效率还比前面说的这些方法要高.

ctx.transform(a,b,c,d,e,f);

开始之前我还要提一个问题:图形都有矩阵,那一个图形的默认矩阵是什么样子的? 继续阅读html5 Canvas画图教程26:用transform来实现位移,缩放,旋转等

html5 Canvas画图教程25:图形组合模式globalCompositeOperation

本文属于《html5 Canvas画图系列教程

这次要讲的是控制canvas中的图形组合模式的属性:globalCompositeOperation.这个属性的名字很长,翻译过来大概是”全局组合操作”的意思.

ctx.globalCompositeOperation = type;

他的作用呢有些像photoshop中的图层叠加效果,比如加亮变暗叠加.如果你没学过作图,可能这些术语听起来很抽象,不过不要紧,因为这个属性我们基本上不用.

为什么不用?还是这个原因:标准不一.设置同样的globalCompositeOperation,在chrome与firefox中会出现截然不同的效果,甚至同为webkit内核的浏览器safari和chrome也不能做到效果统一.

更离谱的是,w3c通常是作为标准的制订者出现,他们也制订了globalCompositeOperation的标准,就是firefox中用的这种,但他们又貌似觉得chrome的做法才是更合理的,所以有传言globalCompositeOperation的标准将会更改—-这样一来,我们可以在很长一段时间内不考虑使用globalCompositeOperation属性了.

如果依照firefox(即现行标准)的做法,globalCompositeOperation的属性有以下效果(直接摘自MDN):

注意:下面所有例子中,蓝色方块是先绘制的,即“已有的 canvas 内容”,红色圆形是后面绘制,即“新图形”。 继续阅读html5 Canvas画图教程25:图形组合模式globalCompositeOperation

html5 Canvas画图教程24:测量文字尺寸measureText

本文属于《html5 Canvas画图系列教程

前不久我讲了在canvas中写字的方法,measureText和这个问题有关。我们通常需要知道文字的大小,以确定该把字写在哪里。

measureText就是用来测量文字尺寸的,他有返回值

ctx.measureText(‘text’)

measureText的返回值是一个对象,但里面只有一个属性:width,本来文字的尺寸应该有width也有height,但canvas中的文字连行高都没有,所以measureText也没法得出高度。

所以说呢,measureText的作用不大。

另外,font的设置会对measureText的结果造成不易察觉的影响,比如前面我讲的font设置中的那一串可有可无的属性:caption,icon,menu,message-box,small-caption,status-bar,如果设置了他们,由于浏览器各自的呈现不一样,那么measureText得出的宽度也就不一样了。

比如,我测试

ctx.font = “bolder 33px Arial menu”;

形态下的’1223’,firefox最终结果66,而chrome则是72.去掉menu后,则一个是73,一个是72——也不完全一样,搞毛啊。

measureText只是单纯的测量文字,与是否把文字写到canvas上无关。

这个方法不好用,或者以后会有改进吧。

Html5 canvas画图教程23:全局透明度globalAlpha

本文属于《html5 Canvas画图系列教程

大家都知道html5里面可以使用rgba颜色,这对我们做半透明效果时非常有用。在canvas中,我们可以用rgba颜色来实现半透明填充或描边。

如果有下面的需求:

我要画N个图形,他们的颜色都不一样,但有个共同点是:所有图形都是50%半透明。

这时如果用rgba来实现,就有点繁琐了。

如果是CSS,我们可以直接设置父元素的opacity搞定;在canvas里,则有个类似的属性globalAlpha.

globalAlpha的值与opacity一样,都是0-1的小数。设置之后,以后的图形都将以其规定的透明度绘制。

ctx.globalAlpha = 0.5;

如何将globalAlpha恢复到初始状态呢?你可以简单的将其重设为1,或者使用restore()函数复原。

本文没有代码,哈哈。

另外要注意,半透明的颜色会对getImageData的获取结果造成影响——显而易见的。

[译]知名Html5 Canvas Javascript库对比

声明:

原文链接:http://www.softr.li/blog/2012/06/20/which-html5-canvas-javascript-library-should-i-use

本译文地址:http://jo2.org/html5-canvas-libary-introduction/

转载请保留。。

我应该选哪个Canvas库?》译文(以下的“我”是指原作者):

我一直在找一个Html5 canvas库,可以让我创建可交互的、带动画的UI界面。我的要求是:

  • 良好的文档,支持与维护,因为我想在以后的项目里还能重用它
  • 可以轻松的创造复杂的图形对象(我的工程比较复杂,可不是一个简单的按钮那样的活儿),最好能支持分组和多层
  • 能帮我处理用户交互
  • 支持触摸设备
  • 提供用于作动态图形的工具 继续阅读[译]知名Html5 Canvas Javascript库对比