深入聊聊Node.js中的模块化

什么是模块化?本篇文章带大家了解一下node中的模块化,介绍一下模块的加载机制,希望对大家有所帮助!

深入聊聊Node.js中的模块化

一、模块化的基本概念

1.1 什么是模块化

模块化是指解决一个复杂问题时,自顶向下逐层把系统划分成若干模块的过程。对于整个系统来说,模块是可组合、分解和更换的单元。

编程领域中的模块化,就是遵守固定的规则,把一个大文件拆成独立并互相依赖的多个小模块。

把代码进行模块化拆分的好处:

提高了代码的复用性

提高了代码的可维护性

可以实现按需加载

二、Node.js 中模块化

2.1 Node.js 中模块的分类

Node.js 中根据模块来源的不同,将模块分为了 3 大类,分别是:

内置模块(内置模块是由 Node.js 官方提供的,例如 fs、path、http 等)

自定义模块(用户创建的每个 .js 文件,都是自定义模块)

第三方模块(由第三方开发出来的模块,并非官方提供的内置模块,也不是用户创建的自定义模块,使用前需要先下载)

2.2 加载模块

使用强大的 require() 方法,可以加载需要的内置模块、用户自定义模块、第三方模块进行使用。例如:

1.png

注意:使用 require() 方法加载其它模块时,会执行被加载模块中的代码;加载自定义模块可以省略文件后缀名’.js’。

2.3 Node.js 中的模块作用域

什么是模块作用域

和函数作用域类似,在自定义模块中定义的变量、方法等成员,只能在当前模块内被访问,这种模块级别的访问限制,叫做模块作用域。

模块作用域的好处

防止了全局变量污染的问题(如果用script标签导入两个js文件且两个文件中都定义了同一个变量,则前一个会被后一个覆盖)

2.4 向外共享模块作用域中的成员

1、module 对象

在每个 .js 自定义模块中都有一个 module 对象,它里面存储了和当前模块有关的信息,打印如下:

2.png

2、module.exports 对象

在自定义模块中,可以使用 module.exports 对象,将模块内的成员共享出去,供外界使用。

外界用 require() 方法导入自定义模块时,得到的就是 module.exports 所指向的对象。

3、共享成员时的注意点

使用 require() 方法导入模块时,导入的结果,永远以 module.exports 指向的对象为准。

3.png

4. exports 对象

由于 module.exports 单词写起来比较复杂,为了简化向外共享成员的代码,Node 提供了 exports 对象。默认情况下,exports 和 module.exports 指向同一个对象。最终共享的结果,还是以 module.exports 指向的对象为准。

4.png

5. exports 和 module.exports 的使用误区

时刻谨记,require() 模块时,得到的永远是 module.exports 指向的对象:

5.png

个人理解:exports 和 module.exports本来指向同一个对象。仅仅通过挂载数据指向的还是同一个对象,通过exports挂载的数据也可以被require模块得到。如果一方赋值(指向另一个对象,那么他们就不指向同一对象了,而require模块得到的是module.exports 指向的对象,所以一旦一方改变指向,require模块就不会得到exports的值。)

注意:为了防止混乱,建议大家不要在同一个模块中同时使用 exports 和 module.exports

2.5 Node.js 中的模块化规范Node.js 遵循了 CommonJS 模块化规范,CommonJS 规定了模块的特性和各模块之间如何相互依赖。

CommonJS 规定:

(1)每个模块内部,module 变量代表当前模块。

(2)module 变量是一个对象,它的 exports 属性(即 module.exports)是对外的接口。

(3)加载某个模块,其实是加载该模块的 module.exports 属性。require() 方法用于加载模块。

三、npm与包

3.1 包

1、什么是包

Node.js 中的第三方模块又叫做包。

就像电脑和计算机指的是相同的东西,第三方模块和包指的是同一个概念,只不过叫法不同。

2、包的来源

不同于 Node.js 中的内置模块与自定义模块,包是由第三方个人或团队开发出来的,免费供所有人使用。

注意:Node.js 中的包都是免费且开源的,不需要付费即可免费下载使用。

3、为什么需要包

由于 Node.js 的内置模块仅提供了一些底层的 API,导致在基于内置模块进行项目开发的时,效率很低。

包是基于内置模块封装出来的,提供了更高级、更方便的 API,极大的提高了开发效率。

包和内置模块之间的关系,类似于 jQuery 和 浏览器内置 API 之间的关系。

