JavaScript - 标签 - 菠菜眾長https://lruihao.cn/tags/javascript/JavaScript - 标签 - 菠菜眾長Hugo -- gohugo.iozh-CN1024@lruihao.cn (Lruihao)1024@lruihao.cn (Lruihao)Wed, 14 Jun 2023 00:11:17 +0800使用 Node.js 自动创建 Vue 的路由https://lruihao.cn/posts/gen-router/Wed, 14 Jun 2023 00:11:17 +0800Lruihaohttps://lruihao.cn/posts/gen-router/最近在写一个 Vue 插件，需要在项目中创建一些测试页面，由于都是些静态路由，就想到之前看到过的一个项目就是用 Node.js 来自动生成路由的，于是就借鉴过来改了一下。

源码

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57

const fs = require('fs')
const os = require('os')

const vueDir = './src/views/'
const routerFile = './src/router.js'

fs.readdir(vueDir, function (err, files) {
  if (err) {
    console.error('❌ Could not list the directory.', err)
    return
  }
  const routes = []
  for (const filename of files) {
    if (filename.indexOf('.') < 0) {
      continue
    }
    const [name, ext] = filename.split('.')
    if (ext !== 'vue') {
      continue
    }
    const routeName = name.replace(/-([a-z])/g, (_, match) => match.toUpperCase())
    let routeDescription = ''
    const contentFull = fs.readFileSync(`${vueDir}${filename}`, 'utf-8')
    // get route description from first line comment
    const match = /<!--\s*(.*)\s*-->/g.exec(contentFull.split(os.EOL)[0])
    if (match) {
      routeDescription = match[1].trim()
    }
    routes.push(`  {
    path: '/${name === 'home' ? '' : name}',
    name: '${routeName}',${routeDescription ? `\n    description: '${routeDescription}',` : ''}
    component: () => import(/* webpackChunkName: "${routeName}" */ '@/views/${filename}'),
  },`)
  }
  const result =
`// This file is automatically generated by gen-router.js, please do not modify it manually！
import VueRouter from 'vue-router'
import Vue from 'vue'

Vue.use(VueRouter)

const routes = [
${routes.join(os.EOL)}
]

const router = new VueRouter({
  mode: 'hash',
  routes,
})

export default router
`
  fs.writeFile(routerFile, result, 'utf-8', (err) => {
    if (err) throw err
    console.log(`✅ Router generated successfully in ${routerFile}`)
  })
})

生成效果如下：

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

// This file is automatically generated by gen-router.js, please do not modify it manually！
import VueRouter from 'vue-router'
import Vue from 'vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'home',
    description: 'Home',
    component: () => import(/* webpackChunkName: "home" */ '@/views/home.vue'),
  },
]

const router = new VueRouter({
  mode: 'hash',
  routes,
})

export default router

参考

sunzsh/vue-el-demo

]]>浏览器渲染原理https://lruihao.cn/posts/browser-rendering/Sun, 05 Feb 2023 21:02:52 +0800Lruihaohttps://lruihao.cn/posts/browser-rendering/

浏览器是如何渲染页面的？

当浏览器的网络线程收到 HTML 文档后，会产生一个渲染任务，并将其传递给渲染主线程的消息队列。

在事件循环机制的作用下，渲染主线程取出消息队列中的渲染任务，开启渲染流程。

整个渲染流程分为多个阶段，分别是： HTML 解析、样式计算、布局、分层、绘制、分块、光栅化、画

每个阶段都有明确的输入输出，上一个阶段的输出会成为下一个阶段的输入。

这样，整个渲染流程就形成了一套组织严密的生产流水线。

渲染的第一步是解析 HTML。

解析过程中遇到 CSS 解析 CSS，遇到 JS 执行 JS。为了提高解析效率，浏览器在开始解析前，会启动一个预解析的线程，率先下载 HTML 中的外部 CSS 文件和 外部的 JS 文件。

如果主线程解析到link位置，此时外部的 CSS 文件还没有下载解析好，主线程不会等待，继续解析后续的 HTML。这是因为下载和解析 CSS 的工作是在预解析线程中进行的。这就是 CSS 不会阻塞 HTML 解析的根本原因。

如果主线程解析到script位置，会停止解析 HTML，转而等待 JS 文件下载好，并将全局代码解析执行完成后，才能继续解析 HTML。这是因为 JS 代码的执行过程可能会修改当前的 DOM 树，所以 DOM 树的生成必须暂停。这就是 JS 会阻塞 HTML 解析的根本原因。

第一步完成后，会得到 DOM 树和 CSSOM 树，浏览器的默认样式、内部样式、外部样式、行内样式均会包含在 CSSOM 树中。

渲染的下一步是样式计算。

主线程会遍历得到的 DOM 树，依次为树中的每个节点计算出它最终的样式，称之为 Computed Style。

在这一过程中，很多预设值会变成绝对值，比如red会变成rgb(255,0,0)；相对单位会变成绝对单位，比如em会变成px

这一步完成后，会得到一棵带有样式的 DOM 树。

接下来是布局，布局完成后会得到布局树。

布局阶段会依次遍历 DOM 树的每一个节点，计算每个节点的几何信息。例如节点的宽高、相对包含块的位置。

大部分时候，DOM 树和布局树并非一一对应。

比如display:none的节点没有几何信息，因此不会生成到布局树；又比如使用了伪元素选择器，虽然 DOM 树中不存在这些伪元素节点，但它们拥有几何信息，所以会生成到布局树中。还有匿名行盒、匿名块盒等等都会导致 DOM 树和布局树无法一一对应。

下一步是分层

主线程会使用一套复杂的策略对整个布局树中进行分层。

分层的好处在于，将来某一个层改变后，仅会对该层进行后续处理，从而提升效率。

滚动条、堆叠上下文、transform、opacity 等样式都会或多或少的影响分层结果，也可以通过will-change属性更大程度的影响分层结果。

再下一步是绘制

主线程会为每个层单独产生绘制指令集，用于描述这一层的内容该如何画出来。

完成绘制后，主线程将每个图层的绘制信息提交给合成线程，剩余工作将由合成线程完成。

合成线程首先对每个图层进行分块，将其划分为更多的小区域。

它会从线程池中拿取多个线程来完成分块工作。

分块完成后，进入光栅化阶段。

合成线程会将块信息交给 GPU 进程，以极高的速度完成光栅化。

GPU 进程会开启多个线程来完成光栅化，并且优先处理靠近视口区域的块。

光栅化的结果，就是一块一块的位图

最后一个阶段就是画了

合成线程拿到每个层、每个块的位图后，生成一个个「指引（quad）」信息。

指引会标识出每个位图应该画到屏幕的哪个位置，以及会考虑到旋转、缩放等变形。

变形发生在合成线程，与渲染主线程无关，这就是transform效率高的本质原因。

合成线程会把 quad 提交给 GPU 进程，由 GPU 进程产生系统调用，提交给 GPU 硬件，完成最终的屏幕成像。

什么是 reflow？

reflow 的本质就是重新计算 layout 树。

当进行了会影响布局树的操作后，需要重新计算布局树，会引发 layout。

为了避免连续的多次操作导致布局树反复计算，浏览器会合并这些操作，当 JS 代码全部完成后再进行统一计算。所以，改动属性造成的 reflow 是异步完成的。

也同样因为如此，当 JS 获取布局属性时，就可能造成无法获取到最新的布局信息。

浏览器在反复权衡下，最终决定获取属性立即 reflow。

什么是 repaint？

repaint 的本质就是重新根据分层信息计算了绘制指令。

当改动了可见样式后，就需要重新计算，会引发 repaint。

由于元素的布局信息也属于可见样式，所以 reflow 一定会引起 repaint。

为什么 transform 的效率高？

因为 transform 既不会影响布局也不会影响绘制指令，它影响的只是渲染流程的最后一个「draw」阶段

由于 draw 阶段在合成线程中，所以 transform 的变化几乎不会影响渲染主线程。反之，渲染主线程无论如何忙碌，也不会影响 transform 的变化。

]]>浏览器原理 - 事件循环https://lruihao.cn/posts/event-loop/Wed, 11 Jan 2023 11:16:02 +0800Lruihaohttps://lruihao.cn/posts/event-loop/

最近在抖音上刷到很多次 袁进老师 的前端视频，然后就听了一下他的前端大师课，感觉了解一些浏览器原理后，原来工作中的一些疑问也自然解开了。

浏览器的进程模型

何为进程？

程序运行需要有它自己专属的内存空间，可以把这块内存空间简单的理解为进程

进程

每个应用至少有一个进程，进程之间相互独立，即使要通信，也需要双方同意。

何为线程？

有了进程后，就可以运行程序的代码了。

运行代码的「人」称之为「线程」。

一个进程至少有一个线程，所以在进程开启后会自动创建一个线程来运行代码，该线程称之为主线程。

如果程序需要同时执行多块代码，主线程就会启动更多的线程来执行代码，所以一个进程中可以包含多个线程。

线程

浏览器有哪些进程和线程？

浏览器是一个多进程多线程的应用程序，浏览器内部工作极其复杂。

为了避免相互影响，为了减少连环崩溃的几率，当启动浏览器后，它会自动启动多个进程。

浏览器进程

可以在浏览器的任务管理器中查看当前的所有进程

其中，最主要的进程有：

  1. 浏览器进程

    主要负责界面显示、用户交互、子进程管理等。浏览器进程内部会启动多个线程处理不同的任务。

  2. 网络进程

    负责加载网络资源。网络进程内部会启动多个线程来处理不同的网络任务。

  3. 渲染进程（本篇重点讲解的进程）

    渲染进程启动后，会开启一个渲染主线程，主线程负责执行 HTML、CSS、JS 代码。

    默认情况下，浏览器会为每个标签页开启一个新的渲染进程，以保证不同的标签页之间不相互影响。

    将来该默认模式可能会有所改变，有兴趣的同学可参见 chrome 官方说明文档

渲染主线程是如何工作的？

渲染主线程是浏览器中最繁忙的线程，需要它处理的任务包括但不限于：

  • 解析 HTML
  • 解析 CSS
  • 计算样式
  • 布局
  • 处理图层
  • 每秒把页面画 60 次
  • 执行全局 JS 代码
  • 执行事件处理函数
  • 执行计时器的回调函数
  • ……

思考题：为什么渲染进程不适用多个线程来处理这些事情？

要处理这么多的任务，主线程遇到了一个前所未有的难题：如何调度任务？

