学习Webpack中图片-JS-Vue-plugin

news2024/12/25 14:21:34

目录

  • 图片文件
    • 资源模块类型
  • JS文件
    • babel
    • 命令行使用
    • babel-loader
    • babel-preset
  • Vue文件
    • vue-loader
    • @vue/compiler-sfc
  • plugin
    • CleanWebpackPlugin
    • HtmlWebpackPlugin
    • DefinePlugin

图片文件

需要先在项目中使用图片，比较常见的使用图片的方式是两种：

  • img元素，设置src属性
  • 其他元素（比如div），设置background-image的css属性

在webpack5之前，加载这些资源需要使用一些loader，比如raw-loader、url-loader、file-loader

在webpack5开始，我们可以直接使用资源模块类型（asset module type），来替代上面的这些loader

资源模块类型

资源模块类型是指用于处理非 JavaScript 文件（例如 CSS、图像、字体等）的一种机制

常见的资源模块类型包括以下几种：

  • asset/resource：
    在这里插入图片描述
    在这里插入图片描述

    • 用途：用于将文件（如图像、字体等）导出为单独的文件，并返回该文件的 URL（即路径）

    • 作用：类似于 file-loader，会在构建时将文件移到输出目录，最终导出的 JavaScript 会引用文件的 URL

    • 适用文件类型：图像（如 .png, .jpg），字体文件（如 .woff, .ttf），音视频文件等

  • asset/inline：
    在这里插入图片描述
    在这里插入图片描述

    • 用途：用于将文件（如小图像）以 Base64 字符串的形式嵌入到最终的 JavaScript 中，而不生成单独的文件

    • 作用：类似于 url-loader，用于将文件转为 Data URL（Base64 编码），适合小文件，以减少 HTTP 请求

    • 适用文件类型：小图像、字体等文件，尤其是文件较小的情况

  • asset/source：
    在这里插入图片描述
    在这里插入图片描述

    • 用途：用于导出文件的源代码内容，而不是将它们打包成单独的文件或 Base64 字符串

    • 作用：类似于 raw-loader，返回文件的源代码内容作为 JavaScript 模块导出的字符串。适用于直接想以字符串形式引入文件内容的情况

    • 适用文件类型：文本文件（如 .txt, .svg, .md），CSS 或其他代码文件

  • asset：
    在这里插入图片描述
    在这里插入图片描述

    • 用途：一种通用的资源模块类型，它可以在 asset/resource 和 asset/inline 之间动态切换

    • 作用：类似于 url-loader，Webpack 会根据文件大小自动选择是将文件作为资源输出还是内联到代码中。如果文件大小超过指定限制（默认是 8KB），它会导出为资源文件；否则会作为内联文件处理

    • 适用文件类型：图片、字体、音频、视频文件等

  • javascript/auto：

    • 用途：这是 Webpack5 默认的 JavaScript 模块类型，用于处理 CommonJS、ES Modules 和其他类型的 JavaScript 文件

    • 作用：可以处理所有的 JavaScript 文件，并支持混合的模块类型（例如，既有 import 也有 require 的文件）

    • 适用文件类型：.js, .cjs, .mjs 文件

  • javascript/esm：

    • 用途：明确指定该模块只能使用 ECMAScript 模块（ESM）的模块类型

    • 作用：主要用于现代 JavaScript 的 ES 模块化，import 和 export 语法

    • 适用文件类型：通常是 .mjs 文件，也可以是 .js 文件，但明确支持 ESM