4、从哪里下载包

国外有一家 IT 公司,叫做 npm, Inc. 这家公司旗下有一个非常著名的网站: www.npmjs.com/ ,它是全球最大的包共享平台,你可以从这个网站上搜索到任何你需要的包,只要你有足够的耐心!

到目前位置,全球约 1100 多万的开发人员,通过这个包共享平台,开发并共享了超过 120 多万个包 供我们使用。npm, Inc. 公司提供了一个地址为 registry.npmjs.org/ 的服务器,来对外共享所有的包,我们可以从这个服务器上下载自己所需要的包。

注意:

从 www.npmjs.com/ 网站上搜索自己所需要的包

从 registry.npmjs.org/  服务器上下载自己需要的包

5、如何下载包

npm, Inc. 公司提供了一个包管理工具,我们可以使用这个包管理工具,从 registry.npmjs.org/ 服务器把需要的包下载到本地使用。

这个包管理工具的名字叫做 Node Package Manager(简称 npm 包管理工具),这个包管理工具随着 Node.js 的安装包一起被安装到了用户的电脑上。

大家可以在终端中执行 npm -v 命令,来查看自己电脑上所安装的 npm 包管理工具的版本号:

6.png

3.2 npm 初体验

1、在项目中安装包的命令

如果想在项目中安装指定名称的包,需要运行如下的命令:

npm install 包的完整名称

上述的装包命令,可以简写成如下格式:

npm i 包的完整名称

2、初次装包后多了哪些文件

初次装包完成后,在项目文件夹下多一个叫做 node_modules 的文件夹和 package-lock.json 的配置文件。

其中:node_modules 文件夹用来存放所有已安装到项目中的包。require() 导入第三方包时,就是从这个目录中查找并加载包。

package-lock.json 配置文件用来记录 node_modules 目录下的每一个包的下载信息,例如包的名字、版本号、下载地址等。

注意:程序员不要手动修改 node_modules 或 package-lock.json 文件中的任何代码,npm 包管理工具会自动维护它们。

3、安装指定版本的包

默认情况下,使用 npm install 命令安装包的时候,会自动安装最新版本的包。如果需要安装指定版本的包,可以在包名之后,通过 @ 符号指定具体的版本,例如:

npm i moment@2.22.2

4、包的语义化版本规范

包的版本号是以“点分十进制”形式进行定义的,总共有三位数字,例如 2.24.0

其中每一位数字所代表的的含义如下:

第1位数字:大版本

第2位数字:功能版本

第3位数字:Bug修复版本

版本号提升的规则:只要前面的版本号增长了,则后面的版本号归零。

3.3 包管理配置文件

npm 规定,在项目根目录中,必须提供一个叫做 package.json 的包管理配置文件。用来记录与项目有关的一些配置信息。例如:

项目的名称、版本号、描述等

项目中都用到了哪些包

哪些包只在开发期间会用到

那些包在开发和部署时都需要用到

1、多人协作的问题

遇到的问题:第三方包的体积过大,不方便团队成员之间共享项目源代码。

解决方案:共享时剔除node_modules

2、如何记录项目中安装了哪些包

在项目根目录中,创建一个叫做 package.json 的配置文件,即可用来记录项目中安装了哪些包。从而方便剔除 node_modules 目录之后,在团队成员之间共享项目的源代码。

注意:今后在项目开发中,一定要把 node_modules 文件夹,添加到 .gitignore 忽略文件中。

3、快速创建 package.json

npm 包管理工具提供了一个快捷命令,可以在执行命令时所处的目录中,快速创建 package.json 这个包管理配置文件:

npm init -y

注意:

(1)上述命令只能在英文的目录下成功运行!所以,项目文件夹的名称一定要使用英文命名,不要使用中文,不能出现空格。

(2)@运行 npm install 命令安装包的时候,npm 包管理工具会自动把包的名称和版本号,记录到 package.json 中。

特别注意:现在的版本安装包会自动生成package.json。

4、dependencies 节点

package.json 文件中,有一个 dependencies 节点,专门用来记录您使用 npm install 命令安装了哪些包。

5、一次性安装所有的包

当我们拿到一个剔除了 node_modules 的项目之后,需要先把所有的包下载到项目中,才能将项目运行起来。否则会报类似于下面的错误:

7.png

可以运行 npm install 命令(或 npm i)一次性安装所有的依赖包:

8.png

6、卸载包

可以运行 npm uninstall 命令,来卸载指定的包:

