搜索到
20
篇与
的结果
-
【CSS】font-weight设置为500显示不出加粗效果 【CSS】font-weight设置为500显示不出加粗效果问题出在操作系统上：macOS 系统默认的华文黑体(STHeiti) 有七个矢量级别：Heavy/Bold/MediumP4/Regular/Thin/Light/UltraLightP2 ，它包含上面 CSS 中设定的 500 这个精度。Windows 系统默认的宋体(simsun) 没有那么多级别。在缺少级别支持的前提下，CSS 会根据回退机制寻找一个类似的精度，结果就变成了400 (Normal)。回退机制：如果指定的权重值不可用，则使用以下规则来确定实际呈现的权重：如果指定的权重值在 400和 500之间（包括 400和 500）：按升序查找指定值与 500之间的可用权重；如果未找到匹配项，按降序查找小于指定值的可用权重；如果未找到匹配项，按升序查找大于 500的可用权重。如果指定值小于 400，按降序查找小于指定值的可用权重。如果未找到匹配项，按升序查找大于指定值的可用权重（先尽可能的小，再尽可能的大）。如果指定值大于 500，按升序查找大于指定值的可用权重。如果未找到匹配项，按降序查找小于指定值的可用权重（先尽可能的大，再尽可能的小）。以上策略意味着，如果一个字体只有 normal 和 bold 两种粗细值选择，指定粗细值为 100-500 时，实际渲染时将使用 normal，指定粗细值为 501-900 时，实际渲染时将使用 bold 。 -
React中编写css的几种方式 React中编写css的几种方式使用的是原生css样式，在.js文件中引入并使用className(原生css, 缺点是不方便样式隔离，容易造成样式污染)行内样式（缺点：行内样式的通用缺点）CSS Module 例如：index.module.scss index.module.less index.module.csscss-in-jscss-in-js是在js中直接编写css的技术，也是react官方推荐的编写css的方案。CSS Module也具有良好的开发体验，性能也更好。优点：同vue的scpoe可以做到样式隔离的效果代码共享，轻松在 JS 和 CSS 之间共享常量和函数方便CSS单元化测试劣势：增加运行时开销。增加构建后产物体积。使 React DevTools 变得混乱，debug 时可读性变差CSS-in-JS并不是一颗能完美解决样式维护难题的银弹，但是通过借助一定最佳实践后，足以应对大多数前端需求，比如主题切换、组件样式封装、用户端样式覆盖等等，并显著提升前端团队在维护样式时的工作效率，css-in-js方案比较从体积来看：emotion的体积是最小的。从技术生态环境（以及流行程度）：styled-components的star最多，文档相对来讲也是最完善的。从支持的特性来看：emotion、aphrodite、jss支持的特性是最多的。CSS-in-JS Playground是一个可以快速尝试不同CSS-in-JS实现的网站，在线尝试（https://www.cssinjsplayground.com/）
-
vite基础理解 vite 是一个工程化构建的工具，它相比于webpack，能够显著提高开发和构建速度。vite 在开发环境其实是不进行编译的，vite 利用原生的es模块（js里，原生es模块就是esm）通过构建一个开发服务器（静态资源服务器）来在浏览器里运行。因为浏览器支持esm后，所以vite不用像webpack那样，从入口文件开始，对js进行编译，通过不同的loader编译其它不同的文件，通过plugin扩展其功能（vite也有插件，只是不像webpack这么丰富）最终输出一个或多个编译后的文件。vite 利用浏览器支持esm的特性，在开发环境中只是构建一个静态资源服务器，加上一些其他的功能：预构建：通过esbuild进行预构建，预构建做了两件事，一、原生的esm不支持非路径引入，预构建重写导入为合法的 URL；二是通过esbuild，在构建中做了静态资源分析，捆绑commonjs，css，等其它，利用了esm特性实现了tree shaking 构建了一个开发服务器。急速无需缓存。esbuild也是一个web构建工具。对标rollup和webpack热更新： vite 通过esmHMR模块实现热更新，vite构建项目自动实现，无需自己添加修改配置。如果想要手动处理热更新，Vite 通过特殊的 import.meta.hot 对象暴露手动 HMR API。ts，vite支持ts。esbuild，vite，webpack天然支持ts。vite只负责把ts转成js，也就是只编译，不进行类型检查，类型检查用eslintvite支持vue，jsx，tsx。其中是esbuild可以转义js，ts，jsx，css，go等类型文件vite 支持静态资源和glob的导入，vite 通过import.meta.glob函数从文件系统中导入文件（这个不是esm和web标准，是vite特有的功能）vite 支持webAssembly和web workers。其中webAssembly需要引入插件处理。webAssembly是一个面向web的虚拟指令集，相当于浏览器可识别的web汇编语言。现在比较流行的是webAssembly+rust开发。（c和c++也是常用语言）web workers：html5提供的浏览器多线程解决方案 js是单线程的，用于大量数据计算，图像处理等计算密集型任务，谨慎选择应用场景。缺点：没有dom访问权限vite在生产环境：由于浏览器对esm的支持，esm文件只是经过esbuild预编译也可以在浏览器里运行，但是为了更好的加载性能，以及tree shaking，懒加载和代码分割等功能，所以vite用rollup进行代码编译。rollup的特点是：较webpack轻便，配置简单，静态资源分析，tree shaking，模块化处理直接使用的是esm，不像webpack为了兼容commonjs，打包出的文件多了很多life文件。
-
package.json的配置参考 package.json的配置参考package.json文件是Node.js项目中的一个重要配置文件，用于存储项目的元数据和各种配置信息。以下是一些常见的 package.json配置项：{ "name": "my-project", // 项目名称，遵循npm的命名规范 "private":true,//如果设置为 true，npm 将拒绝发布此包。 "version": "1.0.0", // 项目版本号，遵循semver规范 "description": "A short description of your project", // 项目描述 "main": "index.js", // 项目的入口文件 "bin": { "my-cli": "./bin/my-cli.js" // 如果你想让npm install -g全局安装后，可以通过命令行直接运行某个文件，可以在这里配置 }, "scripts": { "start": "node index.js", // 启动项目的命令 "test": "jest", // 测试命令 "lint": "eslint .", // 代码风格检查命令 "build": "webpack --config webpack.prod.js", // 构建生产环境的命令 "dev": "webpack serve --config webpack.dev.js" // 开发服务器启动命令 }, "dependencies": { "express": "^4.17.1", // 项目运行所依赖的模块 "axios": "^0.21.1" // 其他依赖模块 }, "devDependencies": { "jest": "^27.0.0", // 开发依赖的测试框架 "eslint": "^7.0.0", // 开发依赖的代码风格检查工具 "webpack": "^5.0.0", // 开发依赖的打包工具 "webpack-cli": "^4.0.0", // webpack的命令行工具 "webpack-merge": "^5.0.0" // 用于合并webpack配置文件 }, "peerDependencies": { "react": "^17.0.0" // 同等依赖，表示你的包需要和其他包一起使用，且版本需要匹配 }, "optionalDependencies": { "fsevents": "^2.0.0" // 可选依赖，如果无法安装则不会报错 }, "engines": { "node": ">=14.0.0", // 项目所依赖的Node.js版本范围 "npm": ">=6.0.0" // 项目所依赖的npm版本范围 }, "browserslist": [ "> 0.2%", // 目标浏览器版本范围 "not dead", // 不包括已经废弃的浏览器 "not ie <= 11" // 不包括IE 11及以下版本 ], "files": [ "dist", // 发布的npm包中包含的文件和目录 "src" ], "author": "Your Name <your.email@example.com>", // 作者信息 "license": "ISC", // 许可证信息 "repository": { "type": "git", "url": "git+https://github.com/your-username/my-project.git" // 项目仓库地址 }, "bugs": { "url": "https://github.com/your-username/my-project/issues" // 项目问题跟踪地址 }, "homepage": "https://github.com/your-username/my-project#readme", // 项目主页或文档地址 "keywords": [ "example", "project" // 项目的关键词列表 ], "publishConfig": { "registry": "https://your-custom-registry.com" // 自定义的npm仓库地址 }, "config": { "port": "8080" // 自定义配置，可以通过npm_package_config_port在代码中获取 }, "directories": { "lib": "lib", // 指示库文件的位置 "test": "test" // 指示测试文件的位置 }, "types": "./index.d.ts", // TypeScript的类型定义文件 "workspaces": [ "packages/*" // 如果你的项目是一个monorepo，这里可以配置工作区的位置 ], // 其他可能的配置项... }配置具体描述：name：项目的名称。名称的长度应小于或等于 214 个字符。不能以点（.）或下划线（_）开头。不能包含大写字母（因为 npm 包的 URL 是基于这个名称生成的）。名称应尽可能简短且语义化。version：项目的版本号，遵循语义化版本规范（semver）。description：项目的简短描述。main：项目的入口文件，通常是 JavaScript 文件。当其他文件通过 require() 引入你的项目时，会加载这个文件。scripts：项目的 npm 脚本，可以包含各种启动、测试、构建等命令。dependencies：项目运行所依赖的模块列表。这些依赖会被安装到生产环境。devDependencies：项目开发过程中需要的依赖，但不会在生产环境中使用。peerDependencies：同等依赖，表示你的包需要和其他包一起使用，且版本需要匹配。optionalDependencies：可选依赖，如果无法安装则不会报错。engines：指定项目所依赖的 Node.js 和 npm 的版本范围。browserslist：指定项目的目标浏览器版本，用于工具如 Autoprefixer、Babel 等。bin：指定可执行文件的位置，以便 npm install -g 时可以全局安装。files：指定在发布 npm 包时需要包含的文件列表。author：项目的作者信息。license：项目的许可证信息，如 MIT、BSD 等。repository：项目的仓库地址，如 GitHub 仓库。bugs：项目问题提交地址，通常是 GitHub issue 页面的链接。homepage：项目的主页或文档地址。keywords：项目的关键词列表，用于 npm 搜索。publishConfig：发布时使用的配置，如自定义的 npm 仓库地址。config：用于配置脚本中使用的环境变量。directories：指定项目目录的用途，如 lib 表示库文件的位置，test 表示测试文件的位置。types 或 typings：对于 TypeScript 项目，指定类型定义文件的位置。workspaces：对于 monorepo（多包仓库），指定工作区的位置。private：如果设置为 true，npm 将拒绝发布此包。sideEffects：对于 webpack 等打包工具，指定模块是否有副作用（即是否每次导入时都需要执行）。os：指定模块可以在哪些操作系统上运行。cpu：指定模块可以在哪些 CPU 架构上运行。exports：定义一个包的子路径的入口点，允许其他包使用更细粒度的导入语句。module：指定 ES6 模块入口点，用于支持 ES6 模块的打包工具。browser：指定在浏览器环境中使用的入口点。unpkg 和 jsdelivr：指定用于通过 unpkg 或 jsdelivr CDN 服务的文件路径。resolutions：用于覆盖依赖项中的特定子依赖项的版本。bundleDependencies 或 bundledDependencies：列出在发布包时应该被打包的依赖项。man：指定 man 手册文件的位置。contributors：项目的贡献者列表。funding：指定项目的资金赞助信息。
-
前端模块化——CommonJS、AMD、CMD、ESM 前端模块化——CommonJS、AMD、CMD、ESM前端模块化的概念：前端最初是没有模块化的，都是通过script引入，然后这个script引入的文件就会被全部加载，开发者需要看这个完整的script，才能知道这个文件的作用。模块化就是一个单独的script文件就是一个独立的模块，通过向外暴露特定的导出变量和函数，开发者不用关心文件里的其它内容是怎么实现的，提高了代码的复用率和开发效率。模块化的基础是js函数。前端模块化的发展历程：前端没有模块化-nodejs出现（node使用commonjs实现前端模块化）-CommonJS用同步的方式加载模块，在浏览器里限于网络原因，就需要使用异步加载。所以出现了AMDjs和CMD（他们都是为了解决异步加载的问题）-后来的ESM，新的浏览器标准，之前的amd和cmd只是补丁，esm是重新定义了标准，成为浏览器和服务器通用的模块解决方案其模块功能主要由两个命令构成：export和 import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。结语 commonjs是旧的方式，amd和cmd是commonjs的补丁。esm是新的标准，未来是esm的。commonjscommonjs用同步的方式加载模块。主要是在node里使用，是服务器端使用方法。有四个重要的环境变量为模块化的实现提供支持：module、exports、require、global。实际使用时，用 module.exports定义当前模块对外输出的接口（不推荐直接用 exports），用 require加载模块。exports和 module.export区别：module.export： 每个模块内部，module变量代表当前模块，这个变量是一个对象，它的exports属性（即module.exports）是对外的接口。加载某个模块，其实就是加载该模块的exports属性。既可以使用 .语法，也可以使用 =直接赋值。exports：为了方便，node为每个模块提供了一个exports变量，指向module.exports。这等同于在每个模块头部，有这么一行代码：var exports = module.exports;所以不能直接将exports指向一个值，这会切断 exports 与 module.exports 的联系（但是可以用module.exports来指向一个值）./demo.js var age = 7; var sayHello= function (name) { return "hello " + name; }; exports = age; //不要这么干。这么做会切断exports与module.exports的联系 AMDCommonJS用同步的方式加载模块。在服务端，模块文件都存放在本地磁盘，读取非常快，所以这样做不会有问题。但是在浏览器端，限于网络原因，更合理的方案是使用异步加载。AMD规范采用异步方式加载模块，模块的加载不影响它后面语句的运行。所有依赖这个模块的语句，都定义在一个回调函数中，等到加载完成之后，这个回调函数才会运行。这里介绍用require.js实现AMD规范的模块化：用 require.config()指定引用路径等，用 definde()定义模块，用 require()加载模块。首先我们需要引入require.js文件和一个入口文件main.js。main.js中配置 require.config()并规定项目中用到的基础模块。 /** 网页中引入require.js及main.js **/ <script src="js/require.js" data-main="js/main"></script> /** main.js 入口文件/主模块 **/ // 首先用config()指定各模块路径和引用名 require.config({ baseUrl: "js/lib", paths: { "jquery": "jquery.min", //实际路径为js/lib/jquery.min.js "underscore": "underscore.min", } }); // 执行基本操作 require(["jquery","underscore"],function($,_){ // some code here });ES6 ModuleES6 在语言标准的层面上，实现了模块功能，而且实现得相当简单，旨在成为浏览器和服务器通用的模块解决方案。其模块功能主要由两个命令构成：export和 import。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。 /** 定义模块 math.js **/ var basicNum = 0; var add = function (a, b) { return a + b; }; export { basicNum, add }; /** 引用模块 **/ import { basicNum, add } from './math'; function test(ele) { ele.textContent = add(99 + basicNum); }总结CommonJs、AMD、CMD 是js模块化开发的规范，对应的实现是Node.js、require.js、sea.jsCommonJs主要针对服务端，AMD/CMD/ESModule主要针对浏览器端，容易混淆的是AMD/CMD。（顺便提一下，针对服务器端和针对浏览器端有什么本质的区别呢？服务器端一般采用同步加载文件，也就是说需要某个模块，服务器端便停下来，等待它加载再执行。这里如果有其他后端语言，如java。而浏览器端要保证效率，需要采用异步加载，这就需要一个预处理，提前将所需要的模块文件并行加载好。）AMD/CMD区别，虽然都是并行加载js文件，但还是有所区别，AMD是预加载，在并行加载js文件同时，还会解析执行该模块（因为还需要执行，所以在加载某个模块前，这个模块的依赖模块需要先加载完成）；而CMD是懒加载，虽然会一开始就并行加载js文件，但是不会执行，而是在需要的时候才执行。(1)加载方式：AMD异步加载，CMD同步加载。(2)依赖声明：AMD需要在模块定义时声明依赖，CMD可以在需要时再引入依赖。(3)适用环境：AMD更适用于浏览器环境，CMD更适用于服务器端环境。(4)实现工具：RequireJS是AMD规范的主要实现，而SeaJS是CMD规范的主要实现。AMD/CMD的优缺点.一个的优点就是另一个的缺点， 可以对照浏览。AMD优点：加载快速，尤其遇到多个大文件，因为并行解析，所以同一时间可以解析多个文件。AMD缺点：并行加载，异步处理，加载顺序不一定，可能会造成一些困扰，甚至为程序埋下大坑。CMD优点：因为只有在使用的时候才会解析执行js文件，因此，每个JS文件的执行顺序在代码中是有体现的，是可控的。CMD缺点：执行等待时间会叠加。因为每个文件执行时是同步执行（串行执行），因此时间是所有文件解析执行时间之和，尤其在文件较多较大时，这种缺点尤为明显。（PS：重新看这篇文章，发现这里写的不是很准确。确切来说，JS是单线程，所有JS文件执行时间叠加在AMD和CMD中是一样的。但是CMD是使用时执行，没法利用空闲时间，而AMD是文件加载好就执行，往往可以利用一些空闲时间）CommonJS 和 ES Module 区别：CommonJS 模块输出的是一个值的拷贝，ES6 模块输出的是值的引用如何使用？CommonJs 的话，因为 NodeJS 就是它的实现，所以使用 node 就行，也不用引入其他包。AMD则是通过 <script>标签引入require.js，CMD则是引入sea.js
