使用CodePen和JavaScript可以做的10件事

最新推荐文章于 2024-06-06 11:10:00 发布

dingshi7798

最新推荐文章于 2024-06-06 11:10:00 发布

阅读量833

点赞数

文章标签： javascript markdown ViewUI

嘿，网络人！我在CodePen操场上从事前端Web设计和开发。您可以在CodePen上执行的操作之一是创建笔，这些笔是您创建的HTML，CSS和JavaScript，并可以立即看到结果。 Ty North已经向您介绍了使用CodePen的一些原因，所以这一次，我想我将重点介绍一些可以在CodePen上使用JavaScript专门完成的事情。

1.快速添加您想要的任何库

每支笔都有自己的设置。在这里，您可以设置诸如要使用的外部JavaScript之类的内容。

添加外部库

就像从“ 快速添加”下拉列表中选择一个库一样简单，或者甚至更好，只需开始输入库，我们将提供匹配的选择。我们通过预输入提供了数千种CDN托管的库。

2.用ES2015编写

如果您像我一样，并且步入ES2015的新功能，则可以通过启用Babel JavaScript预处理程序在CodePen上进行练习。

选择一个JavaScript预处理器

现在您可以使用ES2015功能，Babel会将其处理为较低版本的JavaScript，因此您编写的内容无处不在。

查看编译的JavaScript

这里显示的是let关键字，箭头功能和模板文字。

您也可以在不使用Babel的情况下编写ES2015内容，但是您可能会遇到浏览器支持问题，就像其他任何尖端功能一样。

3.使用真实控制台进行输出和调试

当然，您可以在CodePen上使用浏览器的DevTools控制台。但是您需要确保将其上下文设置为演示<iframe> ，否则它将无法正常工作。

或者，您可以弹出打开的CodePen内置控制台，该控制台始终处于正确的上下文中。

CodePen的JavaScript控制台

迷你小费！当您打开/关闭differnet代码面板时，您可能会注意到URL的更改。有四个数字，代表HTML，CSS，JS和控制台（按此顺序）。因此，URL参数：

?editors=0011

代表HTML已关闭，CSS已关闭，JavaScript已打开，控制台已打开。最后一个数字为2 可使控制台最大化 。通过这种方式，您可以共享Pen，而Pen只能有意输出到控制台。

4.使用React和JSX

Babel非常棒，还支持JSX语法。通过添加React和ReactDOM，您就可以在React中构建所有要素！

你好，世界！在React中

尝试打开此模板进行尝试。

除Babel之外，CodePen还提供CoffeeScript，TypeScript和LiveScript。 TypeScript也将处理JSX！

5.包括其他笔作为资源

假设您要使用其他Pen中的JavaScript。你可以做到的！只要将其他Pen的URL放在External JavaScript中 ，CodePen就会知道您的意思。

包括另一支笔作为资源

这样，您可以创建多个都使用相同JavaScript的Pen，因此更新起来可能更容易。这以相同的方式适用于CSS。对于HTML，您可以在HTML本身的三括号中添加Pen URL，例如：

在Pen URL周围使用三方括号以包含该HTML的示例

我们还具有更强大的资产托管作为PRO功能。

6.其他笔的Ajax资料

说到使用其他Pens作为资源，您可以通过特殊URL从Pens访问原始代码。例如，如果您只想从另一个Pen中访问JavaScript，则将.js添加到URL的末尾，例如：

http://codepen.io/SamyBencherif/pen/ONyQOQ.js

您可以为此使用Ajax并在其他地方使用它。或使用cURL或其他方式。这对于在另一支Pen中存储数据很有用，以免混淆正在使用的Pen中的JavaScript。

您可以使用以下URL扩展名访问任何Pen的原始代码：

	如果笔是…	原始码	预处理的码
的HTML	原始HTML	.html	不适用
	降价促销	.markdown	.html
	瘦	。瘦	.html
	HAML	.haml	.html
的CSS	原始CSS	.css	不适用
	萨斯	.sass	.css
	SCSS	.scss	.css
	减	。减	.css
JS	原始JS	.js	不适用
	CoffeeScript	.coffeescript	.js
	实时脚本	.live脚本	.js
	打字稿	.typescript	.js
	巴别塔	.babel	.js