佳蓝智能应答系统 佳蓝智能应答系统

类似智能机器人程序,以聊天对话框的界面显示,通过输入问题、或点击交谈记录中的超链接进行查询,从而获取访客需要了解的资料等信息。系统自动保留用户访问信息及操作记录。后台有详细的设置和查询模块。适用领域:无人职守的客服系统自助问答系统智能机器人开发文档、资源管理系统……基本功能:设置对话界面的显示参数设置各类展示广告根据来访次数显示不同的欢迎词整合其他程序。

佳蓝智能应答系统 4 查看详情 佳蓝智能应答系统

npm uninstall 具体的包名

注意:npm uninstall 命令执行成功后,会把卸载的包,自动从 package.json 的 dependencies 中移除掉。卸载没有简写。

7、devDependencies 节点

如果某些包只在项目开发阶段会用到,在项目上线之后不会用到,则建议把这些包记录到 devDependencies 节点中。

与之对应的,如果某些包在开发和项目上线之后都需要用到,则建议把这些包记录到 dependencies 节点中。

您可以使用如下的命令,将包记录到 devDependencies 节点中:

9.png

3.4 解决下包速度慢的问题

1、为什么下包速度慢

在使用 npm 下包的时候,默认从国外的 registry.npmjs.org/ 服务器进行下载,因此下包速度会很慢。

2、淘宝 NPM 镜像服务器

淘宝在国内搭建了一个服务器,专门把国外官方服务器上的包同步到国内的服务器,然后在国内提供下包的服务。从而极大的提高了下包的速度。

扩展:镜像(Mirroring)是一种文件存储形式,一个磁盘上的数据在另一个磁盘上存在一个完全相同的副本即为镜像。

10.png

3、切换 npm 的下包镜像源

下包的镜像源,指的就是下包的服务器地址。

11.png

4、nrm

为了更方便的切换下包的镜像源,我们可以安装 nrm 这个小工具,利用 nrm 提供的终端命令,可以快速查看和切换下包的镜像源。

12.png

3.5 包的分类

使用 npm 包管理工具下载的包,共分为两大类,分别是:

项目包

全局包

1、项目包

那些被安装到项目的 node_modules 目录中的包,都是项目包。

项目包又分为两类,分别是:

开发依赖包(被记录到 devDependencies 节点中的包,只在开发期间会用到)

核心依赖包(被记录到 dependencies 节点中的包,在开发期间和项目上线之后都会用到)

13.png

2、全局包在执行 npm install 命令时,如果提供了 -g 参数,则会把包安装为全局包。

全局包会被安装到 C:Users用户目录AppDataRoamingnpmnode_modules 目录下。

14.png

注意:

(1)只有工具性质的包,才有全局安装的必要性。因为它们提供了好用的终端命令。

(2)判断某个包是否需要全局安装后才能使用,可以参考官方提供的使用说明即可。

3、i5ting_toc

i5ting_toc 是一个可以把 md 文档转为 html 页面的小工具,使用步骤如下:

15.png

3.6 规范的包结构

在清楚了包的概念、以及如何下载和使用包之后,接下来,我们深入了解一下包的内部结构。

一个规范的包,它的组成结构,必须符合以下 3 点要求:

(1)包必须以单独的目录而存在

(2)包的顶级目录下要必须包含 package.json 这个包管理配置文件

(3)package.json 中必须包含 name,version,main 这三个属性,分别代表包的名字、版本号、包的入口。

注意:以上 3 点要求是一个规范的包结构必须遵守的格式,关于更多的约束,可以参考如下网址:https://yarnpkg.com/zh-Hans/docs/package-json

3.7 开发属于自己的包

1、初始化包的基本结构

(1)新建一个itheima-tools文件夹,作为包的根目录

(2)在itheima-tools文件夹中,新建如下三个文件:

package.json (包管理配置文件)

index.js          (包的入口文件)

README.md  (包的说明文档)

2、初始化 package.json

16.png

注:name—用于告知应用程序或软件包的名称;version—表明了当前的版本;main—设置了应用程序的入口点;description是应用程序/软件包的简短描述;keywords—此属性包含与软件包功能相关的关键字数组(有助于浏览node官网找到该软件包);license—指定软件包的许可证。

3、编写包的说明文档

包根目录中的 README.md 文件,是包的使用说明文档。通过它,我们可以事先把包的使用说明,以 markdown 的格式写出来,方便用户参考。

