标签 Javascript 下的文章

vue中webpack配置compression-webpack-plugin打包压缩和优化，terser-webpack-plugin在构建过程中对 JavaScript 代码进行压缩和优化

2024-08-12




const CompressionPlugin = require('compression-webpack-plugin');
const TerserPlugin = require('terser-webpack-plugin');
 
module.exports = {
  configureWebpack: config => {
    if (process.env.NODE_ENV === 'production') {
      // 为生产环境修改配置...
      return {
        plugins: [
          // 使用gzip压缩
          new CompressionPlugin({
            algorithm: 'gzip',
            test: /\.js(\?.*)?$/i,
            threshold: 10240,
            minRatio: 0.8,
          }),
        ],
        optimization: {
          minimize: true,
          minimizer: [
            new TerserPlugin({
              terserOptions: {
                compress: {
                  warnings: false,
                  drop_debugger: true, // 去除debugger
                  drop_console: true, // 去除console
                },
              },
              extractComments: false, // 是否将注释提取到单独的文件中
            }),
          ],
        },
      };
    }
  },
};

这段代码中，我们首先导入了compression-webpack-plugin和terser-webpack-plugin。然后，我们通过configureWebpack方法来配置webpack。在生产环境中，我们添加了CompressionPlugin插件来压缩输出的js文件，并通过optimization.minimizer使用TerserPlugin插件进行代码的压缩和优化，比如移除debugger和console语句。这样可以优化打包后的文件大小，提升加载速度。

- 阅读更多 -

JS特效第104弹：jQuery实现文字无缝滚动效果

System

2024-08-12

所有,jquery




// 确保DOM完全加载完毕
$(document).ready(function() {
    // 初始化滚动高度
    var scrollHeight = 0;
 
    // 无缝滚动函数
    function smoothScroll(selector, speed) {
        // 计算滚动高度
        var scrollHeight = $(selector).scrollTop();
        // 滚动动画
        $(selector).animate({
            scrollTop: scrollHeight + speed
        }, 500);
    }
 
    // 定义滚动按钮事件
    $('#btn-scroll').click(function() {
        // 调用无缝滚动函数
        smoothScroll('.scroll-text', 50);
    });
});

这段代码使用jQuery实现了一个简单的无缝滚动效果。用户点击按钮时，指定的文本区域将以平滑的动画效果向下滚动。这是一个典型的jQuery事件处理和动画应用案例。

- 阅读更多 -

【JavaWeb】 JavaScript 开发利器之 jQuery

System

2024-08-12

所有,jquery

在这个例子中，我们将使用jQuery来简化和改进我们的网页中的一些JavaScript代码。我们将创建一个简单的表单，用户可以在其中输入他们的名字，然后通过一个按钮提交这个表单。当按钮被点击时，我们将使用jQuery来显示一个包含用户名的欢迎信息。

首先，确保你的HTML文件中包含了jQuery库：




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery Example</title>
    <!-- 引入jQuery库 -->
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
 
<form id="myForm">
    <label for="username">Enter your name:</label>
    <input type="text" id="username" name="username">
    <button type="submit" id="submitButton">Submit</button>
</form>
 
<div id="welcomeMessage"></div>
 
<script>
    // 使用jQuery处理表单提交
    $('#myForm').on('submit', function(e) {
        e.preventDefault(); // 阻止表单的默认提交行为
        var username = $('#username').val(); // 获取用户名
        $('#welcomeMessage').text('Hello, ' + username + '!'); // 显示欢迎信息
    });
</script>
 
</body>
</html>

在这个例子中，我们使用了jQuery的$('#myForm').on('submit', function(e) {...})来绑定一个事件处理器到表单的提交事件。当用户点击提交按钮时，我们使用e.preventDefault()来阻止表单的默认提交行为，然后我们通过jQuery的$('#username').val()获取用户输入的值，并通过$('#welcomeMessage').text(...)更新页面上的元素内容来显示用户的输入。这样，我们就用jQuery简化了原本的JavaScript代码，使其更加简洁和易于维护。

- 阅读更多 -

基于javaweb+mysql的jsp+servlet毕业生离校管理系统

System

2024-08-12

所有,jquery

该毕设项目涉及的技术包括Java、JSP、Servlet、JQuery、MySQL等，以下是一个简化的模块代码示例，展示了如何创建一个简单的登录功能：




