实现前端开发几个常用技巧

简介: 实现前端开发几个常用技巧

如何知道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 = [];
}


相关文章
|
7月前
|
存储 前端开发 安全
前端开发
前端开发
60 3
|
16天前
|
编解码 前端开发 开发者
前端开发中的响应式设计实践
前端开发中的响应式设计实践
|
4月前
|
前端开发 JavaScript 测试技术
前端开发需要哪些技术
前端开发需要哪些技术【8月更文挑战第25天】
59 0
|
4月前
|
移动开发 前端开发 JavaScript
前端开发技术
【8月更文挑战第25天】前端开发技术
50 0
|
5月前
|
编解码 前端开发 UED
现代前端开发中的响应式设计与实践
响应式设计已经成为现代前端开发的必备技能。本文探讨了响应式设计的基本概念、重要性以及实际应用中的最佳实践,帮助开发者在不同设备上提供一致且优雅的用户体验。
|
6月前
|
缓存 前端开发 开发者
探索前端开发新利器:MFSU
探索前端开发新利器:MFSU
114 0
|
7月前
|
编解码 前端开发 JavaScript
前端开发中的响应式网页设计与实现
传统的网页设计往往只适配于特定的屏幕尺寸,无法在不同设备上提供良好的用户体验。本文将介绍如何利用HTML、CSS和JavaScript技术实现响应式网页设计,使网站能够在不同设备上自适应地展现,并提供了一些实用的技巧和最佳实践。
|
Web App开发 前端开发 JavaScript
前端开发必备的7个工具
前端开发需要使用一些工具来提高效率和质量,但是选择哪些工具可以有很多选择。在这篇文章中,我们将介绍前端开发中必备的7个工具,它们将使你的开发体验更加高效和愉悦。
951 0
|
前端开发 JavaScript UED
前端开发入门
作为一名阿里云开发者社区的博主,我将接着分享关于前端开发的编程信息。
222 0
uiu
|
SQL 前端开发 JavaScript
什么是前端开发?什么是后端开发?
什么是前端开发?什么是后端开发?
uiu
144 0
什么是前端开发?什么是后端开发?