上面主要介绍了四种处理图片的类型，打包图片时也可以加自定义设置：

  • 自定义文件的输出路径和文件名：

    • 常用的占位符：

      [ext]： 处理文件的扩展名

      [name]：处理文件的名称

      [hash]：文件的内容，使用MD4的散列函数处理，生成的一个128位的hash值（32个十六进制）

    • 方式一： 修改output，添加assetModuleFilename属性

      const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "index.js",
    path: path.resolve(__dirname, "build"),
    assetModuleFilename: "img/[name].[hash:6][ext]", // 放img目录下 图片名字.hash的前六位 扩展名
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader", "postcss-loader"],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: "asset",
      },
    ],
  },
};

      在这里插入图片描述

    • 方式二： 在Rule中，添加一个generator属性，并且设置filename

      const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "index.js",
    path: path.resolve(__dirname, "build"),
    // assetModuleFilename: "img/[name].[hash:6][ext]", // 放img目录下 图片名字.hash的前六位 扩展名
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader", "postcss-loader"],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: "asset",
        generator: {
          filename: "image/[name].[hash:8][ext]",
        },
      },
    ],
  },
};

      在这里插入图片描述

  • 图片大小设置

    • 开发中往往是小的图片需要转换，但是大的图片直接使用图片即可

    • 是因为小的图片转换base64之后可以和页面一起被请求，减少不必要的请求过程

    • 而大的图片也进行转换，反而会影响页面的请求速度

    • 将type修改为asset，添加一个parser属性，并且制定dataUrlCondition，添加maxSize属性

      const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "index.js",
    path: path.resolve(__dirname, "build"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader", "postcss-loader"],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: "asset",
        generator: {
          filename: "image/[name].[hash:8][ext]",
        },
        parser: {
          dataUrlCondition: {
            maxSize: 100 * 1024, // 这时使用的图片没有超过这个值他就不会被打包成文件，而是转base64使用
          },
        },
      },
    ],
  },
};

JS文件

开发中，想要使用ES6+的语法，想要使用TypeScript，开发React项目，这些文件的处理它们都是离不开Babel的

babel

事实上，在开发中我们很少直接去接触babel，但是babel对于前端开发来说，目前是不可缺少的一部分，学习Babel对于我们理解代码从编写到线上的转变过程至关重要

Babel是一个工具链，主要用于旧浏览器或者环境中将ES6+``代码转换为向后兼容版本的JavaScript，包括语法转换、源代码转换等

命令行使用

babel本身可以作为一个独立的工具（和postcss一样），不和webpack等构建工具配置来单独使用

如果希望在命令行尝试使用babel，需要完成如下操作：

  • npm install @babel/cli @babel/core -D

    • @babel/core：babel的核心代码，必须安装

    • @babel/cli：可以让我们在命令行使用babel

  • npx babel src --out-dir dist：使用babel来处理源代码

    • src：是源文件的目录

    • --out-dir：指定要输出的文件夹dist

  • 拓展功能需要用到插件：

    • 比如需要转换箭头函数，那么就可以使用箭头函数转换相关的插件

      npm install @babel/plugin-transform-arrow-functions -D

      npx babel src --out-dir dist --plugins=@babel/plugin-transform-arrow-functions

    • 查看转换后的结果：会发现 const 并没有转成 var

      npm install @babel/plugin-transform-block-scoping -D

      npx babel src --out-dir dist --plugins=@babel/plugin-transform-block-scoping,@babel/plugin-transform-arrow-functions

    • 如果要转换的内容过多，一个个设置是比较麻烦的，可以使用预设（preset）：

      npm install @babel/preset-env -D

      npx babel src --out-dir dist --presets=@babel/preset-env

babel-loader

在实际开发中，通常会在构建工具中配置babel来对其进行使用的，比如在webpack中

  • 之前已经安装了@babel/core，不需要再次安装

  • npm install babel-loader -D

  • 可以设置一个规则，在加载js文件时，使用babel

babel-preset

如果一个个去安装使用插件，需要手动来管理大量的babel插件，可以直接给webpack提供一个preset，webpack 会根据预设来加载对应的插件列表，并且将其传递给babel

  • 常见的预设有三个：env，react，TypeScript

  • 安装preset-env：npm install @babel/preset-env

  • 添加wk.config.js配置

    const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "index.js",
    path: path.resolve(__dirname, "build"),
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader", "postcss-loader"],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: "asset",
        generator: {
          filename: "image/[name].[hash:8][ext]",
        },
        parser: {
          dataUrlCondition: {
            maxSize: 100 * 1024, // 这时使用的图片没有超过这个值他就不会被打包成文件，而是转base64使用
          },
        },
      },
      {
        test: /\.m?js$/,
        use: [
          {
            loader: "babel-loader",
            options: {
              // presets: [
              //   [
              //     "@babel/preset-env",
              //     {
              //       targets: "> 0.25%, not dead",
              //       useBuiltIns: "usage",
              //       corejs: 3,
              //     },
              //   ],
              // ],
              presets: ["@babel/preset-env"],
            },
          },
        ],
      },
    ],
  },
};

