前端模塊化演進(jìn)歷程和各種實(shí)現(xiàn)方式
更新時(shí)間：2025年12月13日 09:51:21 作者：jayaccc
前端模塊化是現(xiàn)代Web開發(fā)中不可或缺的一部分,它允許開發(fā)者將復(fù)雜的應(yīng)用程序分解為多個(gè)獨(dú)立的模塊,從而提高代碼的可讀性、可維護(hù)性和復(fù)用性,這篇文章主要介紹了前端模塊化演進(jìn)歷程和各種實(shí)現(xiàn)方式的相關(guān)資料,需要的朋友可以參考下
前言
模塊化是現(xiàn)代前端開發(fā)的基礎(chǔ)，它讓我們能夠?qū)?fù)雜的應(yīng)用程序拆分成小的、可管理的、獨(dú)立的模塊。本文將詳細(xì)介紹前端模塊化的發(fā)展歷程和各種實(shí)現(xiàn)方式。
模塊化概念
什么是模塊化？
模塊化是一種將復(fù)雜系統(tǒng)分解為可獨(dú)立開發(fā)、測(cè)試、維護(hù)的模塊（文件）的軟件設(shè)計(jì)方法。每個(gè)模塊都有自己特定的功能和職責(zé)，模塊之間通過(guò)特定的接口進(jìn)行通信。
為什么需要模塊化？
- 代碼復(fù)用 - 一個(gè)模塊可以在多個(gè)地方使用
- 提高可維護(hù)性 - 每個(gè)模塊獨(dú)立，修改一個(gè)模塊不會(huì)影響其他模塊
- 命名空間隔離 - 避免全局變量污染和命名沖突
- 依賴管理 - 明確模塊間的依賴關(guān)系
- 團(tuán)隊(duì)協(xié)作 - 不同開發(fā)者可以并行開發(fā)不同模塊
- 按需加載 - 只加載需要的模塊，提高性能
模塊化的發(fā)展歷程
1. 全局function模式（最早期）
最簡(jiǎn)單的模塊化方式，直接在全局作用域定義函數(shù)。
// math.js
function add(a, b) {
return a + b;
}
function multiply(a, b) {
return a * b;
}
// 使用
console.log(add(2, 3)); // 5
優(yōu)點(diǎn)：
- 實(shí)現(xiàn)簡(jiǎn)單
- 易于理解
缺點(diǎn)：
- 全局命名污染
- 命名沖突風(fēng)險(xiǎn)
- 無(wú)法隱藏私有變量
- 依賴關(guān)系不明確
- 加載順序敏感
適用場(chǎng)景： 小型項(xiàng)目或原型開發(fā)
2. namespace模式（命名空間模式）
使用對(duì)象來(lái)組織代碼，將函數(shù)作為對(duì)象的方法。
// math.js
const MathModule = {
add(a, b) {
return a + b;
},
multiply(a, b) {
return a * b;
},
// 私有變量（約定俗成，非真正私有）
_privateVar: '私有變量'
};
// 使用
console.log(MathModule.add(2, 3)); // 5
console.log(MathModule.multiply(2, 3)); // 6
優(yōu)點(diǎn)：
- 減少了全局變量數(shù)量
- 邏輯更清晰
- 可以通過(guò)對(duì)象組織相關(guān)功能
缺點(diǎn)：
- 仍然存在全局變量
- 沒(méi)有私有成員
- 依賴關(guān)系不明確
- 容易被外部修改
適用場(chǎng)景： 中小型項(xiàng)目，不需要真正私有化的場(chǎng)景
3. IIFE模式（立即執(zhí)行函數(shù)表達(dá)式）
使用函數(shù)作用域創(chuàng)建私有作用域。
// math.js
const MathModule = (function() {
// 私有變量
let privateVar = '私有變量';
function privateFunction() {
console.log('私有函數(shù)');
}
return {
add(a, b) {
return a + b;
},
multiply(a, b) {
return a * b;
},
// 暴露私有成員（如果需要）
getPrivateVar() {
return privateVar;
}
};
})();
// 使用
console.log(MathModule.add(2, 3)); // 5
console.log(MathModule.getPrivateVar()); // 私有變量
優(yōu)點(diǎn)：
- 真正的私有變量
- 避免全局污染
- 私有函數(shù)和變量外部無(wú)法訪問(wèn)
缺點(diǎn)：
- 仍然需要全局變量
- 依賴關(guān)系管理困難
- 沒(méi)有標(biāo)準(zhǔn)化
- 模塊加載順序依賴
適用場(chǎng)景： 需要私有變量和封裝功能的場(chǎng)景
4. IIFE增強(qiáng)模式（引入依賴）
在IIFE模式的基礎(chǔ)上，通過(guò)參數(shù)傳遞依賴。
// math.js
const MathModule = (function(window, $) {
// 私有變量和函數(shù)
let privateVar = '私有變量';
function privateFunction() {
console.log('私有函數(shù)');
}
function add(a, b) {
return a + b;
}
function multiply(a, b) {
return a * b;
}
// 通過(guò)return暴露API
return {
add,
multiply
};
})(window, jQuery); // 傳入依賴
// utils.js
const Utils = (function(window) {
function formatDate(date) {
return new Date(date).toLocaleDateString();
}
function capitalize(str) {
return str.charAt(0).toUpperCase() + str.slice(1);
}
return {
formatDate,
capitalize
};
})(window);
優(yōu)點(diǎn)：
- 明確聲明依賴
- 私有變量保護(hù)
- 可以傳入外部依賴
缺點(diǎn)：
- 需要手動(dòng)管理依賴順序
- 沒(méi)有加載機(jī)制
- 仍然依賴全局變量
適用場(chǎng)景： 有明確依賴關(guān)系的模塊化項(xiàng)目
模塊化規(guī)范（CommonJS、AMD、CMD、UMD）
5. CommonJS
Node.js 使用的模塊化規(guī)范，每個(gè)文件是一個(gè)模塊。
// math.js
// 導(dǎo)出單個(gè)值
module.exports = function(a, b) {
return a + b;
};
// 或者導(dǎo)出對(duì)象
// exports.add = (a, b) => a + b;
// exports.multiply = (a, b) => a * b;
// 或者
// const math = {
// add: (a, b) => a + b,
// multiply: (a, b) => a * b
// };
// module.exports = math;
// 使用
const add = require('./math');
console.log(add(2, 3)); // 5
// 或者
const math = require('./math');
console.log(math.add(2, 3)); // 5
特點(diǎn)：
- 同步加載
- 運(yùn)行時(shí)加載
- 緩存機(jī)制（同一模塊只加載一次）
require可以動(dòng)態(tài)require
優(yōu)點(diǎn)：
- 簡(jiǎn)單易用
- 社區(qū)支持好
- Node.js原生支持
- 動(dòng)態(tài)加載
缺點(diǎn)：
- 瀏覽器端需要打包工具（因?yàn)橥剑?/li>
- 無(wú)法并行加載多個(gè)模塊
適用場(chǎng)景： Node.js服務(wù)端開發(fā)
6. AMD（Asynchronous Module Definition）
異步模塊定義，專為瀏覽器設(shè)計(jì)。
// math.js
define(function() {
function add(a, b) {
return a + b;
}
function multiply(a, b) {
return a * b;
}
return {
add,
multiply
};
});
// 或者帶依賴的模塊
define(['dependency'], function(dep) {
function doSomething() {
dep.doSomething();
}
return {
doSomething
};
});
// 使用
require(['math'], function(math) {
console.log(math.add(2, 3)); // 5
});
// 或者加載多個(gè)模塊
require(['math', 'utils'], function(math, utils) {
console.log(math.add(2, 3));
console.log(utils.formatDate(new Date()));
});
特點(diǎn)：
- 異步加載
- 提前執(zhí)行（模塊加載完成后立即執(zhí)行）
- 依賴前置（所有依賴在模塊定義時(shí)聲明）
優(yōu)點(diǎn)：
- 適合瀏覽器環(huán)境
- 并行加載多個(gè)模塊
- 依賴管理明確
缺點(diǎn)：
- 學(xué)習(xí)曲線陡峭
- 代碼不夠直觀
- 不能動(dòng)態(tài)加載
適用場(chǎng)景： 瀏覽器端大型應(yīng)用
實(shí)現(xiàn)庫(kù)： RequireJS、curl.js
7. CMD（Common Module Definition）
通用模塊定義，Sea.js 推廣的規(guī)范。
// math.js
define(function(require, exports, module) {
function add(a, b) {
return a + b;
}
function multiply(a, b) {
return a * b;
}
// 導(dǎo)出
exports.add = add;
exports.multiply = multiply;
});
// 或者
module.exports = {
add: (a, b) => a + b,
multiply: (a, b) => a * b
};
// 使用
seajs.use(['math'], function(math) {
console.log(math.add(2, 3)); // 5
});
// 動(dòng)態(tài)require
define(function(require, exports, module) {
const math = require('./math');
const result = math.add(2, 3);
});
特點(diǎn)：
- 異步加載
- 延遲執(zhí)行（模塊使用時(shí)才執(zhí)行）
- 依賴就近（就近聲明依賴）
優(yōu)點(diǎn)：
- 依賴聲明靈活
- 支持動(dòng)態(tài)require
- 性能相對(duì)較好
缺點(diǎn)：
- 社區(qū)支持不如AMD
- Sea.js已停止維護(hù)
適用場(chǎng)景： 早期瀏覽器端模塊化
8. AMD與CMD的區(qū)別
| 特性 | AMD | CMD |
|---|---|---|
| 依賴聲明 | 依賴前置，定義時(shí)聲明所有依賴 | 依賴就近，使用時(shí)才require |
| 模塊執(zhí)行時(shí)機(jī) | 提前執(zhí)行（加載完依賴立即執(zhí)行） | 延遲執(zhí)行（使用時(shí)才執(zhí)行） |
| API風(fēng)格 | define([‘dep’], function(dep) {}) | define(function(require, exports) {}) |
| 動(dòng)態(tài)加載 | 不支持動(dòng)態(tài)加載 | 支持動(dòng)態(tài)加載 |
| 性能 | 依賴前置可能影響初始加載速度 | 依賴就近，按需加載 |
| 代碼可讀性 | 依賴關(guān)系明確，但代碼不夠直觀 | 代碼更自然，但依賴關(guān)系不夠直觀 |
9. UMD（Universal Module Definition）
通用模塊定義，同時(shí)支持多種模塊規(guī)范。
// math.js
(function(root, factory) {
if (typeof define === 'function' && define.amd) {
// AMD
define([], factory);
} else if (typeof module === 'object' && module.exports) {
// CommonJS
module.exports = factory();
} else {
// 瀏覽器全局變量
root.MathModule = factory();
}
}(typeof self !== 'undefined' ? self : this, function() {
// 模塊實(shí)現(xiàn)
function add(a, b) {
return a + b;
}
function multiply(a, b) {
return a * b;
}
return {
add,
multiply
};
}));
// 使用
// AMD: require(['math'], function(math) {})
// CommonJS: const math = require('./math');
// 全局: MathModule.add(2, 3)
優(yōu)點(diǎn)：
- 兼容多種模塊規(guī)范
- 可以同時(shí)運(yùn)行在瀏覽器和Node.js
- 庫(kù)和插件的通用解決方案
缺點(diǎn)：
- 代碼相對(duì)復(fù)雜
- 體積較大
適用場(chǎng)景： 需要同時(shí)支持瀏覽器和Node.js的庫(kù)
現(xiàn)代模塊化（ES Module）
10. ES Module（ESM）
ECMAScript 6 引入的官方模塊系統(tǒng)。
導(dǎo)出方式
// 1. 命名導(dǎo)出（多個(gè)）
export const PI = 3.14159;
export function add(a, b) {
return a + b;
}
export function multiply(a, b) {
return a * b;
}
// 或者先定義再導(dǎo)出
const subtract = (a, b) => a - b;
export { subtract };
// 2. 默認(rèn)導(dǎo)出（一個(gè)）
export default function(a, b) {
return a + b;
}
// 3. 命名導(dǎo)出時(shí)重命名
export { subtract as minus };
導(dǎo)入方式
// 1. 導(dǎo)入命名導(dǎo)出
import { add, multiply, PI } from './math.js';
console.log(add(2, 3)); // 5
// 2. 導(dǎo)入默認(rèn)導(dǎo)出
import mathFunc from './math.js';
console.log(mathFunc(2, 3)); // 5
// 3. 混合導(dǎo)入
import mathFunc, { add, multiply } from './math.js';
// 4. 重命名導(dǎo)入
import { add as sum } from './math.js';
console.log(sum(2, 3)); // 5
// 5. 導(dǎo)入所有
import * as math from './math.js';
console.log(math.add(2, 3));
console.log(math.PI);
動(dòng)態(tài)導(dǎo)入
// 動(dòng)態(tài)導(dǎo)入（返回Promise）
async function loadMathModule() {
const mathModule = await import('./math.js');
console.log(mathModule.add(2, 3));
}
// 按需加載
if (condition) {
const { add } = await import('./math.js');
console.log(add(2, 3));
}
實(shí)際項(xiàng)目結(jié)構(gòu)示例
// utils/format.js
export function formatDate(date) {
return new Date(date).toLocaleDateString();
}
export function capitalize(str) {
return str.charAt(0).toUpperCase() + str.slice(1);
}
// utils/index.js
export { formatDate } from './format.js';
// 或者
export * from './format.js';
// math/index.js
export { add, multiply } from './math.js';
// main.js
import { formatDate } from './utils/index.js';
import { add } from './math/index.js';
import api from './api.js'; // 默認(rèn)導(dǎo)出
console.log(formatDate(new Date()));
console.log(add(2, 3));
ES Module的特點(diǎn)：
- 靜態(tài)導(dǎo)入導(dǎo)出 - 編譯時(shí)確定，優(yōu)化打包
- 導(dǎo)入導(dǎo)出的是引用 - 只讀綁定
- 模塊作用域 - 每個(gè)模塊都有獨(dú)立的作用域
- 緩存機(jī)制 - 同一個(gè)模塊只執(zhí)行一次
- 異步加載 - 不會(huì)阻塞頁(yè)面渲染
- 嚴(yán)格模式 - 自動(dòng)啟用嚴(yán)格模式
優(yōu)點(diǎn)：
- 官方標(biāo)準(zhǔn)
- 語(yǔ)法簡(jiǎn)潔清晰
- 靜態(tài)分析友好（tree shaking）
- 瀏覽器原生支持
- 導(dǎo)出值不可變（只讀綁定）
缺點(diǎn)：
- 瀏覽器兼容性（需要轉(zhuǎn)譯或使用原生支持）
- 學(xué)習(xí)成本（對(duì)初學(xué)者）
適用場(chǎng)景： 現(xiàn)代前端項(xiàng)目的首選
11. ESM與CommonJS的區(qū)別
| 特性 | ES Module | CommonJS |
|---|---|---|
| 導(dǎo)入導(dǎo)出時(shí)機(jī) | 編譯時(shí)靜態(tài)分析 | 運(yùn)行時(shí)動(dòng)態(tài)加載 |
| 導(dǎo)入導(dǎo)出值 | 導(dǎo)入的是引用（只讀） | 導(dǎo)入的是值的拷貝 |
| 動(dòng)態(tài)性 | 靜態(tài)，不能動(dòng)態(tài)條件導(dǎo)入 | 動(dòng)態(tài)，可以使用變量作為路徑 |
| this指向 | undefined | module.exports |
| 循環(huán)依賴 | 可以，但需要注意 | 支持，但可能有坑 |
| 加載方式 | 異步 | 同步（Node.js） |
| 緩存 | 模塊實(shí)例緩存 | 模塊緩存 |
| 循環(huán)依賴處理 | 較好 | 需要小心 |
| 打包優(yōu)化 | 支持tree shaking | 困難 |
CommonJS代碼示例：
// commonjs模塊
let count = 0;
function increment() {
count++;
console.log(count);
}
module.exports = {
count,
increment
};
// 使用
const { count, increment } = require('./module');
increment(); // 1
increment(); // 2
console.log(count); // 0（值拷貝，不會(huì)變）
ES Module代碼示例：
// esm模塊
let count = 0;
function increment() {
count++;
console.log(count);
}
export { count, increment };
// 使用
import { count, increment } from './module.js';
increment(); // 1
increment(); // 2
console.log(count); // 0（只讀引用，不會(huì)變）
模塊打包工具
由于ES Module在舊瀏覽器中不支持，我們需要使用打包工具。
Webpack
// webpack.config.js
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader'
}
}
]
}
};
Rollup
// rollup.config.js
import resolve from '@rollup/plugin-node-resolve';
import commonjs from '@rollup/plugin-commonjs';
export default {
input: 'src/index.js',
output: {
file: 'dist/bundle.js',
format: 'esm'
},
plugins: [resolve(), commonjs()]
};
Vite
使用原生ES Module，無(wú)需打包即可開發(fā)。
// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
export default defineConfig({
plugins: [vue()],
build: {
rollupOptions: {
output: {
manualChunks: {
vendor: ['vue', 'react'],
utils: ['lodash', 'axios']
}
}
}
}
});
現(xiàn)代前端項(xiàng)目中的模塊化最佳實(shí)踐
1. 項(xiàng)目結(jié)構(gòu)示例
src/ ├── components/ # 組件模塊 │ ├── Button/ │ │ ├── index.js │ │ ├── Button.js │ │ ├── Button.css │ │ └── test.js │ └── Modal/ ├── pages/ # 頁(yè)面模塊 │ ├── Home/ │ └── About/ ├── utils/ # 工具模塊 │ ├── format.js │ ├── validate.js │ └── index.js # 統(tǒng)一導(dǎo)出 ├── services/ # API模塊 │ ├── api.js │ └── http.js ├── store/ # 狀態(tài)管理 │ ├── index.js │ ├── actions.js │ └── mutations.js ├── assets/ # 靜態(tài)資源 ├── styles/ # 樣式 └── index.js # 入口文件
2. 導(dǎo)出聚合（index.js）
// utils/index.js
export { formatDate } from './format.js';
export { validateEmail } from './validate.js';
export { debounce, throttle } from './helpers.js';
// 或者使用 * as
export * from './format.js';
export * from './validate.js';
// 使用
import { formatDate, validateEmail, debounce } from '@/utils';
3. Barrel模式
// components/index.js
export { default as Button } from './Button';
export { default as Modal } from './Modal';
export { default as Input } from './Input';
// 使用
import { Button, Modal } from '@/components';
4. 命名規(guī)范
// ? 推薦
export const API_BASE_URL = 'https://api.example.com';
export function fetchData() { }
// ? 不推薦
export const baseUrl = 'https://api.example.com';
export function getData() { }
5. 循環(huán)依賴處理
// a.js
import { funcB } from './b.js';
export function funcA() {
funcB();
}
// b.js
import { funcA } from './a.js';
export function funcB() {
// 如果這里調(diào)用funcA，可能會(huì)導(dǎo)致問(wèn)題
// 需要重新設(shè)計(jì)依賴關(guān)系
}
解決方案：
- 重新設(shè)計(jì)模塊結(jié)構(gòu)
- 使用依賴注入
- 將共享邏輯提取到獨(dú)立模塊
模塊懶加載
React中的懶加載
import { lazy, Suspense } from 'react';
const LazyComponent = lazy(() => import('./LazyComponent'));
function App() {
return (
<Suspense fallback={<div>加載中...</div>}>
<LazyComponent />
</Suspense>
);
}
Vue中的懶加載
const routes = [
{
path: '/about',
name: 'About',
component: () => import('../views/About.vue')
}
];
總結(jié)
| 模塊化方式 | 時(shí)代 | 特點(diǎn) | 適用場(chǎng)景 |
|---|---|---|---|
| 全局function | 早期 | 簡(jiǎn)單，但污染全局 | 原型開發(fā) |
| namespace | 過(guò)渡期 | 邏輯清晰，有限封裝 | 小型項(xiàng)目 |
| IIFE | 過(guò)渡期 | 私有作用域 | 中小型項(xiàng)目 |
| CommonJS | Node.js時(shí)代 | 同步，運(yùn)行時(shí)加載 | 服務(wù)端開發(fā) |
| AMD | 瀏覽器早期 | 異步，依賴前置 | 大型瀏覽器應(yīng)用 |
| CMD | 國(guó)產(chǎn)方案 | 異步，依賴就近 | 早期前端 |
| UMD | 兼容方案 | 多規(guī)范兼容 | 通用庫(kù) |
| ES Module | 現(xiàn)代標(biāo)準(zhǔn) | 靜態(tài)，編譯時(shí)優(yōu)化 | 現(xiàn)代前端項(xiàng)目 |
最佳實(shí)踐建議
- 新項(xiàng)目 - 優(yōu)先使用 ES Module（ES6模塊）
- 兼容舊瀏覽器 - 使用 Webpack/Rollup 打包
- 庫(kù)開發(fā) - 使用 UMD 格式，提高兼容性
- Node.js - 使用 CommonJS（內(nèi)置支持）
- 大型應(yīng)用 - 使用動(dòng)態(tài)導(dǎo)入實(shí)現(xiàn)代碼分割
- 團(tuán)隊(duì)協(xié)作 - 建立清晰的模塊結(jié)構(gòu)和命名規(guī)范
模塊化是前端工程化的基礎(chǔ)，理解各種模塊化方案的特點(diǎn)和適用場(chǎng)景，能夠幫助我們寫出更優(yōu)雅、更易維護(hù)的代碼。隨著 JavaScript 的不斷發(fā)展，ES Module 已經(jīng)成為現(xiàn)代前端開發(fā)的標(biāo)準(zhǔn)，但我們?nèi)匀恍枰私馄渌K化方案，以便在不同的項(xiàng)目中做出合適的選擇。
到此這篇關(guān)于前端模塊化演進(jìn)歷程和各種實(shí)現(xiàn)方式的文章就介紹到這了,更多相關(guān)前端模塊化實(shí)現(xiàn)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
層的移動(dòng)本來(lái)很簡(jiǎn)單，用jquery插件或者自己寫一個(gè)也不難，但是最近一個(gè)ipad項(xiàng)目里，發(fā)現(xiàn)用手移動(dòng)div會(huì)感覺(jué)很卡，體驗(yàn)很差（可能是ipad的配置根不上pc）。2010-11-11
JavaScript?split()方法定義及更多實(shí)例
這篇文章主要給大家介紹了關(guān)于JavaScript?split()方法定義及更多實(shí)例的相關(guān)資料,js里的split()方法大家都知道用于將字符串轉(zhuǎn)化為字符串?dāng)?shù)組,文中通過(guò)代碼實(shí)例介紹的非常詳細(xì),需要的朋友可以參考下2024-03-03
js使用visibilitychange處理頁(yè)面關(guān)閉事件
本文主要介紹了js使用visibilitychange處理頁(yè)面關(guān)閉事件，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2022-06-06
JavaScript獲取鼠標(biāo)移動(dòng)時(shí)的坐標(biāo)(兼容IE8、chome谷歌、Firefox)
這篇文章主要介紹了JavaScript獲取鼠標(biāo)移動(dòng)時(shí)的坐標(biāo)(兼容IE8、chome谷歌、Firefox瀏覽器),需要的朋友可以參考下2014-09-09
TypeScript 運(yùn)行時(shí)類型檢查補(bǔ)充工具
這篇文章主要介紹了TypeScript 運(yùn)行時(shí)類型檢查補(bǔ)充工具，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-09-09
這篇文章主要介紹了JS一次前端面試經(jīng)歷,結(jié)合具體案例形式分析了JS前端面試過(guò)程中遇到的問(wèn)題以及響應(yīng)的注意事項(xiàng),需要的朋友可以參考下2020-03-03
這篇文章主要介紹了Javascript confirm多種使用方法解析,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-09-09
xml分頁(yè)+ajax請(qǐng)求數(shù)據(jù)源+dom取結(jié)果實(shí)例代碼
最近做的一個(gè)項(xiàng)目里的某個(gè)小功能,主要是為了方便選擇數(shù)據(jù) 演示地址:由于有惡意程序，所以去掉地址2008-10-10
使用JavaScript實(shí)現(xiàn)頁(yè)面局部更新的方法總結(jié)
在JavaScript中,Ajax（Asynchronous JavaScript and XML）是一種用于在后臺(tái)與服務(wù)器進(jìn)行異步通信的技術(shù),本文給大家介紹了使用JavaScript實(shí)現(xiàn)頁(yè)面局部更新的三種方法,文中通過(guò)代碼示例給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12
Javascript讀取上傳文件內(nèi)容/類型/字節(jié)數(shù)
這篇文章主要為大家詳細(xì)介紹了Javascript讀取上傳文件內(nèi)容/類型/字節(jié)數(shù)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-04-04