Fork me on GitHub

拖拽

在这里插入图片描述

可拖拽元素　设置　draggable: true.可绑定监听事件 dragstart、drag、dragend

放置区域：可绑定监听事件 dragenter、dragover、dragleave、drop

1
2
3
4
5
// 可拖拽原素
<img id="test" src="xxx" draggable="true" />

// 可放置区域
<div id="layer-photos-box"></div>
more >>

展开全文 >>

图片懒加载

图片懒加载： 在页面长列表展示时（就说页面很长出现滚动条那种🤡），在页面不可见区域的图片资源默认不加载。当图片元素滚动到可视区域时再加载图片资源的这么个效果

实现方式：

  1. 位置计算 + 滚动事件 (Scroll) + DataSet API

    通过对元素的位置属性 clientTop，offsetTop，clientHeight以及scrollTop等 再加上监听滚动条的事件来判断图片资源是否出现在可视区域

  2. getBoundingClientRect API + Scroll with Throttle + DataSet API

    more >>

展开全文 >>

在用户离开页面时可靠地发送 HTTP 请求

在某些情况下，我们可能有这样的需求，在跳转或离开当前页面时发送一个HTTP请求。如何确保请求能如我们意料的那样发送出去

eg: 在点击a标签跳转时，发送一个请求.

下面两种方式咋一看是同步的，但实际上请求却没有发送成功。浏览器测试时切换3G网络模式即可看到 network 信息

more >>

展开全文 >>

ESLint + Prettier规范项目代码

为了项目代码风格统一，但又不会使人难受。自动化检测格式化代码方案

  • Prettier

    一个流行的代码格式化工具的名称,它能够解析代码,使用你自己设定的规则来重新打印出格式规范的代码。

  • Eslint

ESLint是一个用来识别 ECMAScript 并且按照规则给出报告的代码检测工具，使用它可以避免低级错误和统一代码的风格。

more >>

展开全文 >>

SVN 密码管理

小海龟svn 没有账号密码管理，每次切换用户baidu告诉我说，清除用户信息🙄，

这也太烦了把。话说上次输入密码还是前一年的事，密码账户都忘了。于是乎想了个感觉还不错的💡

more >>

展开全文 >>

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 >>

展开全文 >>

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

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