标签 JavaScript 下的文章

JavaScript 模块化规范

概述什么是模块化将程序文件依据一定规则拆分成多个文件，这种编码方式就是模块化的编码方式拆分出来的每个文件就是一个模块，模块中的数据都是私有的，模块之间互相隔离同时也能通过一些手段，把模块内的指定数据“交出去”，供其他模块使用为什么需要模块化随着应用的复杂度越来越高，其代码量和文件数量都会急剧增加，会逐渐引发以下问题：全局污染问题依赖混乱问题数据安全问题有哪些模块化规范？随着时间的推移，针对 JavaScript 的不同运行环境，相继出现了多种模块化规范，按时间排序，分别为：CommonJS 服务端应用广泛AMDCMDES6 模块化浏览器端应用广泛导入与导出模块化的核心思想是：模块之间是隔离的，通过导入和导出进行数据和功能的共享。导出（暴露）：模块公开其内部的一部分（如变量、函数等），使这些内容可以被其他模块使用导入（引入）：模块引入和使用其他模块导出的内容，以重用代码和功能CommonJS 规范导出数据在 CommonJS 标准中，导出数据有两种方式：第一种方式：module.exports = value第二种方式：exports.name = value// a.js const

编程 · 07-31 · 215 人浏览

罗塞塔代码挑战（freeCodeCamp项目）

100门有100扇门，最初都是关闭的。你要通过这些门100次，第一次通过，访问每一扇门并“切换”门（如果门关闭，打开它；如果它打开，关闭它）。第二次，只访问2倍数的门（即门#2 #4 #6...）。第三次，只访问3倍数的门（即门#3 #6 #9...），直到只访问100倍数的门。实现一个函数，以确定最后一次通过后门的状态。以数组形式返回最终结果，数组中只包含打开的门的门号。function getFinalOpenedDoors(numDoors) { let doors = [] for (let i = 0; i < 100; i++) doors[i] = false for (let i = 1; i <= 100; i++) for (let i2 = i - 1; i2 < 100; i2 += i) doors[i2] = !doors[i2] for (let i = 0; i < 100; i++) doors[i] = doors[i] ? i + 1 : 0 return doors.filter((door) =

编程 · 07-29 · 234 人浏览

Vue 3 快速上手学习笔记

Vue 3简介Vue 3中文官网：https://cn.vuejs.org/官方发版地址：https://github.com/vuejs/core/releases截止2024年7月17日，最新的公开版本为：v3.4.32。创建Vue 3工程前提条件：已安装 18.3 或更高版本的Node.js安装好pnpm：npm i -g pnpmVite是新一代前端构建工具，官方推荐基于Vite创建项目，具体操作如下。创建项目命令：pnpm create vue@latest，将会安装并执行 create-vue，它是 Vue 官方的项目脚手架工具。具体配置：√ 请输入项目名称： ... vue-project √ 是否使用 TypeScript 语法？ ... 是 √ 是否启用 JSX 支持？ ... 否 √ 是否引入 Vue Router 进行单页面应用开发？ ... 否 √ 是否引入 Pinia 用于状态管理？ ... 否 √ 是否引入 Vitest 用于单元测试？ ... 否 √ 是否要引入一款端到端（End to End）测试工具？ » 不需要 √ 是否引入 ESLint 用于代码质

编程 · 07-29 · 190 人浏览

Vite 构建工具学习笔记

什么是构建工具首先，看下企业级项目里可能会用到哪些功能：TypeScript：如果遇到ts文件需要使用tsc将TypeScript代码转换为js代码React/Vue：安装react-compiler/vue-complier，将jsx文件或者vue文件转换为render函数less/sass/postcss/component-style：需要安装less-loader，sass-loader等一系列编译工具语法降级：babel将ES新语法转换为旧版浏览器可接受语法体积优化：uglifyjs将代码进行压缩，变成体积更小性能更高的文件而浏览器只认识html，css，js，所以就需要一个东西能够把这些功能集成到一起，这个东西就是构建工具。将我们写的浏览器不认识的代码，交给构建工具进行编译处理的过程叫做打包，打包完成以后会给出浏览器可以认识的文件。构建工具承担了哪些脏活累活：模块化开发支持。支持直接从node_modules里引入代码 + 多种模块化支持处理代码兼容性。比如babel语法降级，less/ts语法转换（不是构建工具做的，构建工具只是将这些语法对应的处理工具集成进来自动化处理）

编程 · 07-14 · 194 人浏览