比如：

  • 我正在执行一个 JS 函数，执行到一半的时候用户点击了按钮，我该立即去执行点击事件的处理函数吗？
  • 我正在执行一个 JS 函数，执行到一半的时候某个计时器到达了时间，我该立即去执行它的回调吗？
  • 浏览器进程通知我“用户点击了按钮”，与此同时，某个计时器也到达了时间，我应该处理哪一个呢？
  • ……

渲染主线程想出了一个绝妙的主意来处理这个问题：排队

消息队列

  1. 在最开始的时候，渲染主线程会进入一个无限循环
  2. 每一次循环会检查消息队列中是否有任务存在。如果有，就取出第一个任务执行，执行完一个后进入下一次循环；如果没有，则进入休眠状态。
  3. 其他所有线程（包括其他进程的线程）可以随时向消息队列添加任务。新任务会加到消息队列的末尾。在添加新任务时，如果主线程是休眠状态，则会将其唤醒以继续循环拿取任务

这样一来，就可以让每个任务有条不紊的、持续的进行下去了。整个过程，被称之为事件循环（消息循环）。

若干解释

何为异步？

代码在执行过程中，会遇到一些无法立即处理的任务，比如：

  • 计时完成后需要执行的任务 —— setTimeout、setInterval
  • 网络通信完成后需要执行的任务 – XHR、Fetch
  • 用户操作后需要执行的任务 – addEventListener

如果让渲染主线程等待这些任务的时机达到，就会导致主线程长期处于「阻塞」的状态，从而导致浏览器「卡死」

同步策略

渲染主线程承担着极其重要的工作，无论如何都不能阻塞！

因此，浏览器选择异步来解决这个问题

异步策略

使用异步的方式，渲染主线程永不阻塞

面试题：如何理解 JS 的异步？

参考答案：

JS 是一门单线程的语言，这是因为它运行在浏览器的渲染主线程中，而渲染主线程只有一个。

而渲染主线程承担着诸多的工作，渲染页面、执行 JS 都在其中运行。

如果使用同步的方式，就极有可能导致主线程产生阻塞，从而导致消息队列中的很多其他任务无法得到执行。这样一来，一方面会导致繁忙的主线程白白的消耗时间，另一方面导致页面无法及时更新，给用户造成卡死现象。

所以浏览器采用异步的方式来避免。具体做法是当某些任务发生时，比如计时器、网络、事件监听，主线程将任务交给其他线程去处理，自身立即结束任务的执行，转而执行后续代码。当其他线程完成时，将事先传递的回调函数包装成任务，加入到消息队列的末尾排队，等待主线程调度执行。

在这种异步模式下，浏览器永不阻塞，从而最大限度的保证了单线程的流畅运行。

JS 为何会阻碍渲染？

先看代码

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

<h1>Mr.Yuan is awesome!</h1>
<button>change</button>
<script>
  var h1 = document.querySelector('h1');
  var btn = document.querySelector('button');

  // 死循环指定的时间
  function delay(duration) {
    var start = Date.now();
    while (Date.now() - start < duration) {}
  }

  btn.onclick = function () {
    h1.textContent = '袁老师很帅！';
    delay(3000);
  };
</script>

点击按钮后，会发生什么呢？

<复制代码自行演示>

任务有优先级吗？

任务没有优先级，在消息队列中先进先出

但消息队列是有优先级的

根据 W3C 的最新解释：

  • 每个任务都有一个任务类型，同一个类型的任务必须在一个队列，不同类型的任务可以分属于不同的队列。 在一次事件循环中，浏览器可以根据实际情况从不同的队列中取出任务执行。
  • 浏览器必须准备好一个微队列，微队列中的任务优先所有其他任务执行 https://html.spec.whatwg.org/multipage/webappapis.html#perform-a-microtask-checkpoint

随着浏览器的复杂度急剧提升，W3C 不再使用宏队列的说法

在目前 chrome 的实现中，至少包含了下面的队列：

  • 微队列：用户存放需要最快执行的任务，优先级「最高」
  • 延时队列：用于存放计时器到达后的回调任务，优先级「中」
  • 交互队列：用于存放用户操作后产生的事件处理任务，优先级「高」

多队列演示图

添加任务到微队列的主要方式主要是使用 Promise、MutationObserver，例如：

1
2

// 立即把一个函数添加到微队列
Promise.resolve().then(() => {});

浏览器还有很多其他的队列，由于和我们开发关系不大，不作考虑。

面试题：阐述一下 JS 的事件循环

参考答案：

事件循环又叫做消息循环，是浏览器渲染主线程的工作方式。

在 Chrome 的源码中，它开启一个不会结束的 for 循环，每次循环从消息队列中取出第一个任务执行，而其他线程只需要在合适的时候将任务加入到队列末尾即可。

过去把消息队列简单分为宏队列和微队列，这种说法目前已无法满足复杂的浏览器环境，取而代之的是一种更加灵活多变的处理方式。

根据 W3C 官方的解释，每个任务有不同的类型，同类型的任务必须在同一个队列，不同的任务可以属于不同的队列。不同任务队列有不同的优先级，在一次事件循环中，由浏览器自行决定取哪一个队列的任务。但浏览器必须有一个微队列，微队列的任务一定具有最高的优先级，必须优先调度执行。

面试题：JS 中的计时器能做到精确计时吗？为什么？

参考答案：

不行，因为：

  1. 计算机硬件没有原子钟，无法做到精确计时
  2. 操作系统的计时函数本身就有少量偏差，由于 JS 的计时器最终调用的是操作系统的函数，也就携带了这些偏差
  3. 按照 W3C 的标准，浏览器实现计时器时，如果嵌套层级超过 5 层，则会带有 4 毫秒的最少时间，这样在计时时间少于 4 毫秒时又带来了偏差
  4. 受事件循环的影响，计时器的回调函数只能在主线程空闲时运行，因此又带来了偏差
]]>前端页面内容加密总结https://lruihao.cn/posts/encryption-fe/Mon, 08 Aug 2022 13:49:22 +0800Lruihaohttps://lruihao.cn/posts/encryption-fe/记录一下前端实现页面加密的思路。

加密基础知识

双向加密

可还原的加密算法，可以逆向解密。

  1. 对称加密（单密钥加密）

    采用单钥密码系统的加密方法，同一个密钥同时用作信息的加密和解密。

    密钥生成算法有 DES、3DES、AES。

  2. 非对称加密（公开密钥系统）

    两个密钥：公开密钥（publickey）和私有密钥（privatekey）。

    公钥/私钥加密/签名，用私钥/公钥解密/验证签名。

    密钥生成算法有 RSA（公钥、私钥）、DSA（公钥、私钥、数字签名）。

单向加密

不可还原的加密算法（暴力撞库除外），常见的算法有：MD5、SHA1、SHA256、SHA512。

页面内容加密

内容加密算法

  1. 通过比对密码和输入的 md5 值来判断密码是否输入正确
  2. 密码验证通过后，开始解密内容
    1. 拿到正确的输入值的 sha256 值的部分内容
    2. 然后按照加密规则解秘内容

这里利用 Set 进行事件管理，简单模拟了 addEventListener 和 removeEventListener 的操作。并提供了两个事件：decrypted 和 reset，详见 fixit-decryptor.js。

]]>重新认识 JavaScripthttps://lruihao.cn/posts/js-rediscover/Sun, 01 May 2022 10:59:36 +0800Lruihaohttps://lruihao.cn/posts/js-rediscover/
前言

前端框架轮替变化越来越快，JavaScript 也在不断地升级迭代，越来越多的新特性让我们的代码写起来变得简洁有趣。

每隔一段时间就该重新认识一下 JS，这篇文章会介绍 6 种新特性，一起研究一下吧。

数组方法 some, every, find, filter, map

共同点：这几个方法都不会改变原始数组。

some

some() 方法测试数组中是不是至少有 1 个元素通过了被提供的函数测试，它返回一个布尔值。

数组中有至少一个元素通过回调函数的测试就会返回 true，所有元素都没有通过回调函数的测试返回值才会为 false。

1

arr.some(callback(element[, index[, array]])[, thisArg])
1
2

[2, 5, 8, 1, 4].some((x) => x > 10); // false
[12, 5, 8, 1, 4].some((x) => x > 10); // true
技巧
some() 不会对空数组进行检测，空数组返回 false

every

助记：every() 和 some() 功能相反

every() 方法测试一个数组内的所有元素是否都能通过某个指定函数的测试，它返回一个布尔值。

如果回调函数的每一次返回都为 truthy 值，返回 true ，否则返回 false。

1

arr.every(callback(element[, index[, array]])[, thisArg])
1
2

[12, 5, 8, 130, 44].every((x) => x >= 10); // false
[12, 54, 18, 130, 44].every((x) => x >= 10); // true
技巧
every() 不会对空数组进行检测，空数组返回 true

Find

助记：功能和 some() 类似，some() 返回布尔值，find() 返回找到的元素

find() 方法返回数组中满足提供的测试函数的第一个元素的值，否则返回 undefined。

1

arr.find(callback[, thisArg])
1
2
3
4
5
6

const array1 = [5, 12, 8, 130, 44];

const found = array1.find((element) => element > 10);

console.log(found);
// expected output: 12
引用

另请参见 findIndex() 方法，它返回数组中找到的元素的索引，而不是其值。

如果你需要找到一个元素的位置或者一个元素是否存在于数组中，使用 Array.prototype.indexOf() 或 Array.prototype.includes()。

filter

助记：如字面意思，它是一个筛子，会筛选出满足条件的元素

filter() 方法创建一个新数组，其包含通过所提供函数实现的测试的所有元素。

返回值是一个新的、由通过测试的元素组成的数组，如果没有任何数组元素通过测试，则返回空数组。

1

var newArray = arr.filter(callback(element[, index[, array]])[, thisArg])
1
2
3
4
5
6

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter((word) => word.length > 6);

console.log(result);
// expected output: Array ["exuberant", "destruction", "present"]

map

助记：功能和 filter() 类似，filter() 返回筛选的元素，map() 返回筛选的结果值

map() 方法创建一个新数组，这个新数组由原数组中的每个元素都调用一次提供的函数后的返回值组成。

返回值是一个新的、由通过测试的元素组成的数组，如果没有任何数组元素通过测试，则返回空数组。

1
2
3

var new_array = arr.map(function callback(currentValue[, index[, array]]) {
 // Return element for new_array
}[, thisArg])
1
2
3
4
5
6
7

const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map((x) => x * 2);

