前端开发这次几个非常经典的常用技巧,学会了之后事半功倍!

本文主要是介绍前端开发这次几个非常经典的常用技巧,学会了之后事半功倍!,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

对于一个刚入前端的新手来说,在前端开发过程中会遇到各种各样的麻烦和坑,这样很多时候回让开发者的信息受到打击,作为一个稍微好一点的前端菜鸟来说,今天就给刚入前端的新手们分享一些比较实用的开发技巧,让之少走一些弯路。

1.如何知道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);

2.常用的全屏居中 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”;}

3.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);

4.生成星级评分

const StartScore = rate => “★★★★★☆☆☆☆☆”.slice(5 - rate, 10 - rate);const start = StartScore(3);// start => “★★★”

5.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));

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

5.使用 :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;}

  1. 文本溢出处理

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

//单行.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; //指定行数}

  1. Git Flow工作流程

master主分支

伴随整个项目周期的分支

功能分支(feature branch)

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

补丁分支(hotfix branch)

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

预发分支(release branch)

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

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

  1. 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 = [];}

这就是这期的所有。小编希望你在这里学到新的东西,发现在这些技巧用,并在你的日常工作流程中使用。最好的就是你自己能够对它产生自己的领悟,从而在你的工作中更好的使用它。

文章来源:网络 版权归原作者所有

上文内容不用于商业目的,如涉及知识产权问题,请权利人联系小编,我们将立即处理

这篇关于前端开发这次几个非常经典的常用技巧,学会了之后事半功倍!的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1129823

相关文章

MyBatis 动态 SQL 优化之标签的实战与技巧(常见用法)

《MyBatis动态SQL优化之标签的实战与技巧(常见用法)》本文通过详细的示例和实际应用场景,介绍了如何有效利用这些标签来优化MyBatis配置,提升开发效率,确保SQL的高效执行和安全性,感... 目录动态SQL详解一、动态SQL的核心概念1.1 什么是动态SQL?1.2 动态SQL的优点1.3 动态S

Vue中组件之间传值的六种方式(完整版)

《Vue中组件之间传值的六种方式(完整版)》组件是vue.js最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用,针对不同的使用场景,如何选择行之有效的通信方式... 目录前言方法一、props/$emit1.父组件向子组件传值2.子组件向父组件传值(通过事件形式)方

css中的 vertical-align与line-height作用详解

《css中的vertical-align与line-height作用详解》:本文主要介绍了CSS中的`vertical-align`和`line-height`属性,包括它们的作用、适用元素、属性值、常见使用场景、常见问题及解决方案,详细内容请阅读本文,希望能对你有所帮助... 目录vertical-ali

Linux上设置Ollama服务配置(常用环境变量)

《Linux上设置Ollama服务配置(常用环境变量)》本文主要介绍了Linux上设置Ollama服务配置(常用环境变量),Ollama提供了多种环境变量供配置,如调试模式、模型目录等,下面就来介绍一... 目录在 linux 上设置环境变量配置 OllamPOgxSRJfa手动安装安装特定版本查看日志在

电脑win32spl.dll文件丢失咋办? win32spl.dll丢失无法连接打印机修复技巧

《电脑win32spl.dll文件丢失咋办?win32spl.dll丢失无法连接打印机修复技巧》电脑突然提示win32spl.dll文件丢失,打印机死活连不上,今天就来给大家详细讲解一下这个问题的解... 不知道大家在使用电脑的时候是否遇到过关于win32spl.dll文件丢失的问题,win32spl.dl

Java常用注解扩展对比举例详解

《Java常用注解扩展对比举例详解》:本文主要介绍Java常用注解扩展对比的相关资料,提供了丰富的代码示例,并总结了最佳实践建议,帮助开发者更好地理解和应用这些注解,需要的朋友可以参考下... 目录一、@Controller 与 @RestController 对比二、使用 @Data 与 不使用 @Dat

Mysql中深分页的五种常用方法整理

《Mysql中深分页的五种常用方法整理》在数据量非常大的情况下,深分页查询则变得很常见,这篇文章为大家整理了5个常用的方法,文中的示例代码讲解详细,大家可以根据自己的需求进行选择... 目录方案一:延迟关联 (Deferred Join)方案二:有序唯一键分页 (Cursor-based Paginatio

Python实现常用文本内容提取

《Python实现常用文本内容提取》在日常工作和学习中,我们经常需要从PDF、Word文档中提取文本,本文将介绍如何使用Python编写一个文本内容提取工具,有需要的小伙伴可以参考下... 目录一、引言二、文本内容提取的原理三、文本内容提取的设计四、文本内容提取的实现五、完整代码示例一、引言在日常工作和学

Redis中的常用的五种数据类型详解

《Redis中的常用的五种数据类型详解》:本文主要介绍Redis中的常用的五种数据类型详解,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Redis常用的五种数据类型一、字符串(String)简介常用命令应用场景二、哈希(Hash)简介常用命令应用场景三、列表(L

浅析CSS 中z - index属性的作用及在什么情况下会失效

《浅析CSS中z-index属性的作用及在什么情况下会失效》z-index属性用于控制元素的堆叠顺序,值越大,元素越显示在上层,它需要元素具有定位属性(如relative、absolute、fi... 目录1. z-index 属性的作用2. z-index 失效的情况2.1 元素没有定位属性2.2 元素处