// LoginServlet.java
@WebServlet("/login")
public class LoginServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        String username = request.getParameter("username");
        String password = request.getParameter("password");
 
        // 假设这里有数据库连接和查询逻辑
        boolean isUserValid = checkUser(username, password);
 
        if (isUserValid) {
            // 登录成功，保存用户信息并跳转到主页
            request.getSession().setAttribute("user", username);
            response.sendRedirect("index.jsp");
        } else {
            // 登录失败，保存错误信息并跳转回登录页面
            request.setAttribute("error", "登录失败，用户名或密码错误");
            request.getRequestDispatcher("login.jsp").forward(request, response);
        }
    }
 
    private boolean checkUser(String username, String password) {
        // 这里应该是连接数据库并检查用户名密码的逻辑
        // 为简化代码，这里使用硬编码示例
        return "admin".equals(username) && "password".equals(password);
    }
}




<!-- login.jsp -->
<html>
<head>
    <title>登录页面</title>
</head>
<body>
    <form action="login" method="post">
        用户名: <input type="text" name="username" /><br />
        密码: <input type="password" name="password" /><br />
        <input type="submit" value="登录" />
        <font color="red">${error}</font>
    </form>
</body>
</html>

在实际的系统中，你需要建立数据库表、设置数据库连接、处理用户注册、密码加密等安全问题，并且要保证系统的其他模块如教师、学生信息管理、公告发布等都能正常工作。这个例子只展示了登录功能的一小部分，实际的毕设系统需要包含更多的功能和细节。

- 阅读更多 -

【国际化】用JQuery-i18next的国际化demo，引入json

System

2024-08-12

所有,jquery




<!DOCTYPE html>
<html>
<head>
    <title>jQuery i18next 示例</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/i18next/21.2.2/i18next.min.js"></script>
</head>
<body>
    <div id="translation-container">
        <p data-i18n="welcome.message"></p>
    </div>
 
    <script>
        $(document).ready(function() {
            i18next.init({
                lng: 'en',
                resources: {
                    en: {
                        translation: {
                            'welcome.message': 'Welcome to our website!'
                        }
                    },
                    zh: {
                        translation: {
                            'welcome.message': '欢迎访问我们的网站！'
                        }
                    }
                }
            }, function(err, t) {
                // 初始化完成后进行翻译
                $('#translation-container').i18n();
            });
        });
    </script>
</body>
</html>

这个示例展示了如何使用jQuery和i18next进行简单的国际化。在初始化i18next时，我们直接在resources对象中定义了两种语言的翻译，而不是从外部JSON文件加载。这样可以直观地在页面中看到翻译效果，而无需等待从服务器加载JSON文件。在实际应用中，通常会通过Ajax异步加载语言资源JSON文件。

- 阅读更多 -

JS特效第107弹：jQuery+css3相册图片叠加堆放展开动画特效

System

2024-08-12

所有,css3

以下是一个使用jQuery和CSS3创建相册图片叠加堆放展开动画的示例代码：

HTML部分：




<div id="gallery">
  <div class="item">
    <img src="image1.jpg" alt="Image 1">
    <div class="overlay"></div>
  </div>
  <!-- 其他图片项 -->
</div>

CSS部分：




#gallery .item {
  position: relative;
  width: 200px;
  height: 200px;
  float: left;
  margin: 10px;
  overflow: hidden;
}
 
#gallery .item img {
  width: 100%;
  height: auto;
  transition: transform 0.5s ease-in-out;
}
 
#gallery .item .overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.5s ease-in-out, transform 0.5s ease-in-out;
  transform: translateY(100%);
}
 
/* 其他样式 */

jQuery部分：




$(document).ready(function() {
  $('#gallery .item').hover(function() {
    // 鼠标悬停时
    $(this).find('img').css({
      transform: 'scale(1.1)'
    });
    $(this).find('.overlay').css({
      opacity: 1,
      transform: 'translateY(0)'
    });
  }, function() {
    // 鼠标移出时
    $(this).find('img').css({
      transform: 'scale(1)'
    });
    $(this).find('.overlay').css({
      opacity: 0,
      transform: 'translateY(100%)'
    });
  });
});

这段代码实现了当鼠标悬停在相册图片上时，图片会缩放并且叠加层会由上向下展开的堆放开展动画效果。鼠标移出时，动画效果逆向播放，恢复到原始状态。这是一个典型的利用CSS3的transform和transition属性制作的动画效果。

- 阅读更多 -

Three.js+TypeScript+Webpack学习记录

System

2024-08-12

所有,typescript




// 引入Three.js的相关组件
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import { RGBELoader } from 'three/examples/jsm/loaders/RGBELoader.js';
 
// 定义一个Three.js场景，并设置背景色为黑色
const scene = new THREE.Scene();
scene.background = new THREE.Color(0x000000);
 
// 创建相机并设置属性，然后将相机添加到场景中
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(0, 10, 20);
scene.add(camera);
 
