javascript

从头开始构建 CodePen 类型编辑器

想要在您的网站上显示实时代码示例是很常见的,如果您今天想这样做,有一些服务可以提供这种能力。然而,如果你像我一样,你宁愿自己动手。在本教程中,我将为该站点构建自己的类似代码笔的编辑器。

我的目标比大多数人的用例更复杂,因为该站点使用称为MDXT的降价编译器(这是为该站点制作的自定义编译器);我想将此处的代码包含到 MDXT 语言中。因此,考虑到这一点,我将有两个版本并回顾每个版本的工作原理。第一个版本将介绍如何将输入textarea与 链接iframe并动态更新它。第二个将保留第一个的核心方面,但旨在处理同一页面上的多个编辑器。

为了保持本文档的整洁,我不会在示例中包含样板 HTML,但如果您需要,请输入docVSCode 并将示例粘贴到 body 标记中。

独立编辑器

从编辑器的标记开始,我们将<textarea>在页面正文中包含三个标签以及一个<iframe>. 如果你跳到下面看,你可以看到每个文本区域都有一个data-lang属性。当我们到达那个点时,这将给我们一个非常性感的方法来与文档更新器交互。我没有在本教程中包含样式,因为我还没有为我的编辑器设计样式。...

<textarea data-lang="html" cols="30" rows="10"></

如何终止 JavaScript 中的脚本运行

我怎样才能像 PHPexit或 那样退出 JavaScript 脚本die?我知道这不是最好的编程实践,但我需要这样做

“exit”函数通常会退出程序或脚本,并带有一条错误消息作为参数。例如 php 中的 die(...)

die("sorry my fault, didn't mean to but now I am in byte nirvana")

JS 中的等效项是使用throw关键字发出错误信号,如下所示:

throw new Error();

你可以很容易地测试这个:

var m = 

学习 Web 开发:初学者的 7 个基本步骤

学习 Web 开发:初学者的 7 个基本步骤

学习网络开发旧金山

在 Web 开发领域开展职业生涯似乎非常棘手。有无数的语言和工具需要学习——对于初学者来说,甚至弄清楚从哪里开始学习似乎也很困难。

但在实践中,这个过程可能不会像您想象的那么复杂。一旦您了解作为入门级 Web 开发人员需要具备哪些技能,您将能够在短期内建立您的学术基础。

想知道如何学习网页开发?我们是来帮忙的。本文适用于任何有兴趣进入 Web 开发领域或希望提高现有技能的人。它将涵盖一些基本术语、Web 开发专业知识以及开发和管理网站所需的工具和技能。换句话说,它将带您了解启动您的职业生涯所需了解的一切。

让我们开始吧!

为什么要学习 Web 开发?

简而言之,工作潜力。

Web 开发是一个快速发展的职业。美国劳工统计局预测, 2019 年 至2029 年,网络开发人员的工作岗位将增长 8%。网络开发人员可以是自由职业者,也可以作为公司内部员工工作,而且许多人都在远程工作。简而言之,对于任何重视专业发展和学习机会的人来说,这是一个很好的领域。

这些教程涵盖的技能:

 

                

作为绝对初学者学习 Web 开发

想作为初学者学习 Web 开发,但不确定从哪里开始?

很难知道学习编码的最佳方法,因为那里有大量资源。但是现在,您所需要的只是 Web 开发的基础知识——对下一步的方向进行一般性解释。

首先,这是您作为 Web 开发新手需要遵循的步骤。

学习 Web 开发基础知识的步骤:

  1. 了解网站工作原理、前端与后端以及使用代码编辑器的基础知识
  2. 学习基本的 HTML、CSS 和 JavaScript
  3. 学习工具:包管理器、构建工具、版本控制
  4. 学习 Sass、响应式设计、JavaScript 框架
  5. 学习后端基础知识:服务器和数据库、编程语言

我建议按顺序执行步骤 1、2 和 3。然后,根据您是想专注于更多的前端还是后端,您可以按任何顺序执行步骤 4a 或 4b。…

                

一文搞懂 script 标签

前端开发应该都知道 HTML 中 <script> 标签的作用——引入 JS 代码,不过由于脚手架和打包工具的普及,我想很少有人再亲手写 <script> 了。本期就借机写一下这个快被遗忘了的 <script> 教程,看看大家是否真的掌握了这个元素。

基本功能

废话不多说了,直入正题。<script> 引入 JS 的方式主要有三种:内联、外置,以及动态引入。

内联

直接将 JS 代码写到 script 标签内:

 

<html>
  <head>
    <script>
      console.log("Hello");

Qwik.js框架是如何追求极致性能的?!

背景、

Qwik是一款语法"接近"react的前端ssr框架, 前段时间看了两篇Qwik相关的文章, 对这个框架有了些兴趣, 但是去网上搜了一下, 发现相关的中文文章几乎没有了, 所以决定对其好好研究一番, 并且写一篇关于Qwik的特点、基础用法、设计概念, 再加上Qwik对我的一些启发, 接下来就一起看看这款黑科技是何方神圣吧。

一、前提知识:ssr (懂了这里才能看懂Qwik)

从入门学习前端开发开始, 我们不断学习到各种前端的优化方式来提高前端代码的性能, 其中"服务端渲染(ssr)"这种模式帮我们大幅提高了使用前端框架开发的项目的首屏性能, 那么ssr的工作流程是什么样的? 下面我们一起简单梳理一下。…

        

我们是如何利用 Qwik 和 Partytown 削减掉 页面中 99% 的 JavaScript 的

本文为翻译
原文标题:How we cut 99% of our JavaScript with Qwik + Partytown
原文作者:Miško Hevery
原文地址:builder.io/blog/how-we-

Builder.io 兴奋地向大家的宣布,采用 Qwik 之后,我们的主页即使在移动端,其 PageSpeed Insights 跑分也能达到 100/100。

无论你的应用程序有多大,Qwik 都能帮助网页达到这样的性能。我们用 一系列炫酷的技术 得到了这样的分数,这些技术包括:

  • 页面由 Qwik 提供服务,启动(boot)所需的 JavaScript 不到 1kb
  • 我们的主页只会发送 折页上方(Above
        

JavaScript 新特性最全指南:ES2023 ~ ES2016

Shared memory and atomics,“共享内存和原子” 又名 “共享数组缓冲区”,可以在主线程和多个工作线程间共享对象的字节,能更快的在多个工作线程间共享数据、除 postMessage() 多了一种数据传输方式。

ECMAScript 是 JavaScript 要实现的一个语言标准,通常缩写为 ES。自从 ES6 之后 JavaScript 多出了很多新特性,当开始学习这些新特性时,不可避免的会看到这些术语:“ES6、ES7、ES8、ECMAScript 2018、ECMAScript 2019...” 等等很多。很多时候让人困惑或混淆,例如 ES6 其实等价于 ES2015,这个 ES2015 代表的是当时发表的年份,ES2016 发布的称为 ES7,依次类推,ES2023 可以称为 ES14 了~…