「转载」绝了!前端开发8个非常经典的常用技巧

编程学思 2021-04-09 15:58:58 ⋅ 36 阅读

如何知道iframe下载完成

定时器轮询监听readyState的状态,如果是 complete 或者 interactive 说明文件加载完成。

let iframe = document.createElement('iframe');
iframe.src = path;
iframe.style.display = 'none';
document.body.appendChild(iframe);
const timer = setInterval(() => {
    const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
    if (iframeDoc.readyState == 'complete' || iframeDoc.readyState == 'interactive') {
        document.body.removeAttribute(iframe);
        clearInterval(timer);
        resolve('success');
    }
}, 1000);
复制代码

常用的全屏居中 JS 函数

//获取元素
function getElement(ele) {
  return document.getElementById(ele);
}
//自动居中函数
function autoCenter(el) {
  var bodyX = document.documentElement.offsetWidth || document.body.offsetWidth;
  var bodyY =
    document.documentElement.offsetHeight || document.body.offsetHeight;

  var elementX = el.offsetWidth;
  var elementY = el.offsetHeight;

  el.style.left = (bodyX - elementX) / 2 + "px";
  el.style.top = (bodyY - elementY) / 2 + "px";
}
复制代码

JS实现deepCopy

function getType(obj) {
    // 为啥不用typeof? typeof无法区分数组和对象
    if(Object.prototype.toString.call(obj) == '[object Object]') {
        return 'Object';
    }

    if(Object.prototype.toString.call(obj) == '[object Array]') {
        return 'Array';
    }
    return 'nomal';
};

function deepCopy(obj) {
    if (getType(obj) == 'nomal') {
        return obj;
    } else {
        var newObj = getType(obj) == 'Object' ? {} : [];
        for(var key in obj) {
            // 为啥要用hasOwnProperty?不需要从对象的原型链上进行复制
            if(obj.hasOwnProperty(key)) {
                newObj[key] = deepCopy(obj[key]);
            }
        }
    }
    return newObj;
}


var object = [
  {
    title: 'test',
    checked: false
  }
];

deepCopy(object);
复制代码

生成星级评分

const StartScore = rate => "★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate);
const start = StartScore(3);
// start => "★★★"
复制代码

JS数组扁平化之简单方法实现

toString

const arr = [1, 2, 3, [4, 5, [6, 7]]];

const flatten = arr.toString().split(',');

console.log(flatten);
复制代码

优点:简单,方便,对原数据没有影响 缺点:最好数组元素全是数字或字符,不会跳过空位

join

const arr = [1, 2, 3, [4, 5, [6, 7]]];

const flatten = arr.join(',').split(',');

console.log(flatten);
复制代码

优点和缺点同toString

flat

const arr = [1, 2, 3, [4, 5, [6, 7]]];

const flatten = arr.flat(Infinity);

console.log(flatten);
复制代码

优点:会跳过空位,返回新数组,不会修改原数组

扩展运算符(...)

const arr = [1, 2, 3, [4, 5]];
console.log([].concat(...arr));
复制代码

优点:简单,方便 缺点:只能扁平化一层

使用 :not() 来精简css代码

// 不使用:not()
.nav li {
  border-right: 1px solid #666;
}
.nav li:last-child {
  border-right: none;
}

// 使用:not()
.nav li:not(:last-child) {
  border-right: 1px solid #666;
}

// 或者使用兄弟选择符~
.nav li:first-child ~ li {
  border-left: 1px solid #666;
}
复制代码

文本溢出处理

移动设备相对来说页面较小,很多时候显示的一些信息都需要省略部分。最常见的是单行标题溢出省略,多行详情介绍溢出省略。现在都用框架开发了,这种建议需求建议形成一个基础组件,方便快捷

