Jsfiddle website Introduction

I. Introduction

If you are a front-end bloggerCode+ The demo thoroughly explains some tips and seamlessly embeds them into your blog.JsfiddleIs a good choice.

This article compares various demo methods of the front-end Dev of the blog Park. You can select your preferred method.

 

 

II. Introduction to jsfiddle

JsfiddleOfficial Website:Http://jsfiddle.net/

It includes the top control buttons, such:

Run, save, reset, code format, and code syntax error check

For the following four windows systems, you can debug HTML, CSS, and JavaScript respectively. The code running result is displayed in the lower right corner.

In the operation area on the left, you can select the relevant JS class library. The support is quite complete. Of course, it also supports custom class libraries. This is good.

This tool can effectively help Web Front-end developers to effectively share and demonstrate front-end effects. You can use it in blogs and forums.JsfiddleAnswer or ask a question.

 

 

Iii. Demo comparison

A. Milo Yip Method,For example:

First introduce the relevant JS library on the page, then add the code to be executed in textarea, and then eval (document. getelementbyid ('interactiveemitcode'). value)The Code is as follows:

1

1	<Textarea ID="Interactiveemitcode" Rows="20" Cols="100">

2

3	VaR PS = new participant system ();

4

5	PS. schedultors. Push (New chamberbox (0, 0,400,400 ));

6

7	VaR dt = 0.01;

1

····

1

····

1

····

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>

 

Advantage: You can edit the code on this page and see the real-time effect,

Disadvantage: The page must reference the relevant JS library, which is mixed with the code logic on this page. Code color black/white display, poor user experience

 

B. The elegant methods of CEN 'an square style and situ Zheng, such:

 

Put the code in an IFRAME, and then open a new page to execute the code on the page. The related code is as follows:

01	<SCRIPT type ="Text/JavaScript">

02

03	Function Runcode (ID ){

04

05	OBJ = Document. getelementbyid (ID );

06

07	VaR Testwin = open ('');// Open a window and assign it to the variable testwin.

08

09	Testwin. Opener =Null // Prevents code from modifying the Forum Page

10

11	Testwin.doc ument. Write (obj. value );// Write the code to the window that opens, thus implementing the code running function.

12

13	Testwin.doc ument. Close ();

14

15

}

16

17

</SCRIPT>

Advantage: logical separation, which can be edited and run.

Disadvantage: a new page is required. The code is displayed in black and white, and the user experience is poor.

 

C. External chain mode, such as http://20110930.iamzhanglei.sinaapp.com//HTML5/googleApple.htm.

I am using Sina's SAE. SAE supports servers directly deployed by local SVN. The official address is http://sae.sina.com.cn/. the xinlang Weibo account number can be directly renewed.

Advantage: it does not conflict with HTML, CSS, and JS on this page. As long as an external link is provided, the Code cannot be edited.

Disadvantages: JS, IMG, CSS, and HTML

 

 

D.JsfiddleMethod, I directly use the nancen code as an example: the effect is as follows:

Here is a tip: the IFRAME above specifies SRC as http://jsfiddle.net/zhanglei/QZJGZ/embedded/result,js,html,css"

The final result, JS, HTML, and CSS are the display sequence of tabs in IFRAME, or if you do not want to display HTML or CSS, you can directly write

Http://jsfiddle.net/zhanglei/LHWmv/embedded/result,js

The effect is as follows:

You can also display result JS and HTML. The effect is as follows:

 

Iv. Summary

Comparing these four methods, I like the last one most. I believe I like the last one more, because not only the Demo code is separated from the Blog Code, HTML, CSS, and JS are separated from the final effect ·