首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

深入webpack打包原理及loader和plugin的实现

Posted in Javascript onMay 06, 2020

本文讨论的核心内容如下：

  • webpack 进行打包的基本原理
  • 如何自己实现一个 loader 和 plugin

注： 本文使用的 webpack 版本是 v4.43.0 , webpack-cli 版本是 v3.3.11 ， node 版本是 v12.14.1 ， npm 版本 v6.13.4 (如果你喜欢 yarn 也是可以的)，演示用的 chrome 浏览器版本 81.0.4044.129（正式版本） （64 位）

1. webpack打包基本原理

webpack的一个核心功能就是把我们写的模块化的代码，打包之后，生成可以在浏览器中运行的代码，我们这里也是从简单开始，一步步探索webpack的打包原理

1.1 一个简单的需求

我们首先建立一个空的项目，使用 npm init -y 快速初始化一个 package.json ，然后安装 webpack webpack-cli

接下来，在根目录下创建 src 目录， src 目录下创建 index.js ， add.js ， minus.js ，根目录下创建 index.html ，其中 index.html 引入 index.js ，在 index.js 引入 add.js ， minus.js ，

目录结构如下：

深入webpack打包原理及loader和plugin的实现

文件内容如下：

// add.js
export default (a, b) => {
 return a + b
}
// minus.js
export const minus = (a, b) => {
 return a - b
}
// index.js
import add from './add.js'
import { minus } from './minus.js'

const sum = add(1, 2)
const division = minus(2, 1)
console.log('sum>>>>>', sum)
console.log('division>>>>>', division)
<!--index.html-->
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>demo</title>
</head>
<body>
 <script src="./src/index.js"></script>
</body>
</html>

这样直接在 index.html 引入 index.js 的代码，在浏览器中显然是不能运行的，你会看到这样的错误

Uncaught SyntaxError: Cannot use import statement outside a module

是的，我们不能在 script 引入的 js 文件里，使用 es6 模块化语法

1.2 实现webpack打包核心功能

我们首先在项目根目录下再建立一个bundle.js，这个文件用来对我们刚刚写的模块化 js 代码文件进行打包

我们首先来看webpack官网对于其打包流程的描述：

it internally builds a dependency graph which maps every module your project needs and generates one or more bundles（webpack会在内部构建一个 依赖图(dependency graph)，此依赖图会映射项目所需的每个模块，并生成一个或多个 bundle）

在正式开始之前，结合上面 webpack 官网说明进行分析，明确我们进行打包工作的基本流程如下：

首先，我们需要读到入口文件里的内容（也就是index.js的内容） 其次，分析入口文件，递归的去读取模块所依赖的文件内容，生成依赖图 最后，根据依赖图，生成浏览器能够运行的最终代码 1. 处理单个模块（以入口为例） 1.1 获取模块内容

既然要读取文件内容，我们需要用到 node.js 的核心模块 fs ，我们首先来看读到的内容是什么：

// bundle.js
const fs = require('fs')
const getModuleInfo = file => {
 const body = fs.readFileSync(file, 'utf-8')
 console.log(body)
}
getModuleInfo('./src/index.js')

我们定义了一个方法 getModuleInfo ，这个方法里我们读出文件内容，打印出来，输出的结果如下图：

深入webpack打包原理及loader和plugin的实现

我们可以看到，入口文件 index.js 的所有内容都以字符串形式输出了，我们接下来可以用正则表达式或者其它一些方法，从中提取到 import 以及 export 的内容以及相应的路径文件名，来对入口文件内容进行分析，获取有用的信息。但是如果 import 和 export 的内容非常多，这会是一个很麻烦的过程，这里我们借助 babel

提供的功能，来完成入口文件的分析

1.2 分析模块内容

我们安装 @babel/parser ，演示时安装的版本号为 ^7.9.6

这个babel模块的作用，就是把我们js文件的代码内容，转换成js对象的形式，这种形式的js对象，称做 抽象语法树(Abstract Syntax Tree, 以下简称AST)

// bundle.js
const fs = require('fs')
const parser = require('@babel/parser')
const getModuleInfo = file => {
 const body = fs.readFileSync(file, 'utf-8')
 const ast = parser.parse(body, {
  // 表示我们要解析的是es6模块
  sourceType: 'module' 
 })
 console.log(ast)
 console.log(ast.program.body)
}
getModuleInfo('./src/index.js')

使用 @babel/parser 的 parse 方法把入口文件转化称为了 AST ，我们打印出了 ast ，注意文件内容是在 ast.program.body 中，如下图所示：

