Peter谭金杰
Peter谭金杰

特皮团队：一年菜鸟实现Promise所有方法

从零手写Promise完整版

  • 随着前端技术的不断发展，用户对界面的要求也在不断提高，现在的前端不再是之前的html+css, 而是html+css+js，但是想学好js首先要知道js的核心在于异步，说到异步大部分人第一时间会想到Promise。
  • 那么接下来我们就来学习一下Promise是如何实现的吧。
  • 首先我们回顾一下Promise的基本使用
const p = new Promise((resolve,reject)=>{
    resolve('返回成功的值')
    reject('返回失败的值')
})

p.then(value=>{
    console.log(value) // 返回成功的值
})
  1. new Promise构造函数内的回调数是同步执行的
  2. then的回调函数，是异步执行的
  3. 调用resolve/reject后，状态已定，状态不能再改变
  4. .then每次返回的都是新的Promise
  5. Promise可以嵌套

接着我们从零开始来实现一下Promise

  • 先来实现明确一下基本的结构
(function(window){
    // 定义MyPromise构造函数
    function MyPromise(executor){

        function resolve(value){

        }
        function reject(reason){

        }
        executor(resolve,reject)
    }
    // MyPromise原型链上存在then方法
    MyPromise.prototype.then = function(onResolved,onRejected){

    }
    //MyPromise原型链上存在catch方法
    MyPromise.prototype.catch = function(onRejected){

    }

    //MyPromise实例对象上存在resolve方法
    MyPromise.resolve = function(value){

    }

    //MyPromise实例对象上存在reject方法
    MyPromise.reject = function(reason){

    }

    //MyPromise实例对象上存在all方法
    MyPromise.all = function(promises){

    }

    //MyPromise实例对象上存在race方法
    MyPromise.race = function(promises){
        
    }

    window.MyPromise = MyPromise;
})(window)
  • 明确来了基本的结构后，接下里我们来看看MyPromise构造函数内需要做什么
  • 1.定义Promise的初始状态、初始值、存放待执行异步函数的数组
(function(window){
    const PENDDING = 'pendding';
    const FULFILLED = 'fulfilled';
    const REJECTED = 'rejected';
    function MyPromise(executor){
        const self = this;
        self.status = PENDDING; //初始状态
        self.data = undefined; // 初始值
        self.callbacks = []; // 待执行异步回调函数的数组
    
        function resolve(value){
        }
        function reject(reason){
        }
        executor(resolve,reject)
    }
    window.MyPromise = MyPromise;
})(window)
    1. 根据Promise状态的不同，进行修，赋值，以及立即执行异步回调
