How do I know if the iframe download is complete

The timer listens for the readyState status. If the value is complete or Interactive, the file is loaded.

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);
Copy the code

Commonly used full-screen center JS function

// Get the element
function getElement(ele) {
  return document.getElementById(ele);
}
// Automatic center function
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";
}
Copy the code

JS implementation deepCopy

function getType(obj) {
    // Why not use typeof? Typeof cannot distinguish between arrays and objects
    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) {
            // Why use hasOwnProperty? There is no need to copy from the object's prototype chain
            if(obj.hasOwnProperty(key)) { newObj[key] = deepCopy(obj[key]); }}}return newObj;
}


var object = [
  {
    title: 'test'.checked: false}]; deepCopy(object);Copy the code

Generating star ratings

const StartScore = rate= > Painted "u u u u being fostered fostered fostered fostered".slice(5 - rate, 10 - rate);
const start = StartScore(3);
Painted painted / / start = > "u"
Copy the code

JS array flat simple method to achieve

toString

const arr = [1.2.3[4.5[6.7]]];

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

console.log(flatten);
Copy the code

Advantages: simple, convenient, no impact on the original data Disadvantages: best array elements are all numbers or characters, no space is skipped

join

const arr = [1.2.3[4.5[6.7]]];

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

console.log(flatten);
Copy the code

Advantages and disadvantages are the same as toString

flat

const arr = [1.2.3[4.5[6.7]]];

const flatten = arr.flat(Infinity);

console.log(flatten);
Copy the code

Advantage: the space will be skipped and the new array will be returned without modifying the original array

Extension operator (…)

const arr = [1.2.3[4.5]].console.log([].concat(... arr));Copy the code

Advantages: simple, convenient Disadvantages: can only flatten one layer

Use :not() to streamline the CSS code

/ / no use:not(a).nav li {
  border-right: 1px solid # 666;
}
.nav li:last-child {
  border-right: none; } / / use:not(a).nav li:not(:last-child) {
  border-right: 1px solid # 666; } // Or use the sibling selector ~.nav li:first-child ~ li {
  border-left: 1px solid # 666;
}
Copy the code

Text overflow processing

On mobile devices, pages are relatively small, and many times some of the information displayed needs to be omitted. The most common are single-line headings that overflow ellipsis, and multi-line details that overflow ellipsis. Now developed in a framework, the proposed requirements form a basic component that is easy and quick to use

/ / a single.single {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis; } / / multiple lines.more {
  display: -webkit-box ! important;
  overflow: hidden;
  text-overflow: ellipsis;
  work-break: break-all;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2; // Specify the number of rows}Copy the code

Git Flow workflow

Master the main branch

Branches that accompany the entire project cycle

Feature branch

From the master branch, as the name implies, each function is developed on a branch, and the completed function is merged into the Release branch.

Hotfix Branch

Cut from master, fix BUG branches, and merge directly to master after testing.

Release branch

From master, the functions that need to be tested are merged into that branch for testing.

Once development is complete, the release branch is merged into the Master branch and the original branch is deleted.

JS to implement list operation

Use lists frequently, such as to-do lists, shopping carts, and so on. Lists are especially useful if you don’t have too much data

function list() {
    this.dataStore = []; // Initialize the array
    this.clear = clear; // Clear the list
    this.remove = remove; // Remove elements from the list
    this.find = find; // Find the elements in the list
    this.length = length; // Return the length of the list
}

function find(element) {
    for (var i = 0, len = this.dataStore.length; i < len; i++) {
        if (this.dataStore[i] === element) {
            returni; }}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 = [];
}
Copy the code