console.log(map1);
// expected output: Array [2, 8, 18, 32]

使用 Object.hasOwn 替代 in 操作符

有时，我们想知道对象上是否存在某个属性，一般会使用 in 操作符或 obj.hasOwnProperty，但它们都有各自的缺陷。

in

如果指定的属性位于对象或其原型链中，in 运算符将返回 true。

1
2
3
4
5
6
7
8

const Person = function (age) {
  this.age = age;
};
Person.prototype.name = 'fatfish';

const p1 = new Person(24);
console.log('age' in p1); // true
console.log('name' in p1); // true  注意这里

obj.hasOwnProperty

hasOwnProperty 方法会返回一个布尔值，表示对象自身属性中是否具有对应的值（原型链上的属性不会读取）。

1
2
3
4
5
6
7
8

const Person = function (age) {
  this.age = age;
};
Person.prototype.name = 'fatfish';

const p1 = new Person(24);
console.log(p1.hasOwnProperty('age')); // true
console.log(p1.hasOwnProperty('name')); // fasle  注意这里

obj.hasOwnProperty 已经可以过滤掉原型链上的属性，但在某些情况下，它还是不安全。

1
2

Object.create(null).hasOwnProperty('name');
// Uncaught TypeError: Object.create(...).hasOwnProperty is not a function

Object.hasOwn

别急，我们可以使用 Object.hasOwn 来避免这两个问题，这比 obj.hasOwnProperty 方法更加方便、安全。

1
2
3
4
5

let object = { age: 24 };
Object.hasOwn(object, 'age'); // true

let object3 = Object.create(null);
Object.hasOwn(object3, 'age'); // false

使用 “#” 声明私有属性

以前，我们一般用 _ 表示私有属性，但它并不靠谱，还是会被外部修改。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

class Person {
  constructor(name) {
    this._money = 1;
    this.name = name;
  }
  get money() {
    return this._money;
  }
  set money(money) {
    this._money = money;
  }
  showMoney() {
    console.log(this._money);
  }
}
const p1 = new Person('fatfish');
console.log(p1.money); // 1
console.log(p1._money); // 1
p1._money = 2; // 依旧可以从外部修改_money 属性，所以这种做法并不安全
console.log(p1.money); // 2
console.log(p1._money); // 2

使用 # 实现真正私有属性

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

class Person {
  #money = 1;
  constructor(name) {
    this.name = name;
  }
  get money() {
    return this.#money;
  }
  set money(money) {
    this.#money = money;
  }
  showMoney() {
    console.log(this.#money);
  }
}
const p1 = new Person('fatfish');
console.log(p1.money); // 1
// p1.#money = 2 // 没法从外部直接修改
p1.money = 2;
console.log(p1.money); // 2
console.log(p1.#money); // Uncaught SyntaxError: Private field '#money' must be declared in an enclosing class

有用的数字分隔符

可以使用 _ 分隔数字，当然也可以用于计算

1
2
3
4
5
6
7

// ✅ 更加易于阅读
const newSixBillion = 6000_000_000;
// ❌ 难以阅读
const originSixBillion = 6000000000;

console.log(newSixBillion === originSixBillion);
// expected output: true

1
2

const sum = 1000 + 6000_000_000;
// expected output: 6000001000
技巧
另外，我们写时间时，24*60*60*1000 的可读性也是远大于 86400000 的。

“?.”, “??”, “??=” 的使用

可选链 ?.

以前我们为了简化 if else，通常会写出这样的代码

1
2
3
4
5

const obj = null;
console.log(obj && obj.name);

const $title = document.querySelector('.title');
const title = $title ? title.innerText : undefined;

使用 ?. 简化 && 和三元运算符

1
2
3
4
5

const obj = null;
console.log(obj?.name);

const $title = document.querySelector('.title');
const title = $title?.innerText;

空值合并运算符 ??

之前给变量赋默认值时，我们一般会用 || 来写，比如

1
2
3
4
5
6
7

let foo = 1;
let bar = foo || 2;
console.log(bar); // 1

let foo = 0;
let bar = foo || 2;
console.log(bar); // 2 注意这里

所以，|| 有时候并不是很安全，所以我们不得不加判断

1
2
3

let foo = 0;
let bar = foo !== undefined ? foo : 2;
console.log(bar); // 0

现在使用 ?? 可以使代码更加优雅

1
2
3
4
5
6
7

let foo = 1;
let bar = foo ?? 2;
console.log(bar); // 1

let foo = 0;
let bar = foo ?? 2;
console.log(bar); // 0

空值赋值运算符 ??=

1
2
3
4
5
6
7

let foo = 0;
foo ??= 2;
console.log(foo); // 0

let foo = 1;
foo ??= 2;
console.log(foo); // 1

很好理解，这里的 foo ??= 2 等价于 foo = foo ?? 2

使用 BigInt 支持大数计算

JS 中超过 Number.MAX_SAFE_INTEGER 的数字计算将是不安全的。

Example:

1
2
3

Math.pow(2, 53) === Math.pow(2, 53) + 1; // true
// Math.pow(2, 53) => 9007199254740992
// Math.pow(2, 53) + 1 => 9007199254740992

使用 BigInt 完全可以避免这个问题

1
2
3

BigInt(Math.pow(2, 53)) === BigInt(Math.pow(2, 53)) + BigInt(1); // false
// BigInt(Math.pow(2, 53)) => 9007199254740992n
// BigInt(Math.pow(2, 53)) + BigInt(1) => 9007199254740993n

要创建一个 BigInt，可以在一个整数的末尾添加字符n，或者调用函数 BigInt()。

1
2
3
4
5

let foo = BigInt(1); // 1n
let bar = BigInt(2); // 2n
console.log(foo > bar); // false

console.log(1n > 2n); // false

学无止境，与未来的自己共勉

]]>Lightboxhttps://lruihao.cn/posts/lightbox/Mon, 21 Jun 2021 16:18:04 +0000Lruihaohttps://lruihao.cn/posts/lightbox/簡介

Lightbox （燈箱），用来放大显示图片覆盖于当前页面之上。其是用 CSS 来定义图片容器，用一幅半透明的 png 图片实现渐变阴暗的效果。

一般的網頁，圖片是使用 img 標籤寫在 HTML 頁面中，圖片點擊并不會放大，想放大看圖片要麼方法整個網頁，要麼複製圖片鏈接新開窗口，操作繁瑣，而使用 Lightbox 的網站可以点击缩略图浮层显示大图，放大後可点击键盘 ←、→ 键切换图片，也可以鼠标点击左右箭头切换。按下键盘 Esc 键或者点击关闭按钮可輕鬆關閉圖層，圖片流覽的體驗度是遠遠大於未使用的 Lightbox 的網站。

實現思路

大概思路就在每个图片的点击事件中添加图层与图片副本。

  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193

/**
 * @author github.com@flymysql
 */
let container = document.documentElement || document.body;
let img, div, src, btnleft, btnright;
var imgid = 0;
let x, y, w, h, tx, ty, tw, th, ww, wh;
let closeMove = function () {
  if (div == undefined) {
    return false;
  }
  div.style.opacity = 0;
  img.style.height = h + 'px';
  img.style.width = w + 'px';
  img.style.left = x + 'px';
  img.style.top = y - container.scrollTop + 'px';
  // 延迟移除 dom
  setTimeout(function () {
    div.remove();
    img.remove();
    btnright.remove();
    btnleft.remove();
  }, 100);
};

let closeFade = function () {
  if (div == undefined) {
    return false;
  }
  div.style.opacity = 0;
  img.style.opacity = 0;
  // 延迟移除 dom
  setTimeout(function () {
    div.remove();
    img.remove();
    btnright.remove();
    btnleft.remove();
  }, 100);
};

let style = function () {
  btnleft.style.cssText = `
    position:fixed;
    border-radius: 50%;;
    left:${x - 20}px;
    top:${y - container.scrollTop + h / 2}px;
    width:50px;
    height:50px;
    border: 0px;
    background-color: rgba(200,200,200,0.8);
    font-size: 20px;
    z-index: 999999999;
    transition:all .3s cubic-bezier(0.165, 0.84, 0.44, 1);
`;
  btnright.style.cssText = `
    position:fixed;
    border-radius: 50%;
    left:${x + w + 20}px;
    top:${y - container.scrollTop + h / 2}px;
    width:50px;
    border: 0px;
    height:50px;
    font-size: 20px;
    background-color: rgba(200,200,200,0.8);
    z-index: 999999999;
    transition:all .3s cubic-bezier(0.165, 0.84, 0.44, 1);
`;
  btnleft.innerText = '<';
  btnright.innerText = '>';

  img.style.cssText = `
    position:fixed;
    border-radius: 12px;
    left:${x}px;
    top:${y - container.scrollTop}px;
    width:${w}px;
    height:${h}px;
    z-index: 999999999;
    transition:all .3s cubic-bezier(0.165, 0.84, 0.44, 1);
    opacity:0;
`;
};

// 监听滚动关闭层
document.addEventListener('scroll', function () {
  closeFade();
});
document.querySelectorAll('img').forEach((v) => {
  if (v.parentNode.localName != 'a') {
    v.id = imgid;
    imgid++;
    v.addEventListener('click', function (e) {
      // 注册事件
      // 记录小图的位置个大小
      x = e.target.offsetLeft;
      y = e.target.offsetTop;
      w = e.target.offsetWidth;
      h = e.target.offsetHeight;
      src = e.target.src;
      id = e.target.id;
      // 创建遮罩层
      div = document.createElement('div');
      div.style.cssText = `
              position:fixed;
              left:0;
              top:0;
              bottom:0;
              right:0;
              background-color: rgba(25,25,25,0.8);
              z-index:99999999;
              transition:all .3s cubic-bezier(0.165, 0.84, 0.44, 1);
          `;
      document.body.appendChild(div);
      setTimeout(function () {
        div.style.opacity = 1;
      }, 0);
      // （此处可以加 loading)

      // 创建副本
      img = new Image();
      btnright = document.createElement('button');
      btnleft = document.createElement('button');
      img.src = src;
      style();

      btnleft.onclick = function () {
        if (id === 0) {
          alert('已经是第一张了！');
          return;
        }
        var left = document.getElementById(id - 1);
        img.src = left.src;
        x = left.offsetLeft;
        y = left.offsetTop;
        w = left.offsetWidth;
        h = left.offsetHeight;
        style();
        id--;
      };
      btnright.onclick = function () {
        id++;
        if (id >= imgid) {
          alert('已经是最后一张了！');
          return;
        }
        var right = document.getElementById(id);
        img.src = right.src;
        x = right.offsetLeft;
        y = right.offsetTop;
        w = right.offsetWidth;
        h = right.offsetHeight;
        style();
      };
      img.onload = function () {
        document.body.appendChild(img);
        document.body.appendChild(btnright);
        document.body.appendChild(btnleft);

        // 浏览器宽高
        wh = window.innerHeight;
        ww = window.innerWidth;

        // 目标宽高和坐标
        if (w / h < ww / wh) {
          th = wh - 80;
          tw = ((w / h) * th) >> 0;
          tx = (ww - tw) / 2;
          ty = 40;
        } else {
          tw = ww * 0.8;
          th = ((h / w) * tw) >> 0;
          tx = ww * 0.1;
          ty = (wh - th) / 2;
        }

        // 延迟写入否则不会有动画
        setTimeout(function () {
          img.style.opacity = 1;
          img.style.height = th + 'px';
          img.style.width = tw + 'px';
          img.style.left = tx + 'px';
          img.style.top = ty + 'px';
          btnleft.style.left = tx - 90 + 'px';
          btnleft.style.top = ty + th / 2 + 'px';
          btnright.style.left = tx + tw + 40 + 'px';
          btnright.style.top = ty + th / 2 + 'px';
          // 点击隐藏
          div.onclick = img.onclick = closeMove;
        }, 10);
      };
    }); //end event
  }
}); //end forEach

