跳至主要内容

此博客中的热门博文

Web API从零开始——SVG

SVG 是我基本没有用过的知识块，所以这里也是边分享边学习，尽量在我自己理解的基础上来分享。 1 概念 SVG 是一种基于 XML 语法的图像格式，全称是可缩放矢量图（Scalable Vector Graphics）；其他图像格式都是基于像素处理的， SVG 则是属于对图像的形状描述，所以它本质上是文本文件，体积较小，且不管放大多少倍都不会失真。 SVG 文件可以直接插入网页，成为 DOM 的一部分，然后用 JavaScript 和 CSS 进行操作。 上面是 SVG 代码直接插入网页的例子。 SVG 代码也可以写在一个独立文件中，然后用 、 、 、 等标签插入网页： < img src = "circle.svg" > < object id = "object" data = "circle.svg" type = "image/svg+xml" ></</span> object > < embed id = "embed" src = "icon.svg" type = "image/svg+xml" > < iframe id = "iframe" src = "icon.svg" ></</span> iframe > CSS 也可以使用 SVG 文件： . logo { background : url ( icon.svg ); } SVG 文件还可以转为 BASE64 编码，然后作为 Data URI 写入网页： < img src = "data:image/svg+xml;base64,[data]" > 2 语法 2.1 标签 我们可以把 SVG 代码都放在顶层标签 之中，下面是一个例子： < svg width = "100%" height = "100%" > ...
发表评论
阅读全文

Node.js从零开始——事件、系统和流

毕竟不是一个真正的教程，这里主要还是以普及和介绍为主，所以这一部分就是 Node.js 的其他部分介绍了，主要也就是事件触发、操作系统以及流的知识。 1 事件触发器 因为我们之前在浏览器中使用 JavaScript ，所以知道 JS 通过事件处理了许多用户的交互：鼠标的单击、键盘按钮的按下、对鼠标移动的反应等等。 在后端， Node.js 也提供了使用 events 模块 构建类似系统的选项。 具体上，此模块提供了 EventEmitter 类，用于处理事件。 使用以下代码进行初始化： const EventEmitter = require ( 'events' ); const eventEmitter = new EventEmitter (); 该对象公开了 on 和 emit 方法： emit 用于触发事件 on 用于添加回调函数（会在事件被触发时执行） 例如，创建 start 事件，并提供一个示例，通过记录到控制台进行交互： eventEmitter . on ( 'start' , () => { console . log ( '开始' ); }); 当运行以下代码时： eventEmitter . emit ( 'start' ); 事件处理函数会被触发，且获得控制台日志。 可以通过将参数作为额外参数传给 emit() 来将参数传给事件处理程序： eventEmitter . on ( 'start' , number => { console . log ( `开始 ${ number } ` ); }); eventEmitter . emit ( 'start' , 23 ); 多个参数： eventEmitter . on ( 'start' , ( start , end ) => { console . log ( `从 ${ start } 到 ${ end } ` ); }); eventEmitter . emit ( 'start' ,...
发表评论
阅读全文

JavaScript从零开始——入门（1）

  正好这段时间在学习JavaScript全栈，顺便把自己到目前为止的知识重新整理一下，做个自己能够理解的学习路径出来。 先从入门开始，老生常谈一下5W1H——有很大一部分，尤其是历史是引用自网道的JavaScript教程，特此声明： 入门篇 ​ wangdoc.com What——什么是JavaScript？ 各个网站、书籍、教程都写了无数次JavaScript的定义，最简单的一种说法就是： JavaScript是一种轻量级的脚本语言。 其实这个定义到2020的今天，有一点点不太一样了，毕竟它已经发展到一个前人无法想象的地步了，如今的JavaScript不再是只能用来编写控制其他大型应用程序的“脚本”，它还可以用来构建服务器（如最常用的Web服务器等），构造移动应用（主流的iOS或者Android），甚至可以直接编写PC端桌面应用（Windows，Mactintosh以及Linux），已经是不折不扣的“全栈”语言了。 当然其实它所提供的核心语法并不算很多，只能用来做一些数学和逻辑运算，也不提供任何与I/O相关的API，而是要靠宿主环境（host）提供，所以它其实算是 嵌入式（embedded）语言 ，现如今这诸多用途的开发，都是各大JavaScript框架的功劳：譬如服务器构建，用到了著名的Node.js；移动应用上常见的是React Native，PhoneGap/Cordova甚至jQuery Mobile；桌面应用的框架则主要是electron.js。 最后，从语法角度看，它是一种 “对象模型”语言 ，各种宿主环境通过这个模型，描述自己的功能和操作接口，从而通过JavaScript来控制对应功能；但JavaScript并不是纯粹的“面向对象的”语言，因为它还支持其他的编程范式——如函数式编程——这就导致几乎任何问题，它都可能有多种解决的方法。 Where——JavaScript可以用在哪里？ 如前所述，JavaScript的核心语法其实很精简，只包括了： 基本的语法构造 ：操作符、控制结构、语句等； 标准库 ：Array（数组）、Date（日期时间）、Math（数学库）等等。 除此之外的所有其他特性，都是由宿主所提供的API，仅仅是通过JavaScript进行调用。 如浏览器，它额外提供了如下三大类API： 浏览器控制类： 操作浏览器 DOM（文档对...
发表评论
阅读全文