Vue文件

  • 编写vue代码
    // app.vue
<template>
  <div class="box-vue">
    <h2>hello vue</h2>
    <p>哈哈哈哈哈</p>
  </div>
</template>

<script setup></script>

<style>
  .box-vue {
    width: 100px;
    height: 100px;
    background: cyan;
  }
</style>


// index.js
import "./style.css";
import "./style.less";
import "./bgImg.css";
import App from "./app.vue";
import { createApp } from "vue/dist/vue.esm-bundler.js";
const img = require("./images/2.jpg");

const divEl = document.createElement("div");
divEl.innerHTML = `<div class='box-css'>hello css</div><div class='box-less'>hello less</div><div class='bgImg'></div><image class='img' src='${img}' />`;
divEl.className = "box";
document.body.appendChild(divEl);

createApp(App).mount("#app");
  • 打包会报错，我们需要安装vue-loader在这里插入图片描述

vue-loader

  • npm install vue-loader -D：安装vue-loader

  • 添加配置wk.config.js：{ test: /\.vue$/, loader: "vue-loader" }

  • 这时在打包依然会报错，因为需要添加 @vue/compiler-sfc 来对template进行解析
    在这里插入图片描述

@vue/compiler-sfc

  • npm install @vue/compiler-sfc -D：安装@vue/compiler-sfc，如果安装vue时自动安装了就不需要安装了

  • 需要配置对应的Vue插件：

    const path = require("path");
const { VueLoaderPlugin } = require("vue-loader/dist/index");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "index.js",
    path: path.resolve(__dirname, "build"),
  },
  plugins: [new VueLoaderPlugin()],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader", "postcss-loader"],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: "asset",
        generator: {
          filename: "image/[name].[hash:8][ext]",
        },
        parser: {
          dataUrlCondition: {
            maxSize: 100 * 1024, // 这时使用的图片没有超过这个值他就不会被打包成文件，而是转base64使用
          },
        },
      },
      {
        test: /\.m?js$/,
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: ["@babel/preset-env"],
            },
          },
        ],
      },
      {
        test: /\.vue$/,
        loader: "vue-loader",
      },
    ],
  },
};

plugin

上面打包vue我们引入了个新的知识插件，接下来学习plugin相关内容

Webpack的另一个核心是Plugin，官方有这样一段对Plugin的描述：
在这里插入图片描述

  • Loader是用于特定的模块类型进行转换

  • Plugin除了loader功能其他都可以做，可以用于执行更加广泛的任务，比如打包优化、资源管理、环境变量注入等

在这里插入图片描述

CleanWebpackPlugin

前面练习的过程中，每次修改了一些配置，重新打包时都需要手动删除dist文件夹，可以借助于一个插件来帮助完成就是 CleanWebpackPlugin

  • npm install clean-webpack-plugin -D：安装
  • 在wk.config.js中配置
    在这里插入图片描述
  • 也可以使用Webpack5 内置的 clean 功能https://webpack.docschina.org/configuration/output/#outputclean
    在这里插入图片描述
  • 我们可以先在你打包后的文件夹创建个abc.js，然后配置完执行打包命令就可以看到它会把你打包文件夹下的abc.js删除

HtmlWebpackPlugin

