当前位置：首页 > JavaScript

原生实现js

2026-01-31 16:51:06JavaScript

原生 JavaScript 实现

原生 JavaScript 指不依赖任何第三方库或框架（如 jQuery、React 等），直接使用 JavaScript 语言本身的功能实现需求。以下是常见场景的原生实现方法：

DOM 操作

通过原生 API 获取和操作 DOM 元素：

// 获取元素
const element = document.getElementById('id');
const elements = document.querySelectorAll('.class');

// 修改内容
element.textContent = '新内容';
element.innerHTML = '<strong>加粗文本</strong>';

// 修改样式
element.style.color = 'red';
element.classList.add('active');

事件监听

绑定和触发事件：

// 添加点击事件
element.addEventListener('click', function(event) {
  console.log('元素被点击');
});

// 触发事件
const event = new Event('click');
element.dispatchEvent(event);

AJAX 请求

使用 XMLHttpRequest 或 fetch 发送请求：

// XMLHttpRequest
const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data');
xhr.onload = function() {
  console.log(xhr.responseText);
};
xhr.send();

// Fetch API
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data));

数据存储

使用 localStorage 或 sessionStorage：

// 存储数据
localStorage.setItem('key', 'value');

// 读取数据
const value = localStorage.getItem('key');

// 删除数据
localStorage.removeItem('key');

定时器

设置延时或循环执行：

// 延时执行
setTimeout(() => {
  console.log('延时 1 秒执行');
}, 1000);

// 循环执行
const intervalId = setInterval(() => {
  console.log('每秒执行一次');
}, 1000);

// 清除定时器
clearInterval(intervalId);

数组操作

常用数组方法：

const array = [1, 2, 3];

// 遍历
array.forEach(item => console.log(item));

// 映射新数组
const newArray = array.map(item => item * 2);

// 过滤
const filteredArray = array.filter(item => item > 1);

// 查找
const foundItem = array.find(item => item === 2);

对象操作

对象属性和方法：

const obj = { a: 1, b: 2 };

// 获取键值
const keys = Object.keys(obj);
const values = Object.values(obj);

// 合并对象
const newObj = Object.assign({}, obj, { c: 3 });

// 解构赋值
const { a, b } = obj;

模块化

使用 ES6 模块：

// module.js
export const name = '模块';
export function greet() {
  console.log('你好');
}

// main.js
import { name, greet } from './module.js';
greet();

原生实现js