fancybox

fancybox 是一個完善的 lightbox 插件
jQuery lightbox script for displaying images, videos and more. Touch enabled, responsive and fully customizable.

Quick start

  1. Add latest jQuery and fancyBox files
1
2
3
4

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<link href="/path/to/jquery.fancybox.min.css" rel="stylesheet" />
<script src="/path/to/jquery.fancybox.min.js"></script>
  1. Create links
1
2
3
4
5
6
7

<a data-fancybox="gallery" href="big_1.jpg">
  <img src="small_1.jpg" />
</a>

<a data-fancybox="gallery" href="big_2.jpg">
  <img src="small_2.jpg" />
</a>
  1. Enjoy!
]]>Cell Watermarkhttps://lruihao.cn/projects/cell-watermark/Sun, 23 May 2021 17:15:41 +0000Lruihaohttps://lruihao.cn/projects/cell-watermark/Usage

Browser

  1. Clone source

    1

    git clone git@github.com:Lruihao/watermark.git

  2. Load Watermark

    1
2
3
4
5

    <script type="text/javascript" src="./src/watermark.js"></script>
<script type="text/javascript" src="./src/watermark.min.js"></script>
<!-- Or CDN -->
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/cell-watermark@1.0.3/src/watermark.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/cell-watermark@1.0.3/src/watermark.min.js"></script>

  3. Initialization

    1
2
3
4
5

    document.addEventListener('DOMContentLoaded', function () {
  new Watermark({
    content: "cell-watermark"
  })
});

NPM

  1. Install

    1

    npm i cell-watermark

  2. Import

    1
2
3

    import Watermark from 'cell-watermark'
/* Or */
var Watermark = require("cell-watermark")

Class: Watermark

Watermark(options)

new Watermark(options)

Parameters:
Name Type Description
options Object The options of watermark（Properties）
Properties:
Name Type Attributes Default Description
content String <optional> watermark’s text
appendTo String <optional> ‘body’ parent of watermark’s container
width Number <optional> 150 watermark’s width. unit: px
height Number <optional> 20 watermark’s height. unit: px
rowSpacing Number <optional> 60 row spacing of watermarks. unit: px
colSpacing Number <optional> 30 col spacing of watermarks. unit: px
rotate Number <optional> 15 watermark’s tangent angle. unit: deg
opacity Number <optional> 0.1 watermark’s transparency
fontSize Number <optional> 0.85 watermark’s fontSize. unit: rem
fontFamily String <optional> ‘inherit’ watermark’s fontFamily

Author: Lruihao

Methods

upload(content)

Upload watermark’s text content

Parameters:
Name Type Description
content String watermark’s text

render(options)

Rerender watermark

Parameters:
Name Type Description
options Object The options of watermark（Properties）

destroy()

Force destroy watermark

]]>基于 leancloud-storage 实现的无后端记账本https://lruihao.cn/projects/bill-note/Tue, 02 Mar 2021 21:46:40 +0000Lruihaohttps://lruihao.cn/projects/bill-note/起因
起因

事情是這樣，年前和朋友一起合租了一個房子，然後捏，生活嘛，除了開心，當然是乾飯最大啦！

自然就會有購物，買菜等日常消費，那就要記賬，一開始是各自記在手機的便簽上，最後再算一下；
三個人，一共七种組合消費，排除各自消費的三種情況，也有四種 (AB, AC, BC, ABC)。好麻煩啊！！！

經過

作為一個程序猿，怎麼能接受這麼麻煩的記賬方式呢，拿起筆就開始畫，於是有了下面這張圖的公式。簡單說明一下就是：
設前面說的四種組合為：X1, X2, X3, X4，個人實際付款總額為：Y1, Y2, Y3，那麼帶入未知數，我們就可以算出每個人最後結算時的錢：S1, S2, S3，
綜上所述，很好理解，當 S >= 0 時，收紅包，當 S < 0 時，發紅包。

OK，一個簡單的初中方程式已經到位了，下一步，思考一下，用什麼來運作這個這個方程。來，先跑個題，春節期間，不是每天都要在騰訊文檔上填表記錄活動軌跡嗎？ 再回來，那不如就用 excel 實現吧，三個人都可以在手機上編輯。好的，說做就做。

一頓操作，10 minutes later…
只新建了一個 excel 文件，O.o! 不會 excel，果斷放棄，另尋他路。

結果

回到本職，那不如寫個網站吧，可是畢業後，學生機服務器也過期了，怎麼搞？那就寫個純前端的，數據呢存哪裡？
別急，重新擼一擼需求先：

  • 存取消費數據
  • 計算每月，實付（總分），應付以及最後計算結算金額
  • 按月查詢，月結賬單
  • 三人皆可編輯

主要就是存取數據這點，沒有服務器，數據庫怎麼實現？
valine 可以實現無後端，那我是不是也可以，leancloud 文檔走一波，然後“數據表”設計一下，其實是 leancloud-storage Object ，於是有了以下東西，源碼放在 Github

bill-note http://github.com/Lruihao/bill-note

數據設計

去 leancloud 创建一个应用，再新增一个 Bill Class, 补充一下字段：

name type description
pay Number 消费金额
pay_description String 消费描述
pay_type String 消费类型
pay_user String 付款人

主要邏輯

初始化

set for yourself.

1
2
3
4
5

AV.init({
  appId: '',
  appKey: '',
  serverURL: ''
});

存數據

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

//記賬提交按鈕事件監聽
document.querySelector('.submit').addEventListener('click', function (event) {
  event.preventDefault();
  let formPay = document.querySelector('#form-pay');
  let bill = new AV.Object('Bill');
  bill.set('pay', Number(formPay.pay.value));
  bill.set('pay_type', Number(formPay.pay_type.value));
  bill.set('pay_user', Number(formPay.pay_user.value));
  bill.set('pay_description', formPay.pay_description.value);
  bill.save().then(
    (object) => {
      formPay.reset();
    },
    function (error) {
      console.log(JSON.stringify(error));
      alert('保存失敗');
    }
  );
});

取數據

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

/**
 * 獲取歷史消費記錄數據
 * @param [start=0] 開始位置
 * @param [count=15] 每次查詢筆數
 */
function getBillData(start = 0, count = 15) {
  queryBill
    .descending('createdAt')
    .skip(start * count)
    .limit(count)
    .find()
    .then(function (response) {
      let billLength = response.length;
      if (billLength > 0) {
        billVm.noMore = billLength !== count ? true : false;
        for (bill of response) {
          billVm.bills.push({
            pay: bill.attributes.pay,
            payType: payType[bill.attributes.pay_type],
            payUser: payUser[bill.attributes.pay_user],
            payDescription: bill.attributes.pay_description,
            payDt: new Date(bill.createdAt).toLocaleString()
          });
        }
      } else {
        billVm.noMore = true;
      }
    });
}

/**
 * 獲取月賬單數據
 * @param month 年月份 fmt: yyyy-MM
 */
function getMonthBill(month) {
  let dateTime = `${month} 00:00:00`;
  let startMonth = new Date(dateTime);
  let nextMonth = new Date(new Date(dateTime).setMonth(startMonth.getMonth() + 1));
  let startDateQuery = new AV.Query('Bill');
  startDateQuery.greaterThanOrEqualTo('createdAt', startMonth);
  let endDateQuery = new AV.Query('Bill');
  endDateQuery.lessThan('createdAt', nextMonth);
  let MonthBillQuery = AV.Query.and(startDateQuery, endDateQuery);
  MonthBillQuery.find().then(function (response) {
    billVm.monthBill = {
      payType0: 0,
      payType1: 0,
      payType2: 0,
      payType3: 0,
      payUser0: 0,
      payUser1: 0,
      payUser2: 0
    };
    for (bill of response) {
      let { pay, pay_type, pay_user } = bill.attributes;
      billVm.monthBill[`payType${pay_type}`] += pay;
      billVm.monthBill[`payUser${pay_user}`] += pay;
    }
  });
}

技術棧

  • leancloud-storage
  • Vue.js
  • HTML,CSS,JS

總結

簡單總結一下，登录功能不做，安不安全自己说了算。删除修改功能也不做，直接上 leancloud 操作，css 美化的样式也不写，干净又卫生！
然后衍生一下，什么过年斗地主，天炸，麻将，字牌记账系统那不也是同理可得嘛！

over!

效果

]]>利用腾讯云为静态页面添加“动态”相册https://lruihao.cn/projects/cos-album/Sun, 24 Nov 2019 10:52:34 +0000Lruihaohttps://lruihao.cn/projects/cos-album/
信息
cos 桶相册，终于！！终于来了！！，idea 来自 [兰州小红鸡 - 给 hexo 静态博客添加动态相册功能]，
功能虽好，但是还是先友情提示！
开放 API 是一个很危险的操作，意味着你的 cos 桶里面的所有资源包括目录结构都暴露的整个世界中，所以建议不要放一些比较私密的照片，保护自己的隐私，提防不良用心之人。下面就开始吧！

创建腾讯云 cos 存储桶