我们的HTML文件是编写在根目录下的，最终打包的build文件夹中是没有index.html文件，但在进行项目部署的时，必然是需要有对应的入口文件index.html，所以也需要对index.html进行打包处理

  • npm install html-webpack-plugin -D：对HTML进行打包处理使用另外一个插件：HtmlWebpackPlugin

  • 配置wk.config.js
    在这里插入图片描述

  • 执行打包命令后，发现自动在build文件夹中，生成了一个index.html的文件，该文件中也自动添加了我们打包的index.js文件

  • html默认情况下是根据ejs的一个模板来生成的，在html-webpack-plugin的源码中，有一个default_index.ejs模块
    在这里插入图片描述

  • 也可以修改打包index.html的内容

    • 自定义HTML模板

      比如添加一个noscript标签，在用户的JavaScript被关闭时，给予相应的提示

      比如在开发vue或者react项目时，我们需要一个可以挂载后续组件的根标<div id="app">
      在这里插入图片描述

    • 自定义模板数据填充

      上面的html中，会有一些类似这样的语法<% 变量 %>，这个是EJS模块填充数据的方式

      title：可以在进行htmlWebpackPlugin.options.title读取时，就会读到该信息

      template：指定我们要使用的模块所在的路径

      filename：生成的HTML文件名

      inject：插入打包的资源文件，默认值为 true。可以设置为 'head' 或 'body' 来指定资源注入的位置。

      minify：对生成的 HTML 进行压缩（常用于生产环境） collapseWhitespace: 去除空白，removeComments: 移除注释，removeAttributeQuotes: 移除属性的引号

  • 配置wk.config.js并打包

    // ./public/index.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,user-scalable=no"
    />
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
  </head>
  <body>
    <noscript>
      <strong>
        We're sorry but <%= webpackConfig.name %> doesn't work properly without
        JavaScript enabled. Please enable it to continue.
      </strong>
    </noscript>
    <div id="app"></div>
  </body>
</html>


// wk.config.js
const path = require("path");
const { VueLoaderPlugin } = require("vue-loader/dist/index");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "index.js",
    path: path.resolve(__dirname, "build"),
  },
  plugins: [
    new VueLoaderPlugin(),
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: "haahha",
      template: "./public/index.html",
      filename: "main.html",
      minify: {
        collapseWhitespace: true, // 移除空白
        removeComments: true, // 移除注释
        removeAttributeQuotes: true, // 移除属性的引号
      },
    }),
  ],
  module: {
    rules: [
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader", "postcss-loader"],
      },
      {
        test: /\.less$/,
        use: ["style-loader", "css-loader", "less-loader", "postcss-loader"],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: "asset",
        generator: {
          filename: "image/[name].[hash:8][ext]",
        },
        parser: {
          dataUrlCondition: {
            maxSize: 100 * 1024, // 这时使用的图片没有超过这个值他就不会被打包成文件，而是转base64使用
          },
        },
      },
      {
        test: /\.m?js$/,
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: ["@babel/preset-env"],
            },
          },
        ],
      },
      {
        test: /\.vue$/,
        loader: "vue-loader",
      },
    ],
  },
};

    在这里插入图片描述

我们配置完打包发现还是报错，因为在模块中还使用到一个BASE_URL的常量，要用到下面的插件

DefinePlugin

在模块中还使用到一个BASE_URL的常量，但是我们并没有设置过这个常量值，所以会出现没有定义的错误，这个时候可以使用DefinePlugin插件

  • DefinePlugin允许在编译时创建配置的全局常量，是一个webpack内置的插件（不需要单独安装）

  • 在wk.config.js配置再打包就可以取到BASE_URL不会报错了
    在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2180486.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

LeetCode 918. 环形子数组的最大和

LeetCode 918. 环形子数组的最大和

原题链接&#xff1a;. - 力扣&#xff08;LeetCode&#xff09; 给定一个长度为 n 的环形整数数组 nums &#xff0c;返回 nums 的非空 子数组 的最大可能和 。 环形数组 意味着数组的末端将会与开头相连呈环状。形式上&#xff0c; nums[i] 的下一个元素是 nums[(i 1) % n…
阅读更多...
基于STM32的智能室内空气质量监控系统

基于STM32的智能室内空气质量监控系统

目录 引言项目背景环境准备 硬件准备软件安装与配置系统设计 系统架构关键技术代码示例 传感器数据采集与处理空气质量分析与报警显示与数据记录功能应用场景结论 1. 引言 智能室内空气质量监控系统用于实时监测环境中的空气质量&#xff0c;通过检测空气中的CO2、PM2.5、温…
阅读更多...
软件测试学习笔记丨Pytest 学习指南

软件测试学习笔记丨Pytest 学习指南

