Learn-anything-优快云博客

原创学习Git和Github，从这里开始

一、简介Git 是一个免费开源分布式版本控制系统，由于其占用空间小、性能快，优于其他SCM工具(SVN、CVS等)，主要用于代码版本管理。GitHub 是基于 Git 的免费版本控制仓库（开源项目集中地），任何人都可以上传或下载平台上的开源项目，全球有6500万的开发者在使用。二、Git1、Git 整体结构2、版本对象Git 通过 commit 对象来保存每一次提交的版本内容，其中 tree对象指向所有代码文件的快照。多版本之间通过 parent 对象进行链接。3、文件状态Git

2022-01-14 20:13:24 595

原创怎么用JavaScript启动浏览器的后台线程？

一、简介Worker 对象用于创建独立后台线程，可以处理一些耗时的操作且不会阻塞主线程(通常是UI线程)。可用的 Worker有：专用worker、共享worker、Service Worker。二、专用worker只能被单一脚本调用创建后台线程。但在worker内，不能直接操作DOM节点，也不能使用window对象的默认方法和属性，可用方法和对象，看这里!1、worker 实例创建 work 线程并与主线程进行通讯。主线程和 worker 线程之间通过postMessage() 发送信息并用o

2021-12-27 19:51:44 1147

原创除了缓存，浏览器还有哪些存储数据的方式？

一、简介浏览器提供3种用于数据存储的 JavaScript APIs：cookie 、Web Storage API、IndexedDB。二、cookiecookie 是最早期用于存储键/值对数据的解决方案，但由于各种安全、无法存储复杂数据等问题，请使用另外两种方案。// cookie 使用方法document.cookie = "name=oeschger";document.cookie = "favorite_food=tripe";alert(document.cookie);

2021-12-27 13:17:31 1306

原创详解JavaScript事件处理程序

一、事件是什么？事件是用户与浏览器进行交互的方式。譬如用户点击按钮就会产生click事件，浏览器会找到相应js代码并执行，我们要做的就是按照规则编写js代码放在指定位置即可。二、怎么使用事件功能？两种方式使用事件功能：1、增加元素的事件属性；2、调用内置对象的方法addEventListener。<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>Ran

2021-12-26 19:26:39 569 1

原创怎么使用JavaScript代码？

一、简介HTML 文件使用 JavaScript 代码，有三种方式。1、直接写入<!DOCTYPE html><html lang='zh-CN'><head> <meta charset="utf-8"> <title>加载 JavaScript 的方法</title> <script> // 法一：加载 JavaScript 代码 document

2021-12-26 15:59:41 675

原创详解JavaScript的正则表达式

一、正则表达式正则表达式是用于匹配字符串的语法。在 JavaScript中，被用于 RegExp 的 exec 和 test 方法, 以及 String 的 match、matchAll、replace、search 和 split 方法。正则表达式语法，看这里！1、创建正则表达式法一在加载脚本时就会被编译，性能高于法二。如果正则表达式不会改变，推荐使用法一。// 法一：var re = /ab+c/[flags];// 法二：var re = new RegExp("ab+c"[,fl

2021-12-26 11:57:40 251

原创详解JavaScript的new表达式

一、new用于创建用户定义的对象实例或创建具有构造函数的内置对象实例。// 语法new constructor[([arguments])]1、使用规则当执行 new Foo(…) 时，会发生以下事情：创建一个继承自 Foo.prototype 的新对象；使用指定参数调用构造函数，并将 this 绑定到新对象（new Foo 等同于 new Foo()，表示没有指定参数）。构造函数返回值就是 new 表达式结果。如果构造函数没有显式返回，则使用步骤1创建的对象（通常构造函数没有re

2021-12-26 09:59:12 370

原创详解JavaScript的class对象

一、class 是什么？class 是 ECMAScript 2015 引入的类对象，其继承特性也是基于原型链。1、定义类// 语法一class name [extends] { // class body}// 语法二const MyClass = class [className] [extends] { // class body};2、简单实例let Foo = class { constructor() {} bar() { return "Hell

