Fork me on GitHub

autofit.js 大屏实现方案

三大常用方式

  1. vw/vh方案
    1. 概述：按照设计稿的尺寸，将px按比例计算转为vw和vh
    2. 优点：可以动态计算图表的宽高，字体等，灵活性较高，当屏幕比例跟 ui 稿不一致时，不会出现两边留白情况
    3. 缺点：每个图表都需要单独做字体、间距、位移的适配，比较麻烦
  2. scale方案
    1. 概述：也是目前效果最好的一个方案
    2. 优点：代码量少，适配简单 、一次处理后不需要在各个图表中再去单独适配.
    3. 缺点：留白，有事件热区偏移，下面介绍的autofit.js已经完全解决了此问题
  3. rem + vw vh方案
    1. 概述：这名字一听就麻烦，具体方法为获得 rem 的基准值 ，动态的计算html根元素的font-size ，图表中通过 vw vh 动态计算字体、间距、位移等
    2. 优点：布局的自适应代码量少，适配简单
    3. 缺点：留白，有时图表需要单独适配字体
more >>

展开全文 >>

HTML

html5

属性

  • contentEditable 属性

    指定该属性的元素可以被编辑

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

<p contenteditable="true" class="editable"></p>

# 监听可编辑元素变化，通过比较前后两者数据

$('.editable').on('focusin', function() {
    console.log('focus in')
});

$('.editable').on('focusout', function() {
    console.log('focus out')
});

  • designMode 属性

    该属性可以指定页面是否可编辑，只能通过js设置该属性

    document.body.designMode = 'off/on'
IE8出于安全考虑不支持
IE9允许
chrome3和Safari，允许内嵌的iframe可编辑
Firefox和Opera 允许

  • spellcheck 属性

允许 input,textarea,可编辑元素 进行拼写 检验

1
<p contenteditable="true"  spellcheck="true"  style="width:400px;height:150px;"></p>
  • tabindex 属性

通过设置 tabindex的数值，控制每次点击tab键时，页面焦点的切换顺序。通常用于表单

more >>

展开全文 >>

CSS

颜色

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

1、英文单词
	color:red;

2、十六进制
	color:#RRGGBB; 
    //RR 红  GG 绿  BB 蓝  
    //值得范围 00-ff
    //简写 #RGB
3、rgb 颜色
	color:rgb(0,0,0);
	//红绿蓝
	//值得范围 0-255、0%-100%
	//rgba(0,0,0)  a 代表透明度  （0-1、0%-100%）
4、HSL
	HSL分别表示：
    -色相 色轮上的程度 0-360   （0，360表示红，120绿，240蓝）
    -饱和度 0%-100%  (0%灰色，100%全彩)
    -亮度	0%-100% （0%黑色，100%白色）
    注意：IE9,Firefox,Chrome,Safari,和Opera10+.支持HSL颜色值。其他三种基本都支持
more >>

展开全文 >>

如何在页面下载json数据

  1. 利用 DataURL 进行下载
  2. 转化为 Object 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
function download(url, name) {
  const a = document.createElement("a");
  a.download = name;
  a.rel = "noopener";
  a.href = url;
  // 触发模拟点击
  a.dispatchEvent(new MouseEvent("click"));
  // 或者 a.click()
}

const json = {
  a: 3,
  b: 4,
  c: 5,
};
const str = JSON.stringify(json, null, 2);

// 方案一：Text -> DataURL
const dataUrl = `data:,${str}`;
download(dataUrl, "demo.json");

// 方案二：Text -> Blob -> ObjectURL
const url = URL.createObjectURL(new Blob(str.split("")));
download(url, "demo1.json");

方法一有 2 个缺点：
1、无法保留缩进
2、字符串里面的空格会被删除

展开全文 >>

koa 基础语法

一、创建koa项目

1
2
3
4
5
6
7
8
9
10
11
12
13
14
//1、新建node项目
新建文件夹 进入目录 执行
npm init
生成package.json文件
//2、项目引入koa
npm i koa -S
//3、新建app.js
const Koa = require('koa');
const app = new Koa();

app.listen(3000,()=>{
	console.log('port 3000 is running!')
});
//运行 node app.js

二、中间件

more >>

展开全文 >>

nginx 基础知识

nginx是一款自由的、开源的、高性能的HTTP服务器和反向代理服务器；同时也是一个IMAP、POP3、SMTP代理服务器；nginx可以作为一个HTTP服务器进行网站的发布处理，另外nginx可以作为反向代理进行负载均衡的实现。

more >>

展开全文 >>

pm2 进程管理

pm2安装

1
2
3
4
5
6
7
8
9
10
11
1、全局安装

 npm install pm2 -g

2、创建软连接

ln -s /node-v12/bin/pm2  /usr/local/bin/

3、查看进程

pm2 list

[注意]创建软连接的源文件路径可以在安装时找到 如上图 /node-v12/bin/pm2

常用命令

more >>

展开全文 >>

tag:

    缺失模块。
    1、请确保node版本大于6.2
    2、在博客根目录（注意不是yilia-plus根目录）执行以下命令：
    npm i hexo-generator-json-content --save

    3、在根目录_config.yml里添加配置： 

      jsonContent:
    meta: false
    pages: false
    posts:
      title: true
      date: true
      path: true
      text: false
      raw: false
      content: false
      slug: false
      updated: false
      comments: false
      link: false
      permalink: false
      excerpt: false
      categories: false
      tags: true

侠客行
作者：李白
赵客缦胡缨，吴钩霜雪明。
银鞍照白马，飒沓如流星。
十步杀一人，千里不留行。
事了拂衣去，深藏身与名。
闲过信陵饮，脱剑膝前横。
将炙啖朱亥，持觞劝侯嬴。
三杯吐然诺，五岳倒为轻。
眼花耳热后，意气素霓生。
救赵挥金槌，邯郸先震惊。
千秋二壮士，烜赫大梁城。
纵死侠骨香，不惭世上英。
谁能书阁下，白首太玄经。