README 文件中具体写什么内容,没有强制性的要求;只要能够清晰地把包的作用、用法、注意事项等描述清楚即可。

3.8 发布包

1、注册 npm 账号

(1)访问 www.npmjs.com/ 网站,点击 sign up 按钮,进入注册用户界面

(2)填写账号相关的信息:Full Name、Public Email、Username、Password

(3)点击 Create an Account 按钮,注册账号

(4)登录邮箱,点击验证链接,进行账号的验证

2、登录 npm 账号

npm 账号注册完成后,可以在终端中执行 npm login 命令,依次输入用户名、密码(密码是隐藏的,看不到,只管输入正确回车即可)、邮箱、发送到邮箱的OTP code后,即可登录成功。

注意:在运行 npm login 命令之前,必须先把下包的服务器地址切换为 npm 的官方服务器。(如果之前是用的taobao服务器一定要切换为npm官方服务器)否则会导致发布包失败!

17.png

3、把包发布到 npm 上

将终端切换到包的根目录之后,运行 npm publish 命令,即可将包发布到 npm 上(注意:包名不能雷同,可以去官网查是否有重名的包)。

4、删除已发布的包

运行 npm unpublish 包名 –force 命令,即可从 npm 删除已发布的包。

注意:

(1)npm unpublish 命令只能删除 72 小时以内发布的包

(2)npm unpublish 删除的包,在 24 小时内不允许重复发布

(3)发布包的时候要慎重,尽量不要往 npm 上发布没有意义的包!

四、模块的加载机制

4.1 优先从缓存中加载

模块在第一次加载后会被缓存。 这也意味着多次调用 require() 不会导致模块的代码被执行多次。

18.png

注意:不论是内置模块、用户自定义模块、还是第三方模块,它们都会优先从缓存中加载,从而提高模块的加载效率。

4.2 内置模块的加载机制

内置模块是由 Node.js 官方提供的模块,内置模块的加载优先级最高。

例如:require(‘fs’) 始终返回内置的 fs 模块,即使在 node_modules 目录下有名字相同的包也叫做 fs。

4.3 自定义模块的加载机制

使用 require() 加载自定义模块时,必须指定以 ./ 或 ../ 开头的路径标识符。在加载自定义模块时,如果没有指定 ./ 或 ../ 这样的路径标识符,则 node 会把它当作内置模块或第三方模块进行加载。

同时,在使用 require() 导入自定义模块时,如果省略了文件的扩展名,则 Node.js 会按顺序分别尝试加载以下的文件:

(1)按照确切的文件名进行加载

(2)补全 .js 扩展名进行加载

(3)补全 .json 扩展名进行加载

(4)补全 .node 扩展名进行加载

(5)加载失败,终端报错

4.4 第三方模块的加载机制

如果传递给 require() 的模块标识符不是一个内置模块,也没有以 ‘./’ 或 ‘../’ 开头,则 Node.js 会从当前模块的父目录开始,尝试从 /node_modules 文件夹中加载第三方模块。

如果没有找到对应的第三方模块,则移动到再上一层父目录中,进行加载,直到文件系统的根目录。

例如,假设在 ‘C:Usersitheimaprojectfoo.js’ 文件里调用了 require(‘tools’),则 Node.js 会按以下顺序查找:

(1)C:Usersitheimaprojectnode_modulestools

(2)C:Usersitheimanode_modulestools

(3)C:Usersnode_modulestools

(4)C:node_modulestools

4.5 目录作为模块

当把目录作为模块标识符,传递给 require() 进行加载的时候,有三种加载方式:

(1)在被加载的目录下查找一个叫做 package.json 的文件,并寻找 main 属性,作为 require() 加载的入口

(2)如果目录里没有 package.json 文件,或者 main 入口不存在或无法解析,则 Node.js 将会试图加载目录下的 index.js 文件。

(3)如果以上两步都失败了,则 Node.js 会在终端打印错误消息,报告模块的缺失:Error: Cannot find module ‘xxx’

本文转载自:https://juejin.cn/post/7083445004240158757

更多node相关知识,请访问:nodejs 教程!

以上就是深入聊聊Node.js中的模块化的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/837363.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年11月27日 11:02:59
下一篇 2025年11月27日 11:03:23