// 创建WebGL渲染器并将其与画布元素关联
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);
 
// 创建一个全局的灯光对象，并将其添加到场景中
const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);
 
// 创建一个平行光源并将其添加到场景中
const directionalLight = new THREE.DirectionalLight(0xffffff, 0.7);
directionalLight.position.set(1, 1, 1);
scene.add(directionalLight);
 
// 创建OrbitControls控件对象，用于操作相机
const controls = new OrbitControls(camera, renderer.domElement);
 
// 创建GLTFLoader加载器实例，并加载模型
const gltfLoader = new GLTFLoader();
gltfLoader.load('models/scene.gltf', (gltf) => {
  scene.add(gltf.scene);
}, undefined, (error) => {
  console.error(error);
});
 
// 创建RGBELoader加载器实例，并加载环境光照HDR图片
const hdrLoader = new RGBELoader();
hdrLoader.load('textures/scene.hdr', (texture) => {
  scene.environment = texture;
  texture.mapping = THREE.EquirectangularReflectionMapping;
  renderer.outputEncoding = THREE.sRGBEncoding;
  renderer.render(scene, camera);
}, undefined, (error) => {
  console.error(error);
});
 
// 使用requestAnimationFrame实现渲染循环
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
  controls.update(); // 更新控件以反映相机的变化
}
animate();

这段代码示例展示了如何在Three.js中创建一个基础场景，并使用OrbitControls来控制相机的旋转和缩放，同时加载一个GLTF格式的3D模型和环境光照HDR图片。代码简洁，注重教学，并且有详细的中文注释。

System

2024-08-12

所有,typescript

在JavaScript中，可以使用Array.prototype.sort()方法对包含日期字符串的数组进行排序。sort()方法可以接受一个比较函数，该函数定义了排序的逻辑。

以下是一个按日期字符串升序和降序排序的例子：




// 日期字符串数组
let dates = ['2023-04-01', '2023-03-01', '2023-05-01'];
 
// 升序排序
dates.sort((a, b) => Date.parse(a) - Date.parse(b));
console.log(dates); // ['2023-03-01', '2023-04-01', '2023-05-01']
 
// 降序排序
dates.sort((a, b) => Date.parse(b) - Date.parse(a));
console.log(dates); // ['2023-05-01', '2023-04-01', '2023-03-01']

如果你想使用Intl.DateTimeFormat的locale选项，可以这样做：




// 使用Intl.DateTimeFormat进行本地化排序
let dates = ['01/04/2023', '01/03/2023', '01/05/2023']; // 假设是MM/DD/YYYY格式
 
// 升序排序
dates.sort((a, b) => {
  let dateA = new Date(a);
  let dateB = new Date(b);
  return dateA - dateB;
});
console.log(dates); // ['01/03/2023', '01/04/2023', '01/05/2023']
 
// 降序排序
dates.sort((a, b) => {
  let dateA = new Date(a);
  let dateB = new Date(b);
  return dateB - dateA;
});
console.log(dates); // ['01/05/2023', '01/04/2023', '01/03/2023']

请注意，locale选项在Intl.DateTimeFormat中并不能直接影响日期的比较，它主要用于本地化日期的展示。在排序日期时，你需要确保日期字符串是可以被Date对象正确解析的格式。如果日期格式复杂，可能需要额外的日期解析逻辑来确保正确的日期顺序。

- 阅读更多 -

TypeScript 从入门到精通：打造可靠、高效的现代 JavaScript

System

2024-08-12

所有,typescript




// 定义一个简单的TypeScript类
class Greeter {
    greeting: string;
 
    constructor(message: string) {
        this.greeting = message;
    }
 
    greet() {
        return "Hello, " + this.greeting + "!";
    }
}
 
// 使用类
let greeter = new Greeter("world");
console.log(greeter.greet()); // 输出: Hello, world!

这段代码展示了如何在TypeScript中定义一个简单的类，包括属性、构造函数和方法。然后实例化这个类，并调用其方法。这是学习TypeScript的基本例子，它演示了类的基本使用方法。

System

2024-08-12

所有,nodejs




# 安装nvm
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
 
# 或者使用wget
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash
 
# 安装特定版本的Node.js
nvm install node # 安装最新版本
nvm install 14  # 安装14版本
 
# 切换使用的Node.js版本
nvm use 14
 
# 查看已安装的Node.js版本
nvm ls
 
# 设置默认的Node.js版本
nvm alias default 14

以上脚本展示了如何安装nvm以及如何使用nvm来安装和管理Node.js版本。这是开发者在跨平台工作时常用的工具，可以方便地切换不同项目所需的Node.js版本。

- 阅读更多 -