VitePress搭建静态博客

VitePress是什么？VitePress是一个静态站点生成器 (SSG)，专为构建快速、以内容为中心的站点而设计。简而言之，VitePress获取用Markdown编写的内容，对其应用主题，并生成可以轻松部署到任何地方的静态HTML页面。VitePress官网：https://vitepress.dev/演示站点：https://go.aboss.top/前置准备Node.js 18及以上版本安装好pnpm：npm i -g pnpm配置npm镜像源地址：npm config set registry https://registry.npmmirror.com创建项目安装VitePress首先，新建一个项目文件夹VitePress，进入VitePress文件夹根目录后，打开命令提示符窗口，安装VitePress：pnpm add -D vitepress接着，初始化VitePress：pnpm vitepress init┌ Welcome to VitePress! │ ◇ Where should VitePress initialize the config? │ .

教程 · 06-05 · 869 人浏览

JS逆向-数据接口返回加密数据如何进行解密

JS逆向出于对数据安全的考虑，一些网站/APP通常会对数据接口做加密处理。而分析这些接口的加密算法并实现模拟调用的过程就叫做「逆向」。标准算法解密确定JS是否存在混淆或者加密（eval）定位解密位置搜索decrypt(举例，目标网站地址如下：搜索关键字例如搜索：encrypt_data，示例网站地址如下：搜索JSON.parse(示例网站地址如下：

编程 · 01-08 · 294 人浏览

JavaScript加密算法库CryptoJS

CryptoJS是一个JavaScript加密算法库，用于实现各种加密算法和哈希函数，包括对称加密算法、非对称加密算法和哈希函数等。安装依赖：npm install crypto-jsAES对称加密const cryptoJS = require('crypto-js') const message = '666' //要加密的消息 const key = 'hellohello' //用于加密的秘钥 const options = { // 初始化向量用于增加加密算法安全性，必须是一个16字节（128位）的随机字符串或者数组。若未提供会自动生成 iv: cryptoJS.enc.Utf8.parse('suibian'), mode: cryptoJS.mode.CBC, // 加密模式，默认为 ECB padding: cryptoJS.pad.Pkcs7, // 在加密过程中对明文进行填充，默认为 Pkcs7 } // 进行 AES 加密 const encrypted = cryptoJS.AES.encrypt(message, key, options)

编程 · 01-08 · 244 人浏览

Python利用PyExecJS模块执行JS代码

PyExecJS使Python能够运行JS代码，底层实现方式是：在本地JS环境下运行JS代码。安装PyExecJS模块：pip install PyExecJS可以选择用Node.js作为JS运行环境，Node.js官网：https://nodejs.org/验证JS引擎：import execjs print(execjs.get().name) # Node.js (V8)简单使用test.js文件：function func(age) { return age + 1 }run.py文件：import execjs with open("test.js", encoding="utf-8") as f: js_file = f.read() # 编译JS代码，返回上下文对象ctx ctx = execjs.compile(js_file) # call方法，第一个参数是函数名，后面接参数 r = ctx.call("func", 18) print(r) # 19execjs.eval可以直接运行

编程 · 01-05 · 290 人浏览

iztro-开源轻量级紫微斗数排盘JS开源库

iztro是一套支持多语言、轻量级获取紫微斗数排盘信息的JavaScript开源库，通过传入出生日期、时间、性别，输出对应的紫微斗数星盘信息，除此之外，还提供获取运限（大限，小限，流年，流月，流日，流时）的数据、获取流耀（大限和流年的动态星耀）等功能，支持多语言混合输入，输出指定语言数据，感兴趣的同学可以学习研究。下载地址GitHub地址：https://github.com/SylarLong/iztro文档地址：https://ziwei.proiztro紫微派DEMO地址：https://ziwei.pub

软件 · 2023-12-18 · 505 人浏览

如何解决前后端分离跨域问题

跨域问题CORS（Cross-Origin Resource Sharing，跨源资源共享），也叫跨域资源共享，是一种基于HTTP头的机制，该机制通过允许服务器标示除了它自己以外的其他源（域、协议或端口），使得浏览器允许这些源访问加载自己的资源。出现跨域问题的主要原因是同源策略的限制。同源策略是浏览器的一种安全策略，是浏览器的行为，而且只针对fetch、xhr请求。只要协议、主机、端口之一不一致，就不同源。响应头解决要实现CORS很简单，只需在服务端添加响应头：Access-Control-Allow-Origin: *代理解决前端服务器若是用express的话，只需安装一个插件：npm i http-proxy-middleware --save-dev，然后在express服务器启动代码中加入：import {createProxyMiddleware} from 'http-proxy-middleware' // ... app.use('/api', createProxyMiddleware({ target: 'http://localhost:8080', chan

编程 · 2023-12-07 · 282 人浏览

HTML5模板标签<template>使用教程

template标签是HTML5中引入的一种新标签，用于定义可复制的模板。它允许在文档中定义一段包含HTML结构的模板，但不会在页面加载时显示其内容，加载后通过使用JavaScript来显示它。实例<!DOCTYPE html> <html lang="zh-CN"> <head> <style> .title { margin-bottom: 10px; font-size: 30px; color: #333; text-align: center; } .row { background-color: #fff; display: flex; justify-content: center; } .col { border: 1px solid #f0f0f0; width: 15%;

编程 · 2023-12-07 · 387 人浏览

NVM使用教程

NVMNode Version Manager是Node.js版本管理器，可以轻松地在不同的Node.js版本之间进行切换。通过它可以安装和切换不同版本的Node.js，为了解决Node.js各种版本存在不兼容现象可以通过它安装和切换不同版本。官网：https://github.com/nvm-sh/nvmWindow安装NVM for Windows：https://github.com/coreybutler/nvm-windows/到官网下载nvm-steup.exe，双击运行安装。使用查看当前使用的Node.js版本：nvm current。查看所有Node.js版本，*表示当前使用的版本：nvm ls。查看可安装列表：nvm list available。设置国内镜像设置npm_mirror：nvm npm_mirror https://npmmirror.com/mirrors/npm/。设置node_mirror：nvm node_mirror https://npmmirror.com/mirrors/node/。安装Node.js版本安装最新稳定版：nvm insta

编程 · 2023-12-04 · 254 人浏览

Vue 3数组变化侦测

变更Vue能够侦听响应式数组的变更方法，并在它们被调用时触发相关的更新。这些变更方法包括：push()pop()shift()unshift()splice()sort()reverse()替换变更方法会对调用它们的原数组进行变更。相对地，也有一些不可变(immutable)方法，例如filter()、concat()和slice()，这些都不会更改原数组，而是返回一个新数组。当遇到非变更方法时，需要将旧的数组替换为新的。

编程 · 2023-10-20 · 232 人浏览

Vite + Vue + TypeScript搭建前端项目

工具官网Vite：https://cn.vitejs.dev/Vue：https://cn.vuejs.org/TypeScript：https://www.typescriptlang.org/zh/项目初始化pnpm全称是“performant npm”，即高性能的npm。pnpm由npm/yarn衍生而来，解决了npm/yarn内部潜在的bug，极大的优化了性能，扩展了使用场景，被誉为“最先进的包管理工具”。安装pnpm：npm i -g pnpm。项目初始化：pnpm create vite：√ Project name: ... vite-project√ Select a framework: » Vue√ Select a variant: » TypeScript安装依赖：cd vite-project pnpm i运行项目：pnpm run dev。想要运行项目后浏览器自动打开，可修改配置文件package.json下的"scripts" -> "dev"为："vite --open"。删除默认文件：删除src\style.css文件，对应的删除src\main

编程 · 2023-10-19 · 311 人浏览

Axios学习笔记

Ajax是对原生XHR的封装，而Axios又对原生Ajax进行了封装。介绍Axios是一个基于Promise的网络请求库，主要实现Ajax异步通信功能，用于向后端发起请求，是一种可以发HTTP请求的JS库。Axios官网：https://www.axios-http.cn/使用<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script&g

编程 · 2023-10-08 · 243 人浏览

前端React 18系统

React官网新官网：https://zh-hans.react.dev/编程环境Node.jsNode.js官网：https://nodejs.org/en也可以使用淘宝npm镜像下载对应的node版本：https://npm.taobao.org/mirrors/node/Linux Mint环境wget https://nodejs.org/dist/v18.17.1/node-v18.17.1-linux-x64.tar.xz tar -xvf node-v18.17.1-linux-x64.tar.xz mv node-v18.17.1-linux-x64 nodejs sudo mv nodejs /usr/local/接下来建立软链接，使得命令全局可用：sudo ln -s /usr/local/nodejs/bin/node /usr/local/bin sudo ln -s /usr/local/nodejs/bin/npm /usr/local/bin将/usr/local/bin路径添加到PATH环境变量中：sudo chmod o+w /etc/profile

编程 · 2023-10-07 · 215 人浏览

Vue 2组件库Vant 2

Vant 2官网：https://vant-contrib.gitee.io/vant/v2/#/zh-CN/quickstart安装安装命令：yarn add vant@latest-v2。引入组件导入所有组件在src\main.js文件中添加：import Vant from 'vant' import 'vant/lib/index.css' // 插件安装初始化，内部会将所有的vant组件进行导入注册 Vue.use(Vant)使用测试，在src\App.vue文件中随便添加一个按钮组件：<template> <div id="app"> <van-button type="danger">危险按钮</van-button> <router-view /> </div> </template> <style lang="less"></style>自动按需引入组件 (推荐)babel-p

编程 · 2023-09-27 · 239 人浏览

JavaScript计算找零（freeCodeCamp项目）

需求编写一个用于收银机的函数 checkCashRegister()：它的第一个参数为售价 price、第二个参数为支付金额 cash、第三个参数为收银机內的金额 cid。cid 是包含货币面值的二维数组。函数 checkCashRegister() 应返回含有 status 属性和 change 属性的对象。如果收银机內的金额少于应找回的零钱数，或者无法返回确切的数目时，返回 {status: "INSUFFICIENT_FUNDS", change: []}。如果收银机內的金额恰好等于应找回的零钱数，返回 {status: "CLOSED", change: [...]}，其中 change 的属性值就是收银机內的金额。否则，返回 {status: "OPEN", change: [...]}，其中 change 键值是应找回的零钱数，并将找零的面值由高到低排序。货币单位 Unit面值Penny0.01 美元（PENNY）Nickel0.05 美元（NICKEL）Dime0.1 美元（DIME）Quarter0.25 美元

编程 · 2023-09-22 · 372 人浏览

JavaScript电话号码检查器（freeCodeCamp项目）

需求如果传入的字符串是一个有效的美国电话号码格式，则返回 true，否则返回 false。有效的美国电话号码格式：555-555-5555(555)555-5555(555) 555-5555555 555 555555555555551 555 555 5555其中，地区码（电话号码中的前三位）是必须的。如果提供国家代码，则国家代码只能为 1。代码实现function telephoneCheck(str) { const regex = /^(1\s?)?(\d{3}|$\d{3}$)[\s\-]?\d{3}[\s\-]?\d{4}$/ return regex.test(str) }

编程 · 2023-09-22 · 394 人浏览

JavaScript恺撒密码（freeCodeCamp项目）

需求恺撒密码（Caesar cipher），也被称为移位密码（shift cipher）。在移位密码中，明文中的字母通过按照一个固定数目进行偏移后被替换成新的字母。现代最常被应用到的一个变种就是 ROT13 加密，也就是明文中的字母向后移 13 位。也就是，A ↔️ N，B ↔️ O等等。编写一个函数，它将把使用 ROT13 加密编码的字符串作为输入并返回解码字符串。所有解码后的字母都必须为字母大写。请不要解码非字母的字符（例如，空格、标点符号），但需要在结果中保留它们。代码实现function rot13(str) { const abc = 'ABCDEFGHIJKLMNOPQRSTUVWXYZABCDEFGHIJKLMNOPQRSTUVWXYZ' let res = [] for (let i = 0; i < str.length; i++) { let char = str[i] if (abc.includes(char)) { let index = abc.indexOf(char) + 13 res.push

编程 · 2023-09-22 · 228 人浏览

JavaScript罗马数字转换器阿拉伯数字转罗马数字（freeCodeCamp项目）

需求把传入的数字转为罗马数字，所有罗马数字答案都应该大写。罗马数字由7个基本字符组成：IVXLCDMV̅15105010050010005000代码实现function convertToRoman(num) { let romanArr = [] const romanObj = { 0: ['', 'I', 'II', 'III', 'IV', 'V', 'VI', 'VII', 'VIII', 'IX'], 1: ['', 'X', 'XX', 'XXX', 'XL', 'L', 'LX', 'LXX', 'LXXX', 'XC'], 2: ['', 'C', 'CC', 'CCC', 'CD', 'D', 'DC', 'DCC', 'DCCC', 'CM'], 3: ['', 'M', 'MM', 'MMM', 'I̅V̅', 'V̅', 'V̅I̅', 'V̅I̅I̅', 'V̅I̅I̅I̅', 'I̅X̅'], } const numArr = num .toString() .split('') .m

编程 · 2023-09-22 · 286 人浏览