就创建一个 COS 就好了！有几点注意事项：

  1. 权限设置为共有读私有写
  2. policy 权限设置整个桶的读操作
  3. 跨域访问 CORS 设置，自己随意

上传照片

首先我这个 cos 相册，相册分类就是文件夹分类，所以 cos 桶里面先新建不同的文件夹，文件夹名称就是相册名称， 每个相册里面需要放置一张名称为**“封面.jpg”**的图片作为该相册的封面。

上传工具

  • COSBrowser GUI 工具，桌面/移动版 【官方、推荐】
  • COSCMD 命令行工具 【官方】
  • PicGo 图床上传工具 【第三方、推荐】

食用方式

cos album 相册源码下载地址，别忘点赞哈 http://github.com/Lruihao/cos-album
  1. 首先，下载源码，引入 cos-album.css 和 cos-album.js
  2. 然后，在你的 js 中 new 一个 Cosalbum 对象 ( xmlLink 后不需要添加/)

Step1

1
2

<link rel="stylesheet" type="text/css" href="cos-album.min.css?v=1.1.2">
<script type="text/javascript" src="cos-album.min.js?v=1.1.2"></script>

Step2

1
2
3
4
5
6
7
8

<script type="text/javascript">
  new Cosalbum({
    'xmlLink': 'https://img-xxxxxxxxxx.cos.ap-chengdu.myqcloud.com',
    'prependTo': '.cos-album',
    'viewNum': 8,
    'imgUrl': '//img.lruihao.cn'
  });
</script>

Params

param type default description
xmlLink String 需要解析的騰訊云 COS 桶 XML 鏈接
prependTo String ‘body’ 可選解析相冊到某個節點
viewNum Number 4 每個相冊顯示的照片數目
copyUrl String href CDN 链接，雙擊複製 URL Since: 1.1.6
imgType String [‘jpg’, ‘jpeg’, ‘png’, ‘gif’, ‘svg’] 图片類型 Since: 1.1.6
videoType String [‘mp4’, ‘mp3’, ‘avi’, ‘mov’, ‘qt’] 視頻類型 Since: 1.1.6

viewport 视个人情况添加。
hexo 中使用时 css 和 js 都需要做适当调整，配合加密功能使用等等，这里不再展开。
注：代码设定不加载根目录文件，所以可以利用静态服务把源码部署在根目录，配合 PicGo、COSBrowser 上传来搭建个人图床。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>cos-album</title>
    <!-- <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
    <link rel="stylesheet" type="text/css" href="cos-album.css" />
    <script type="text/javascript" src="cos-album.js" defer></script>
  </head>
  <body>
    <script type="text/javascript">
      new Cosalbum({
        xmlLink: 'https://img-xxxxxxxxxx.cos.ap-chengdu.myqcloud.com',
        prependTo: '.cos-album',
        viewNum: 8,
        copyUrl: '//img.lruihao.cn'
      });
    </script>
    <!-- 你的其他内容，如评论等 -->
  </body>
</html>

cos-album demo

changelog

  • 2020-9-28 22:46
    1. 升級：相冊封裝成類，可以更方便 new 出來
    2. 優化：相冊圖片樣式優化
  • 2019-11-24 10:52:34 修改整理了一下代码，分割功能为函数，并写了注释，更加方便 伸手党!
]]>设置网站运行时间https://lruihao.cn/posts/site-time/Thu, 19 Sep 2019 22:03:29 +0000Lruihaohttps://lruihao.cn/posts/site-time/

使用javascript计算博客等网站的运行时间。

话不多说，直接贴码！

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37

function createTime() {
  var now = new Date();
  var run = new Date('05/28/2018 20:01:01');
  //總的秒數
  var runTime = (now - run) / 1000,
    days = Math.floor(runTime / 60 / 60 / 24),
    hours = Math.floor(runTime / 60 / 60 - 24 * days),
    minutes = Math.floor(runTime / 60 - 24 * 60 * days - 60 * hours),
    seconds = Math.floor((now - run) / 1000 - 24 * 60 * 60 * days - 60 * 60 * hours - 60 * minutes);
  //前置零
  if (String(hours).length === 1) {
    hours = '0' + hours;
  }
  if (String(minutes).length === 1) {
    minutes = '0' + minutes;
  }
  if (String(seconds).length === 1) {
    seconds = '0' + seconds;
  }
  /*document.querySelector(".run-times").innerHTML = days + "&thinsp; 天&thinsp;" + hours
          + "&thinsp; 时&thinsp;" + minutes + "&thinsp; 分&thinsp;" + seconds + "&thinsp; 秒";
  */
  document.querySelector('.run-times').innerHTML = 'RunTime: ' + days + ',' + hours + ':' + minutes + ':' + seconds + '';
}

//setInterval("createTime()", 500);
if (!document.hidden) {
  var siteTime = setInterval('createTime()', 500);
} else {
  clearInterval(siteTime);
}

/**
 * HTML 写法
<span class="run-times" title="网站运行时间">载入时分秒 ...</span>
<p class="run-times" title="主頁运行时间">RunTime Loading...</p>
*/
]]>script 的三种加载方式 (async, defer)https://lruihao.cn/posts/async-defer/Sun, 08 Sep 2019 11:47:50 +0000Lruihaohttps://lruihao.cn/posts/async-defer/
注意
JS 的加载分为两个部分：下载和执行。
浏览器在执行 HTML 的时候如果遇到<script>时会停止页面的渲染，去下载和执行 js 的文件直接遇见</scirpt>会继续渲染页面。故浏览器在执行 js 文件的时候浏览器表现为一片空白，为了解决这个问题 ECMAScript 定义了 defer 和 async 两个属性用于控制 JS 的下载和执行。

不带任何属性

同步模式，又称阻塞模式，我们平时使用的最多的一种方式。当浏览器解析到<script>标签时，浏览器会停止解析其后的内容，而优先下载脚本文件，并执行其中的代码，是个同步阻塞的过程。
一般建议把<script>标签放在<body>结尾处，这样尽可能减少页面阻塞。
而如果想要异步执行 script，则可以给其加上 async 或 defer 属性。

1

<script>

defer

defer 属性在 HTML 解析期间异步下载文件，并且只在 HTML 解析完成后才执行它。对于 defer，我们可以理解是将外链的 js 放在了页面底部。js 的加载不会阻塞页面的渲染和资源的加载。不过 defer 会按照原本的 js 的顺序执行，所以如果前后有依赖关系的 js 可以放心使用。

1

<script defer>

async

async 属性会在 HTML 解析期间异步下载文件，并在完成下载后立即暂停 HTML 解析器去执行 script 中的代码。在执行过程中浏览器处于阻塞状态，响应不了任何需求。如果 js 前后有依赖性，用 async，就很有可能出错。

1

<script async>

区别

相同点

  1. 加载文件时不阻塞页面渲染
  2. 对于 inline 的 script 无效（只适用有src的外部 js）
  3. 使用这两个属性的脚本中不能调用 document.write 方法
  4. 有脚本的 onload 的事件回调

区别点

  1. html4.0 中定义了 defer；html5.0 中定义了 async
  2. 浏览器支持不同
  3. 每一个 async 属性的脚本都在它下载结束之后立刻执行，同时会在 window 的 load 事件之前执行。所以就有可能出现脚本执行顺序被打乱的情况；每一个 defer 属性的脚本都是在页面解析完毕之后，按照原本的顺序执行，同时会在 document 的 DOMContentLoaded 之前执行。

那么这三种方式各在什么情况下使用呢？

通常来说，尽可能使用async，然后是defer，最后不使用属性。 并遵循以下规则：

  • 如果脚本是模块化的，并且不依赖于任何脚本，则使用async。
  • 如果脚本依赖于或依赖于另一个脚本，则使用defer。
  • 如果脚本很小并且有async脚本依赖该脚本，则不加属性。

兼容性

  1. Internet Explorer 10、Firefox、Opera、Chrome 和 Safari 支持 async 属性。
  2. 所有主流浏览器都支持 defer 属性。

参考

]]>Web 开发规则，代码规范https://lruihao.cn/posts/dev-rules/Thu, 15 Aug 2019 18:30:31 +0000Lruihaohttps://lruihao.cn/posts/dev-rules/精神
  • 绝不写死代码，硬编码
  • 不留不要用的、垃圾代码

Git

  • Master 的 BUG 必须最少且趋近于零，为最稳定的版本
  • 每次 Commit 信息应该准确填写。不可模棱两可，eg: 修复 BUG、增加功能
  • 禁止 Commit IDE 的 project data，e.g: .vscode
  • 禁止上传垃圾代码

更多规则详见文档 Commit 规范

分支（Branch）

  • 命名规则：应以此分支主要目的命名（修复什么 BUG，新增特定功能）
  • 合并后的分支应该删除

commit

  • 遵循一个功能一个 commit 的原则

Restful

  • 资源名词站在 API 的角度思考

    • 复数名词：可以复数笔数据，回传结果为 Array

      举例：GET/users 取得多笔使用者资料

      • 刪除，放在复数名词內，让 Router 保持一致性
      • 增加，放在复数名詞內，让 Router 保持一致性

    • 单数名词：仅取得单笔数据，必须指定 PK，两两一组，回传结果为 Object 举例：GET/user/{accont} 取得单笔使用者资料，必须指定 PK

  • URL 中一律不带 id 参数

1
2

正确范例： calendar_manager/calendar/29
错误范例： calendar_manager/calendar/29?id=29

更多规则详见文档 RESTful

命名

  • 命名应根据内容做有意义的命名，让后续维护人员可以顾名思义！
  • 即使不会发生错误，代码英文大小写也需明确区分。

语意

类型 命名规则 说明
属性 (Attribute, Property) 名词 user_name、userName
方法 (Method, Function) 动词 + 名词 getUserName、get_user_name 常見的动词有：get、set、update、delete、remove

字母与分隔

语言 变量 (Variable, Parameter, Argument) 常量 (Constant) 面向对象 - 类名 (Class Name) 面向对象 - 成员 (mebmer)
HTML 全部小写，不同单词以「-」分隔
e.g: user-id
CSS、SCSS 全部小写，不同单词以「-」分隔，CSS 变量以「–」开头，SCSS 变量以「$」开头
e.g: .user-id、–header-height、$header-height
JavaScript 驼峰式命名法
首字小写，不同单字「首字以大写」分隔
e.g: userId		 全部大写，不同单字以「_」分隔 MAX_COUNT 驼峰式命名法
首字大写，不同单字「首字以大写」分隔
一个文件放一个 Class, 文件名即为 Class Name
e.g: User		 驼峰式命名法
公有 (public) : 首字小写，不同单词「首字以大写」分隔
e.g: name, getName
私有 (private): _公有命名规则
e.g: _name,_getName
Vue
Java
PHP 全部小写，不同单词以「_」分隔
e.g: user_id
Python
SQL 由使用者定义的：表名、字段名
全部小写，不同单词以「_」分隔		 SQL 语法、函数全部大写
e.g: SELECT、INSERT INTO

