jsfiddle怎么演示ajax 使用技巧

JavaScript015

jsfiddle怎么演示ajax 使用技巧,第1张

首先要在页面引入相关的js库，然后在textarea 里面放入要执行的代码，然后eval(document.getElementById('interactiveEmitCode').value)代码如下：

<textarea id="interactiveEmitCode" rows="20" cols="100">

var ps = new ParticleSystem()

ps.effectors.push(new ChamberBox(0, 0, 400, 400))

var dt = 0.01

else

newMousePosition = new Vector2(e.offsetX, e.offsetY)

}

</textarea>

<br />

<button onclick="eval(document.getElementById('interactiveEmitCode').value)" type="button">Run</button>

<button onclick="stop()" type="button">Stop</button>

<br />

<canvas id="interactiveEmitCanvas" width="400" height="400"></canvas>

优点：可以在本页面编辑代码，并且看到实时效果，

缺点：页面需要引用相关js库，和本页代码逻辑混在一起。代码颜色黑白显示，用户体验差

b.岑安方式和司徒正美方式，如下图：

把代码放到一个iframe中，然后再新开页面执行该页面的代码。相关代码如下：

<script type="text/javascript">

function runCode(id) {

obj = document.getElementById(id)

var TestWin=open('')//打开一个窗口并赋给变量TestWin。

TestWin.opener = null // 防止代码对论谈页面修改

TestWin.document.write(obj.value)//向这个打开的窗口中写入代码code，这样就实现了运行代码功能。

TestWin.document.close()

}

</script>

优点：逻辑分离，可以编辑运行。

缺点：需要新开页，代码黑白显示，用户体验差

C.外链方式

优点：不与本页html,css,js出现冲突，只要给出外链，不能编辑代码。

缺点：需要想SAE上传相关的js、img、css和html

D.jsFiddle方式,我直接拿岑安方式的代码作为例子：效果如下

这里有个小技巧：上面看到的iframe指定的src为http://jsfiddle.net/zhanglei/QZJGZ/embedded/result,js,html,css"

最后的result,js,html,css为iframe中tab的显示的顺序，或者你不想显示html,css,你就可以直接写成

效果如下：

也可以显示result js和html，效果如下：

四.总结

比较这四种方式，我最喜欢最后一种，我相信喜欢最后一种的多一些，因为不仅演示的代码和博客的代码分离，html和CSS和js和最终效果也分离开了·

iphone手机默认字体为Heiti SC（黑体-简，黑体-简的英文名称为Heiti SC。Heiti为黑体的拼音，SC代表简体中文（Simplified Chinese）），是Mac OS X Snow Leopard（版本10.6）包含的简体中文字型，也是iPhone OS 3.0（版本4.0后改名为iOS）及iPod nano第五代以来的预设简体中文字型。类似PC上的黑体-简系为黑体，取代华文黑体成为Mac OS X Snow Leopard的预设简体中文字型。如果在电脑上的话，应用华文黑体。

这里有一个字体渲染实测结果截图展示。造成渲染区别的主要是以下几点（wiki: Font rasterization）：

字体抗锯齿：Win7以上自动打开的ClearType（msdn）、常见于Mac OS和MacType的次像素平滑（原理）、常用于Android和iOS等移动设备的灰度渲染

Hinting技术 /wiki

对字重font-weight的支持程度不一（ref）

相对应的控制有：

字体抗锯齿技术：仅仅只有webkit核支持使用一个CSS属性来控制字体平滑技术：-webkit-font-smoothing: antialiased，可以将chrome浏览器的字体渲染调为灰度渲染。在The New Yorker、Path等网站中，均使用了这个方案，它可以使webkit内核的浏览器字重表现一致。（使用了次像素平滑之后，字重普遍比灰度渲染之后的字体重，效果详见携程的这个DEMO）。

Hinting技术：在打包的Webfont字体中加入Hinting，有助于Windows的小字体显示效果

字重兼容性：出于兼容性的考量，不要使用font-weight的数值形式，也不要在@font-face里指定相应的font-weight数值，可以通过@font-face里定义的字体名来区分字重，如Gabriela-Light和Gabriela-Regular

此外：

小字重字体（W1,W2）的小字号、大字重字体(W6以上)的小字号在win xp下的显示很难正常和好看，可以避免使用

在webkit核的字体显示有问题时，可以使用如-webkit-text-stroke的hack解决问题，详参How to fix the ugly font rendering in Google Chrome

接口不健全，各个终端表现不一，这基本就是现状了。Mockee的关于字体渲染的ppt里说到：“接受现实，假设最坏的情况，等待未来新标准、新实现。”