杂记(一)

栏目: IOS · Android · 发布时间: 5年前

内容简介:记录一些自己写代码过程中遇到的问题,google来的一些技巧和方法。可以通过设置背景为none,在设置border达到效果。一个比较精简的写法。

介绍

记录一些自己写代码过程中遇到的问题,google来的一些技巧和方法。

Iconfont的symbol引入

  • Iconfont的symbol引入,最好链接前加 https:头 ,防止受到package.json里homepage的影响(如果设置了的话)。
  • 除非是双色图标,否则不要在线修改其颜色,并批量去色,然后直接通过代码修改到自己需要的颜色。在线修改会写死fill属性,css改颜色就不能单纯的通过color来修改了。

Input 只显示下划线

可以通过设置背景为none,在设置border达到效果。

input{
    background: none;
    border-bottom: 1px solid #dbdbdb;
    border-top: 0px;
    border-left: 0px;
    border-right: 0px;
    }

对象数组根据某属性去重

一个比较精简的写法。

const res = new Map();
 return arr.filter((a) => !res.has(a. attr) && res.set(a. attr, 1))

深拷贝

JSON.parse(JSON.stringify(object))

img标签隐藏占位边框

img标签设置的width和height,如果src为空则会出现占位框。

img[src=""],img:not([src]) {
        opacity: 0;
    }

React中router问题

React中router跳转时,旧组件的componentWillUnmount和新组件的constructor并不是按顺序执行的。举个栗子,即旧组件销毁window.onresize会把新组件constructor添加的window.onresize监听销毁掉。但如果是在新组件componentDidMount中通过window.addEventListener则不会受到影响。

非同源文件下载

同源可以通过a标签的download属性下载,非同源则如下:

/**
 * 获取 blob
 * @param  {String} url 目标文件地址
 * @return {Promise} 
 */
function getBlob(url) {
    return new Promise(resolve => {
        const xhr = new XMLHttpRequest();

        xhr.open('GET', url, true);
        xhr.responseType = 'blob';
        xhr.onload = () => {
            if (xhr.status === 200) {
                resolve(xhr.response);
            }
        };

        xhr.send();
    });
}

/**
 * 保存
 * @param  {Blob} blob     
 * @param  {String} filename 想要保存的文件名称
 */
function saveAs(blob, filename) {
    if (window.navigator.msSaveOrOpenBlob) {
        navigator.msSaveBlob(blob, filename);
    } else {
        const link = document.createElement('a');
        const body = document.querySelector('body');

        link.href = window.URL.createObjectURL(blob);
        link.download = filename;

        // fix Firefox
        link.style.display = 'none';
        body.appendChild(link);
        
        link.click();
        body.removeChild(link);

        window.URL.revokeObjectURL(link.href);
    }
}

/**
 * 下载  最后直接调用download即可
 * @param  {String} url 目标文件地址
 * @param  {String} filename 想要保存的文件名称
 */
export function download(url, filename) {
    getBlob(url).then(blob => {
        saveAs(blob, filename);
    });
}

防抖函数

防抖动是将多次执行变为最后一次执行。

/**
 * 防抖函数,返回函数连续调用时,空闲时间必须大于或等于 wait,func 才会执行
 *
 * @param  {function} func        回调函数
 * @param  {number}   wait        表示时间窗口的间隔
 * @param  {boolean}  immediate   设置为ture时,是否立即调用函数
 * @return {function}             返回客户调用函数
 */
export function debounce(func, wait = 200, immediate = false) {
    let timer, context, args

    // 延迟执行函数
    const later = () => setTimeout(() => {
        // 延迟函数执行完毕,清空缓存的定时器序号
        timer = null
        // 延迟执行的情况下,函数会在延迟函数中执行
        // 使用到之前缓存的参数和上下文
        if (!immediate) {
            func.apply(context, args)
            context = args = null
        }
    }, wait)

    // 这里返回的函数是每次实际调用的函数
    return function (...params) {
        // 如果没有创建延迟执行函数(later),就创建一个
        if (!timer) {
            timer = later()
            // 如果是立即执行,调用函数
            // 否则缓存参数和调用上下文
            if (immediate) {
                func.apply(this, params)
            } else {
                context = this
                args = params
            }
            // 如果已有延迟执行函数(later),调用的时候清除原来的并重新设定一个
            // 这样做延迟函数会重新计时
        } else {
            clearTimeout(timer)
            timer = later()
            context = this
            args = params
        }
    }
}

节流函数

节流是将多次执行变成每隔一段时间执行。

