Rynes

发表于 更新于 分类于

img

1
<img src="图片来源" alt="图片无法显示时显示图片说明性文字" style="设置样式属性" />

  • img 标签虽然不是块状元素，但是可以设置宽高，占位

  • img 设置 width 后 height 会自适应匹配，如果设置 height 后 width 会自适应匹配,如果同时设置 width，height，img 图片可能会变形

background-image

  • css 的一个样式，并不占位，可以结合 background-size,background-repeat,background-position 等属性来设置图片位置，大小等

  • 所在的元素必须指定 height，否则背景图片显示不出来，可以不指定 width，如果不指定 width，它的宽度则继承父元素的宽度

阅读全文 »

发表于 更新于 分类于
特性cookielocalStoragesessionStorageindexDB
数据生命周期⼀般由服务器生成， 可以设置过期时间除非被清理，否则⼀直存在页面关闭就清理除非被清理， 否则⼀直存在
数据存储大小4K5M5M无限
与服务端通信每次都会携带在 header 中，对于请求性能影响不参与不参与不参与

从上表可以看到， cookie 已经不建议用于存储 。如果没有大量数据存储需求的话， 可以使用 localStorage 和 sessionStorage 。对于不怎么改变的数据尽量使用 localStorage 存储， 否则可以用 sessionStorage 存储。

对于 cookie ，我们还需要注意安全性

属性作用
value如果用于保存用户登录态，应该将该值加密，不能使用明文的用户标识
http-only不能通过 JS 访问 Cookie ，减少 XSS 攻击
secure只能在协议为 HTTPS 的请求中携带
same-site规定浏览器不能在跨域请求中携带 Cookie ，减少 CSRF 攻击
简述 cookie 和 session 的区别
阅读全文 »

发表于 更新于 分类于

技术点

  • html2canvas：将网页绘制 base64 的图片
  • plus.nativeObj.Bitmap：下载 base64 的 png 图片，临时存放起来
  • uni.saveImageToPhotosAlbum：将临时存放的 png 图片，存放到手机相册
  • plus.io.resolveLocalFileSystemURL：删除临时存放的图片

运用

安装 html2canvas

1
npm install html2canvas
阅读全文 »

发表于 更新于 分类于

file、base64 相互转换

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
/**
 * file 转为 base64
 */
function fileToBase64(file) {
  return new Promise((resolve, reject) => {
    ///FileReader类就是专门用来读文件的
    const reader = new FileReader();
    //开始读文件
    //readAsDataURL: dataurl 它的本质就是图片的二进制数据， 进行base64加密后形成的一个字符串，
    reader.readAsDataURL(file);
    // 成功和失败返回对应的信息，reader.result一个base64，可以直接使用
    reader.onload = () => resolve(reader.result);
    // 失败返回失败的信息
    reader.onerror = (error) => reject(error);
  });
}

/**
 * Base64 转为 File
 */
function base64toFile(base64Data, fileName) {
  let data = base64Data.split(","),
    mime = data[0].match(/:(.*?);/)[1],
    byteString = atob(data[1]),
    byteLength = byteString.length,
    uInt8Array = new Uint8Array(byteLength);
  while (n--) {
    uInt8Array[n] = byteString.charCodeAt(n);
  }
  return new File([uInt8Array], fileName, { type: mime });
}

File、Blob 相互转换

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
/**
 * Blob 转为 File
 */
function blobToFile(blob, fileName) {
  blob.lastModifiedDate = new Date();
  blob.name = fileName;
  return blob;
}

/**
 * File 转为 Blob
 */
function fileToBlob(file) {
  // 创建 FileReader 对象
  let reader = new FileReader();

  return new Promise((resolve) => {
    // FileReader 添加 load 事件
    reader.addEventListener("load", (e) => {
      let blob;
      if (typeof e.target.result === "object") {
        blob = new Blob([e.target.result]);
      } else {
        blob = e.target.result;
      }
      console.log(Object.prototype.toString.call(blob));
      resolve(blob);
    });

    // FileReader 以 ArrayBuffer 格式 读取 File 对象中数据
    reader.readAsArrayBuffer(file);
  });
}