深入webpack打包原理及loader和plugin的实现

入口文件内容被放到一个数组中，总共有六个 Node 节点，我们可以看到，每个节点有一个 type 属性，其中前两个的 type 属性是 ImportDeclaration ，这对应了我们入口文件的两条 import 语句，并且，每一个 type 属性是 ImportDeclaration 的节点，其 source.value

属性是引入这个模块的相对路径，这样我们就得到了入口文件中对打包有用的重要信息了。

接下来要对得到的ast做处理，返回一份结构化的数据，方便后续使用。

1.3 对模块内容做处理

对 ast.program.body 部分数据的获取和处理，本质上就是对这个数组的遍历，在循环中做数据处理，这里同样引入一个babel的模块 @babel/traverse 来完成这项工作。

安装 @babel/traverse ，演示时安装的版本号为 ^7.9.6

const fs = require('fs')
const path = require('path')
const parser = require('@babel/parser')
const traverse = require('@babel/traverse').default

const getModuleInfo = file => {
 const body = fs.readFileSync(file, 'utf-8')
 const ast = parser.parse(body, {
  sourceType: 'module' 
 })
 const deps = {}
 traverse(ast, {
  ImportDeclaration({ node }) {
   const dirname = path.dirname(file);
   const absPath = './' + path.join(dirname, node.source.value)
   deps[node.source.value] = absPath
  }
 })
 console.log(deps)
}
getModuleInfo('./src/index.js')

创建一个对象 deps ，用来收集模块自身引入的依赖，使用 traverse 遍历 ast ，我们只需要对 ImportDeclaration 的节点做处理，注意我们做的处理实际上就是把相对路径转化为绝对路径，这里我使用的是 Mac 系统，如果是 windows 系统,注意斜杠的区别

获取依赖之后，我们需要对 ast 做语法转换，把 es6 的语法转化为 es5 的语法，使用 babel 核心模块 @babel/core 以及 @babel/preset-env 完成

安装 @babel/core @babel/preset-env ，演示时安装的版本号均为 ^7.9.6

const fs = require('fs')
const path = require('path')
const parser = require('@babel/parser')
const traverse = require('@babel/traverse').default
const babel = require('@babel/core')

const getModuleInfo = file => {
 const body = fs.readFileSync(file, 'utf-8')
 const ast = parser.parse(body, {
  sourceType: 'module' 
 })
 const deps = {}
 traverse(ast, {
  ImportDeclaration({ node }) {
   const dirname = path.dirname(file);
   const absPath = './' + path.join(dirname, node.source.value)
   deps[node.source.value] = absPath
  }
 })
 const { code } = babel.transformFromAst(ast, null, {
  presets: ["@babel/preset-env"]
 })
 const moduleInfo = { file, deps, code }
 console.log(moduleInfo)
 return moduleInfo
}
getModuleInfo('./src/index.js')

如下图所示，我们最终把一个模块的代码，转化为一个对象形式的信息，这个对象包含文件的绝对路径，文件所依赖模块的信息，以及模块内部经过 babel 转化后的代码

深入webpack打包原理及loader和plugin的实现

2. 递归的获取所有模块的信息

这个过程，也就是获取 依赖图(dependency graph) 的过程，这个过程就是从入口模块开始，对每个模块以及模块的依赖模块都调用 getModuleInfo 方法就行分析，最终返回一个包含所有模块信息的对象

const parseModules = file => {
 // 定义依赖图
 const depsGraph = {}
 // 首先获取入口的信息
 const entry = getModuleInfo(file)
 const temp = [entry]
 for (let i = 0; i < temp.length; i++) {
  const item = temp[i]
  const deps = item.deps
  if (deps) {
   // 遍历模块的依赖，递归获取模块信息
   for (const key in deps) {
    if (deps.hasOwnProperty(key)) {
     temp.push(getModuleInfo(deps[key]))
    }
   }
  }
 }
 temp.forEach(moduleInfo => {
  depsGraph[moduleInfo.file] = {
   deps: moduleInfo.deps,
   code: moduleInfo.code
  }
 })
 console.log(depsGraph)
 return depsGraph
}
parseModules('./src/index.js')

获得的depsGraph对象如下图：

深入webpack打包原理及loader和plugin的实现

我们最终得到的模块分析数据如上图所示，接下来，我们就要根据这里获得的模块分析数据，来生产最终浏览器运行的代码。

3. 生成最终代码