通用

  • 代码编写
  • 每个函数应该使用块注释，注释应包含函数功能说明、参数说明。规则见：JSDoc、JavaDoc
  • 不必要的代码不要写，也应禁止放到注释里面！
  • if-else 的 {} 严禁省略
  • 代码规范、代码排版等可通过 eslint 等工具做统一处理

正确写法

1
2
3
4
5
6

public function test () {
  // do something
  if (a === b) {
    // do something
  }
}

错误写法

1
2
3
4
5
6
7
8

public function test ()
{
  // do something
  if (a === b)
  {
    // do something
  }
}
  • 代码排版
    • 任何代码应该以 2 个 space 为一个缩进做好排版、不可使用 tab
  • 函数 (Function, Methd)
    • 函数声明时需在函数上方加上函数注释，注释应包含函数说明、参数内容（参数类型、参数英文名称、参数说明）、返回值内容（返回值类型、返回值说明）
  • 类 (Class)
    • 一个类（Class）的声明只能存在一个文件
    • 类（Class）的声明文件，文件名必须为类名
  • 其他
    • 连接本地任何其他资源（图片、文件、网站）皆使用相对路径，禁止使用绝对路径，非本地资源除外

HTML

代码编写

  • 禁止在 HTML 使用 <style>、<script>，一律使用外部档案引用方式引用 CSS、JavaScript 文件
  • HTML 标签需成双成对，有头有尾
  • 块级标签：<tag></tag>
  • 单标签：<tag />
  • 禁止使用已被 HTML 舍弃的旧标签、属性，如：
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

<!-- html tag -->
<center>
<font>
<basefont>
<s>
<strike>
<u>
<listing>
<plaintext>
<xmp>
<!-- html attribute -->
align
bgcolor
color

CSS

CSS 的定义应该独立一个 CSS 文件，禁止使用 <style> 或 style 属性直接在 HTML 中定义样式。

JavaScript

禁止使用 HTML 字串，一律使用 Dom 产生 HTML, e.g: document.createDocumentFragment()

注释

JavaScript 注释应该遵循 JSDoc 的标准撰写

全局变量 (Global)

1

/* global ZT */

常量 (Constant)

1
2
3
4

/**
 * 常量說明
 * @type {常量类型}
 */

Example

1
2
3
4
5

/**
 * 请求地址
 * @type {String}
 */
const REQUEST_URL = 'http://localhost:8080';

函數、方法 (Function, Method)

1
2
3
4
5
6
7

/**
 * 函数用途说明
 * @param {参数类型} 参数名称参数说明
 * @param {参数类型} [选择性参数名称] 参数说明
 * @param {参数类型} [选择性参数名称=参数预设值] 参数说明
 * @returns {返回值类型} 返回值说明
 */

Example

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

/**
 * 取得使用者
 * @param {Int} userId 使用者 ID
 * @param {Object} [options] 其他选项
 * @param {String} [options.query='a'] 查询关键词 默认为 'a'
 * @returns {Object} 使用者资料
 */
function getUser(userId, options) {
  // do something
  return user;
}

Vue

  • 待补充

Java

Java 注释应该遵循 JavaDoc 的标准撰写

  • 待补充

PHP

前端参数取得

参数取得需通过 filter_input 函数取得，不得使用 _GET 、_POST

输出到前台

参数命名必须为：全部小写，不同单字以「_」分隔

注解

PHP 注解应该遵循 PHPDoc 的标准撰写

成员变量 (Member)

成员变量只的是 Class 内的成员变数，我们都会要求替成员变量增加注解说明。通常 Function 的变量除非太特别否则都不需要特别注解说明。

1
2
3
4

/**
 * 成员变量說明
 * @type {类型}
 */

Example

1
2
3
4
5

/**
 * 使用者 ID
 * @type {String}
 */
$userId = 'Hello';

函数、方法 (Function, Method)

1
2
3
4
5
6
7

/**
 * 函数用途说明
 * @param 参数型态 参数名称 参数说明
 * @option 参数选项类型 参数选项名称 参数选项说明
 * @uses 全局变量 全域变数说明
 * @returns 返回值类型 返回值说明
 */

Example

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

/**
 * 取得使用者
 * @param int userId 使用者 ID
 * @param object options 其他选项
 * @option string options['query'] 查询关键字
 * @uses $_POST['role_id'] 从前端以 POST 取得角色 ID
 * @returns object 使用者资料
 */
function getUser ($userId, $options) {
  // do something
  return $user;
};

Python

  • 待补充

Database

  • 禁止使用 Table Join。
  • 禁止使用 Oracle Trigger。
  • 禁止将查询数据库的 SQL 放在循环中查询

SQL 撰写

  • 属于 SQL 语法使用大写（SELECT，WHERE，INSERT etc..）
  • 属于使用者自己定义的使用小写（表名 table name，字段名 column name etc..）
  • 表名、字段名前后需加上 `

Example

1

INSERT INTO `user` VALUES('a', 'b');

统一用词

系统中常用词，例如弹出框按钮、搜索框等，仅为举例，不限与此。

用词 统一
最后、最终 最后
关闭、Cancel、取消 取消
存储、保存、修改、OK、确定 确定
搜寻、查询、查找、搜索 搜索
]]>vps 配置 ssl 及 https 重定向https://lruihao.cn/posts/http2https/Thu, 28 Mar 2019 19:40:54 +0000Lruihaohttps://lruihao.cn/posts/http2https/

记录自己在配置 vps 及博客 SSL 证书时遇到的问题。

强制重定向 https

有一种情况相信很多人都遇到过，就是虽然我们配置了 ssl 证书，但是 https 和 http 地址都是各自都可以单独访问。我们应该也见过类似于 github 的代码托管网站有强制 https 的开关。如果是这种情况我们还可以通过 js 进行 301 定向。

1
2
3
4
5
6
7
8

<script>
	var targetProtocol = "https:";
	var host = "lruihao.cn";
	if (window.location.host == host && window.location.protocol != targetProtocol){
 		window.location.href = targetProtocol +
  		window.location.href.substring(window.location.protocol.length);
    }
</script>

腾讯云 CDN 配置

这个博客后来是转到了腾讯云的 cos 桶存储。当时在桶内静态网站设置的时候，设置强制 https 发现会出错。而且还接入了 CDN，所以今天在 CDN 设置那里也看到了 https 的设置，打开强制 https 就 OK 了。这天在三丰云撸了一个免费的主机，搭了一个 WordPress（想试试 wp 的感觉），然后 vps 的 SSL 问题现在也很简单了，第一步，到腾讯云申请免费证书；第二步，配置 CDN，按步骤来，其中接入方式选择自有源站；第三步，强制 https（可选）。

]]>web 汇总https://lruihao.cn/posts/webbiji/Mon, 18 Mar 2019 20:40:55 +0000Lruihaohttps://lruihao.cn/posts/webbiji/

下面一些 web 开发的一些总结，还有一些常用到的代码，脚本等！

front-end

html

oblique 和 intalic 的区别

这两个都是font-style属性的值，这两个值都能实现倾斜的效果，但是有区别的。

  • intalic: 这个是字体的倾斜，相当于斜体，字体必须有倾斜属性。
  • oblique: 这个准确地说是让文字倾斜。相当于斜字，字体不一定要有倾斜属性。

title 显示换行

使用&#10;或使用&#13;

1
2

<a href="#" title="第一行&#10; 第二行&#10; 第三行">使用`&#10;`</a>
<a href="#" title="第一排&#13; 第二排&#13; 第三排">使用`&#13;`</a>

图片类型选择

图片类型选择

css

flexbox

Flex 布局将成为未来布局的首选方案，比如说常见的 bootstrap4 的版本就用 flex 替代了 float 来进行排版。
我在网上看到几个很好的教程，图文并茂，一目了然。

实在懒癌发作，笔记本上手抄了笔记我就不写学习总结了，还有网友 Demo 也写了。

javascript

keydown 和 keypress

  • keydown：按下键盘键
  • keypress：紧接着keydown事件触发（只有按下字符键时触发）
  • 如果用户按下了一个字符键不放，就会重复触发keydown和keypress事件，直到用户松开该键为止。
  • 如果用户按下了一个非字符键不放，就会重复触发keydown事件，直到用户松开该键为止。

详解键盘事件 (keydown，keypress，keyup)

textContent、innerText 和 innerHTML 的区别

  1. 设置标签中的文本内容，应该使用textContent或innerText（更老）属性，区别在于浏览器支援程度
  2. innerHTML能够获得元素内的所有标签内容，也可以设置标签使之生效。（注意防止 XSS 注入）

如果某个属性在浏览器中不支持，那么这个属性的类型是undefined，判断这个属性的类型是不是undefined，就知道浏览器是否支持。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

<script>
  // 设置任意的标签中间的任意文本内容
  function setInnerText(element, text) {
      //判断浏览器是否支持这个属性
      if (typeof element.textContent == "undefined") {//不支持
          element.innerText = text;
      } else {//支持这个属性
          element.textContent = text;
      }
  };
</script>

图床方案

  • 自行搭建 比如使用开源图床 ImgURL 搭建的img.lruihao.cn（需要服务器）
    使用上传工具加第三方免费空间，比如PicGo + 腾讯云 COS（无需服务器）
  • 使用各大图床
    诸如 sm.ms，腾讯云 COS，阿里云 OSS，七牛云，又拍云，Github，微博图床，ImgURL 图床等等

font-awesome

现在使用 5 的版本，可以使用webfont+css或svg+js

1

<link rel="stylesheet" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css">

其他的图标 js

1
2
3
4

<script src="//at.alicdn.com/t/font_578712_g26jo2kbzd5qm2t9.js"></script>
<svg class="card-avatar" aria-hidden="true">
  <use xlink:href="#icon-{{n+1}}"></use>                <!--n 为一个数字-->
</svg>

响应式（自适应）

1
2