相关推荐

  • Uniapp 中如何不拉伸不裁剪地展示图片?

    灵活展示图片:如何不拉伸不裁剪 在界面设计中,常常需要以原尺寸展示用户上传的图片。本文将介绍一种在 uniapp 框架中实现该功能的简单方法。 对于不同尺寸的图片,可以采用以下处理方式: 极端宽高比:撑满屏幕宽度或高度,再等比缩放居中。非极端宽高比:居中显示,若能撑满则撑满。 然而,如果需要不拉伸不…

    2025年12月24日
    400
  • 如何让小说网站控制台显示乱码,同时网页内容正常显示?

    如何在不影响用户界面的情况下实现控制台乱码? 当在小说网站上下载小说时,大家可能会遇到一个问题:网站上的文本在网页内正常显示,但是在控制台中却是乱码。如何实现此类操作,从而在不影响用户界面(UI)的情况下保持控制台乱码呢? 答案在于使用自定义字体。网站可以通过在服务器端配置自定义字体,并通过在客户端…

    2025年12月24日
    800
  • 如何在地图上轻松创建气泡信息框?

    地图上气泡信息框的巧妙生成 地图上气泡信息框是一种常用的交互功能,它简便易用,能够为用户提供额外信息。本文将探讨如何借助地图库的功能轻松创建这一功能。 利用地图库的原生功能 大多数地图库,如高德地图,都提供了现成的信息窗体和右键菜单功能。这些功能可以通过以下途径实现: 高德地图 JS API 参考文…

    2025年12月24日
    400
  • 如何使用 scroll-behavior 属性实现元素scrollLeft变化时的平滑动画?

    如何实现元素scrollleft变化时的平滑动画效果? 在许多网页应用中,滚动容器的水平滚动条(scrollleft)需要频繁使用。为了让滚动动作更加自然,你希望给scrollleft的变化添加动画效果。 解决方案:scroll-behavior 属性 要实现scrollleft变化时的平滑动画效果…

    2025年12月24日
    000
  • 如何为滚动元素添加平滑过渡,使滚动条滑动时更自然流畅?

    给滚动元素平滑过渡 如何在滚动条属性(scrollleft)发生改变时为元素添加平滑的过渡效果? 解决方案:scroll-behavior 属性 为滚动容器设置 scroll-behavior 属性可以实现平滑滚动。 html 代码: click the button to slide right!…

    2025年12月24日
    500
  • 如何选择元素个数不固定的指定类名子元素?

    灵活选择元素个数不固定的指定类名子元素 在网页布局中,有时需要选择特定类名的子元素,但这些元素的数量并不固定。例如,下面这段 html 代码中,activebar 和 item 元素的数量均不固定: *n *n 如果需要选择第一个 item元素,可以使用 css 选择器 :nth-child()。该…

    2025年12月24日
    200
  • 使用 SVG 如何实现自定义宽度、间距和半径的虚线边框?

    使用 svg 实现自定义虚线边框 如何实现一个具有自定义宽度、间距和半径的虚线边框是一个常见的前端开发问题。传统的解决方案通常涉及使用 border-image 引入切片图片,但是这种方法存在引入外部资源、性能低下的缺点。 为了避免上述问题,可以使用 svg(可缩放矢量图形)来创建纯代码实现。一种方…

    2025年12月24日
    100
  • 如何让“元素跟随文本高度,而不是撑高父容器?

    如何让 元素跟随文本高度,而不是撑高父容器 在页面布局中,经常遇到父容器高度被子元素撑开的问题。在图例所示的案例中,父容器被较高的图片撑开,而文本的高度没有被考虑。本问答将提供纯css解决方案,让图片跟随文本高度,确保父容器的高度不会被图片影响。 解决方法 为了解决这个问题,需要将图片从文档流中脱离…

    2025年12月24日
    000
  • 为什么 CSS mask 属性未请求指定图片?

    解决 css mask 属性未请求图片的问题 在使用 css mask 属性时,指定了图片地址,但网络面板显示未请求获取该图片,这可能是由于浏览器兼容性问题造成的。 问题 如下代码所示: 立即学习“前端免费学习笔记(深入)”; icon [data-icon=”cloud”] { –icon-cl…

    2025年12月24日
    200
  • 如何利用 CSS 选中激活标签并影响相邻元素的样式?

    如何利用 css 选中激活标签并影响相邻元素? 为了实现激活标签影响相邻元素的样式需求,可以通过 :has 选择器来实现。以下是如何具体操作: 对于激活标签相邻后的元素,可以在 css 中使用以下代码进行设置: li:has(+li.active) { border-radius: 0 0 10px…

    2025年12月24日
    100
  • 如何模拟Windows 10 设置界面中的鼠标悬浮放大效果?

    win10设置界面的鼠标移动显示周边的样式(探照灯效果)的实现方式 在windows设置界面的鼠标悬浮效果中,光标周围会显示一个放大区域。在前端开发中,可以通过多种方式实现类似的效果。 使用css 使用css的transform和box-shadow属性。通过将transform: scale(1.…

    2025年12月24日
    200
  • 为什么我的 Safari 自定义样式表在百度页面上失效了?

    为什么在 Safari 中自定义样式表未能正常工作? 在 Safari 的偏好设置中设置自定义样式表后,您对其进行测试却发现效果不同。在您自己的网页中,样式有效,而在百度页面中却失效。 造成这种情况的原因是,第一个访问的项目使用了文件协议,可以访问本地目录中的图片文件。而第二个访问的百度使用了 ht…

    2025年12月24日
    000
  • 如何用前端实现 Windows 10 设置界面的鼠标移动探照灯效果?

    如何在前端实现 Windows 10 设置界面中的鼠标移动探照灯效果 想要在前端开发中实现 Windows 10 设置界面中类似的鼠标移动探照灯效果,可以通过以下途径: CSS 解决方案 DEMO 1: Windows 10 网格悬停效果:https://codepen.io/tr4553r7/pe…

    2025年12月24日
    000
  • 使用CSS mask属性指定图片URL时,为什么浏览器无法加载图片?

    css mask属性未能加载图片的解决方法 使用css mask属性指定图片url时,如示例中所示: mask: url(“https://api.iconify.design/mdi:apple-icloud.svg”) center / contain no-repeat; 但是,在网络面板中却…

    2025年12月24日
    000
  • 如何用CSS Paint API为网页元素添加时尚的斑马线边框?

    为元素添加时尚的斑马线边框 在网页设计中,有时我们需要添加时尚的边框来提升元素的视觉效果。其中,斑马线边框是一种既醒目又别致的设计元素。 实现斜向斑马线边框 要实现斜向斑马线间隔圆环,我们可以使用css paint api。该api提供了强大的功能,可以让我们在元素上绘制复杂的图形。 立即学习“前端…

    2025年12月24日
    000
  • 图片如何不撑高父容器?

    如何让图片不撑高父容器? 当父容器包含不同高度的子元素时,父容器的高度通常会被最高元素撑开。如果你希望父容器的高度由文本内容撑开,避免图片对其产生影响,可以通过以下 css 解决方法: 绝对定位元素: .child-image { position: absolute; top: 0; left: …

    2025年12月24日
    000
  • CSS 帮助

    我正在尝试将文本附加到棕色框的左侧。我不能。我不知道代码有什么问题。请帮助我。 css .hero { position: relative; bottom: 80px; display: flex; justify-content: left; align-items: start; color:…

    2025年12月24日 好文分享
    200
  • 前端代码辅助工具:如何选择最可靠的AI工具?

    前端代码辅助工具:可靠性探讨 对于前端工程师来说,在HTML、CSS和JavaScript开发中借助AI工具是司空见惯的事情。然而,并非所有工具都能提供同等的可靠性。 个性化需求 关于哪个AI工具最可靠,这个问题没有一刀切的答案。每个人的使用习惯和项目需求各不相同。以下是一些影响选择的重要因素: 立…

    2025年12月24日
    000
  • 如何用 CSS Paint API 实现倾斜的斑马线间隔圆环?

    实现斑马线边框样式:探究 css paint api 本文将探究如何使用 css paint api 实现倾斜的斑马线间隔圆环。 问题: 给定一个有多个圆圈组成的斑马线图案,如何使用 css 实现倾斜的斑马线间隔圆环? 答案: 立即学习“前端免费学习笔记(深入)”; 使用 css paint api…

    2025年12月24日
    000
  • 如何使用CSS Paint API实现倾斜斑马线间隔圆环边框?

    css实现斑马线边框样式 想定制一个带有倾斜斑马线间隔圆环的边框?现在使用css paint api,定制任何样式都轻而易举。 css paint api 这是一个新的css特性,允许开发人员创建自定义形状和图案,其中包括斑马线样式。 立即学习“前端免费学习笔记(深入)”; 实现倾斜斑马线间隔圆环 …

    2025年12月24日
    100

发表回复

登录后才能评论
关注微信