前端开发8个非常经典的常用技巧

男娘i 2023-01-01 03:40 124阅读 0赞

![format_png][]

源自：https://juejin.cn/post/6907269018588020743

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

### **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;
    }

### **6.文本溢出处理** ###

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

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

### **7.Git Flow工作流程** ###

#### **master主分支** ####

伴随整个项目周期的分支

#### **功能分支（feature branch）** ####

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

#### **补丁分支（hotfix branch）** ####

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

#### **预发分支（release branch）** ####

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

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

###     ###

### **8.JS实现列表操作** ###

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

![format_png 1][]

[format_png]: /images/20221120/73a684da9bb440b8af6e6e7f9a58f6d3.png
[format_png 1]: https://imgconvert.csdnimg.cn/aHR0cHM6Ly9tbWJpei5xcGljLmNuL21tYml6X3BuZy8yVzRJU0dYaEZ5T0RWbm5ISEJzaWNlSkhGRE9XeVI0VlBzTHJVYlZJVGZZSlRiaWJTb0hFZjFJcnh6VzNDQ0FxNzdLdU02ZUFiYWN4ZHc1d0RCVjZYT0lnLzY0MA?x-oss-process=image/format,png