本文转自测试人社区&#xff0c;原文链接&#xff1a;https://ceshiren.com/t/topic/32336 基本介绍 pytest框架是一个成熟&#xff0c;全面的测试框架&#xff0c;具有非常丰富的第三方插件&#xff0c;并且可以自定义扩展 比如&#xff1a;pytest-selenium , pytest-html ,…
阅读更多...
Git常用方法——详解

Git常用方法——详解

一、下载安装git git官网&#xff1a; Git - Downloads (git-scm.com) 下载安装Git&#xff08;超详细超简单&#xff09;_git下载-CSDN博客 二、克隆下载至本地 1、复制HTTPS链接 在gitee或者gitLab或者gitHub上复制HTTPS链接 2、打开Open Git Bash here 在本地想要新建文…
阅读更多...
小程序原生-列表渲染

小程序原生-列表渲染

1. 列表渲染的基础用法 <!--渲染数组列表--> <view wx:for"{{numList}}" wx:key"*this" > 序号&#xff1a;{{index}} - 元素&#xff1a;{{item}}</view> <!--渲染对象属性--> <view wx:for"{{userInfo}}" wx:key&q…
阅读更多...
怎么给视频加片头片尾和字幕

怎么给视频加片头片尾和字幕

在这个视觉内容爆炸的时代&#xff0c;一段精心制作的视频不仅能吸引眼球&#xff0c;更能传达深刻的情感与信息。而一个引人入胜的片头、一个温馨感人的片尾&#xff0c;以及恰到好处的字幕&#xff0c;无疑是提升视频质感的关键。那么新人要怎么给视频加片头片尾和字幕效果呢…
阅读更多...
2024年9月收评

2024年9月收评

金1是从2005年12月开始&#xff0c;到现在2024年5月&#xff0c;还差7个月整整20年。一共11轮。 这20年里&#xff0c;真正形成单边趋势&#xff0c;能较好获利或者说至少不亏损的一共有以下几次&#xff0c; 第1轮&#xff0c;第2轮&#xff0c;第7轮&#xff0c;第8轮&…
阅读更多...
《程序猿之Redis缓存实战 · 集合类型》

《程序猿之Redis缓存实战 · 集合类型》

&#x1f4e2; 大家好&#xff0c;我是 【战神刘玉栋】&#xff0c;有10多年的研发经验&#xff0c;致力于前后端技术栈的知识沉淀和传播。 &#x1f497; &#x1f33b; CSDN入驻不久&#xff0c;希望大家多多支持&#xff0c;后续会继续提升文章质量&#xff0c;绝不滥竽充数…
阅读更多...
基于微信小程序的商品展示+ssm论文ppt源码调试讲解

基于微信小程序的商品展示+ssm论文ppt源码调试讲解

2 系统开发环境 2.1微信开发者工具 微信开发者工具现在已经被小程序开发团队开发运行&#xff0c;目前微信开发者工具任然在不断的完善中&#xff0c;在开发小程序时经常要不断的更新。可以使用微信扫码登陆开发者工具&#xff0c;开发者工具将使用这个微信帐号的信息进行小程…
阅读更多...
为VRoidStudio制作的vrm格式模型制作blendshape

为VRoidStudio制作的vrm格式模型制作blendshape

零、效果展示 bs视频演示 一、准备相关插件 1、VRoidStudio&#xff08;免费&#xff09; 下载网址&#xff1a;https://vroid.com/en/studio 2、UniVRM&#xff08;免费&#xff09; 下载网址&#xff1a;https://github.com/vrm-c/UniVRM/releases 注意&#xff1a;unity…
阅读更多...
Qt --- 常用控件的介绍---Widget属性介绍

Qt --- 常用控件的介绍---Widget属性介绍

一、控件概述 编程&#xff0c;讲究的是站在巨人的肩膀上&#xff0c;而不是从头发明轮子。一个图形化界面上的内容&#xff0c;不需要咱们全都从零区实现&#xff0c;Qt中已经提供了很多内置的控件了&#xff08;按钮&#xff0c;文本框&#xff0c;单选按钮&#xff0c;复选…
阅读更多...
yolov8实例分割重要图片

