原生实现js
原生 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();