在我们实现之前，观察上一节最终得到的依赖图，可以看到，最终的code里包含exports以及require这样的语法，所以，我们在生成最终代码时，要对exports和require做一定的实现和处理

我们首先调用之前说的parseModules方法，获得整个应用的依赖图对象：

const bundle = file => {
 const depsGraph = JSON.stringify(parseModules(file))
}

接下来我们应该把依赖图对象中的内容，转换成能够执行的代码，以字符串形式输出。 我们把整个代码放在自执行函数中，参数是依赖图对象

const bundle = file => {
 const depsGraph = JSON.stringify(parseModules(file))
 return `(function(graph){
  function require(file) {
   var exports = {};
   return exports
  }
  require('${file}')
 })(${depsGraph})`
}

接下来内容其实很简单，就是我们取得入口文件的code信息，去执行它就好了，使用eval函数执行，初步写出代码如下：

const bundle = file => {
 const depsGraph = JSON.stringify(parseModules(file))
 return `(function(graph){
  function require(file) {
   var exports = {};
   (function(code){
    eval(code)
   })(graph[file].code)
   return exports
  }
  require('${file}')
 })(${depsGraph})`
}

上面的写法是有问题的，我们需要对file做绝对路径转化，否则 graph[file].code 是获取不到的，定义adsRequire方法做相对路径转化为绝对路径

const bundle = file => {
 const depsGraph = JSON.stringify(parseModules(file))
 return `(function(graph){
  function require(file) {
   var exports = {};
   function absRequire(relPath){
    return require(graph[file].deps[relPath])
   }
   (function(require, exports, code){
    eval(code)
   })(absRequire, exports, graph[file].code)
   return exports
  }
  require('${file}')
 })(${depsGraph})`
}

接下来，我们只需要执行bundle方法，然后把生成的内容写入一个JavaScript文件即可

const content = bundle('./src/index.js')
// 写入到dist/bundle.js
fs.mkdirSync('./dist')
fs.writeFileSync('./dist/bundle.js', content)

最后，我们在index.html引入这个 ./dist/bundle.js 文件，我们可以看到控制台正确输出了我们想要的结果

深入webpack打包原理及loader和plugin的实现

4. bundle.js的完整代码

const fs = require('fs')
const path = require('path')
const parser = require('@babel/parser')
const traverse = require('@babel/traverse').default
const babel = require('@babel/core')

const getModuleInfo = file => {
 const body = fs.readFileSync(file, 'utf-8')
 console.log(body)
 const ast = parser.parse(body, {
  sourceType: 'module' 
 })
 // console.log(ast.program.body)
 const deps = {}
 traverse(ast, {
  ImportDeclaration({ node }) {
   const dirname = path.dirname(file);
   const absPath = './' + path.join(dirname, node.source.value)
   deps[node.source.value] = absPath
  }
 })
 const { code } = babel.transformFromAst(ast, null, {
  presets: ["@babel/preset-env"]
 })
 const moduleInfo = { file, deps, code }
 return moduleInfo
}

const parseModules = file => {
 // 定义依赖图
 const depsGraph = {}
 // 首先获取入口的信息
 const entry = getModuleInfo(file)
 const temp = [entry]
 for (let i = 0; i < temp.length; i++) {
  const item = temp[i]
  const deps = item.deps
  if (deps) {
   // 遍历模块的依赖，递归获取模块信息
   for (const key in deps) {
    if (deps.hasOwnProperty(key)) {
     temp.push(getModuleInfo(deps[key]))
    }
   }
  }
 }
 temp.forEach(moduleInfo => {
  depsGraph[moduleInfo.file] = {
   deps: moduleInfo.deps,
   code: moduleInfo.code
  }
 })
 // console.log(depsGraph)
 return depsGraph
}


// 生成最终可以在浏览器运行的代码
const bundle = file => {
 const depsGraph = JSON.stringify(parseModules(file))
 return `(function(graph){
  function require(file) {
   var exports = {};
   function absRequire(relPath){
    return require(graph[file].deps[relPath])
   }
   (function(require, exports, code){
    eval(code)
   })(absRequire, exports, graph[file].code)
   return exports
  }
  require('${file}')
 })(${depsGraph})`
}


const build = file => {
 const content = bundle(file)
 // 写入到dist/bundle.js
 fs.mkdirSync('./dist')
 fs.writeFileSync('./dist/bundle.js', content)
}

build('./src/index.js')

2. 手写 loader 和 plugin

2.1 如何自己实现一个 loader