<link rel="stylesheet" href="https://apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://apps.bdimg.com/libs/bootstrap/3.3.4/js/bootstrap.min.js">
1

<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=0">
  • .col-xs- 超小屏幕 手机 <768px
  • .col-sm- 小屏幕 平板 >=768px
  • .col-md- 中等屏幕 >=992px
  • .col-lg- 大屏幕 >1200px

css3 写法 @media （宽度具体调整）

1
2
3
4
5
6
7
8

/* 手机等小屏幕手持设备 */
@media screen and (min-width: 320px) and (max-width: 480px) {
  /*手机端 css 样式表*/
}
/* 平板之类的宽度 1024 以下设备 */
@media only screen and (min-width: 321px) and (max-width: 1024px) {
  /*电脑端 css 样式表*/
}

link 引入不同 css

1
2
3
4

<!--手机端-->
<link rel="stylesheet" type="text/css" href="style_phone.css" media="screen and (max-width: 960px)"/>
<!--电脑端-->
<link rel="stylesheet" type="text/css" href="style_PC.css" media="screen and (min-width: 960px)"/>

jquery

1
2
3
4
5
6
7
8

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>

<script src="https://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js"></script>

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

<script src="http://cdn.bootcss.com/jquery/1.11.0/jquery.min.js"></script>
//还有其他的源 ...

QQ 推广链接

QQ 推广 QQ 群

1

<a target="_blank" href="https://wpa.qq.com/msgrd?v=3&uin=1074627678&site=qq&menu=yes"><img border="0" src="http://wpa.qq.com/pa?p=2:1074627678:51" alt="点击这里给我发消息" title="点击这里给我发消息"/></a>

Google fonts

1
2
3
4

https://fonts.google.com/
一般选用国内源镜像替代（待补充 ...）
+ https://fonts.loli.net
+ //fonts.lug.ustc.edu.cn

fancybox

github 介绍 fancybox 源

1
2

<link href="https://cdn.bootcss.com/fancybox/3.5.7/jquery.fancybox.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/fancybox/3.5.7/jquery.fancybox.min.js"></script>

back-end

更多学习内容见 学习课件
练习作业 源码+Demo

]]>模仿知乎卡片式链接https://lruihao.cn/posts/linkcard/Fri, 15 Mar 2019 15:21:39 +0000Lruihaohttps://lruihao.cn/posts/linkcard/

模仿知乎的卡片式链接，idea 来自 [兰州小红鸡]

源码

2021/10/2 1:29 更新

这是一种后加载，创建linkcard.js放到source/js/src/，然后在next\layout\_macro\post.swig中引用

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

function cardLink() {
  let $cardLinks = document.querySelectorAll('.card-link');
  if ($cardLinks.length === 0) {
    return;
  }
  //插入样式
  let $linkStyle = document.createElement('style');
  $linkStyle.innerHTML =
    '.card-link,.card-link:hover{text-decoration:none;border:none!important;color:inherit!important}.card-link{position:relative;display:block;margin:1em auto;width:390px;box-sizing:border-box;border-radius:12px;max-width:100%;overflow:hidden;color:inherit;text-decoration:none}.ztext{word-break:break-word;line-height:1.6}.card-link-backdrop{position:absolute;top:0;left:0;right:0;bottom:0;background-image:url(/images/card-link-bg.jpg);background-repeat:no-repeat;-webkit-filter:blur(20px);filter:blur(20px);background-size:cover;background-position:center}.card-link,.card-link:hover{text-decoration:none;border:none!important;color:inherit!important}.card-link-content{position:relative;display:flex;align-items:center;justify-content:space-between;padding:12px;border-radius:inherit;background-color:rgba(246,246,246,0.88)}.card-link-text{overflow:hidden}.card-link-title{display:-webkit-box;-webkit-line-clamp:2;overflow:hidden;text-overflow:ellipsis;max-height:calc(16px * 1.25 * 2);font-size:16px;font-weight:500;line-height:1.25;color:#1a1a1a}.card-link-meta{display:flex;margin-top:4px;font-size:14px;line-height:20px;color:#999;white-space:nowrap}.card-link-url{display: inline-flex;align-items: center;}.card-link-imageCell{margin-left:8px;border-radius:6px}.card-link-image{display:block;width:60px;height:60px;border-radius:inherit}';
  document.querySelector('body').appendChild($linkStyle);
  //渲染 DOM
  for (let $cardLink of $cardLinks) {
    $cardLink.innerHTML = `<span class='card-link-backdrop'></span><span class='card-link-content'><span class='card-link-text'><span class='card-link-title'>${$cardLink.innerText}</span><span class='card-link-meta'><span class='card-link-url'><svg class='Zi Zi--InsertLink' fill='currentColor' viewBox='0 0 24 24' width='17' height='17'><path d='M6.77 17.23c-.905-.904-.94-2.333-.08-3.193l3.059-3.06-1.192-1.19-3.059 3.058c-1.489 1.489-1.427 3.954.138 5.519s4.03 1.627 5.519.138l3.059-3.059-1.192-1.192-3.059 3.06c-.86.86-2.289.824-3.193-.08zm3.016-8.673l1.192 1.192 3.059-3.06c.86-.86 2.289-.824 3.193.08.905.905.94 2.334.08 3.194l-3.059 3.06 1.192 1.19 3.059-3.058c1.489-1.489 1.427-3.954-.138-5.519s-4.03-1.627-5.519-.138L9.786 8.557zm-1.023 6.68c.33.33.863.343 1.177.029l5.34-5.34c.314-.314.3-.846-.03-1.176-.33-.33-.862-.344-1.176-.03l-5.34 5.34c-.314.314-.3.846.03 1.177z' fill-rule='evenodd'></path></svg></span>${$cardLink.href}</span></span><span class='card-link-imageCell'><img class='card-link-image' alt='card-link icon' src='https://lruihao.cn/images/linkicon.png'></span></span>`;
  }
}
window.onload = () => {
  cardLink();
};

使用

1
2

<!--知乎卡片链接-->
<script type="text/javascript" src="/js/src/card-link.js"></script>

html 链接写法，a 标签加上class="card-link"

1

<a href="https://github.com/Lruihao/lruihao.github.io" target="_blank" class="card-link">Lruihao 博客</a>
Lruihao 博客 https://github.com/Lruihao/lruihao.github.io ]]>QQ 强制生成卡片式链接https://lruihao.cn/posts/qqxml/Fri, 08 Mar 2019 16:52:13 +0000Lruihaohttps://lruihao.cn/posts/qqxml/

以前在 QQ 里面聊天的时候发现，有些链接是卡片式的链接，像知乎里那些一样，就好奇为啥我的域名没有生成卡片。
查了一下百度知道了大概就是 qq 没有抓取到你的网站的 xml。并在其他教程中得到了一个强制提交抓取的 url https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshareget_urlinfo?url= 于是就有了脚本刷新的想法。简陋的写了一下。

批量式刷新

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

//设置刷新前缀 url=首页地址（最好使用 https）
var base_src = 'https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshareget_urlinfo?url=https://lruihao.cn';
//用户地址
//var custom_src = "https://lruihao.cn";
//初始化工作地址
var new_src = '';
function createArrayAndOpenWindow() {
  //alert("number function");
  //定义数组存储后缀
  var numberArray = new Array(4);
  //存储后缀
  numberArray[0] = '/about/';
  numberArray[1] = '/categories/';
  numberArray[2] = '/tags/';
  numberArray[3] = '/archives/';
  //numberArray[4] = "/guestbook/";

  //遍历
  for (var i = 0; i < numberArray.length; i++) {
    new_src = base_src + numberArray[i];
    //打开该地址
    open_new();
    //清空后缀
    new_src = '';
  }
}

//负责打开窗口，并关闭
function open_new() {
  var new_window = window.open(new_src, '', 'width=400,height=200');
  setTimeout(function () {
    //开启后 200ms（单页）关闭，速度自行把握数组越大时间越多
    new_window.close();
  }, 2000);
}

window.onload = function () {
  createArrayAndOpenWindow();
  //设置定时函数，疯狂刷新直到 xml 出现内容
  var timer = setInterval('createArrayAndOpenWindow()', 2000);
};

单链接刷新

1
2
3
4

<div style="text-align: center;">
  <input type="text" id="input" value="" />
  <input type="button" value="疯狂刷新" onclick="yanzheng()" />
</div>
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

//设置刷新前缀 url=首页地址（最好使用 https）https://lruihao.cn
var base_src = 'https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshareget_urlinfo?url=';
//用户地址
var custom_src = '';
//初始化工作地址
var new_src = '';

//负责打开窗口，并关闭
function open_new() {
  var new_window = window.open(new_src, '', 'width=400,height=200');
  setTimeout(function () {
    //开启后 200ms 关闭
    new_window.close();
  }, 200);
}

// 获取验证用户输入
function yanzheng() {
  var Input = document.getElementById('input');
  var oValue = Input.value;
  custom_src = oValue;
  new_src = base_src + custom_src;
  if (oValue == 0) {
    alert('请输入地址');
  } else {
    var timer = setInterval('open_new()', 200);
  }
}

demo

线上 demo 仅做参考请自行下载

效果

]]>JS 验证码https://lruihao.cn/posts/js-vcode/Mon, 04 Mar 2019 20:53:09 +0000Lruihaohttps://lruihao.cn/posts/js-vcode/ #code{ font-family:Arial; font-style:italic; font-weight:bold; border:2px solid #ddd; letter-spacing:9px; color:blue; font-size: 15px; }

请点击验证码处：↑

验证码 JS 来源互联网

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

<script type="text/javascript">
	//设置一个全局的变量，便于保存验证码
    var code;
    function createCode(){
        //首先默认 code 为空字符串
        code = '';
        //设置长度，这里看需求，我这里设置了 4
        var codeLength = 4;
        var codeV = document.getElementById('code');
        //设置随机字符
        var random = new Array(0,1,2,3,4,5,6,7,8,9,'A','B','C','D','E','F','G','H','I','J','K','L','M','N','O','P','Q','R', 'S','T','U','V','W','X','Y','Z');
        //循环 codeLength 我设置的 4 就是循环 4 次
        for(var i = 0; i < codeLength; i++){
            //设置随机数范围，这设置为 0 ~ 36
             var index = Math.floor(Math.random()*36);
             //字符串拼接 将每次随机的字符 进行拼接
             code += random[index];
        }
        //将拼接好的字符串赋值给展示的 Value
        codeV.value = code;
    }

    //下面就是判断是否== 的代码，无需解释，也可以结合 ajax 在后台做判断
    function validate(){
        var Input = document.getElementById('input');
        var oValue = Input.value.toUpperCase();
        if(oValue ==0){
            alert('请输入验证码');
        }else if(oValue != code){
            Input.value = '';
            alert('验证码不正确，请重新输入');
            createCode();
        }else{
            Input.value = '';
            alert('验证码正确！');//window.open('http://lruihao.cn','_self');
        }
    }

    //设置此处的原因是每次进入界面展示一个随机的验证码，不设置则为空
    window.onload = function (){

        createCode();
    }
