使用typescript+webpack構(gòu)建一個(gè)js庫的示例詳解
記錄使用typescript配合webpack打包一個(gè)javascript library的配置過程.
目標(biāo)是構(gòu)建一個(gè)可以同時(shí)支持CommonJs, esm, amd這個(gè)幾個(gè)js模塊系統(tǒng)的javascript庫, 然后還有一個(gè)單獨(dú)打包出一個(gè)css的樣式文件的需求.
為此以構(gòu)建一個(gè)名為loaf的javascript庫為例; 首先新建項(xiàng)目文件目錄loaf, 并進(jìn)入此文件目錄執(zhí)行npm init命令, 然后按照控制臺(tái)的提示輸入對(duì)應(yīng)的信息, 完成后就會(huì)在loaf目錄下得到一個(gè)package.json文件
然后使用npm i命令安裝所需的依賴
npm i -D webpack webpack-cli typescript babel-loader @babel/core @babel/preset-env @babel/preset-typescript ts-node @types/node @types/webpack mini-css-extract-plugin css-minimizer-webpack-plugin less less-loader terser-webpack-plugin
依賴說明
- webpack webpack-cli: webpack打包工具和webpack命令行接口
- typescript: 用于支持typescript語言
- babel-loader @babel/core @babel/preset-env @babel/preset-typescript: babel相關(guān)的東西, 主要是需要babel-loader將編寫的typescript代碼轉(zhuǎn)譯成es5或es6已獲得更好的瀏覽器兼容性
- ts-node @types/node @types/webpack: 安裝這幾個(gè)包是為了能用typescript編寫webpack配置文件(webpack.config.ts)
- mini-css-extract-plugin less less-loader: 編譯提取less文件到單獨(dú)的css文件的相關(guān)依賴
- css-minimizer-webpack-plugin terser-webpack-plugin: 用于最小化js和css文件尺寸的webpack插件
入口文件
通常使用index.ts作為入口, 并將其放到src目錄下, 由于有輸出樣式文件的需求, 所以還要新建styles/index.less
mkdir src && touch src/index.ts mkdir src/styles && touch src/styles/index.less
tsconfig配置
新建tsconfig.json文件
touch tsconfig.json
填入以下配置(部分選項(xiàng)配有注釋):
{
"compilerOptions": {
"outDir": "dist/lib",
"sourceMap": false,
"noImplicitAny": true,
"module": "commonjs",
// 開啟這個(gè)選項(xiàng), 可以讓你直接通過`import`的方式來引用commonjs模塊
// 這樣你的代碼庫中就可以統(tǒng)一的使用import導(dǎo)入依賴了, 而不需要另外再使用require導(dǎo)入commonjs模塊
"esModuleInterop": true,
// 是否允許合成默認(rèn)導(dǎo)入
// 開啟后, 依賴的模塊如果沒有導(dǎo)出默認(rèn)的模塊
// 那么typescript會(huì)幫你給該模塊自動(dòng)合成一個(gè)默認(rèn)導(dǎo)出讓你可以通過默認(rèn)導(dǎo)入的方式引用該模塊
"allowSyntheticDefaultImports": true,
// 是否生成`.d.ts`的類型聲明文件
"declaration": true,
// 輸出的目標(biāo)js版本, 這里用es6, 然后配和babel進(jìn)行轉(zhuǎn)譯才以獲得良好的瀏覽器兼容
"target": "es6",
"allowJs": true,
"moduleResolution": "node",
"lib": ["es2015", "dom"],
"declarationMap": true,
// 啟用嚴(yán)格的null檢查
"strictNullChecks": true,
// 啟用嚴(yán)格的屬性初始化檢查
// 啟用后類屬性必須顯示標(biāo)注為可空或賦一個(gè)非空的初始值
"strictPropertyInitialization": true
},
"exclude": ["node_modules"],
"include": ["src/**/*"]
}webpack配置文件
創(chuàng)建webpack.config.ts
touch webpack.config.ts
webpack.config.ts
import path from "path";
import { Configuration, Entry } from "webpack";
import MiniCssExtractPlugin from 'mini-css-extract-plugin';
import CssMinimizer from 'css-minimizer-webpack-plugin';
import TerserPlugin from 'terser-webpack-plugin'
const isProd = process.env.NODE_ENV === 'production';
/**
* 這里用到了webpack的[Multiple file types per entry](https://webpack.js.org/guides/entry-advanced/)特性
* 注意`.less`入口文件必須放在`.ts`文件前 */
const entryFiles: string[] = ['./src/styles/index.less', './src/index.ts'];
const entry: Entry = {
index: entryFiles,
'index.min': entryFiles,
};
const config: Configuration = {
entry,
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({ test: /.min.js$/ }),
new CssMinimizer({
test: /.min.css$/,
}),
],
},
module: {
rules: [
{
test: /.ts$/,
loader: 'babel-loader',
exclude: /node_modules/,
options: {
presets: ['@babel/env', '@babel/typescript'],
},
},
{
test: /.less$/,
use: [
isProd ? MiniCssExtractPlugin.loader : 'style-loader',
{
loader: 'css-loader',
},
'postcss-loader',
'less-loader',
],
},
],
},
output: {
path: path.resolve(__dirname, 'dist/umd'),
library: {
type: 'umd',
name: {
amd: 'loaf',
commonjs: 'loaf',
root: 'loaf',
},
},
},
resolve: {
extensions: ['.ts', '.less'],
},
devtool: 'source-map',
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
}),
],
};
export default config;webpack入口文件配置
...
const isProd = process.env.NODE_ENV === 'production';
/**
* 這里用到了webpack的[Multiple file types per entry](https://webpack.js.org/guides/entry-advanced/)特性
* 注意`.less`入口文件必須放在`.ts`文件前 */
const entryFiles: string[] = ['./src/styles/index.less', './src/index.ts'];
const entry: Entry = {
index: entryFiles,
'index.min': entryFiles,
};
const config: Configuration = {
entry,
...
}
...在上面的webpack.config.json中，我們配置了兩個(gè)入口分別是index和index.min，不難看出，多出的一個(gè)index.min入口是為了經(jīng)過壓縮后js和css文件，在生產(chǎn)環(huán)境使用一般都會(huì)使用.min.js結(jié)尾的文件以減少網(wǎng)絡(luò)傳輸時(shí)的尺寸; 實(shí)現(xiàn)這個(gè)還需要結(jié)合optimization相關(guān)配置, 如下:
optimization: {
minimize: true,
minimizer: [
new TerserPlugin({ test: /.min.js$/ }),
new CssMinimizer({
test: /.min.css$/,
}),
],
},另外，index和index.min的值都是相同的entryFiles對(duì)象，這個(gè)對(duì)象是一個(gè)字符串?dāng)?shù)組，里面放的就是我們的入口文件相對(duì)路徑，這里一定要注意把./src/styles/index.less置于./src/index.ts之前。
webpack為typescript和less文件配置各自的loader
配置完入口后, 就需要為typescript和less代碼配置各自的loader
module: {
rules: [
{
test: /.ts$/,
loader: 'babel-loader',
exclude: /node_modules/,
options: {
presets: ['@babel/env', '@babel/typescript'],
},
},
{
test: /.less$/,
use: [
isProd ? MiniCssExtractPlugin.loader : 'style-loader',
{
loader: 'css-loader',
},
'postcss-loader',
'less-loader',
],
},
],
},mini-css-extract-plugin less less-loader: 編譯提取less文件到單獨(dú)的css文件的相關(guān)依賴
上面的配置為.ts結(jié)尾的文件配置了babel-loader; 為.less結(jié)尾的文件配置一串loader, 使用了use, use中的loader的執(zhí)行順序是從后往前的, 上面less的配置就是告訴webpack遇到less文件時(shí), 一次用less-loader->postcss-loader->css-loader->生產(chǎn)環(huán)境用 MiniCssExtractPlugin.loader() 否則用 style-loader;
MiniCssExtractPlugin.loader使用前要先在plugins進(jìn)行初始化
...
const config = {
...
plugins: [
new MiniCssExtractPlugin({
filename: '[name].css',
}),
],
...
}
...webpack的output配置
...
const config = {
...
output: {
path: path.resolve(__dirname, 'dist/umd'),
library: {
type: 'umd',
name: {
amd: 'loaf',
commonjs: 'loaf',
root: 'loaf',
},
},
},
...
}
...這里配置webpack以u(píng)md的方式輸出到相對(duì)目錄dist/umd目錄中, umd是Universal Module Definition(通用模塊定義)的縮寫, umd格式輸出library允許用戶通過commonjs, AMD, <script src="...">的方式對(duì)library進(jìn)行引用config.library.name可以為不同的模塊系統(tǒng)配置不同的導(dǎo)出模塊名供客戶端來進(jìn)行引用; 由于這里的導(dǎo)出模塊名都是loaf, 所以也可以直接config.library.name設(shè)置成loaf.
運(yùn)行webpack進(jìn)行打包
現(xiàn)在回到最開始通過npm init生成的package.json文件, 在修改其內(nèi)容如下
{
"name": "loaf",
"version": "1.0.0",
"description": "A demo shows how to create & build a javascript library with webpack & typescript",
"main": "index.js",
"scripts": {
"build:umd": "webpack -c webpack.config.ts --node-env production --env NODE_ENV=production",
"test": "npm run test"
},
"keywords": [
"demo"
],
"author": "laggage",
"license": "MIT",
"devDependencies": {
"@babel/core": "^7.18.6",
"@babel/preset-env": "^7.18.6",
"@babel/preset-typescript": "^7.18.6",
"@types/node": "^18.0.0",
"@types/webpack": "^5.28.0",
"babel-loader": "^8.2.5",
"css-loader": "^6.7.1",
"css-minimizer-webpack-plugin": "^4.0.0",
"less": "^4.1.3",
"less-loader": "^11.0.0",
"mini-css-extract-plugin": "^2.6.1",
"postcss-loader": "^7.0.0",
"style-loader": "^3.3.1",
"terser-webpack-plugin": "^5.3.3",
"ts-node": "^10.8.2",
"typescript": "^4.7.4",
"webpack": "^5.73.0",
"webpack-cli": "^4.10.0"
}
}新增了一個(gè)腳本命令 "build:umd": "webpack -c webpack.config.ts --node-env production --env NODE_ENV=production", 然后命令行到項(xiàng)目目錄下執(zhí)行npm run build:umd, 不出意外應(yīng)該就構(gòu)建成功了, 此時(shí)生成的dist目錄結(jié)構(gòu)如下
dist
└── umd
├── index.css
├── index.js
├── index.js.map
├── index.min.css
├── index.min.js
└── index.min.js.map
1 directory, 6 files測(cè)試驗(yàn)證
新建demo.html進(jìn)行測(cè)試
mkdir demo && touch demo/demo.html
demo/demo.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script src="../dist/umd/index.js"></script>
<script type="text/javascript">
console.log(loaf, '\n', loaf.Foo)
</script>
</body>
</html>用瀏覽器打開demo.html, 然后F12打開控制臺(tái), 可以看到如下輸出則說明初步達(dá)成了目標(biāo):
Module {__esModule: true, Symbol(Symbol.toStringTag): 'Module'}
demo.html:13 ? Foo() {
var _bar = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : new Bar();
src_classCallCheck(this, Foo);
this._bar = _bar;
}輸出esm模塊
完成上面的步驟后, 我們已經(jīng)到了一個(gè)umd模塊的輸出, 相關(guān)文件都在dist/umd目錄下; 其中包含可供CommonJs ESM AMD模塊系統(tǒng)和script標(biāo)簽使用的umd格式的javascript文件和一個(gè)單獨(dú)的css樣式文件.
已經(jīng)輸出了umd格式的js了, 為什么還要輸出esm模塊? ----TreeShaking
Tree shaking is a term commonly used in the JavaScript context for dead-code elimination. It relies on the static structure of ES2015 module syntax, i.e. import and export. The name and concept have been popularized by the ES2015 module bundler rollup.
此庫的使用者也使用了類似webpack之類的支持Tree Shaking
的模塊打包工具,需要讓使用者的打包工具能對(duì)這個(gè)js庫loaf進(jìn)行死代碼優(yōu)化Tree Shaking
從webpack文檔中看出, tree-shaking依賴于ES2015(ES2015 module syntax, ES2015=ES6)的模塊系統(tǒng), tree-shaking可以對(duì)打包體積有不錯(cuò)優(yōu)化, 所以為了支持使用者進(jìn)行tree-shaking, 輸出esm模塊(esm模塊就是指 ES2015 module syntax)是很有必要的.
用tsc輸出esm和類型聲明文件
tsc -p tsconfig.json --declarationDir ./dist/typings -m es6 --outDir dist/lib-esm
上面的命令使用typescript編譯器命令行接口tsc輸出了ES6模塊格式的javascript文件到dist/lib-esm目錄下
將這個(gè)目錄加入到package.json的scripts配置中:
package.json
{
"name": "loaf",
"version": "1.0.0",
"description": "A demo shows how to create & build a javascript library with webpack & typescript",
"main": "index.js",
"scripts": {
"build:umd": "webpack -c webpack.config.ts --node-env production --env NODE_ENV=production",
"build:lib-esm": "tsc -p tsconfig.json --declarationDir ./dist/typings -m es6 --outDir dist/lib-esm",
"test": "npm run test"
},
"keywords": [
"demo"
],
"author": "laggage",
"license": "MIT",
"devDependencies": {
"@babel/core": "^7.18.6",
"@babel/preset-env": "^7.18.6",
"@babel/preset-typescript": "^7.18.6",
"@types/node": "^18.0.0",
"@types/webpack": "^5.28.0",
"babel-loader": "^8.2.5",
"css-loader": "^6.7.1",
"css-minimizer-webpack-plugin": "^4.0.0",
"less": "^4.1.3",
"less-loader": "^11.0.0",
"mini-css-extract-plugin": "^2.6.1",
"postcss-loader": "^7.0.0",
"style-loader": "^3.3.1",
"terser-webpack-plugin": "^5.3.3",
"ts-node": "^10.8.2",
"typescript": "^4.7.4",
"webpack": "^5.73.0",
"webpack-cli": "^4.10.0"
}
}然后運(yùn)行: npm run build:lib-esm, 此時(shí)dist目錄結(jié)構(gòu)如下:
dist
├── lib-esm
│ ├── bar.js
│ └── index.js
├── typings
│ ├── bar.d.ts
│ ├── bar.d.ts.map
│ ├── index.d.ts
│ └── index.d.ts.map
└── umd
├── index.css
├── index.js
├── index.js.map
├── index.min.css
├── index.min.js
└── index.min.js.map
3 directories, 12 files多出了兩個(gè)子目錄分別為lib-esm和typings, 分別放著es6模塊格式的javascript輸出文件和typescript類型聲明文件.
完善package.json文件
到目前為止, package.json的scripts配置中, 已經(jīng)有了build:umd和build:lib-esm用于構(gòu)建umd格式的輸出和esm格式的輸出, 現(xiàn)在我們?cè)傧蛱砑右粋€(gè)build用來組合build:umd和build:lib-esm并進(jìn)行最終的構(gòu)建, 再次之前先安裝一個(gè)依賴shx, 用于跨平臺(tái)執(zhí)行一些shell腳本: npm i -D shx;
更新package.json文件:
package.json
{
"name": "loaf",
"version": "1.0.0",
"description": "A demo shows how to create & build a javascript library with webpack & typescript",
"main": "index.js",
"scripts": {
"build": "shx rm -rf dist/** && npm run build:umd && npm run build:lib-esm",
"build:umd": "webpack -c webpack.config.ts --node-env production --env NODE_ENV=production",
"build:lib-esm": "tsc -p tsconfig.json --declarationDir ./dist/typings -m es6 --outDir dist/lib-esm",
"test": "npm run test"
},
"keywords": [
"demo"
],
"author": "laggage",
"license": "MIT",
"devDependencies": {
"@babel/core": "^7.18.6",
"@babel/preset-env": "^7.18.6",
"@babel/preset-typescript": "^7.18.6",
"@types/node": "^18.0.0",
"@types/webpack": "^5.28.0",
"babel-loader": "^8.2.5",
"css-loader": "^6.7.1",
"css-minimizer-webpack-plugin": "^4.0.0",
"less": "^4.1.3",
"less-loader": "^11.0.0",
"mini-css-extract-plugin": "^2.6.1",
"postcss-loader": "^7.0.0",
"shx": "^0.3.4",
"style-loader": "^3.3.1",
"terser-webpack-plugin": "^5.3.3",
"ts-node": "^10.8.2",
"typescript": "^4.7.4",
"webpack": "^5.73.0",
"webpack-cli": "^4.10.0"
}
}package.json文件生成typescript聲明文件所在的路徑(可以參考typescript官網(wǎng):Including declarations in your npm package):
package.json
{
"name": "loaf",
"version": "1.0.0",
"description": "A demo shows how to create & build a javascript library with webpack & typescript",
"main": "index.js",
"typings": "./typings",
"scripts": {
"build": "shx rm -rf dist/** && npm run build:umd && npm run build:lib-esm",
"build:umd": "webpack -c webpack.config.ts --node-env production --env NODE_ENV=production",
"build:lib-esm": "tsc -p tsconfig.json --declarationDir ./dist/typings -m es6 --outDir dist/lib-esm",
"test": "npm run test"
},
"keywords": [
"demo"
],
"author": "laggage",
"license": "MIT",
"devDependencies": {
"@babel/core": "^7.18.6",
"@babel/preset-env": "^7.18.6",
"@babel/preset-typescript": "^7.18.6",
"@types/node": "^18.0.0",
"@types/webpack": "^5.28.0",
"babel-loader": "^8.2.5",
"css-loader": "^6.7.1",
"css-minimizer-webpack-plugin": "^4.0.0",
"less": "^4.1.3",
"less-loader": "^11.0.0",
"mini-css-extract-plugin": "^2.6.1",
"postcss-loader": "^7.0.0",
"shx": "^0.3.4",
"style-loader": "^3.3.1",
"terser-webpack-plugin": "^5.3.3",
"ts-node": "^10.8.2",
"typescript": "^4.7.4",
"webpack": "^5.73.0",
"webpack-cli": "^4.10.0"
}
}package.json中添加exports配置聲明模塊導(dǎo)出路徑
package.json中的exports字段用于告訴使用者引用此庫時(shí)從哪里尋找對(duì)應(yīng)的模塊文件. 比如使用者可能通過esm模塊引用此庫:
import { Foo } from 'loaf';
const foo = new Foo();此時(shí)如果我們的package.json中沒有指定exports字段, 那么模塊系統(tǒng)會(huì)去尋找node_modules/index.js, 結(jié)果肯定是找不到的, 因?yàn)槲覀冋嬲膃sm格式的輸出文件應(yīng)該是在node_modules/loaf/lib-esm中的
于是我們可以這樣來配置exports:
package.json
{
"name": "loaf",
"version": "1.0.0",
"description": "A demo shows how to create & build a javascript library with webpack & typescript",
"main": "index.js",
"typings": "./typings",
"exports": {
"./*": "./lib-esm/*",
"./umd/*": "./umd"
},
"scripts": {
"build": "shx rm -rf dist/** && npm run build:umd && npm run build:lib-esm",
"build:umd": "webpack -c webpack.config.ts --node-env production --env NODE_ENV=production",
"build:lib-esm": "tsc -p tsconfig.json --declarationDir ./dist/typings -m es6 --outDir dist/lib-esm",
"test": "npm run test"
},
"keywords": [
"demo"
],
"author": "laggage",
"license": "MIT",
"devDependencies": {
"@babel/core": "^7.18.6",
"@babel/preset-env": "^7.18.6",
"@babel/preset-typescript": "^7.18.6",
"@types/node": "^18.0.0",
"@types/webpack": "^5.28.0",
"babel-loader": "^8.2.5",
"css-loader": "^6.7.1",
"css-minimizer-webpack-plugin": "^4.0.0",
"less": "^4.1.3",
"less-loader": "^11.0.0",
"mini-css-extract-plugin": "^2.6.1",
"postcss-loader": "^7.0.0",
"shx": "^0.3.4",
"style-loader": "^3.3.1",
"terser-webpack-plugin": "^5.3.3",
"ts-node": "^10.8.2",
"typescript": "^4.7.4",
"webpack": "^5.73.0",
"webpack-cli": "^4.10.0"
}
}用api-extractor提取出干凈的.d.ts
在上面的用tsc輸出esm和類型聲明文件這一段中, 我們通過tsc命令輸出了typescript了類型聲明文件到dist/types目錄下, 這個(gè)目錄下有兩個(gè).d.ts文件, 分別是bar.d.ts和foo.d.ts, 通常是希望這些聲明文件都在一個(gè)文件index.d.ts中的, 如果他們分散開了, 以本庫為例, 如果我要使用本庫中的Bar類, 那么我可能需要這樣來導(dǎo)入:
import { Bar } from 'loaf/typings/bar';我不覺得的這種導(dǎo)入方式是好的做法, 理想的導(dǎo)入方式應(yīng)該像下面這樣:
import { Bar } from 'loaf';所以接下來, 還要引入微軟提供的api-extractor
配置使用API extractor
安裝依賴:
npm install -D @microsoft/api-extractor
再全局安裝下:
npm install -g @microsoft/api-extractor
生成api-extractor.json
api-extractor init
稍微修改下api-extractor.json
<
api-extractor.json
{
...
"scripts": {
"build": "shx rm -rf dist/** && npm run build:umd && npm run build:lib-esm && npm run build:extract-api",
"build:umd": "webpack -c webpack.config.ts --node-env production --env NODE_ENV=production",
"build:lib-esm": "tsc -p tsconfig.json --declarationDir ./dist/typings-temp -m es6 --outDir dist/lib-esm",
"build:extract-api": "api-extractor run && shx rm -rf dist/typings-temp",
"build:extract-api-local": "shx mkdir -p ./etc && npm run build:lib-esm && api-extractor run -l",
"test": "npm run test"
},
...
}更新package.json
/**
*
* @internal
*/
export class Bar {
bar() {}
}注意, 這里處理新增了一個(gè)build:extract-api到scripts配置中, 還修改了build:lib-esm的配置, 將其輸出的typescript類型聲明文件放到了, typings-temp目錄中, 最后這個(gè)目錄是要?jiǎng)h除; 還要注意, 每次提交代碼到版本管理工具前, 要先運(yùn)行npm run build:extract-api-local, 這個(gè)命令會(huì)生成./etc/<libraryName>.api.md文件, 這個(gè)文件是api-extractor生成的api文檔, 應(yīng)該要放到版本管理工具中去的, 以便可以看到每次提交代碼時(shí)API的變化.
用@internal標(biāo)注只希望在內(nèi)部使用的class
比如, 我希望Bar類不能被此庫的使用者使用, 我可以加上下面這段注釋
/**
*
* @internal
*/
export class Bar {
bar() {}
}然后來看看生成的index.d.ts文件:
/**
*
* @internal
*/
declare class Bar {
bar(): void;
}
export declare class Foo {
private _bar;
constructor(_bar?: Bar);
foo(): void;
loaf(): void;
}
export { }可以看出index.d.ts文件中雖然declare了Bar, 但是并未導(dǎo)出Bar
這個(gè)特性是由api-extractor提供的, 更多api-extractor的內(nèi)容移步官方文檔
小結(jié)
至此, 我們就可以構(gòu)建一個(gè)可以通過諸如AMD CommonJs esm等js模塊系統(tǒng)或是使用script標(biāo)簽的方式引用的js庫了, 主要用到了webpack typescript api-extractor這些工具. 完整的示例代碼可以訪問github-laggage/loaf查看.
到此這篇關(guān)于typescript+webpack構(gòu)建一個(gè)js庫的文章就介紹到這了,更多相關(guān)webpack構(gòu)建js庫內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)代碼雨特效，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-01-01
這篇文章介紹了Javascript 遮罩層和加載效果代碼，有需要的朋友可以參考一下2013-08-08
js獲取鼠標(biāo)點(diǎn)擊的對(duì)象,點(diǎn)擊另一個(gè)按鈕刪除該對(duì)象的實(shí)現(xiàn)代碼
下面小編就為大家?guī)硪黄猨s獲取鼠標(biāo)點(diǎn)擊的對(duì)象,點(diǎn)擊另一個(gè)按鈕刪除該對(duì)象的實(shí)現(xiàn)代碼。小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-05-05
今天小編就為大家分享一篇layui 解決富文本框form表單提交為空的問題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-10-10
本文主要介紹了Webpack之plugin的使用，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-02-02
這篇文章主要為大家介紹了JS表單提交中onsubmit事件return的作用詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-10-10
微信小程序?qū)崿F(xiàn)下拉刷新和上拉分頁效果的方法詳解
這篇文章主要為大家詳細(xì)介紹了微信小程序動(dòng)畫是如何實(shí)現(xiàn)下拉刷新和上拉分頁效果的，文中示例代碼講解詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-06-06
如何讓一個(gè)層關(guān)閉之后，就算刷新頁面了也不顯示。除非關(guān)閉頁面再次打開
這個(gè)功能，一般可用于廣告的顯示，當(dāng)關(guān)閉后，就不顯示，除非重新關(guān)閉打開，增加用戶體驗(yàn)2008-09-09
JS項(xiàng)目中對(duì)本地存儲(chǔ)進(jìn)行二次的封裝的實(shí)現(xiàn)
這篇文章主要介紹了JS項(xiàng)目中對(duì)本地存儲(chǔ)進(jìn)行二次的封裝,這里我們將要使用到的key存儲(chǔ)下來，新建一個(gè)叫constant-storage.js的文件，對(duì)外暴露一些key的鍵名，也方便后期統(tǒng)一修改，這里因?yàn)槎际呛懔?，所以名稱我們都用大寫表示，需要的朋友可以參考下2022-07-07
這篇文章主要介紹了原生JS與JQ獲取元素的區(qū)別詳解,文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-02-02