loader本质上就是一个函数，这个函数会在我们在我们加载一些文件时执行

2.1.1 如何实现一个同步 loader

首先我们初始化一个项目，项目结构如图所示：

深入webpack打包原理及loader和plugin的实现

其中index.js和webpack.config.js的文件内容如下：

// index.js
console.log('我要学好前端，因为学好前端可以： ')

// webpack.config.js
const path = require('path')
module.exports = {
 mode: 'development',
 entry: {
  main: './src/index.js'
 },
 output: {
  path: path.resolve(__dirname, 'dist'),
  filename: '[name].js'
 }
}

我们在根目录下创建 syncLoader.js ，用来实现一个同步的loader，注意这个函数必须返回一个 buffer 或者 string

// syncloader.ja
module.exports = function (source) {
 console.log('source>>>>', source)
 return source
}

同时，我们在 webpack.config.js 中使用这个 loader ，我们这里使用 resolveLoader 配置项，指定 loader 查找文件路径，这样我们使用 loader 时候可以直接指定 loader 的名字

const path = require('path')
module.exports = {
 mode: 'development',
 entry: {
  main: './src/index.js'
 },
 output: {
  path: path.resolve(__dirname, 'dist'),
  filename: '[name].js'
 },
 resolveLoader: {
  // loader路径查找顺序从左往右
  modules: ['node_modules', './']
 },
 module: {
  rules: [
   {
    test: /\.js$/,
    use: 'syncLoader'
   }
  ]
 }
}

接下来我们运行打包命令，可以看到命令行输出了source内容，也就是loader作用文件的内容。

深入webpack打包原理及loader和plugin的实现

接着我们改造我们的loader:

module.exports = function (source) {
 source += '升值加薪'
 return source
}

我们再次运行打包命令，去观察打包后的代码：

深入webpack打包原理及loader和plugin的实现

这样，我们就实现了一个简单的loader，为我们的文件增加一条信息。 我们可以尝试在 loader 的函数里打印 this ，发现输出结果是非常长的一串内容， this 上有很多我们可以在 loader 中使用的有用信息，所以，对于 loader 的编写，一定不要使用箭头函数，那样会改变 this

的指向。

一般来说，我们会去使用官方推荐的 loader-utils 包去完成更加复杂的 loader 的编写

我们继续安装 loader-utils ，版本是 ^2.0.0

我们首先改造 webpack.config.js ：

const path = require('path')

module.exports = {
 mode: 'development',
 entry: {
  main: './src/index.js'
 },
 output: {
  path: path.resolve(__dirname, 'dist'),
  filename: '[name].js'
 },
 resolveLoader: {
  // loader路径查找顺序从左往右
  modules: ['node_modules', './']
 },
 module: {
  rules: [
   {
    test: /\.js$/,
    use: {
     loader: 'syncLoader',
     options: {
      message: '升值加薪'
     }
    }
   }
  ]
 }
}

注意到，我们为我们的 loader 增加了 options 配置项，接下来在loader函数里使用loader-utils获取配置项内容，拼接内容，我们依然可以得到与之前一样的打包结果

// syncLoader.js
const loaderUtils = require('loader-utils')
module.exports = function (source) {
 const options = loaderUtils.getOptions(this)
 console.log(options)
 source += options.message
 // 可以传递更详细的信息
 this.callback(null, source)
}

深入webpack打包原理及loader和plugin的实现

深入webpack打包原理及loader和plugin的实现

这样，我们就完成了一个简单的同步 loader 的编写

2.1.2 如何实现一个异步 loader

和同步loader的编写方式非常相似，我们在根目录下建立一个asyncLoader.js的文件，内容如下：

const loaderUtils = require('loader-utils')
module.exports = function (source) {
 const options = loaderUtils.getOptions(this)
 const asyncfunc = this.async()
 setTimeout(() => {
  source += '走上人生颠覆'
  asyncfunc(null, res)
 }, 200)
}

注意这里的 this.async() ，用官方的话来说就是 Tells the loader-runner that the loader intends to call back asynchronously. Returns this.callback. 也就是让webpack知道这个loader是异步运行，返回的是和同步使用时一致的 this.callback

接下来我们修改webpack.config.js

const path = require('path')
module.exports = {
 mode: 'development',
 entry: {
  main: './src/index.js'
 },
 output: {
  path: path.resolve(__dirname, 'dist'),
  filename: '[name].js'
 },
 resolveLoader: {
  // loader路径查找顺序从左往右
  modules: ['node_modules', './']
 },
 module: {
  rules: [
   {
    test: /\.js$/,
    use: [
     {
      loader: 'syncLoader',
      options: {
       message: '走上人生巅峰'
      }
     },
     {
      loader: 'asyncLoader'
     }
    ]
   }
  ]
 }
}

