关于javascript:实现前端开发几个常用技巧

如何晓得 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 = [];
}