js 源码实现

JavaScript 源码实现基础框架

在 JavaScript 中实现源码级别的功能通常涉及模块化、设计模式和底层 API 调用。以下是一个基础框架的实现示例：

// 模块化封装
const MyLibrary = (function() {
  // 私有变量
  let privateVar = 'Initial Value';

  // 私有方法
  function privateMethod() {
    console.log('Private method called');
  }

  // 公有API
  return {
    publicMethod: function() {
      console.log('Public method called');
      privateMethod();
    },
    getVar: function() {
      return privateVar;
    },
    setVar: function(value) {
      privateVar = value;
    }
  };
})();

原型继承实现

JavaScript 使用原型继承模式，以下是类式继承的实现方式：

// 父类
function Animal(name) {
  this.name = name;
}

Animal.prototype.speak = function() {
  console.log(this.name + ' makes a noise.');
};

// 子类
function Dog(name) {
  Animal.call(this, name);
}

Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.constructor = Dog;

Dog.prototype.speak = function() {
  console.log(this.name + ' barks.');
};

现代 ES6 类实现

ES6 引入了 class 语法糖，使实现更清晰：

class Animal {
  constructor(name) {
    this.name = name;
  }

  speak() {
    console.log(`${this.name} makes a noise.`);
  }
}

class Dog extends Animal {
  speak() {
    console.log(`${this.name} barks.`);
  }
}

实用工具函数实现

常见工具函数的源码级实现示例：

// 深拷贝实现
function deepClone(obj) {
  if (obj === null || typeof obj !== 'object') {
    return obj;
  }

  let clone = Array.isArray(obj) ? [] : {};

  for (let key in obj) {
    if (obj.hasOwnProperty(key)) {
      clone[key] = deepClone(obj[key]);
    }
  }

  return clone;
}

// 防抖函数
function debounce(fn, delay) {
  let timer = null;
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}

异步处理实现

Promise 和 async/await 的底层模拟：

// 简易Promise实现
class MyPromise {
  constructor(executor) {
    this.state = 'pending';
    this.value = undefined;
    this.onFulfilledCallbacks = [];
    this.onRejectedCallbacks = [];

    const resolve = (value) => {
      if (this.state === 'pending') {
        this.state = 'fulfilled';
        this.value = value;
        this.onFulfilledCallbacks.forEach(fn => fn());
      }
    };

    const reject = (reason) => {
      if (this.state === 'pending') {
        this.state = 'rejected';
        this.value = reason;
        this.onRejectedCallbacks.forEach(fn => fn());
      }
    };

    try {
      executor(resolve, reject);
    } catch (err) {
      reject(err);
    }
  }

  then(onFulfilled, onRejected) {
    return new MyPromise((resolve, reject) => {
      const handleFulfilled = () => {
        try {
          typeof onFulfilled === 'function' 
            ? resolve(onFulfilled(this.value))
            : resolve(this.value);
        } catch (err) {
          reject(err);
        }
      };

      const handleRejected = () => {
        try {
          typeof onRejected === 'function'
            ? resolve(onRejected(this.value))
            : reject(this.value);
        } catch (err) {
          reject(err);
        }
      };

      if (this.state === 'fulfilled') {
        handleFulfilled();
      } else if (this.state === 'rejected') {
        handleRejected();
      } else {
        this.onFulfilledCallbacks.push(handleFulfilled);
        this.onRejectedCallbacks.push(handleRejected);
      }
    });
  }
}

DOM 操作库实现

简易 jQuery-like DOM 操作库的核心实现：

class DOMHelper {
  constructor(selector) {
    this.elements = Array.from(document.querySelectorAll(selector));
  }

  each(fn) {
    this.elements.forEach((el, index) => fn.call(el, el, index));
    return this;
  }

  addClass(className) {
    return this.each(el => el.classList.add(className));
  }

  removeClass(className) {
    return this.each(el => el.classList.remove(className));
  }

  on(event, handler) {
    return this.each(el => el.addEventListener(event, handler));
  }
}

function $(selector) {
  return new DOMHelper(selector);
}

这些实现展示了 JavaScript 在不同场景下的源码级解决方案，涵盖了从基础模式到现代语法的各种技术。