注意loader执行顺序是从下网上的，所以首先为文本写入‘升值加薪'，然后写入‘走上人生巅峰'

深入webpack打包原理及loader和plugin的实现

到此，我们简单介绍了如何手写一个 loader ，在实际项目中，可以考虑一部分公共的简单逻辑，可以通过编写一个 loader 来完成(比如国际化文本替换)

2.2 如何自己实现一个 plugin

plugin 通常是在 webpack 在打包的某个时间节点做一些操作，我们使用 plugin 的时候，一般都是 new Plugin() 这种形式使用，所以，首先应该明确的是， plugin 应该是一个类。

我们初始化一个与上一接实现loader时候一样的项目，根目录下创建一个 demo-webpack-plugin.js 的文件，我们首先在 webpack.config.js 中使用它

const path = require('path')
const DemoWebpackPlugin = require('./plugins/demo-webpack-plugin')
module.exports = {
 mode: 'development',
 entry: {
  main: './src/index.js'
 },
 output: {
  path: path.resolve(__dirname, 'dist'),
  filename: '[name].js'
 },
 plugins: [
  new DemoWebpackPlugin()
 ]
}

再来看 demo-webpack-plugin.js 的实现

class DemoWebpackPlugin {
 constructor () {
  console.log('plugin init')
 }
 apply (compiler) {

 }
}

module.exports = DemoWebpackPlugin

我们在 DemoWebpackPlugin 的构造函数打印一条信息，当我们执行打包命令时，这条信息就会输出， plugin 类里面需要实现一个 apply 方法， webpack 打包时候，会调用 plugin 的 aplly 方法来执行 plugin 的逻辑，这个方法接受一个 compiler 作为参数，这个 compiler 是 webpack 实例

plugin的核心在于，apply方法执行时，可以操作webpack本次打包的各个时间节点（hooks，也就是生命周期勾子），在不同的时间节点做一些操作

关于webpack编译过程的各个生命周期勾子，可以参考 Compiler Hooks

同样，这些hooks也有同步和异步之分，下面演示 compiler hooks 的写法，一些重点内容可以参考注释：

class DemoWebpackPlugin {
 constructor () {
  console.log('plugin init')
 }
 // compiler是webpack实例
 apply (compiler) {
  // 一个新的编译(compilation)创建之后（同步）
  // compilation代表每一次执行打包，独立的编译
  compiler.hooks.compile.tap('DemoWebpackPlugin', compilation => {
   console.log(compilation)
  })
  // 生成资源到 output 目录之前（异步）
  compiler.hooks.emit.tapAsync('DemoWebpackPlugin', (compilation, fn) => {
   console.log(compilation)
   compilation.assets['index.md'] = {
    // 文件内容
    source: function () {
     return 'this is a demo for plugin'
    },
    // 文件尺寸
    size: function () {
     return 25
    }
   }
   fn()
  })
 }
}

module.exports = DemoWebpackPlugin

我们的这个 plugin 的作用就是，打包时候自动生成一个 md 文档，文档内容是很简单的一句话

上述异步hooks的写法也可以是以下两种：

// 第二种写法(promise)
compiler.hooks.emit.tapPromise('DemoWebpackPlugin', (compilation) => {
 return new Promise((resolve, reject) => {
  setTimeout(() => {
   resolve()
  }, 1000)
 }).then(() => {
  console.log(compilation.assets)
  compilation.assets['index.md'] = {
   // 文件内容
   source: function () {
    return 'this is a demo for plugin'
   },
   // 文件尺寸
   size: function () {
    return 25
   }
  }
 })
})
// 第三种写法(async await)
compiler.hooks.emit.tapPromise('DemoWebpackPlugin', async (compilation) => {
 await new Promise((resolve, reject) => {
  setTimeout(() => {
   resolve()
  }, 1000)
 })
 console.log(compilation.assets)
 compilation.assets['index.md'] = {
  // 文件内容
  source: function () {
   return 'this is a demo for plugin'
  },
  // 文件尺寸
  size: function () {
   return 25
  }
 }
})

最终的输出结果都是一样的，在每次打包时候生成一个md文档

深入webpack打包原理及loader和plugin的实现