yolov8实例分割重要图片

训练分割要准备好数据集和分割预训练权重文件 下面这张图是数据集的格式 下面这张图配置数据集&#xff0c;下面names 要和labelme转txt里配置的一样 下面这张图进行训练&#xff0c;配置一些全局参数 &#xff0c;初始的yolov8s-seg.pt文件需要到github上yolov8开源项目里下 l…
阅读更多...
linux部署redis，整合ansible和redis

linux部署redis，整合ansible和redis

准备服务器192.168.45.133&#xff0c;192.168.45.135 在135上执行命令yum install -y redis安装redis yum install -y redis 源码安装方法 wget http://download.redis.io/releases/redis-2.8.13.tar.gz tar zxf redis-2.8.13.tar.gz cd redis-2.8.13 make PREFIX/usr/loca…
阅读更多...
Cannon-es.js之Distance Constrait模拟布料

Cannon-es.js之Distance Constrait模拟布料

本文目录 前言1、Particle2、前置代码准备2.1 代码2.2 效果 3、使用距离约束模拟布料3.1 代码3.2 效果 前言 在现代Web开发中&#xff0c;实现逼真的物理效果对于提升用户体验至关重要。Cannon-es.js&#xff0c;作为Cannon.js的ES6模块版本&#xff0c;凭借其轻量级、高性能和…
阅读更多...
selenium测试框架快速搭建详解

selenium测试框架快速搭建详解

一、介绍 Selenium目前主流的web自动化测试框架&#xff1b;支持多种编程语言Java、pythan、go、js等&#xff1b;selenium 提供一系列的api 供我们使用&#xff0c;因此在web测试时我们要点页面中的某一个按钮&#xff0c;那么我们只需要获取页面&#xff0c;然后根据id或者n…
阅读更多...
拯救华为秘盒M310

拯救华为秘盒M310

这个盒子当年宣传得比较厉害&#xff0c; 当时确实也没有什么可选的&#xff0c;当年是高价入的,这个盒子有二切一的hdmi切换功能&#xff0c; 这点从今天来看&#xff0c; 都是一个亮点 华为秘盒M310是一款小巧但功能强大的网络机顶盒。它搭载了基于安卓系统的操作平台&#x…
阅读更多...
序列化方式四——Hessian

序列化方式四——Hessian

介绍 Hessian是一个轻量级的、基于HTTP的RPC&#xff08;远程过程调用&#xff09;框架&#xff0c;由Resin开源提供。它使用一个简单的、基于二进制的协议来序列化对象&#xff0c;并通过HTTP进行传输。Hessian的设计目标是提供一种高效、可靠且易于使用的远程服务调用机制。…
阅读更多...
算法分析——《二分查找》

算法分析——《二分查找》

&#x1f6e9;《二分查找》 &#x1f3a8;题目描述&#xff1a; 给定一个 n 个元素有序的&#xff08;升序&#xff09;整型数组 nums 和一个目标值 target &#xff0c;写一个函数搜索 nums 中的 target&#xff0c;如果目标值存在返回下标&#xff0c;否则返回 -1。 示例 …
阅读更多...
厦门大龄自闭症寄宿学校：为孩子们提供全方位关怀和教育

厦门大龄自闭症寄宿学校：为孩子们提供全方位关怀和教育

在自闭症儿童的教育与关怀领域&#xff0c;厦门大龄自闭症寄宿学校以其专业性和全面性&#xff0c;为众多家庭提供了宝贵的支持与帮助。而在中国南方的广州&#xff0c;也有一所同样致力于自闭症儿童全方位关怀与教育的机构——星贝育园自闭症儿童寄宿制学校。星贝育园以其独特…
阅读更多...
为什么要自定义异常

为什么要自定义异常

背景 我们在阅读各类源码时&#xff0c;会注意到几乎各个功能包中&#xff0c;都包含有自定义的异常&#xff1b;那有没有想过&#xff0c;JDK的源码中&#xff0c;已经定义了各种异常体系&#xff0c;为啥后续的一些依赖Jar包中&#xff0c;还要自定义异常呢&#xff1f; 下面…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023