/**
 * underscore 节流函数,返回函数连续调用时,func 执行频率限定为 次 / wait
 *
 * @param  {function}   func      回调函数
 * @param  {number}     wait      表示时间窗口的间隔
 * @param  {object}     options   如果想忽略开始函数的的调用,传入{leading: false}。
 *                                如果想忽略结尾函数的调用,传入{trailing: false}
 *                                两者不能共存,否则函数不能执行
 * @return {function}             返回客户调用函数
 */
_.throttle = function(func, wait, options) {
    var context, args, result;
    var timeout = null;
    // 之前的时间戳
    var previous = 0;
    // 如果 options 没传则设为空对象
    if (!options) options = {};
    // 定时器回调函数
    var later = function() {
      // 如果设置了 leading,就将 previous 设为 0
      // 用于下面函数的第一个 if 判断
      previous = options.leading === false ? 0 : _.now();
      // 置空一是为了防止内存泄漏,二是为了下面的定时器判断
      timeout = null;
      result = func.apply(context, args);
      if (!timeout) context = args = null;
    };
    return function() {
      // 获得当前时间戳
      var now = _.now();
      // 首次进入前者肯定为 true
      // 如果需要第一次不执行函数
      // 就将上次时间戳设为当前的
      // 这样在接下来计算 remaining 的值时会大于0
      if (!previous && options.leading === false) previous = now;
      // 计算剩余时间
      var remaining = wait - (now - previous);
      context = this;
      args = arguments;
      // 如果当前调用已经大于上次调用时间 + wait
      // 或者用户手动调了时间
       // 如果设置了 trailing,只会进入这个条件
      // 如果没有设置 leading,那么第一次会进入这个条件
      // 还有一点,你可能会觉得开启了定时器那么应该不会进入这个 if 条件了
      // 其实还是会进入的,因为定时器的延时
      // 并不是准确的时间,很可能你设置了2秒
      // 但是他需要2.2秒才触发,这时候就会进入这个条件
      if (remaining <= 0 || remaining > wait) {
        // 如果存在定时器就清理掉否则会调用二次回调
        if (timeout) {
          clearTimeout(timeout);
          timeout = null;
        }
        previous = now;
        result = func.apply(context, args);
        if (!timeout) context = args = null;
      } else if (!timeout && options.trailing !== false) {
        // 判断是否设置了定时器和 trailing
        // 没有的话就开启一个定时器
        // 并且不能不能同时设置 leading 和 trailing
        timeout = setTimeout(later, remaining);
      }
      return result;
    };
  };

设置git commit 模板

创建 .git-commit-template.txt

写入(头部建议空一行,行尾序列为LF(vscode可以更改)):

# <类型>: (类型的值见下面描述) <主题> (最多50个字)

# 解释为什么要做这些改动
# |<----  请限制每行最多72个字   ---->|

# 提供相关文章和其它资源的链接和关键字
# 例如: Github issue #23

# --- 提交 结束 ---
# 类型值包含
#    feat (新特性)
#    fix (bug修复)
#    docs (文档改动)
#    style (格式化, 缺失分号等; 不包括生产代码变动)
#    refactor (重构代码)
#    test (添加缺失的测试, 重构测试, 不包括生产代码变动)
#    chore (更新grunt任务等; 不包括生产代码变动)
# --------------------
# 注意
#    主题和内容以一个空行分隔
#    主题限制为最大50个字
#    主题行大写
#    主题行结束不用标点
#    主题行使用祈使名
#    内容每行72个字
#    内容用于解释为什么和是什么,而不是怎么做
#    内容多行时以'-'分隔
# --------------------

然后把该文件丢到你喜欢的位置。

//这个命令只能设置当前分支的提交模板
git config commit.template [模板文件位置]

//这个命令能设置全局的提交模板
git config --global commit.template [模板文件位置]

完成!

更强烈的规范约束可以看这个 优雅的提交你的 Git Commit Message


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

敏捷软件开发

敏捷软件开发

Robert C.Martin,、Micah Martin / 邓辉、孙鸣 / 人民邮电出版社 / 2010-12 / 79.00元

要想成为一名优秀的软件开发人员,需要熟练应用编程语言和开发工具,更重要的是能够领悟优美代码背后的原则和前人总结的经验——这正是本书的主题。本书凝聚了世界级软件开发大师Robert C. Martin数十年软件开发和培训经验,Java版曾荣获计算机图书最高荣誉——Jolt大奖,是广受推崇的经典著作,自出版以来一直畅销不衰。 不要被书名误导了,本书不是那种以开发过程为主题的敏捷软件开发类图书。在......一起来看看 《敏捷软件开发》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

随机密码生成器
随机密码生成器

多种字符组合密码