(function (window) {
    const PENDDING = 'pendding';
    const FULFILLED = 'fulfilled';
    const REJECTED = 'rejected';
    // 定义MyPromise
    function MyPromise(executor) {
        const self = this;
        self.status = PENDDING;
        self.data = undefined;
        self.callbacks = [];

        function resolve(value) {
            self.status = FULFILLED;
            self.data = value;
            // 立即执行异步回调函数
            setTimeout(() => {
                self.callbacks.forEach(callbacksObj => {
                    callbacksObj.onResolved(value);
                })
            })
        }

        function reject(reason) {
            self.status = REJECTED;
            self.data = reason;
            setTimeout(() => {
                self.callbacks.forEach(callbacksObj => {
                    callbacksObj.onRejected(reason);
                })
            })
        }
        executor(resolve, reject)
    }
    window.MyPromise = MyPromise;
    1. 别忘了Promise 的状态一旦改变就不能再修改了，所以在resolve/reject函数内需要加一个判断
(function (window) {
    const PENDDING = 'pendding';
    const FULFILLED = 'fulfilled';
    const REJECTED = 'rejected';
    // 定义MyPromise
    function MyPromise(executor) {
        const self = this;
        self.status = PENDDING;
        self.data = undefined;
        self.callbacks = [];

        function resolve(value) {
            if (self.status !== PENDDING) return;
            self.status = FULFILLED;
            self.data = value;
            // 立即执行异步回调函数
            setTimeout(() => {
                self.callbacks.forEach(callbacksObj => {
                    callbacksObj.onResolved(value);
                })
            })
        }

        function reject(reason) {
            if (self.status !== PENDDING) return;
            self.status = REJECTED;
            self.data = reason;
            setTimeout(() => {
                self.callbacks.forEach(callbacksObj => {
                    callbacksObj.onRejected(reason);
                })
            })
        }
        executor(resolve, reject)
    }
    window.MyPromise = MyPromise;
    1. Promise原型链上的then方法，可以接收两个参数(且是回调函数)，成功/失败，并且每次返回的都是一个新的Promise
// MyPromise原型链上存在then方法
MyPromise.prototype.then = function (onResolved, onRejected) {
    const self = this;
    return new MyPromise((resolve, reject) => { // 每次都返回一个新的Promise对象
        // 首先判断当前状态
        if (self.status === FULFILLED) {
            /* 
                1、返回的Promise的结果是由onResolved/onrejected决定的
                2、返回的是Promise对象 (根据执结果决定Promise的返回结果)
                3、返回的不是Promise对象 (该值就是Promise的返回结果)
                4、抛出异常 异常的值为返回的结果
            */
            setTimeout(() => {
                try {
                    const result = onResolved(self.data);
                    if (reject instanceof MyPromise) {
                        result.then(value => {
                            resolve(value);
                        }, reason => {
                            reject(reason);
                        })
                    } else {
                        resolve(result);
                    }
    
                } catch (error) {
                    reject(error);
                }
            });
    
        } else if (self.status === REJECTED) {
            setTimeout(() => {
                try {
                    const result = onRejected(self.data);
                    if (reject instanceof MyPromise) {
                        result.then(value => {
                            resolve(value);
                        }, reason => {
                            reject(reason);
                        })
                    } else {
                        resolve(result);
                    }
    
                } catch (error) {
                    reject(error);
                }
            });
    
        } else if (self.status === PENDDING) {
            self.callbacks.push({
                onResolved() {
                    try {
                        const result = onResolved(self.data);
                        if (reject instanceof MyPromise) {
                            result.then(value => {
                                resolve(value);
                            }, reason => {
                                reject(reason);
                            })
                        } else {
                            resolve(result);
                        }
    
                    } catch (error) {
                        reject(error);
                    }
                },
                onRejected() {
                    try {
                        const result = onRejected(self.data);
                        if (reject instanceof MyPromise) {
                            result.then(value => {
                                resolve(value);
                            }, reason => {
                                reject(reason);
                            })
                        } else {
                            resolve(result);
                        }
    
                    } catch (error) {
                        reject(error);
                    }
                }
            })
        }
    })
}
  • 好的停一下，一步一步讲解
    1. .then每次都返回一个新的Promise，所以在.then方法里是

> return new MyPromise((resolve,reject)){}

    1. 每一种状态都存在返回值，并且都能是一下三种情况
    2. 返回的是Promise对象
    3. 返回的不是Promise对象
    4. 抛出异常
    1. FULFILLED/REJECTED两种状态需要立即执行异步函数
    1. PENDDING为什么没有立即执行异步函数，因为当状态为PENDDING时就执行then，会先往待执行回调函数的数组（callbacks）内存放这个回调，紧接着在回到Promise的执行其中执行resolve/reject,而上面也写过了，执行resolve/reject会去待执行回调函数的数组内遍历并赋值。

  • 好的继续，并且对上面重复的优化一下。
// MyPromise原型链上存在then方法
    MyPromise.prototype.then = function (onResolved, onRejected) {
        const self = this;
        return new MyPromise((resolve, reject) => { // 每次都返回一个新的Promise对象
            function handle(callback) {
                /* 
                    1、返回的Promise的结果是由onResolved/onrejected决定的
                    2、返回的是Promise对象 (根据执结果决定Promise的返回结果)
                    3、返回的不是Promise对象 (该值就是Promise的返回结果)
                    4、抛出异常 异常的值为返回的结果
                */
                try {
                    const result = callback(self.data);
                    if (reject instanceof MyPromise) {
                        result.then(value => {
                            resolve(value);
                        }, reason => {
                            reject(reason);
                        })
                    } else {
                        resolve(result);
                    }

                } catch (error) {
                    reject(error);
                }
            }
            // 首先判断当前状态
            if (self.status === FULFILLED) {
                setTimeout(() => {
                    thandle(onResolved)
                });

            } else if (self.status === REJECTED) {
                setTimeout(() => {
                    thandle(onRejected)
                });

            } else if (self.status === PENDDING) {
                self.callbacks.push({
                    onResolved() {
                        handle(onResolved)
                    },
                    onRejected() {
                        handle(onRejected)
                    }
                })
            }
        })
    }
    1. 防止不穿成功或者失败的回调函数，给成功和失败都给一个默认回调函数
MyPromise.prototype.then = function (onResolved, onRejected) {
        const self = this;
        // 定义默认回调
        onResolved = typeof onResolved === "function" ? onResolved : value => value;
        onRejected = typeof onRejected === "function" ? onRejected : reason => {throw reason};
        return new MyPromise((resolve, reject) => { // 每次都返回一个新的Promise对象
            function handle(callback) {
                /* 
                    1、返回的Promise的结果是由onResolved/onrejected决定的
                    2、返回的是Promise对象 (根据执结果决定Promise的返回结果)
                    3、返回的不是Promise对象 (该值就是Promise的返回结果)
                    4、抛出异常 异常的值为返回的结果
                */
                try {
                    const result = callback(self.data);
                    if (reject instanceof MyPromise) {
                        result.then(value => {
                            resolve(value);
                        }, reason => {
                            reject(reason);
                        })
                    } else {
                        resolve(result);
                    }

                } catch (error) {
                    reject(error);
                }
            }
            // 首先判断当前状态
            if (self.status === FULFILLED) {
                setTimeout(() => {
                    thandle(onResolved)
                });

            } else if (self.status === REJECTED) {
                setTimeout(() => {
                    thandle(onRejected)
                });

            } else if (self.status === PENDDING) {
                self.callbacks.push({
                    onResolved() {
                        handle(onResolved)
                    },
                    onRejected() {
                        handle(onRejected)
                    }
                })
            }
        })
    }
    1. 接着我们看看catch，其实就是
Promise.prototype.then(undefined,rejected)
  • 或者
Promise.prototype.then(null,rejected) 
//MyPromise原型链上存在catch方法
  MyPromise.prototype.catch = function (onRejected) {
    return this.then(null, onRejected);
  }
  • 7、接下来实现一下 Promise.resolve/Promise.reject
/MyPromise实例对象上存在resolve方法
MyPromise.resolve = function (value) {
    if (value instanceof MyPromise) return value;
    return new MyPromise(resolve => resolve(value))             // 返回一个resolved状态的Promise对象
}

//MyPromise实例对象上存在reject方法
MyPromise.reject = function (reason) {
    return new MyPromise((resolve,reject) => reject(reason));  // 返回一个reject状态Promise对象
}
    1. 接下来实现一下Promise.all/Promise.race
//MyPromise实例对象上存在all方法
MyPromise.all = function (promises) {
    let promisesCount = 0
    let values = new Array(promises.length);
    return new MyPromise((resolve,reject)=>{
        promises.forEach((promise,index)=>{
            promise.then(value => {
                promisesCount++;
                values[index] = value;
                if (promisesCount === promises.length){
                    resolve(values);
                }
            },reason => {
                reject(reason);
            })
        })
    })

}

  • 好的,我们来看看Promise.all实现的思路

      1. Promise.all 传入的是一个数组
      1. Promise.all返回的是一个数组
      1. Promise.all传入的数组中，每个Promise对象必须都正确才能返回正确的结果数组
      1. Promise.all传入的数组中任意一个对象返回错的结果，都会返回错误的结果
  • 好的，其实我们还少一个步骤就是Promise.all传入的数组的参数可以不是Promise的实例, 所以数组参数如果不是Promise实例，先调用Promise.resolve
//MyPromise实例对象上存在all方法
MyPromise.all = function (promises) {
    let promisesCount = 0
    let values = new Array(promises.length);
    return new MyPromise((resolve, reject) => {
      promises.forEach((promise, index) => {
        MyPromise.resolve(promise).then(value => {
          promisesCount++;
          values[index] = value;
          if (promisesCount === promises.length) {
            resolve(values);
          }
        }, reason => {
          reject(reason);
        })
      })
    })
}
  • Promise.race实现
//MyPromise实例对象上存在race方法
  MyPromise.race = function (promises) {
    return new MyPromise((resolve, reject) => {
      promises.forEach(promise => {
        MyPromise.resolve(promise).then(value => {
          resolve(value);
        }, reason => {
          reject(reason)
        })
      })
    })
  }

    • 好的,解释一下，

        1. Promise.race传入的也是一个数组
        1. 传入的Promise执行内容相同的情况下，Promise.race返回的结果为数组中的第一个值
        1. 若传入的Promise执行内容不一致，有先后区分，则结果为执行的最快的一个
    • 至此从零手写一个Promise完成了，其中包括
    Promise.prototype.then

    Promise.prototype.catch

    Promise.resolve

    Promise.reject

    Promise.all

    Promise.race

    
(function (window) {

  const PENDDING = 'pendding';
  const FULFILLED = 'fulfilled';
  const REJECTED = 'rejected';
  // 定义MyPromise
  function MyPromise(executor) {
    const self = this;
    self.status = PENDDING;
    self.data = undefined;
    self.callbacks = [];

    function resolve(value) {
      if (self.status !== PENDDING) return;
      self.status = FULFILLED;
      self.data = value;
      // 立即执行异步回调函数
      setTimeout(() => {
        self.callbacks.forEach(callbacksObj => {
          callbacksObj.onResolved(value);
        })
      })
    }

    function reject(reason) {
      if (self.status !== PENDDING) return;
      self.status = REJECTED;
      self.data = reason;
      setTimeout(() => {
        self.callbacks.forEach(callbacksObj => {
          callbacksObj.onRejected(reason);
        })
      })
    }
    try{
      executor(resolve, reject)
    }catch(error){
      reject(error)
    }
    
  }
  // MyPromise原型链上存在then方法
  MyPromise.prototype.then = function (onResolved, onRejected) {
    const self = this;
    // 定义默认回调
    onResolved = typeof onResolved === "function" ? onResolved : value => value;
    onRejected = typeof onRejected === "function" ? onRejected : reason => {
      throw reason
    };
    return new MyPromise((resolve, reject) => { // 每次都返回一个新的Promise对象
      function handle(callback) {
        /* 
            1、返回的Promise的结果是由onResolved/onrejected决定的
            2、返回的是Promise对象 (根据执结果决定Promise的返回结果)
            3、返回的不是Promise对象 (该值就是Promise的返回结果)
            4、抛出异常 异常的值为返回的结果
        */
        try {
          const result = callback(self.data);
          if (reject instanceof MyPromise) {
            result.then(value => {
              resolve(value);
            }, reason => {
              reject(reason);
            })
          } else {
            resolve(result);
          }

        } catch (error) {
          reject(error);
        }
      }
      // 首先判断当前状态
      if (self.status === FULFILLED) {
        setTimeout(() => {
          handle(onResolved)
        });

      } else if (self.status === REJECTED) {
        setTimeout(() => {
          handle(onRejected)
        });

      } else if (self.status === PENDDING) {
        self.callbacks.push({
          onResolved() {
            handle(onResolved)
          },
          onRejected() {
            handle(onRejected)
          }
        })
      }
    })
  }
  //MyPromise原型链上存在catch方法
  MyPromise.prototype.catch = function (onRejected) {
    return this.then(null, onRejected);
  }

  //MyPromise实例对象上存在resolve方法
  MyPromise.resolve = function (value) {
    if (value instanceof MyPromise) return value;
    return new MyPromise(resolve => resolve(value)) // 返回一个resolved状态的Promise对象
  }

  //MyPromise实例对象上存在reject方法
  MyPromise.reject = function (reason) {
    return new MyPromise((resolve, reject) => reject(reason)); // 返回一个reject状态Promise对象
  }

  //MyPromise实例对象上存在all方法
  MyPromise.all = function (promises) {
    let promisesCount = 0
    let values = new Array(promises.length);
    return new MyPromise((resolve, reject) => {
      promises.forEach((promise, index) => {
        MyPromise.resolve(promise).then(value => {
          promisesCount++;
          values[index] = value;
          if (promisesCount === promises.length) {
            resolve(values);
          }
        }, reason => {
          reject(reason);
        })
      })
    })
  }

  //MyPromise实例对象上存在race方法
  MyPromise.race = function (promises) {
    return new MyPromise((resolve, reject) => {
      promises.forEach(promise => {
        MyPromise.resolve(promise).then(value => {
          resolve(value);
        }, reason => {
          reject(reason)
        })
      })
    })
  }

  window.MyPromise = MyPromise;
})(window)
    • 最后我们用类(class)的方式实现一下
    (function (window) {
    const PENDDING = 'pendding';
    const FULFILLED = 'fulfilled';
    const REJECTED = 'rejected';
    // 定义MyPromise
    class MyPromise {
        constructor(executor) {
            const self = this;
            self.status = PENDDING;
            self.data = undefined;
            self.callbacks = [];

            function resolve(value) {
                if (self.status !== PENDDING) return;
                self.status = FULFILLED;
                self.data = value;
                // 立即执行异步回调函数
                setTimeout(() => {
                    self.callbacks.forEach(callbacksObj => {
                        callbacksObj.onResolved(value);
                    })
                })
            }

            function reject(reason) {
                if (self.status !== PENDDING) return;
                self.status = REJECTED;
                self.data = reason;
                setTimeout(() => {
                    self.callbacks.forEach(callbacksObj => {
                        callbacksObj.onRejected(reason);
                    })
                })
            }
            executor(resolve, reject)
        }
        // MyPromise原型链上存在then方法
        then(onResolved, onRejected) {
            const self = this;
            // 定义默认回调
            onResolved = typeof onResolved === "function" ? onResolved : value => value;
            onRejected = typeof onRejected === "function" ? onRejected : reason => {
                throw reason
            };
            return new MyPromise((resolve, reject) => { // 每次都返回一个新的Promise对象
                function handle(callback) {
                    /* 
                        1、返回的Promise的结果是由onResolved/onrejected决定的
                        2、返回的是Promise对象 (根据执结果决定Promise的返回结果)
                        3、返回的不是Promise对象 (该值就是Promise的返回结果)
                        4、抛出异常 异常的值为返回的结果
                    */
                    try {
                        const result = callback(self.data);
                        if (reject instanceof MyPromise) {
                            result.then(value => {
                                resolve(value);
                            }, reason => {
                                reject(reason);
                            })
                        } else {
                            resolve(result);
                        }

                    } catch (error) {
                        reject(error);
                    }
                }
                // 首先判断当前状态
                if (self.status === FULFILLED) {
                    setTimeout(() => {
                        handle(onResolved)
                    });

                } else if (self.status === REJECTED) {
                    setTimeout(() => {
                        handle(onRejected)
                    });

                } else if (self.status === PENDDING) {
                    self.callbacks.push({
                        onResolved() {
                            handle(onResolved)
                        },
                        onRejected() {
                            handle(onRejected)
                        }
                    })
                }
            })
        }
        //MyPromise原型链上存在catch方法
        catch (onRejected) {
            return this.then(null, onRejected);
        }
        //MyPromise实例对象上存在resolve方法
        static resolve(value) {
            if (value instanceof MyPromise) return value;
            return new MyPromise(resolve => resolve(value)) // 返回一个resolved状态的Promise对象
        }
        //MyPromise实例对象上存在reject方法
        static reject(reason) {
            return new MyPromise((resolve, reject) => reject(reason)); // 返回一个reject状态Promise对象
        }
        //MyPromise实例对象上存在all方法
        static all(promises) {
            let promisesCount = 0
            let values = new Array(promises.length);
            return new MyPromise((resolve, reject) => {
                promises.forEach((promise, index) => {
                    MyPromise.resolve(promise).then(value => {
                        promisesCount++;
                        values[index] = value;
                        if (promisesCount === promises.length) {
                            resolve(values);
                        }
                    }, reason => {
                        reject(reason);
                    })
                })
            })
        }
        //MyPromise实例对象上存在race方法
        static race(promises) {
            return new MyPromise((resolve, reject) => {
                promises.forEach(promise => {
                    MyPromise.resolve(promise).then(value => {
                        resolve(value);
                    }, reason => {
                        reject(reason)
                    })
                })
            })
        }
    }
    window.MyPromise = MyPromise;
})(window)
    • 从零手写Promise说难也不难，但是还是花了不少时间的，希望能够帮助到像我一样想学好js，想学好Promise的朋友，一起加油吧。

    最后

    • 如果你想加入特皮技术团队，有人指导你学习，提升自己，可以公众号联系我
    • 感觉对你有帮助，可以点个在看和赞，转发一下，关注我们公众号：【前端巅峰】

    你可能感兴趣的:(javascript,前端,node.js,html5)

    • Long类型前后端数据不一致 igotyback 前端
      响应给前端的数据浏览器控制台中response中看到的Long类型的数据是正常的到前端数据不一致前后端数据类型不匹配是一个常见问题，尤其是当后端使用Java的Long类型（64位）与前端JavaScript的Number类型（最大安全整数为2^53-1，即16位）进行数据交互时，很容易出现精度丢失的问题。这是因为JavaScript中的Number类型无法安全地表示超过16位的整数。为了解决这个问
    • DIV+CSS+JavaScript技术制作网页（旅游主题网页设计与制作）云南大理 STU学生网页设计 网页设计期末网页作业html静态网页html5期末大作业网页设计web大作业
      ️精彩专栏推荐作者主页:【进入主页—获取更多源码】web前端期末大作业：【HTML5网页期末作业(1000套)】程序员有趣的告白方式：【HTML七夕情人节表白网页制作(110套)】文章目录二、网站介绍三、网站效果▶️1.视频演示2.图片演示四、网站代码HTML结构代码CSS样式代码五、更多源码二、网站介绍网站布局方面：计划采用目前主流的、能兼容各大主流浏览器、显示效果稳定的浮动网页布局结构。网站程
    • 【加密社】Solidity 中的事件机制及其应用 加密社 闲侃区块链智能合约区块链
      加密社引言在Solidity合约开发过程中，事件（Events）是一种非常重要的机制。它们不仅能够让开发者记录智能合约的重要状态变更，还能够让外部系统（如前端应用）监听这些状态的变化。本文将详细介绍Solidity中的事件机制以及如何利用不同的手段来触发、监听和获取这些事件。事件存储的地方当我们在Solidity合约中使用emit关键字触发事件时，该事件会被记录在区块链的交易收据中。具体而言，事件
    • 关于城市旅游的HTML网页设计——(旅游风景云南 5页)HTML+CSS+JavaScript 二挡起步 web前端期末大作业javascripthtmlcss旅游风景
      ⛵源码获取文末联系✈Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业|游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作|HTML期末大学生网页设计作业，Web大学生网页HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScrip
    • HTML网页设计制作大作业（div+css） 云南我的家乡旅游景点 带文字滚动 二挡起步 web前端期末大作业web设计网页规划与设计htmlcssjavascriptdreamweaver前端
      Web前端开发技术描述网页设计题材，DIV+CSS布局制作,HTML+CSS网页设计期末课程大作业游景点介绍|旅游风景区|家乡介绍|等网站的设计与制作HTML期末大学生网页设计作业HTML：结构CSS：样式在操作方面上运用了html5和css3，采用了div+css结构、表单、超链接、浮动、绝对定位、相对定位、字体样式、引用视频等基础知识JavaScript：做与用户的交互行为文章目录前端学习路线
    • node.js学习 小猿L node.jsnode.js学习vim
      node.js学习实操及笔记温故node.js，node.js学习实操过程及笔记~node.js学习视频node.js官网node.js中文网实操笔记githubcsdn笔记为什么学node.js可以让别人访问我们编写的网页为后续的框架学习打下基础，三大框架vuereactangular离不开node.jsnode.js是什么官网：node.js是一个开源的、跨平台的运行JavaScript的运行
    • springboot+vue项目实战一-创建SpringBoot简单项目 苹果酱0567 面试题汇总与解析springboot后端java中间件开发语言
      这段时间抽空给女朋友搭建一个个人博客，想着记录一下建站的过程，就当做笔记吧。虽然复制zjblog只要一个小时就可以搞定一个网站，或者用cms系统，三四个小时就可以做出一个前后台都有的网站，而且想做成啥样也都行。但是就是要从新做，自己做的意义不一样，更何况，俺就是专门干这个的，嘿嘿嘿要做一个网站，而且从零开始，首先呢就是技术选型了，经过一番思量决定选择-SpringBoot做后端，前端使用Vue做一
    • JavaScript 中，深拷贝（Deep Copy）和浅拷贝（Shallow Copy） 跳房子的前端 前端面试javascript开发语言ecmascript
      在JavaScript中，深拷贝（DeepCopy）和浅拷贝（ShallowCopy）是用于复制对象或数组的两种不同方法。了解它们的区别和应用场景对于避免潜在的bugs和高效地处理数据非常重要。以下是对深拷贝和浅拷贝的详细解释，包括它们的概念、用途、优缺点以及实现方式。1.浅拷贝（ShallowCopy）概念定义：浅拷贝是指创建一个新的对象或数组，其中包含了原对象或数组的基本数据类型的值和对引用数
    • 博客网站制作教程 2401_85194651 javamaven
      首先就是技术框架：后端：Java+SpringBoot数据库：MySQL前端：Vue.js数据库连接：JPA(JavaPersistenceAPI)1.项目结构blog-app/├──backend/│├──src/main/java/com/example/blogapp/││├──BlogApplication.java││├──config/│││└──DatabaseConfig.java
    • vue 创建项目报错：command failed: npm install --loglevel error 那鱼、会飞 vue.jsvue-cli3
      这个问题其实很好解决，只是很多种情况，逐一排除即可。稳下心来~vuecli3创建项目我的node版本是node14.15.0，（永远不要尝试最新版本）node各种版本下载地址：以往的版本|Node.js(nodejs.org)vue/[email protected]@vue/[email protected]（注意vue/cli2和vue/cli3的下载命名有所改变，2是-形式，3是/形式）其实报错
    • 更改npm镜像源为淘宝镜像 骆小骆 基于node.js
      npm常用指令后缀*最近复习了一下node.js整理了一下跟node.js相关的指令后缀*--save、-S参数意思是把模块的版本信息保存到dependencies（生产环境依赖）中，即你的package.json文件的dependencies字段中；–--save-dev、-D参数意思是把模块版本信息保存到devDependencies（开发环境依赖）中，即你的package.json文件的de
    • JavaScript `Map` 和 `WeakMap`详细解释 跳房子的前端 JavaScript原生方法javascript前端开发语言
      在JavaScript中，Map和WeakMap都是用于存储键值对的数据结构，但它们有一些关键的不同之处。MapMap是一种可以存储任意类型的键值对的集合。它保持了键值对的插入顺序，并且可以通过键快速查找对应的值。Map提供了一些非常有用的方法和属性来操作这些数据对：set(key,value):将一个键值对添加到Map中。如果键已经存在，则更新其对应的值。get(key):获取指定键的值。如果键
    • 最简单将静态网页挂载到服务器上(不用nginx) 全能全知者 服务器nginx运维前端html笔记
      最简单将静态网页挂载到服务器上(不用nginx)如果随便弄个静态网页挂在服务器都要用nignx就太麻烦了，所以直接使用Apache来搭建一些简单前端静态网页会相对方便很多检查Web服务器服务状态：sudosystemctlstatushttpd#ApacheWeb服务器如果发现没有安装web服务器：安装Apache：sudoyuminstallhttpd启动Apache：sudosystemctl
    • 补充元象二面 Redstone Monstrosity 前端面试
      1.请尽可能详细地说明，防抖和节流的区别，应用场景？你的回答中不要写出示例代码。防抖（Debounce）和节流（Throttle）是两种常用的前端性能优化技术，它们的主要区别在于如何处理高频事件的触发。以下是防抖和节流的区别和应用场景的详细说明：防抖和节流的定义防抖：在一段时间内，多次执行变为只执行最后一次。防抖的原理是，当事件被触发后，设置一个延迟定时器。如果在这个延迟时间内事件再次被触发，则重
    • 微信小程序开发注意事项 jun778895 微信小程序小程序
      微信小程序开发是一个融合了前端开发、用户体验设计、后端服务（可选）以及微信小程序平台特性的综合性项目。这里，我将详细介绍一个典型的小程序开发项目的全过程，包括项目规划、设计、开发、测试及部署上线等各个环节，并尽量使内容达到或超过2000字的要求。一、项目规划1.1项目背景与目标假设我们要开发一个名为“智慧校园助手”的微信小程序，旨在为学生提供一站式校园生活服务，包括课程表查询、图书馆座位预约、食堂
    • 切换淘宝最新npm镜像源是 hai40587 npm前端node.js
      切换淘宝最新npm镜像源是一个相对简单的过程，但首先需要明确当前淘宝npm镜像源的状态和最新的镜像地址。由于网络环境和服务更新，镜像源的具体地址可能会发生变化，因此，我将基于当前可获取的信息，提供一个通用的切换步骤，并附上最新的镜像地址（截至回答时）。一、了解npm镜像源npm（NodePackageManager）是JavaScript的包管理器，用于安装、更新和管理项目依赖。由于npm官方仓库
    • 字节二面 Redstone Monstrosity 前端面试
      1.假设你是正在面试前端开发工程师的候选人，面试官让你详细说出你上一段实习过程的收获和感悟。在上一段实习过程中，我获得了宝贵的实践经验和深刻的行业洞察，以下是我的主要收获和感悟：一、专业技能提升框架应用熟练度：通过实际项目，我深入掌握了React、Vue等前端框架的使用，不仅提升了编码效率，还学会了如何根据项目需求选择合适的框架。问题解决能力：在实习期间，我遇到了许多预料之外的技术难题。通过查阅文
    • 前端代码上传文件 余生逆风飞翔 前端javascript开发语言
      点击上传文件import{ElNotification}from'element-plus'import{API_CONFIG}from'../config/index.js'import{UploadFilled}from'@element-plus/icons-vue'import{reactive}from'vue'import{BASE_URL}from'../config/index'i
    • uniapp实现动态标记效果详细步骤【前端开发】 2401_85123349 uni-app
      第二个点在于实现将已经被用户标记的内容在下一次获取后刷新它的状态为已标记。这是什么意思呢？比如说上面gif图中的这些人物对象，有一些已被该用户添加为关心，那么当用户下一次进入该页面时，这些已经被添加关心的对象需要以“红心”状态显现出来。这个点的难度还不算大，只需要在每一次获取后端的内容后对标记对象进行状态更新即可。II.动态标记效果实现思路和步骤首先，整体的思路是利用动态类名对不同的元素进行选择。
    • 高性能javascript--算法和流程控制 海淀萌狗
      -for,while和do-while性能相当-避免使用for-in循环，==除非遍历一个属性量未知的对象==es5:for-in遍历的对象便不局限于数组，还可以遍历对象。原因：for-in每次迭代操作会同时搜索实例或者原型属性，for-in循环的每次迭代都会产生更多开销，因此要比其他循环类型慢，一般速度为其他类型循环的1/7。因此，除非明确需要迭代一个属性数量未知的对象，否则应避免使用for-i
    • 360前端星计划-动画可以这么玩 马小蜗
      动画的基本原理定时器改变对象的属性根据新的属性重新渲染动画functionupdate(context){//更新属性}constticker=newTicker();ticker.tick(update,context);动画的种类1、JavaScript动画操作DOMCanvas2、CSS动画transitionanimation3、SVG动画SMILJS动画的优缺点优点：灵活度、可控性、性能
    • h5小游戏定制开发 红匣子实力推荐
      随着科技的不断发展，移动互联网已经成为人们生活中不可或缺的一部分。在这个背景下，H5小游戏应运而生，为人们带来了丰富的娱乐体验。H5小游戏定制开发作为一种新兴的游戏开发方式，正逐渐受到市场的关注和青睐。那么，什么是H5小游戏定制开发呢？它又具有哪些特点和优势呢？让我们一起来深入了解一下。首先，我们来了解一下H5小游戏的基本概念。H5小游戏是一种基于HTML5技术的游戏，可以在移动端、PC端等多平台
    • Vue + Express实现一个表单提交 九旬大爷的梦
      最近在折腾一个cms系统，用的vue+express，但是就一个表单提交就弄了好久，记录一下。环境：Node10+前端：Vue服务端：Express依赖包：vueexpressaxiosexpress-formidableelement-ui（可选）前言：axiosget请求参数是：paramsaxiospost请求参数是：dataexpressget接受参数是req.queryexpresspo
    • JavaScript中秋快乐！ Q_w7742 javascript开发语言ecmascript
      我们来实现一个简单的祝福网页~主要的难度在于使用canvas绘图当点击canvas时候，跳出“中秋节快乐”字样，需要注册鼠标单击事件和计时器。首先定义主要函数：初始化当点击canvas之后转到onCanvasClick函数，绘图生成灯笼。functiononCanvasClick(){//事件处理函数context.clearRect(0,0,canvas1.width,canvas1.heigh
    • Nginx从入门到实践(三) 听你讲故事啊
      动静分离动静分离是将网站静态资源（JavaScript，CSS，img等文件）与后台应用分开部署，提高用户访问静态代码的速度，降低对后台应用访问。动静分离的一种做法是将静态资源部署在nginx上，后台项目部署到应用服务器上，根据一定规则静态资源的请求全部请求nginx服务器，达到动静分离的目标。rewrite规则Rewrite规则常见正则表达式Rewrite主要的功能就是实现URL的重写，Ngin
    • Nginx的使用场景：构建高效、可扩展的Web架构 张某布响丸辣 nginx前端架构
      Nginx，作为当今最流行的Web服务器和反向代理软件之一，凭借其高性能、稳定性和灵活性，在众多Web项目中扮演着核心角色。无论是个人博客、中小型网站，还是大型企业级应用，Nginx都能提供强大的支持。本文将探讨Nginx的几个主要使用场景，帮助读者理解如何在实际项目中充分利用Nginx的优势。1.静态文件服务对于包含大量静态文件（如HTML、CSS、JavaScript、图片等）的网站，Ngin
    • 前端知识点 ZhangTao_zata 前端javascriptcss
      下面是一个最基本的html代码body{font-family:Arial,sans-serif;margin:20px;}//JavaScriptfunctionthatdisplaysanalertwhencalledfunctionshowMessage(){alert("Hello!Youclickedthebutton.");}MyFirstHTMLPageWelcometoMyPage
    • 第三十一节:Vue路由:前端路由vs后端路由的了解 曹老师
      1.认识前端路由和后端路由前端路由相对于后端路由而言的,在理解前端路由之前先对于路由有一个基本的了解路由:简而言之,就是把信息从原地址传输到目的地的活动对于我们来说路由就是:根据不同的url地址展示不同的页面内容1.1后端路由以前咱们接触比较多的后端路由,当改变url地址时,浏览器会向服务器发送请求,服务器根据这个url,返回不同的资源内容后端路由的特点就是前端每次跳转到不同url地址,都会重新访
    • 华雁智科前端面试题 因为奋斗超太帅啦 前端笔试面试问题整理javascript开发语言ecmascript
      1.var变量的提升题目：vara=1functionfun(){console.log(b)varb=2}fun()console.log(a)正确输出结果：undefined、1答错了，给一个大嘴巴子，错误答案输出结果为：2,1此题主要考察var定义的变量，作用域提升的问题，相当于varaa=1functionfun(){varbconsole.log(b)b=2}fun()console.l
    • 如何建设数据中台（五）——数据汇集—打破企业数据孤岛 weixin_47088026 学习记录和总结中台数据中台程序人生经验分享
      数据汇集——打破企业数据孤岛要构建企业级数据中台，第一步就是将企业内部各个业务系统的数据实现互通互联，打破数据孤岛，主要通过数据汇聚和交换来实现。企业采集的数据可以是线上采集、线下数据采集、互联网数据采集、内部数据采集等。线上数据采集主要载体分为互联网和移动互联网两种，对应有系统平台、网页、H5、小程序、App等，可以采用前端或后端埋点方式采集数据。线下数据采集主要是通过硬件来采集，例如：WiFi
    • 矩阵求逆（JAVA）利用伴随矩阵 qiuwanchi 利用伴随矩阵求逆矩阵
      package gaodai.matrix; import gaodai.determinant.DeterminantCalculation; import java.util.ArrayList; import java.util.List; import java.util.Scanner; /** * 矩阵求逆(利用伴随矩阵) * @author 邱万迟
    • 单例（Singleton）模式 aoyouzi 单例模式Singleton
      3.1           概述 如果要保证系统里一个类最多只能存在一个实例时，我们就需要单例模式。这种情况在我们应用中经常碰到，例如缓存池，数据库连接池，线程池，一些应用服务实例等。在多线程环境中，为了保证实例的唯一性其实并不简单，这章将和读者一起探讨如何实现单例模式。 3.2
    • [开源与自主研发]就算可以轻易获得外部技术支持,自己也必须研发 comsci 开源
            现在国内有大量的信息技术产品，都是通过盗版，免费下载，开源，附送等方式从国外的开发者那里获得的。。。。。。        虽然这种情况带来了国内信息产业的短暂繁荣，也促进了电子商务和互联网产业的快速发展，但是实际上，我们应该清醒的看到，这些产业的核心力量是被国外的
    • 页面有两个frame,怎样点击一个的链接改变另一个的内容 Array_06 UIXHTML
      <a src="地址"  targets="这里写你要操作的Frame的名字" />搜索 然后你点击连接以后你的新页面就会显示在你设置的Frame名字的框那里 targerts="",就是你要填写目标的显示页面位置 ===================== 例如： <frame src=&
    • Struts2实现单个/多个文件上传和下载 oloz 文件上传struts
      struts2单文件上传：     步骤01:jsp页面 <!--在进行文件上传时，表单提交方式一定要是post的方式，因为文件上传时二进制文件可能会很大，还有就是enctype属性，这个属性一定要写成multipart/form-data，不然就会以二进制文本上传到服务器端--> 　　<form action="fileUplo
    • 推荐10个在线logo设计网站 362217990 logo
      在线设计Logo网站。 1、http://flickr.nosv.org（这个太简单） 2、http://www.logomaker.com/?source=1.5770.1 3、http://www.simwebsol.com/ImageTool 4、http://www.logogenerator.com/logo.php?nal=1&tpl_catlist[]=2 5、ht
    • jsp上传文件 香水浓 jspfileupload
      1. jsp上传 Notice： 1. form表单 method 属性必须设置为 POST 方法 ，不能使用 GET 方法 2. form表单 enctype 属性需要设置为 multipart/form-data 3. form表单 action 属性需要设置为提交到后台处理文件上传的jsp文件地址或者servlet地址。例如 uploadFile.jsp 程序文件用来处理上传的文
    • 我的架构经验系列文章 - 前端架构 agevs JavaScriptWeb框架UIjQuer
      框架层面：近几年前端发展很快，前端之所以叫前端因为前端是已经可以独立成为一种职业了，js也不再是十年前的玩具了，以前富客户端RIA的应用可能会用flash/flex或是silverlight，现在可以使用js来完成大部分的功能，因此js作为一门前端的支撑语言也不仅仅是进行的简单的编码，越来越多框架性的东西出现了。越来越多的开发模式转变为后端只是吐json的数据源，而前端做所有UI的事情。MVCMV
    • android ksoap2 中把XML(DataSet) 当做参数传递 aijuans android
      我的android app中需要发送webservice ，于是我使用了 ksop2 进行发送，在测试过程中不是很顺利,不能正常工作.我的web service 请求格式如下     [html]  view plain copy   <Envelope xmlns="http://schemas.
    • 使用Spring进行统一日志管理 + 统一异常管理 baalwolf spring
      统一日志和异常管理配置好后，SSH项目中，代码以往散落的log.info() 和 try..catch..finally 再也不见踪影！ 统一日志异常实现类： [java]  view plain copy   package com.pilelot.web.util;      impor
    • Android SDK 国内镜像 BigBird2012 android sdk
      一、镜像地址： 1、东软信息学院的 Android SDK 镜像，比配置代理下载快多了。 配置地址， http://mirrors.neusoft.edu.cn/configurations.we#android 2、北京化工大学的： IPV4:ubuntu.buct.edu.cn  IPV4:ubuntu.buct.cn IPV6:ubuntu.buct6.edu.cn
    • HTML无害化和Sanitize模块 bijian1013 JavaScriptAngularJSLinkySanitize
      一.ng-bind-html、ng-bind-html-unsafe         AngularJS非常注重安全方面的问题，它会尽一切可能把大多数攻击手段最小化。其中一个攻击手段是向你的web页面里注入不安全的HTML，然后利用它触发跨站攻击或者注入攻击。         考虑这样一个例子，假设我们有一个变量存
    • [Maven学习笔记二]Maven命令 bit1129 maven
      mvn compile compile编译命令将src/main/java和src/main/resources中的代码和配置文件编译到target/classes中，不会对src/test/java中的测试类进行编译 MVN编译使用 maven-resources-plugin:2.6:resources maven-compiler-plugin:2.5.1:compile &nbs
    • 【Java命令二】jhat bit1129 Java命令
      jhat用于分析使用jmap dump的文件，，可以将堆中的对象以html的形式显示出来，包括对象的数量，大小等等，并支持对象查询语言。 jhat默认开启监听端口7000的HTTP服务，jhat是Java Heap Analysis Tool的缩写 1. 用法： [hadoop@hadoop bin]$ jhat -help Usage: jhat [-stack <bool&g
    • JBoss 5.1.0 GA:Error installing to Instantiated: name=AttachmentStore state=Desc ronin47
      进到类似目录 server/default/conf/bootstrap，打开文件 profile.xml找到： Xml代码<bean    name="AttachmentStore"  class="org.jboss.system.server.profileservice.repository.AbstractAtta
    • 写给初学者的6条网页设计安全配色指南 brotherlamp UIui自学ui视频ui教程ui资料
      网页设计中最基本的原则之一是，不管你花多长时间创造一个华丽的设计，其最终的角色都是这场秀中真正的明星——内容的衬托     我仍然清楚地记得我最早的一次美术课，那时我还是一个小小的、对凡事都充满渴望的孩子，我摆放出一大堆漂亮的彩色颜料。我仍然记得当我第一次看到原色与另一种颜色混合变成第二种颜色时的那种兴奋，并且我想，既然两种颜色能创造出一种全新的美丽色彩，那所有颜色
    • 有一个数组，每次从中间随机取一个，然后放回去，当所有的元素都被取过，返回总共的取的次数。写一个函数实现。复杂度是什么。 bylijinnan java算法面试
      import java.util.Random; import java.util.Set; import java.util.TreeSet; /** * http://weibo.com/1915548291/z7HtOF4sx * #面试题#有一个数组，每次从中间随机取一个，然后放回去，当所有的元素都被取过，返回总共的取的次数。 * 写一个函数实现。复杂度是什么
    • struts2获得request、session、application方式 chiangfai application
      1、与Servlet API解耦的访问方式。 a.Struts2对HttpServletRequest、HttpSession、ServletContext进行了封装，构造了三个Map对象来替代这三种对象要获取这三个Map对象，使用ActionContext类。 ----->   package pro.action; import java.util.Map; imp
    • 改变python的默认语言设置 chenchao051 python
      import sys sys.getdefaultencoding()  可以测试出默认语言，要改变的话，需要在python lib的site-packages文件夹下新建： sitecustomize.py， 这个文件比较特殊，会在python启动时来加载，所以就可以在里面写上： import sys sys.setdefaultencoding('utf-8') &n
    • mysql导入数据load data infile用法 daizj mysql导入数据
      我们常常导入数据！mysql有一个高效导入方法，那就是load data infile 下面来看案例说明 基本语法： load data  [low_priority] [local] infile 'file_name txt' [replace | ignore] into table tbl_name [fields [terminated by't'] [OPTI
    • phpexcel导入excel表到数据库简单入门示例 dcj3sjt126com PHPExcel
      跟导出相对应的，同一个数据表，也是将phpexcel类放在class目录下，将Excel表格中的内容读取出来放到数据库中 <?php error_reporting(E_ALL); set_time_limit(0); ?> <html> <head> <meta http-equiv="Content-Type"
    • 22岁到72岁的男人对女人的要求 dcj3sjt126com
      22岁男人对女人的要求是：一，美丽，二，性感，三，有份具品味的职业，四，极有耐性，善解人意，五，该聪明的时候聪明，六，作小鸟依人状时尽量自然，七，怎样穿都好看，八，懂得适当地撒娇，九，虽作惊喜反应，但看起来自然，十，上了床就是个无条件荡妇。 32岁的男人对女人的要求，略作修定，是：一，入得厨房，进得睡房，二，不必服侍皇太后，三，不介意浪漫蜡烛配盒饭，四，听多过说，五，不再傻笑，六，懂得独
    • Spring和HIbernate对DDM设计的支持 e200702084 DAO设计模式springHibernate领域模型
      A：数据访问对象     DAO和资源库在领域驱动设计中都很重要。DAO是关系型数据库和应用之间的契约。它封装了Web应用中的数据库CRUD操作细节。另一方面，资源库是一个独立的抽象，它与DAO进行交互，并提供到领域模型的“业务接口”。    资源库使用领域的通用语言，处理所有必要的DAO，并使用领域理解的语言提供对领域模型的数据访问服务。
    • NoSql 数据库的特性比较 geeksun NoSQL
      Redis 是一个开源的使用ANSI C语言编写、支持网络、可基于内存亦可持久化的日志型、Key-Value数据库，并提供多种语言的API。目前由VMware主持开发工作。   1. 数据模型 作为Key-value型数据库，Redis也提供了键（Key）和值（Value）的映射关系。除了常规的数值或字符串，Redis的键值还可以是以下形式之一： Lists （列表） Sets
    • 使用 Nginx Upload Module 实现上传文件功能 hongtoushizi nginx
      转载自： http://www.tuicool.com/wx/aUrAzm   普通网站在实现文件上传功能的时候，一般是使用Python，Java等后端程序实现，比较麻烦。Nginx有一个Upload模块，可以非常简单的实现文件上传功能。此模块的原理是先把用户上传的文件保存到临时文件，然后在交由后台页面处理，并且把文件的原名，上传后的名称，文件类型，文件大小set到页面。下
    • spring-boot-web-ui及thymeleaf基本使用 jishiweili springthymeleaf
      视图控制层代码demo如下：   @Controller @RequestMapping("/") public class MessageController { private final MessageRepository messageRepository; @Autowired public MessageController(Mes
    • 数据源架构模式之活动记录 home198979 PHP架构活动记录数据映射
      hello!架构 一、概念 活动记录（Active Record）：一个对象，它包装数据库表或视图中某一行，封装数据库访问，并在这些数据上增加了领域逻辑。 对象既有数据又有行为。活动记录使用直截了当的方法，把数据访问逻辑置于领域对象中。   二、实现简单活动记录 活动记录在php许多框架中都有应用，如cakephp。 <?php /** * 行数据入口类 *
    • Linux Shell脚本之自动修改IP pda158 linuxcentosDebian脚本
      作为一名 Linux SA，日常运维中很多地方都会用到脚本，而服务器的ip一般采用静态ip或者MAC绑定，当然后者比较操作起来相对繁琐，而前者我们可以设置主机名、ip信息、网关等配置。修改成特定的主机名在维护和管理方面也比较方便。如下脚本用途为：修改ip和主机名等相关信息，可以根据实际需求修改，举一反三！ #!/bin/sh #auto Change ip netmask ga
    • 开发环境搭建 独浮云 eclipsejdktomcat
             最近在开发过程中，经常出现MyEclipse内存溢出等错误，需要重启的情况，好麻烦。对于一般的JAVA+TOMCAT项目开发，其实没有必要使用重量级的MyEclipse，使用eclipse就足够了。尤其是开发机器硬件配置一般的人。         &n
    • 操作日期和时间的工具类 vipbooks 工具类
         大家好啊，好久没有来这里发文章了，今天来逛逛，分享一篇刚写不久的操作日期和时间的工具类，希望对大家有所帮助。 /* * @(#)DataFormatUtils.java 2010-10-10 * * Copyright 2010 BianJing,All rights reserved. */ package test; impor
    按字母分类： ABCDEFGHIJKLMNOPQRSTUVWXYZ其他