到此为止，本文介绍了webpack打包的基本原理，以及自己实现loader和plugin的方法。希望本文内容能对大家对webpack的学习，使用带来帮助。更多相关webpack打包loader和plugin内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木！

深入webpack打包原理及loader和plugin的实现

- Author -

catboy

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
javascript 异步页面查询实现代码(asp.net)
May 26 Javascript
用方法封装javascript的new操作符(一)
Dec 25 Javascript
jQuery源码分析-02正则表达式 RegExp 常用正则表达式
Nov 14 Javascript
获取元素距离浏览器周边的位置的方法getBoundingClientRect
Apr 17 Javascript
JS使用ajax方法获取指定url的head信息中指定字段值的方法
Mar 24 Javascript
18个非常棒的jQuery代码片段
Nov 02 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
Jan 26 Javascript
javascript实现列表切换效果
May 02 Javascript
JS中数组重排序方法
Nov 11 Javascript
Bootstrap基本模板的使用和理解1
Dec 14 Javascript
微信小程序图片左右摆动效果详解
Jul 13 Javascript
JS XMLHttpRequest原理与使用方法深入详解
Apr 30 Javascript
将Vue组件库更换为按需加载的方法步骤
May 06 #Javascript
让IDE识别webpack的别名alias的实现方法
May 06 #Javascript
JS 设计模式之：工厂模式定义与实现方法浅析
May 06 #Javascript
JS 设计模式之：单例模式定义与实现方法浅析
May 06 #Javascript
基于vue3.0.1beta搭建仿京东的电商H5项目
May 06 #Javascript
JavaScript布尔运算符原理使用解析
May 06 #Javascript
ES5 模拟 ES6 的 Symbol 实现私有成员功能示例
May 06 #Javascript
SONY600GR(1) YAESU(1) frg-100(1) DE1107(3) DE1105(1) DE1103(2) AN-LP1(1) ICF-903L(1) 根德5570(1) 239军机(1)
You might like
自己做矿石收音机
2021/03/02 无线电
在同一窗体中使用PHP来处理多个提交任务
2008/05/08 PHP
laravel框架之数据库查出来的对象实现转化为数组
2019/10/23 PHP
laravel实现图片上传预览,及编辑时可更换图片,并实时变化的例子
2019/11/14 PHP
KindEditor在php环境下上传图片功能集成的方法示例
2020/07/20 PHP
JavaScript延迟加载
2021/03/09 Javascript
理解Javascript_13_执行模型详解
2010/10/20 Javascript
web基于浏览器的本地存储方法应用
2012/11/27 Javascript
JavaScript实现表格排序方法
2013/06/14 Javascript
JavaScript 命名空间 使用介绍
2013/08/29 Javascript
基于jquery插件编写countdown计时器
2016/06/12 Javascript
jQuery扩展+xml实现表单验证功能的方法
2016/12/25 Javascript
JSON与JS对象的区别与对比
2017/03/01 Javascript
JavaScript简单计算人的年龄示例
2017/04/15 Javascript
通过扫小程序码实现网站登陆功能
2019/08/22 Javascript
JS面向对象编程实现的Tab选项卡案例详解
2020/03/03 Javascript
JavaScript实现H5接金币功能(实例代码)
2021/02/22 Javascript
Linux系统上Nginx+Python的web.py与Django框架环境
2015/12/25 Python
数据清洗--DataFrame中的空值处理方法
2018/07/03 Python
Python3实现对列表按元组指定列进行排序的方法分析
2018/12/22 Python
Centos7 下安装最新的python3.8
2019/10/28 Python
如何基于Python批量下载音乐
2019/11/11 Python
python实现输出一个序列的所有子序列示例
2019/11/18 Python
python学生信息管理系统实现代码
2019/12/17 Python
pyinstaller还原python代码过程图解
2020/01/08 Python
详解HTML5中的拖放事件（Drag 和 drop）
2016/11/14 HTML / CSS
某公司.Net方向面试题
2014/04/24 面试题
活动志愿者自荐信
2014/01/27 职场文书
诉讼代理人授权委托书
2014/04/08 职场文书
志愿者活动总结范文
2014/04/26 职场文书
六年级学生期末评语
2014/12/26 职场文书
2015重阳节座谈会主持词
2015/07/30 职场文书
2016七夕情人节广告语
2016/01/28 职场文书
《赵州桥》教学反思
2016/02/17 职场文书
如何才能写好调研报告？
2019/07/03 职场文书
PyTorch 如何自动计算梯度
2021/05/23 Python