2021-12-26 09:56:06 765

原创 JavaScript一统江湖的野心

一、遐想如今编程语言是百家齐放、万家争鸣，犹如战国时代的群雄割据，各占一隅，逍遥度日。编程语言本质上就是定义一套自己的语法规则，然后通过编译器转换成机器可以运行指令，没有孰好孰坏，使用场景不同，没有必要上纲上线，只要能帮你解决问题，就是好语言，好工具。程序员之苦，在于每天都会有新的语言、新的规则被制定，要想程序能够良好运行，就必须去了解这些规则；程序员之幸，在于每天都有人在挠破头创造新语言，帮你解决一些编程极限问题，或是运行效率、或是运行bug…最新被逼无奈学习了 JavaScript，越深入越觉得

2021-12-25 17:52:13 352

原创 JavaScript运算符列表

一、运算符包含 JavaScript 所有运算符及其详细使用说明。1、一元运算符只对一个操作数进行调整。符号含义详情delete用于删除对象属性，成功返回true，失败返回false查看void可以把语句变成表达式查看typeof返回操作数的类型字符串查看+ +自增查看- -自减查看+1、转换为数字；2、加法；3、连接字符串查看-1、转换成数字；2、减法查看~按位进行非操作，反转其操作数的位查看!

2021-12-25 16:00:35 273

原创详解JavaScript的Proxy对象

一、Proxy 是什么？Proxy 对象用于拦截并修改目标对象的指定操作。// 语法const p = new Proxy(target, handler)target ：目标对象（可以是任何类型的对象，包括原生数组，函数，甚至另一个代理）。handler ：以函数作为属性的对象，实现拦截和自定义操作。二、怎么用？1、使用 Proxy 的简单实例访问不存在的属性，设置默认值返回而不返回 undefined ，get handler 有其具体语法规则，看这里!// 1、找到合适的 h

2021-12-23 23:57:23 2459

原创详解JavaScript的this对象

一、this 是什么？this 是当前运行环境的一个属性，指向最近的对象实例。二、怎么用？1、全局<!DOCTYPE html><html lang='zh-CN'><head> <meta charset="utf-8"> <title>this</title> <script> // 全局环境下，等同于 window 对象 console.log(th

2021-12-23 23:32:08 777

原创详解JavaScript的Object对象