base64、Blob 相互转换

阅读全文 »

发表于 更新于 分类于

Date对象是 JavaScript 原生的时间库。它以 1970 年 1 月 1 日 00:00:00 作为时间的零点，可以表示的时间范围是前后各 1 亿天（单位为毫秒）。

普通函数的用法

Date对象可以作为普通函数直接调用，返回一个代表当前时间的字符串。

1
2
Date();
// "Tue Dec 01 2015 09:34:43 GMT+0800 (CST)"

注意，即使带有参数，Date作为普通函数使用时，返回的还是当前时间。

阅读全文 »

发表于 更新于 分类于

Math是 JavaScript 的原生对象，提供各种数学功能。该对象不是构造函数，不能生成实例，所有的属性和方法都必须在Math对象上调用。

静态属性

Math对象的静态属性，提供以下一些数学常数。

  • Math.E：常数e。
  • Math.LN2：2 的自然对数。
  • Math.LN10：10 的自然对数。
  • Math.LOG2E：以 2 为底的e的对数。
  • Math.LOG10E：以 10 为底的e的对数。
  • Math.PI：常数 Pi。
  • Math.SQRT1_2：0.5 的平方根。
  • Math.SQRT2：2 的平方根。
1
2
3
4
5
6
7
8
Math.E; // 2.718281828459045
Math.LN2; // 0.6931471805599453
Math.LN10; // 2.302585092994046
Math.LOG2E; // 1.4426950408889634
Math.LOG10E; // 0.4342944819032518
Math.PI; // 3.141592653589793
Math.SQRT1_2; // 0.7071067811865476
Math.SQRT2; // 1.4142135623730951
阅读全文 »

发表于 更新于 分类于

概述

正则表达式（regular expression）是一种表达文本模式（即字符串结构）的方法，有点像字符串的模板，常常用来按照“给定模式”匹配文本。比如，正则表达式给出一个 Email 地址的模式，然后用它来确定一个字符串是否为 Email 地址。JavaScript 的正则表达式体系是参照 Perl 5 建立的。

新建正则表达式有两种方法。一种是使用字面量，以斜杠表示开始和结束。

1
var regex = /xyz/;

另一种是使用RegExp构造函数。

阅读全文 »

发表于 更新于 分类于

定义

对象是 JavaScript 语言最主要的数据类型，三种原始类型的值——数值、字符串、布尔值——在一定条件下，也会自动转为对象，也就是原始类型的“包装对象”。

所谓“包装对象”，就是分别与数值、字符串、布尔值相对应的Number、String、Boolean三个原生对象。这三个原生对象可以把原始类型的值变成（包装成）对象。

1
2
3
var v1 = new Number(123);
var v2 = new String("abc");
var v3 = new Boolean(true);

上面代码中，基于原始类型的值，生成了三个对应的包装对象。

阅读全文 »

发表于 更新于 分类于

在编写 CSS 时，有时可能会使用很长的选择器列表来定位具有相同样式规则的多个元素。

例如，如果您想对标题中的 <b> 标签进行颜色调整，我们应该都写过这样的代码：

1
2
3
4
5
6
7
8
h1 > b,
h2 > b,
h3 > b,
h4 > b,
h5 > b,
h6 > b {
  color: hotpink;
}

现在，我们可以使用 :is() 缩减代码并提高其可读性：

1
2
3
:is(h1, h2, h3, h4, h5, h6) > b {
  color: hotpink;
}
阅读全文 »

发表于 更新于 分类于

原生对象(15 种)

原生对象分为两类：原始类型(primitive type)和对象类型(object type)。原始类型又分为两类，一类是空值，一类是包装对象；对象类型也可以分为两类：一类是构造器对象，一类是单体内置对象

空值(2 种)

逻辑上，undefined 表示原始类型的空值，null 表示对象类型的空值

  • Undefined
  • Null
阅读全文 »