</script>
]]>js 判断用户设备类型及平台https://lruihao.cn/posts/js-device/Sat, 03 Nov 2018 23:35:44 +0000Lruihaohttps://lruihao.cn/posts/js-device/前端开发经常遇到需要判断用户的浏览设备，是 pc 端还是移动端，移动端使用的是什么手机系统？android、ios、ipad、windows phone 等等，有时候还需要知道用户浏览页面是在微信中打开还是在移动端浏览器中打开，等等一系列判断做一些相应的处理。

首先判断 pc 端还是移动端

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

function IsPC() {
        var userAgentInfo = navigator.userAgent;
        var Agents = ["Android", "iPhone",
                    "SymbianOS", "Windows Phone",
                    "iPad", "iPod"];
        var flag = true;
        for (var v = 0; v < Agents.length; v++) {
            if (userAgentInfo.indexOf(Agents[v]) > 0) {
                flag = false;
                break;
            }
        }
        return flag;
    }

判断用户移动端使用的系统平台

1
2
3
4
5
6
7
8

var u = navigator.userAgent;
    if (u.indexOf('Android') > -1 || u.indexOf('Linux') > -1) {
        //安卓手机
    } else if (u.indexOf('iPhone') > -1) {
        //苹果手机
    } else if (u.indexOf('Windows Phone') > -1) {
        //winphone 手机
    }

判断用户是否在微信中打开

1
2
3
4
5
6
7
8

function isWeiXin(){
        var ua = navigator.userAgent.toLowerCase();
        if(ua.indexOf('micromessenger') != -1) {
            return true;
        } else {
            return false;
        }
    }

实际运用

根据 pc 或者移动端控制飘花数目，降低 cpu 消耗，减少卡顿。demo

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

  <script>
    function sakuraInit() {
        $(document).snowfall('clear');
        var userAgentInfo = navigator.userAgent;
        var Agents = ["Android", "iPhone",
                    "SymbianOS", "Windows Phone",
                    "iPad", "iPod"];
        var flag = true;
        for (var v = 0; v < Agents.length; v++) {
            if (userAgentInfo.indexOf(Agents[v]) > 0) {
                flag = false;
                break;
            }
        }
        if (flag) {
            $(document).snowfall({image:"images/1.png", flakeCount:5, minSpeed:1, minSize:8, maxSize:15,});
            $(document).snowfall({image:"images/2.png", flakeCount:5, minSpeed:1, minSize:8, maxSize:15,});
            $(document).snowfall({image:"images/3.png", flakeCount:5, minSpeed:1, minSize:8, maxSize:15,});
            $(document).snowfall({image:"images/4.png", flakeCount:5, minSpeed:1, minSize:8, maxSize:15,});
        } else {
            $(document).snowfall({image:"images/1.png", flakeCount:2, minSpeed:1, minSize:8, maxSize:15,});
            $(document).snowfall({image:"images/2.png", flakeCount:2, minSpeed:1, minSize:8, maxSize:15,});
            $(document).snowfall({image:"images/3.png", flakeCount:2, minSpeed:1, minSize:8, maxSize:15,});
            $(document).snowfall({image:"images/4.png", flakeCount:2, minSpeed:1, minSize:8, maxSize:15,});
        }
    }
    window.onload = sakuraInit();
  </script>
]]>使用 js 准确获取当前页面 url 网址信息及 301 重定向实战https://lruihao.cn/posts/href-301/Sun, 28 Oct 2018 14:22:00 +0000Lruihaohttps://lruihao.cn/posts/href-301/获取链接（转）

传送门
在 WEB 开发中，时常会用到 javascript 来获取当前页面的 url 网址信息，在这里是我的一些获取 url 信息的小总结。

下面我们举例一个 URL，然后获得它的各个组成部分：http://i.cnblogs.com/EditPosts.aspx?opt=1

window.location.href（设置或获取整个 URL 为字符串）

1
2

var test = window.location.href;
alert(test);

返回：http://i.cnblogs.com/EditPosts.aspx?opt=1

window.location.protocol（设置或获取 URL 的协议部分）

1
2

var test = window.location.protocol;
alert(test);

返回：http:

window.location.host（设置或获取 URL 的主机部分）

1
2

var test = window.location.host;
alert(test);

返回：i.cnblogs.com

window.location.port（设置或获取与 URL 关联的端口号码）

1
2

var test = window.location.port;
alert(test);

返回：空字符（如果采用默认的 80 端口 (update: 即使添加了：80)，那么返回值并不是默认的 80 而是空字符）

window.location.pathname（设置或获取与 URL 的路径部分（就是文件地址）)

1
2

var test = window.location.pathname;
alert(test);

返回：/EditPosts.aspx

window.location.search（设置或获取 href 属性中跟在问号后面的部分）

1
2

var test = window.location.search;
alert(test);

返回：?opt=1

PS：获得查询（参数）部分，除了给动态语言赋值以外，我们同样可以给静态页面，并使用 javascript 来获得相信应的参数值。

window.location.hash（设置或获取 href 属性中在井号“#”后面的分段）

1
2

var test = window.location.hash;
alert(test);

返回：空字符（因为 url 中没有）

js 获取 url 中的参数值

正则法
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

function getQueryString(name) {
  var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
  var r = window.location.search.substr(1).match(reg);
  if (r != null) {
    return unescape(r[2]);
  }
  return null;
}
// 这样调用：
alert(GetQueryString("参数名 1"));

alert(GetQueryString("参数名 2"));

alert(GetQueryString("参数名 3"));
split 拆分法
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

function GetRequest() {
  var url = location.search; //获取 url 中"?"符后的字串
  var theRequest = new Object();
  if (url.indexOf("?") != -1) {
    var str = url.substr(1);
    strs = str.split("&");
    for(var i = 0; i < strs.length; i ++) {
      theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
    }
  }
  return theRequest;
}
var Request = new Object();
Request = GetRequest();<br>// var id=Request["id"];
// var 参数 1, 参数 2, 参数 3, 参数 N;
// 参数 1 = Request['参数 1'];
// 参数 2 = Request['参数 2'];
// 参数 3 = Request['参数 3'];
// 参数 N = Request['参数 N'];
指定取

比如说一个 url：http://i.cnblogs.com/?j=js, 我们想得到参数 j 的值，可以通过以下函数调用。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

function GetQueryString(name) {
  var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
  var r = window.location.search.substr(1).match(reg); //获取 url 中"?"符后的字符串并正则匹配
  var context = "";
  if (r != null)
     context = r[2];
  reg = null;
  r = null;
  return context == null || context == "" || context == "undefined" ? "" : context;
}
alert(GetQueryString("j"));

301 重定向（实践）

由于之前把 blog 和网站主页分开在两个仓库所以要想在 blog 中 menu 里跳转到站外链接就要做一些处理。以前一直百度不到。 其实想法早就有了，只要在 blog 首页或者网站首页检测到https://lruihao.cn/home这个链接，或者检测到 home 字段就自动跳转。想法很简单。可是对 js 真的一点都不了解，以前百度也找不到实际的效果案例。所以还是自己写吧！附上蹩脚代码。

1
2
3
4
5

var path = window.location.href;
    //alert(path);
    if (path=='https://lruihao.cn/home/') {
      window.location.replace("https://www.lruihao.cn");
    }

或者

1
2
3
4
5

var path = window.location.pathname;
    //alert(path);
    if (path=='/home/') {
      window.location.replace("https://www.lruihao.cn");
    }

http 强制重定向 https

1
2
3
4
5
6
7
8

<script>
  var targetProtocol = "https:";
  var host = "lruihao.cn"; //域名判断，因为 localhost 仅支持 http
  if (window.location.host == host && window.location.protocol != targetProtocol){
    window.location.href = targetProtocol +
      window.location.href.substring(window.location.protocol.length);
    }
</script>
]]>网页夜间效果https://lruihao.cn/posts/night/Thu, 27 Sep 2018 13:13:31 +0000Lruihaohttps://lruihao.cn/posts/night/

这几天看到别人的博客有开关灯效果，就想给自己的博客也加一个，其实以前就在想了。经过谷歌百度后这样实现了。css+js

如何给 Web 页面增加夜间模式功能？其实所谓的夜间模式就是在页面上增加一个透明的遮罩层，但是遮罩层会挡住页面元素， 解决方法是 添加 DIV，给 DIV 的 outline 属性一个很大的 outline-width 值，用 outline 的边框作为遮罩，这样既能正常点击页面元素，又能达到夜间模式的效果。

css 部分

1
2
3
4
5
6
7
8
9

<style>
.cover{
    position:fixed;
    top: 0px;
    left: 0px;
    outline:5000px solid rgba(0, 0, 0, 0);//初始亮度
    z-index: 99999;
}
</style>

js 部分

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

<script>
var brightness;
//显示遮罩
function cover(brightness) {
    if (typeof(div) == 'undefined') {
        div = document.createElement('div');
        div.setAttribute('style', 'position:fixed;top:0;left:0;outline:5000px solid;z-index:99999;');
        document.body.appendChild(div);
    } else {
        div.style.display = '';
    }
    div.style.outlineColor = 'rgba(0,0,0,' + brightness + ')';
}
//事件监听
window.addEventListener('keydown', function(e) {
    if (e.altKey && e.keyCode == 90) {
        cover(brightness = 0.3);
    }
    if (e.altKey && e.keyCode == 88) {
        cover(brightness = 0);
    }
    if (e.altKey && e.keyCode == 38) {
        if (brightness - 0.05 > 0.05) cover(brightness -= 0.05);
    }
    if (e.altKey && e.keyCode == 40) {
        if (brightness + 0.05 < 0.95) cover(brightness += 0.05);
    }
}, false);
</script>

html 部分

1

<div class="cover"></div>

使用

  1. Alt+Z: 打开夜间模式
  2. Alt+X: 关闭
  3. Alt+↑: 增加亮度
  4. Alt+↓: 降低亮度
]]>