//单行
.single {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
//多行
.more {
  display: -webkit-box !important;
  overflow: hidden;
  text-overflow: ellipsis;
  work-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; //指定行数
}
复制代码

Git Flow工作流程

master主分支

伴随整个项目周期的分支

功能分支(feature branch)

从master切,顾名思义,开发每一个功能的分支,开发完的功能合并到release分支。

补丁分支(hotfix branch)

从master切,修复BUG分支,测试完直接合并到master。

预发分支(release branch)

从master切,需要测试的功能都合并到该分支上进行测试。

一旦开发完成,就会把release分支合并到master分支,并删除原分支。

JS实现列表操作

经常使用列表,比如待办事项列表、购物车等,如果数据不太多的话,列表就显得尤为有用

function list() {
    this.dataStore = []; //初始化数组
    this.clear = clear; //清除列表
    this.remove = remove; //移除列表中的元素
    this.find = find; //寻找列表中的元素
    this.length = length; //返回列表的长度
}

function find(element) {
    for (var i = 0, len = this.dataStore.length; i < len; i++) {
        if (this.dataStore[i] === element) {
            return i;
        }
    }
    return -1;
}

function remove(element) {
    for (var i = 0, len = this.dataStore.length; i < len; i++) {
        if (this.dataStore[i] === element) {
            this.dataStore.splice(i, 1);
        }
    }
    return this.dataStore;
}

function length() {
    return this.dataStore.length;
}

function clear() {
    this.dataStore = [];
}


作者:vipbic
链接:https://juejin.cn/post/6907269018588020743
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。


全部评论: 0

    我有话说:

    【收藏】18 Java8 日期处理实践,太有

    来源:https://juejin.im/post/5a795bad6fb9a0634f407ae5 Java 8 日期处理 Java 8 推出全新日期时间API,在教程中我们将通过一些简单

    接上篇:前端必看8HTML+CSS技巧(下)

    4款非常容易上手酷炫效果,值得收藏。

    2018年8技巧来构建更好Node.js应用程序

    2018年8技巧来构建更好Node.js应用程序

    2018JavaScript类库

    9非常有用Javascript库来加速你开发

    Docker 20.10.0 发布, K8s 宣布将弃 Docker 容器进行时之后发布 版本

    Docker 20.10.0  发布,这是自 K8s 宣布将弃 Docker 容器进行时之后发布 Docker 版本。 本次更新内容包括: 弃/移除 当 docker 从不

    滴滴开源基于 React 移动端开发组件库-Pile.js

    Pile.js 是滴滴开发基于 React 移动端开发组件库。 轻量,易,包含 52 交互功能,支持多语言与自定义皮肤。可以非常轻松创建用户交互界面,让前端开发更专注于业务逻辑实现。

    微服务架构下若干设计模式

    在我们选择微服务架构来设计、交付数字化应用后,因微服务架构本身所带来一些共性问题。

    开源资讯」Guava 28.2 发布,Google Java 核心工具库

    前言 Guava 28.2 发布,Guava 是 Google 一个开源项目,包含许多 Google 核心 Java 库,如:集合 [collections] 、缓存 [caching

    【实战解析】基于HBase大数据存储在京东应用场景

    作者就职于京东商城京麦平台组,从事京东商家开放平台相关开发工作。热爱技术,熟悉各种开源框架,有丰富大型分布式系统、高并发系统开发经验。热衷于对大数据研究,对Hadoop、HBase以及

    京东到家订单中心系统mysql到es转化之路

    原文:https://www.toutiao.com/i6796507988602389006 京东到家订单中心系统业务中,无论是外部商家订单生产,或是内部上下游系统依赖,订单查询调用量都非常

    推荐一款前端数据源管理工具 algeb

    ALGEB 简介 这是一个比较抽象库,一开始可能比较难理解。我写它初衷,是创建可响应数据请求管理。在传统数据请求中,我们只是把携带ajax代码一堆函数放在一起,这样就可以调用接口。但是这种

    WebMIS 1.0.0 beta.3 发布,全栈开发基础框架

    ,为企业提供一套完整技术解决方案,满足快速开发...

    SpringBlade v2.8.0 已经发布,SaaS 微服务开发平台

    SpringBlade微服务开发平台 采用前后端分离模式,前端开源框架:Sword (基于 React、Ant Design)、Saber (基于 Vue、Element

    SpringBoot2.0填坑(一):使用CROS解决跨域并解决swagger 访问不问题

    公司后台是采用SpringBoot2.0 搭建微服务架构,前端框架是vue 使用前后端分离开发方式,在开发联调时候需要进行跨域访问,那么使用CROS解决跨域问题,但是swagger 却

    Redis面试整理:Redis几种数据类型法和应用场景重新梳理一下

    1、字符串 1.1 介绍 string 字符串类型是Redis中最为和基础存储类型,是一个由字节组成序列,他在Redis中是二进制安全,也可以认为string字符串数据类型能够接收任何格式

    开源资讯】PHP 8 RC 2 发布,第9测试版本

    PHP 8 RC 2 已经发布,这也是 v8 第 9 测试版本。自从进入 Beta 阶段,PHP 8 已进入特性冻结期,不会有特性上变更。 PHP 8 具体发布周期已经更改如下

    微型Java开发框架Solon 1.1发布,QPS达10万+

    简介 Solon 是一个微型Java开发框架。项目从2018年启动以来,参考过大量前人作品;历时两年,2700多次commit;内核保持0.1m身材,超高Web跑分,良好使用体验

    大多数人都不知道 Maven 版本号

    前言 大多数程序员或多或少会有这样苦恼经历 开发一个公共组件 maven 版本号为: 1.0.0 然后很多项目都这个项目版本号 过一段时间发现有bug,或者需要在组件中增加些代码,版本号