一、Object 是什么？Object 是 JavaScript 的一种数据类型，用于存储各种键值集合和更复杂的实体，几乎所有对象都是 Object 类型的实例，它们都会从 Object.prototype 继承属性和方法，虽然大部分属性都会被覆盖（shadowed）或者说被重写了（overridden）。一个对象就是一系列属性的集合，属性包括名字和值。如果属性值是函数，那么称之为方法。1、创建新对象法一：使用对象初始化器创建对象var myCar = { name: "

2021-12-22 17:09:55 3295

原创详解JavaScript的继承和原型链(prototype)

一、原型链是什么？JavaScript 的每个实例对象都有一个指向上一层对象的私有属性（称之为 __proto__），上一层对象又指向再上一层对象，就这样层层向上直至 __proto__ 属性为 null ，最后这个对象就是 Object 。这种通过 __proto__ 属性来链接对象的方法，称之为原型链。var o = {a: 1};// 原型链如下:// o ---> Object.prototype ---> nullvar a = ["yo", "whadup

2021-12-22 13:35:45 782

原创详解JavaScript的Generator对象

一、Generator 对象是什么？Generator对象不能直接实例化，只能由生成器函数返回生成，具有迭代功能。function* infinite() { let index = 0; while (true) { yield index++; }}const generator = infinite(); // "Generator { }"console.log(generator.next().value); // 0console.log

2021-12-21 22:19:49 541

原创详解JavaScript的Function对象

一、Function 对象Function 对象是全局对象，可以动态创建函数，实际上每个函数都是一个 Function 对象。1、函数是Function类型对象// 下面代码可以判断，函数是Function类型对象(function(){}).constructor === Function // true2、创建函数const sum = new Function('a', 'b', 'return a + b');console.log(sum(2, 6));// expected

2021-12-21 22:11:47 1793

原创 JavaScript的Symbol是什么？

一、Symbol 是什么？Symbol 是 ECMAScript 2015 中新添加的特性，生成一个唯一标识符，可用于属性名称、也可用于属性值。目的是消除属性名称冲突。二、怎么用？1、新建 symbol用 Symbol() 函数来创建 symbol，可用字符串作为其参数，但只能用于调试。// 1、创建新 symbollet sym1 = Symbol()let sym2 = Symbol('foo')// 2、每次调用都创建新的 symbolSymbol('foo') === Symb

2021-12-20 16:04:34 1045

原创 JavaScript对象怎么实现迭代(iterator)功能？

一、迭代功能是什么？可迭代对象，需要具备 Symbol.iterator 和 next 这两个函数，即可用 for...of 进行迭代。譬如：String、Array、TypedArray、Map 和 Set，都是可迭代对象。var myIterator = { next: function() { // ... }, [Symbol.iterator]: function() { return this }}二、怎么用？1、转换 class

2021-12-20 16:01:27 977

原创 JavaScript中Boolean是什么？

一、Boolean 是什么？bool 是表示 true 或 false 的基础数据类型。Boolean 是表示 true 或 false 的对象数据类型，可以把其他类型转换为 Boolean 类型。1、bool 与 Boolean 区别bool 是基础类型，Boolean 是对象类型；bool 使用场景：所有需要做 true 或 false 判断的地方，优先使用 bool 类型；Boolean 使用场景：无法直接判断 true 或 false 的类型，可转换为 Boolean 类型后，再做 tr

2021-12-20 15:56:35 4810

原创 JavaScript中Array怎么用？

一、ArrayArray 是 JavaScript 的全局数组对象，其元素可以是不同类型，如果需要元素是同一类型，可使用 TypedArray。二、怎么用？<!DOCTYPE html><html lang='zh-CN'><head> <meta charset="utf-8"> <title>Symbol</title> <script> // 创建数组

2021-12-20 15:52:24 250

原创 JavaScript的异步操作（Promiseasyncawait）

一、Promise 是什么？Promise 是一个用于绑定异步操作与回调函数的对象，让代码更易读且更合理。1、简单实例<!DOCTYPE html><html lang='zh-CN'><head> <meta charset="utf-8"> <title>异步调用</title> <script> let myFir

2021-12-17 15:33:34 785

原创学习Handlebars，从这里开始

一、Handlebars 是什么？Handlebars 是一个页面模板化工具。1、使用场景当网站中很多页面的排版格式是相同的，只是其中内容不同，此工具就是比较好的解决方案。更多使用建议，看这里！二、怎么使用？1、远程handlebars通过加载远程handlebars库，解析页面模板并加载到HTML中。通过下面5个步骤清晰展示 handlebars 怎么加载和使用。负责下面代码到 index.html 中，再用浏览器打开 index.html 即可看到效果。<!DOCTYPE htm

2021-12-13 14:35:35 844

原创学习less，从这里开始

一、less 是什么？less 是 css 的扩展语法，让 css编码工作变的更简单。1、使用场景如果要给项目中所有元素加上一个颜色，你会怎么做？CSS 解决方法：找出所有元素并加上 color 属性。/* style.css */p { color: red;}button { color: red;}...问题：当需要更换颜色时，工作量就非常大了，用 less 就非常容易解决，定义一个变量即可，如下：/* style.less */@color: red;

2021-12-12 09:58:37 192

原创学习webpack，从这里开始

一、webpack 是什么？webpack 是一个模块打包工具，不仅可以减少网络流量，还能减少服务器请求，减轻服务器压力。二、怎么使用？下面是一个简单打包 css 文件的步骤。1、新建项目初始化 webpack 项目，包括配置文件 # 1、初始化一个新的 webpack 项目 mkdir learn-webpack cd learn-webpack npx webpack-cli init # 2、按照下面选择进行 ? Which of the following

2021-12-12 09:18:49 336

原创 CSS 中的定位(position)布局，是什么？

一、定位布局是什么？使用 position、left、right、top、bottom，可以改变元素现有位置，譬如让元素从正常布局流中跳出来，固定在页面某个位置上。二、使用场景1、position: static这是元素的默认值，表示按照正常布局流进行排列元素（浏览器默认展示方式）。此时 top, right, bottom, left 和 z-index 属性无效。2、position: relative以现有位置为坐标进行偏移，元素不会被移出正常文档流，原有区域会留下空白。新建文件 i

2021-12-10 18:12:22 479

原创 CSS 中的网格(grid)布局，是什么？

一、网格布局是什么？网格布局就是把页面拆分成很多小格子，用于对齐和摆放元素。有三个重要的属性：行(row)、列(column)、沟槽(gutter，表示行列的间隙)。二、怎么使用？/* 父元素设置如下属性 */display: grid;grid-template-columns: 1fr 1fr 1fr;grid-gap: 20px;更多可用的 grid 属性，看这里！三、实例新建 index.html 文件，复制下面代码到文件，用浏览器打开 index.html，再调整浏览器

2021-12-10 18:08:46 526

原创 CSS 的弹性布局(flex) ，是什么？

一、弹性布局是什么？元素根据窗口大小变化而自动伸长或缩短，使得整个页面格式保持不变。二、怎么使用？1、使用方法/* 1、父元素中增加 display 属性；*/display: flex;/* 2、子元素中增加 flex、flex-direction等属性；*/flex: 1;flex-direction: column;2、示例新建 index.html 文件，复制下面代码到文件，用浏览器打开 index.html，在调整浏览器窗口大小，即可看到article 元素的大小也跟

2021-12-10 18:05:54 663 2

原创 CSS 的正常布局流，是什么？

一、正常布局流是什么？正常布局流也就是浏览器的默认展现页面的方式，具体步骤是：第一步：把每个元素（Content），都用 padding、border、margin 包裹起来，形成一个盒子；第二步：每个盒子占一行；第三步：自上而下把所有盒子按序展示出来。二、实例没有做任何调整的元素，默认排列的样子？1、代码新建 index.html 文件，复制下面代码到文件并保持，用浏览器打开 index.html 看效果。<!DOCTYPE html><ht

2021-12-10 18:02:13 732

原创 CSS 的浮动(float)布局是什么？

一、浮动布局用 float 属性，可以实现元素（文字、图片等）的浮动显示功能，通过下面几个实例来展示浮动布局的效果以及浮动布局带来的一些问题？二、应用场景1、图片浮动新建 index.html，复制下面代码到文件，用浏览器打开看效果。<!DOCTYPE html><html lang='zh-CN'><head> <meta charset="utf-8"> <t

2021-12-10 10:25:05 344

原创 CSS 的多列布局是什么？

一、多列布局是什么？就是用 CSS 的 column-count、column-width、column-gap、break-inside、page-break-inside 等实现多列显示的功能。二、应用场景1、文字多列显示通过 column-count、column-gap、column-rule 就能做出下面多列显示效果。新建 index.html 文件并复制下面代码到文件中，保存后用浏览器打开即可看效果。<!DOCTYPE html><html><

2021-12-10 10:15:04 858

原创学习JSON5，从这里开始

一、JSON5 解决了什么问题？JSON5 对 JSON 进行了扩展，增加了如下功能：可以增加单行或多行注释；去掉 JSON序列化后，key的双引号，减少 JSON 文件大小；object 和 array 用逗号结尾，不会视为语法错误；序列化后的 string 可以用单引号和双引号，JSON中只能用双引号；number 增加了16进制、小数、正负等；JSON 介绍及用法，看这里！二、怎么使用？使用 Node.js 环境，通过一个简单示例，展示JSON5的使用方式以及新的功能。Nod

2021-12-07 20:12:10 708

原创学习JSON，从这里开始

一、JSON 是什么？JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式，易于人阅读和编写。二、JSON 两种形式1、键值对形式{key1:value1, key2:value2, ...}2、数组形式[value1, value2 ...]3、类型说明key 的类型是 string；value 有七种类型可用：object、array、string、number、true、false、null；三、怎么使用？1、JavaSc

2021-12-07 20:05:50 334

原创学习Babel，从这里开始

一、Babel 解决什么问题？1、问题浏览器无法运行 ECMAScript 2015+、JSX、TypeScript 等语法编写的脚本代码。ECMAScript 2015+ ：ECMAScript 在2015年发布新的 JavaScript 语法；JSX ：用在 React 框架中脚本语言；详细说明，看这里！TypeScript ： JavaScript 的扩展语法，用于数据类型、逻辑检查等；详细说明，看这里！2、解决方案Babel 可以把这些代码转换成浏览器可以运行的 Jav

2021-12-07 10:51:29 319

原创 Gatsby中怎么在组件中使用css？

一、Gatsby 中使用 css 的方式1、导入css文件的两种方式import * as React from "react"// 1、项目路径中导入cssimport "../styles/index.css"// 2、已安装包中导入cssimport "bootstrap/dist/css/bootstrap.min.css"export default function HomePage() { return <div>I'm styled by bootstrap

2021-12-03 09:44:56 163

原创 Gatsby中怎么加载图片？

一、Gatsby页面怎么加载图片？在编写网站页面时，总是会遇到有图片要显示，那么怎么加载这些图片呢？1、Gatsby 中图片有三种形式：本地图片，譬如： src/images 目录下的图片；远程网络图片，譬如：https://learn-anything.cn/static/cf1d0cf910dcc988ea869d56609eca53/096ec/bainian.webpGatsby 数据层中的图片节点。二、加载本地和网络图片Gatsby 下是通过 StaticIma

2021-12-03 07:43:51 443

原创 webp是什么文件格式？

一、webp 是什么？webp 是一种新的图像格式，用于web项目，可以大大提高网站访问速度。同样的分辨率，大小比 jpg、png 小 25% 以上；Chrome、Firefox、Edge、Opera 等都支持此格式。二、怎么使用？1、下载和安装下载对应平台软件包，软件包中包含 png/jpg 与 webp 相互转换的工具以及开发所需的库和头文件。下载链接libwebp-1.2.1-windows-x64.zip ：适用于 Windows-x64libwebp-1.2.1-l

2021-12-02 14:08:13 6083

原创 Gatsby中怎么使用emotion？

一、emotion是什么？用 JavaScript 语法来写 css，主要用于两个框架：agnostic 和 React。下面是用于 React 框架的简单示例：import { css, cx } from '@emotion/css'const color = 'white'render( <div className={css` padding: 32px; background-color: hotpink; font-size: 2

2021-12-02 09:11:10 376

原创 Gatsby中使用百度统计功能来分析网站流量

一、统计网站流量哪些人访问了网站？访问了那些网站哪些页面？访问者来自于哪个省市区？年龄多大？这些问题，可通过百度统计这个插件完成。二、注册百度账号注册地址：https://tongji.baidu.com/web/welcome/login注册完成后 --> 登录 --> 管理页面 --> 新增网站 --> 填写网站域名等信息 --> 确认。跳出的页面会看到如下代码，其中 **** 部分是网站的32位标识，复制保存，后面要用。<

2021-12-02 09:02:16 417

原创 Gatsby中怎么使用MDX？

一、MDX 是啥？MDX 是一种文档格式，可以在 Markdown 文档中无缝地插入 JSX 代码。import {Chart} from './snowfall.js'export const year = 2018# Last year’s snowfallIn {year}, the snowfall was above average.It was followed by a warm spring which causedflood conditions in many of t

2021-12-02 08:59:37 580

原创 gatsby-ssr.js有什么作用？

一、简介Gatsby 编译完成后，会为每个页面生成对应的 HTML 文件。而 gatsby-ssr.js 文件中提供了一些API，用于编译完成之前修改这些 HTML 的内容。二、API 说明1、onRenderBody功能：生成HTML之前，修改一些body信息。const React = require("react")const Layout = require("./src/components/layout")// Adds a class name to the body

2021-12-02 08:57:07 774

C++高级参考手册PDF

空空如也