jsfiddle网站介绍

news/2024/5/11 5:14:59/文章来源:https://blog.csdn.net/weixin_30852367/article/details/97280756

一.简介

如果你是一名前端博主，你希望通过代码+演示来透彻的讲解一些技巧，并且无缝嵌入你的博客，那么jsfiddle是一个很好的选择。

本文将比较博客园前端dev们各种演示方式，大家可以挑选自己喜欢的方式。

二.jsFiddle简介

jsFiddle的官方网站：http://jsfiddle.net/

它包括了顶端的控制按钮，如下图：

分别代表：运行、保存、重置、代码格式化，代码语法错误检查

下面的4个windows你可以分别调试HTML，CSS，Javascript，右下角显示代码的运行结果。

在左边的操作区，你可以选择相关的js类库，支持的还是相当全的。当然，也支持自定义的类库，这个很不错。

这个工具可以有效的帮助web前端开发人员来有效分享和演示前端效果，大家可以在blog和论坛里用jsFiddle解答或者提问。

三.demo演示技巧比较

a.Milo Yip方式，如下图：

QQ截图20111004114945

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

1

 1<textarea id="interactiveEmitCode" rows="20" cols="100">
 2 
 3var ps = new ParticleSystem();
 4 
 5ps.effectors.push(new ChamberBox(0, 0, 400, 400));
 6 
 7var dt = 0.01;

1 ····

 01····
 02    else
 03 
 04        newMousePosition = new Vector2(e.offsetX, e.offsetY);
 05 
 06};
 07 
 08</textarea>
 09 
 10<br />
 11 
 12<button onclick="eval(document.getElementById('interactiveEmitCode').value)" type="button">Run</button>
 13 
 14<button onclick="stop();" type="button">Stop</button>
 15 
 16<br />
 17 
 18<canvas id="interactiveEmitCanvas" width="400" height="400"></canvas>

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

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

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

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

 01<script type="text/javascript">
 02 
 03function runCode(id) {
 04 
 05obj = document.getElementById(id);
 06 
 07var TestWin=open(''); //打开一个窗口并赋给变量TestWin。
 08 
 09TestWin.opener = null // 防止代码对论谈页面修改
 10 
 11TestWin.document.write(obj.value); //向这个打开的窗口中写入代码code，这样就实现了运行代码功能。
 12 
 13TestWin.document.close();
 14 
 15}
 16 
 17</script>