# 前端

**URL:** https://www.isharkfly.com/c/computer-technology/web-front-end/26.md?page=1

[Latest](https://www.isharkfly.com/latest.md) · [Categories](https://www.isharkfly.com/categories.md) · [Tags](https://www.isharkfly.com/tags.md)

**Page:** 2

---

## [常用几种 Web 图片格式](https://www.isharkfly.com/t/web/16974)

<div class="topic-metadata">

**Author:** [@hex](https://www.isharkfly.com/u/hex)\
**Replies:** 0\
**Last updated:** [February 23, 2025, 4:23pm UTC](https://www.isharkfly.com/t/web/16974 "2025-02-23T16:23:18Z")

</div>

gif 是一种无损的基于索引色的图片格式，支持透明和动画，缺点是由于gif只存储8位索引，所以色彩，细节丰富的图片不适合保存位gif格式，一般在项目中用于loadding动画，logo等； jpg 是一种有损的基于直接色的图片格式，jpg非常适合色彩丰富的图片、渐变色； 同时jpg也不适合icon、logo，因为相比于gif、png，它在文件大小上没有优势； png-8是基于8位索引色的位图格式，png-8相比于gif对透明的支持…

---

## [为什么同一张图 PNG 反 而比 JPG 小](https://www.isharkfly.com/t/png-jpg/16556)

<div class="topic-metadata">

**Author:** [@honeymoose](https://www.isharkfly.com/u/honeymoose)\
**Replies:** 0\
**Last updated:** [November 2, 2024, 1:55pm UTC](https://www.isharkfly.com/t/png-jpg/16556 "2024-11-02T13:55:03Z")

</div>

png格式相关介绍： 1、png格式的体积小，在网络通讯里受到了带宽制约，保证了图片清晰。 2、PNG文件采用了LZ77算法压缩，可以获得很高的压缩比，也不会损失数据。 3、它利用了特殊的编码，标记了出现的数据，而且对图像的颜色没有影响也不会有损失。 4、还优化了网络传输显示，PNG图在浏览器里都是用采流式，因此可以连续的输出。 根本原因在于压缩算法和打包方式不同。 即便PNG是无损格式，JPEG质量100%也可以看作无损格…

---

## [PNG 格式和 JPG 格式都什么时候用](https://www.isharkfly.com/t/png-jpg/16557)

<div class="topic-metadata">

**Author:** [@honeymoose](https://www.isharkfly.com/u/honeymoose)\
**Replies:** 0\
**Last updated:** [November 2, 2024, 2:08pm UTC](https://www.isharkfly.com/t/png-jpg/16557 "2024-11-02T14:08:58Z")

</div>

通常我们都知道，如果是针对网络传输或者网站的格式，我们多会使用 PNG 格式。 如果是照片，大部分都是 JPG 格式的。 那么我们网站常用的截图应该保存为什么格式呢？ 照片截图 照片截图应该保存为 JPG 格式。 虽然现在我们多存储空间的要求越来越低，但能小点就点当然是最好的。 能够降低网络传输的带宽。 以下面的这张照片，我们通过像素截图后保存为 2 种格式来看。 JPG 格式大小为 154 KB。 如果是 …

---

## [jsFiddle 的替代平台](https://www.isharkfly.com/t/jsfiddle/16553)

<div class="topic-metadata">

**Author:** [@honeymoose](https://www.isharkfly.com/u/honeymoose)\
**Replies:** 0\
**Last updated:** [November 2, 2024, 2:27am UTC](https://www.isharkfly.com/t/jsfiddle/16553 "2024-11-02T02:27:21Z")

</div>

总感觉 jsFiddle 不是那么好用。 可用替代为：Moment playcode 的使用感觉更好，能够提供代码提示。 对于一些 JavaScript 代码可用在上面进行一些测试。 通过下面的链接来查看你名字下面定义的项目。 查看当前用户下的所有项目。

---

## [Moment JavaScript 中获取 Unix 时间戳](https://www.isharkfly.com/t/moment-javascript-unix/16185)

<div class="topic-metadata">

**Author:** [@hex](https://www.isharkfly.com/u/hex)\
**Replies:** 0\
**Last updated:** [August 23, 2024, 1:47am UTC](https://www.isharkfly.com/t/moment-javascript-unix/16185 "2024-08-23T01:47:25Z")

</div>

在 JavaScript 中获取时间戳的方法为： import moment from 'moment'; const nowUTC = moment.utc(); console.log(nowUTC.unix()); 我们需要使用 moment 库，这个库更加方便。 时间戳的输出如上面的数字。 毫秒 如果需要输出毫秒的话，应该使用的方法为： console.log(nowUTC.valueOf()); 根据上…

---

## [Moment.js moment().subtract() 方法](https://www.isharkfly.com/t/moment-js-moment-subtract/16256)

<div class="topic-metadata">

**Author:** [@honeymoose](https://www.isharkfly.com/u/honeymoose)\
**Replies:** 0\
**Last updated:** [September 8, 2024, 3:46pm UTC](https://www.isharkfly.com/t/moment-js-moment-subtract/16256 "2024-09-08T15:46:24Z")

</div>

moment 对时间的调整可以参考下面的代码： moment().subtract(Number, String) OR moment().subtract(Duration) OR moment().subtract(Object) 下面的代码示例显示了相关的操作。 const moment = require('moment'); let momentA = moment(); console.log( "Curre…

---

## [JavaScript 如何检查值是否为空](https://www.isharkfly.com/t/javascript/16257)

<div class="topic-metadata">

**Author:** [@honeymoose](https://www.isharkfly.com/u/honeymoose)\
**Replies:** 0\
**Last updated:** [September 8, 2024, 3:47pm UTC](https://www.isharkfly.com/t/javascript/16257 "2024-09-08T15:47:48Z")

</div>

可以使用下面的代码来进行判断。 const value = 2 isNaN(value) //false isNaN('test') //true isNaN({}) //true isNaN(1.2) //false 上面可以做一些基本的判断。

---

## [jsFiddle 是什么平台](https://www.isharkfly.com/t/jsfiddle/14600)

<div class="topic-metadata">

**Author:** [@honeymoose](https://www.isharkfly.com/u/honeymoose)\
**Replies:** 0\
**Last updated:** [September 4, 2023, 12:47am UTC](https://www.isharkfly.com/t/jsfiddle/14600 "2023-09-04T00:47:05Z")

</div>

jsFiddle是 一个web开发人员的练习场，一个可以在很多方面应用的工具 。 我们可以用他来在线编辑一些HTML,CSS,javascript片段。 你编辑的代码可以与其他人分享，或嵌入你的博客等。 使用这个工具，javascript的开发者可以很容易的发现并解决BUG问题。 对于一些小代码的调试，jsFiddle 通常非常有帮助。 如何添加库 对于一些需要的库，我们需要手动添加。 比如说，需要进行测试 moment，我…

---

## [Moment 获得单月的最后一天](https://www.isharkfly.com/t/moment/16471)

<div class="topic-metadata">

**Author:** [@honeymoose](https://www.isharkfly.com/u/honeymoose)\
**Replies:** 0\
**Last updated:** [October 25, 2024, 2:24am UTC](https://www.isharkfly.com/t/moment/16471 "2024-10-25T02:24:17Z")

</div>

这写代码是越来越容易了。 只要能够给 AI 足够的信息，AI 写出来的代码水平还是比较高的。 const moment = require('moment'); let date = moment(); // Get the current date date.endOf('month'); // Set the date to the end of the month console.log(date.format('Y…

---

## [TypeScript: 检查变量是否为 Null 或 Undefined](https://www.isharkfly.com/t/typescript-null-undefined/16467)

<div class="topic-metadata">

**Author:** [@honeymoose](https://www.isharkfly.com/u/honeymoose)\
**Replies:** 1\
**Last updated:** [October 24, 2024, 7:11pm UTC](https://www.isharkfly.com/t/typescript-null-undefined/16467 "2024-10-24T19:11:00Z")

</div>

typescript 变量 null 或者空判断 备注 在 JavaScript 的数据处理过程中，希望了解下如果对变量进行空的字符串判断。

---

## [Vue Google 广告的配置](https://www.isharkfly.com/t/vue-google/16438)

<div class="topic-metadata">

**Author:** [@hex](https://www.isharkfly.com/u/hex)\
**Replies:** 0\
**Last updated:** [October 18, 2024, 11:14pm UTC](https://www.isharkfly.com/t/vue-google/16438 "2024-10-18T23:14:50Z")

</div>

前置条件：已经在Google AdSense 中 添加网站 并通过审核 同时已创建广告单元。 因 VUE 的 Script 配置问题，所以不能直接拷贝内容。 index.html 配置 添加 Google 广告的脚本。 //index.template.html /\* \* 在head标签中添加 script 【 \*\*\*\* 】：你的发布商 ID \*/ \<script async src="https://pagead2.go…

---

## [JavaScript中的 find 和 forEach 方法](https://www.isharkfly.com/t/javascript-find-foreach/16354)

<div class="topic-metadata">

**Author:** [@honeymoose](https://www.isharkfly.com/u/honeymoose)\
**Replies:** 1\
**Last updated:** [September 26, 2024, 5:29pm UTC](https://www.isharkfly.com/t/javascript-find-foreach/16354 "2024-09-26T17:29:09Z")

</div>

JavaScript中的 find 和 forEach 方法之间的对比和异同是什么。 主要区别在于find 方法返回满足条件的第一个元素，而forEach 方法用于遍历数组所有元素。 不管满不满足条件， forEach 都会从头到尾把数组给遍历一次。 forEach() 方法对数组的每个元素执行一次给定的函数。

---

## [JavaScript 数组找到属性并且进行判断的方法](https://www.isharkfly.com/t/javascript/16353)

<div class="topic-metadata">

**Author:** [@honeymoose](https://www.isharkfly.com/u/honeymoose)\
**Replies:** 1\
**Last updated:** [September 26, 2024, 4:18pm UTC](https://www.isharkfly.com/t/javascript/16353 "2024-09-26T16:18:52Z")

</div>

x.forEach((element) =\> { if (element.IsValid) { return element.Value; } }) return ""; 上面的代码没有中断，就算找到了满足条件的内容也没有跳出循环，还是会返回空。 这个问题是出在哪里呢？

---

## [优化 JavaScript 的判断](https://www.isharkfly.com/t/javascript/16352)

<div class="topic-metadata">

**Author:** [@honeymoose](https://www.isharkfly.com/u/honeymoose)\
**Replies:** 7\
**Last updated:** [September 26, 2024, 4:13pm UTC](https://www.isharkfly.com/t/javascript/16352 "2024-09-26T16:13:15Z")

</div>

同事突然问了下面的 Javascript 如何进行优化。 var startIndex = (start === undefined || start === null) ? null : start\[0\].Value; 如何优化 说实话，我也不知道怎么快速判断。 问了下 GPT，感觉 GPT 比我做得好多了，看来程序员这工作是快做不下去了。

---

## [Font Awesome 对应的样式表](https://www.isharkfly.com/t/font-awesome/16262)

<div class="topic-metadata">

**Author:** [@honeymoose](https://www.isharkfly.com/u/honeymoose)\
**Replies:** 0\
**Last updated:** [September 9, 2024, 9:08pm UTC](https://www.isharkfly.com/t/font-awesome/16262 "2024-09-09T21:08:16Z")

</div>

另外，過去只有 fa 而在 FontAwesome 5 因為將圖示分成了 4 大類，所以在使用時前綴變成了 fas, far, fal 和 fab ，分別代表 Solid, Regular, Light 和 Brands： 以图标 python 为例，当我们打开后，可以看到这个图标有下面的样式表： 那么说明，这个图标是 fab，表面这个图标在 brands 下面。 这个以便于我们对使用的样式表进行选择。

---

## [Edge 浏览器查看当前使用的字体](https://www.isharkfly.com/t/edge/16146)

<div class="topic-metadata">

**Author:** [@honeymoose](https://www.isharkfly.com/u/honeymoose)\
**Replies:** 0\
**Last updated:** [August 15, 2024, 1:19pm UTC](https://www.isharkfly.com/t/edge/16146 "2024-08-15T13:19:13Z")

</div>

使用 Edge 的 Debug 工具，移动到需要查看的字符上面就可以看到当前字符使用的样式表中的字体。 这个是前端调试一个比较常见的用法。

---

## [Cent Browser 最近一段时间无法通过JS质询](https://www.isharkfly.com/t/cent-browser-js/16084)

<div class="topic-metadata">

**Author:** [@CAKE\_NICE](https://www.isharkfly.com/u/CAKE_NICE)\
**Replies:** 7\
**Last updated:** [August 5, 2024, 1:37pm UTC](https://www.isharkfly.com/t/cent-browser-js/16084 "2024-08-05T13:37:54Z")

</div>

最近一段时间都是这样，不是IP问题。

---

## [Npm 如何确定全局安装路径](https://www.isharkfly.com/t/npm/15997)

<div class="topic-metadata">

**Author:** [@honeymoose](https://www.isharkfly.com/u/honeymoose)\
**Replies:** 0\
**Last updated:** [July 17, 2024, 9:03pm UTC](https://www.isharkfly.com/t/npm/15997 "2024-07-17T21:03:08Z")

</div>

使用下面的命令可以用来查看 npm 的全局安装路径： npm config get prefix 在上面的输出路径中可以看到使用 npm 全局安装的所有文件。 PS C:\\WorkDir\\Beth-Israel-Lahey-Health\\Source-Code\\APP\\react-native-azure-ad-demo\> npm config get prefix C:\\Users\\yhu\\AppData\\Roam…

---

## [Expo 项目代码自动刷新](https://www.isharkfly.com/t/expo/15965)

<div class="topic-metadata">

**Author:** [@honeymoose](https://www.isharkfly.com/u/honeymoose)\
**Replies:** 0\
**Last updated:** [July 2, 2024, 7:01pm UTC](https://www.isharkfly.com/t/expo/15965 "2024-07-02T19:01:54Z")

</div>

当修改了代码的时候 Expo 的项目只有 Web 的启动方式是自动刷新的。 其他的测试，都需要重新启动后把 APP 推送到设备上 后才可以自动刷新。 npm run web 方式启动项目，在 Web 页面中就可以看到自动刷新了。

---

## [Android Studio 启动模拟器的命令](https://www.isharkfly.com/t/android-studio/15962)

<div class="topic-metadata">

**Author:** [@honeymoose](https://www.isharkfly.com/u/honeymoose)\
**Replies:** 0\
**Last updated:** [July 1, 2024, 9:07pm UTC](https://www.isharkfly.com/t/android-studio/15962 "2024-07-01T21:07:06Z")

</div>

android studio 启动界面后，没有直接启动模拟器。 模拟器的启动按钮为： 单击上面的按钮，就可以看到需要启动的模拟器。 然后单击箭头，启动模拟器。 基于你计算机的内存不同，启动 AVD 模拟器需要的时间不同。 启动成功后，可以看到下面的界面。

---

## [Expo 环境配置](https://www.isharkfly.com/t/expo/15961)

<div class="topic-metadata">

**Author:** [@honeymoose](https://www.isharkfly.com/u/honeymoose)\
**Replies:** 0\
**Last updated:** [July 1, 2024, 9:03pm UTC](https://www.isharkfly.com/t/expo/15961 "2024-07-01T21:03:02Z")

</div>

整体来说，expo 的环境配置需要的工具 ：npm install --global eas-cli 只需要按照 esa-cli 工具即可进行简单的处理。 创建第一个程序 创建第一个程序的命令为： npx create-expo-app firstproject 这里需要一个 npx 命令，这个命令是上面的配置工具安装的。 当完成上面的命令后，在你本地就已经创建了一个 名为 firstproject 的项目了。 查看 npx…

---

## [什么是 Expo](https://www.isharkfly.com/t/expo/15960)

<div class="topic-metadata">

**Author:** [@honeymoose](https://www.isharkfly.com/u/honeymoose)\
**Replies:** 0\
**Last updated:** [July 1, 2024, 8:56pm UTC](https://www.isharkfly.com/t/expo/15960 "2024-07-01T20:56:58Z")

</div>

Expo是一组工具、库和服务，可以通过编写JavaScript来构建本地的iOS和android应用程序。 说人话，就是在React Native的基础上再封装了一层，让我们的开发更方便，更快速。 做过移动端的同学在做跨平台之前肯定会担心一个点，就是各种原生功能（相机，相册，定位，蓝牙等等），使用expo的话，会比你开发一个裸的React Native真的会快很多，而且会少踩很多坑。 没有做过移动端的前端那就更需要这个了，…

---

## [React Native 基于 Expo 开发是什么动物](https://www.isharkfly.com/t/react-native-expo/15959)

<div class="topic-metadata">

**Author:** [@honeymoose](https://www.isharkfly.com/u/honeymoose)\
**Replies:** 0\
**Last updated:** [July 1, 2024, 8:53pm UTC](https://www.isharkfly.com/t/react-native-expo/15959 "2024-07-01T20:53:28Z")

</div>

使用expo开发React Native项目有一段时间了，开发的过程中，踩了不少坑，目前还在踩坑中。在没有了解expo之前，我用React Native写了一个裸的跨平台项目，在安装一些三方和使用原生功能（相机，相册，定位，上传，蓝牙等等），要对andriod和iOS进行不同的适配，（React Native在国内的社区好像并不是很好，很多问题都查不到，只能去看国外论坛），适配的过程中，又费时间，坑还多。而且我之前是做iOS的，对原生应…

---

## [React 与 React Native](https://www.isharkfly.com/t/react-react-native/15958)

<div class="topic-metadata">

**Author:** [@honeymoose](https://www.isharkfly.com/u/honeymoose)\
**Replies:** 0\
**Last updated:** [July 1, 2024, 8:51pm UTC](https://www.isharkfly.com/t/react-react-native/15958 "2024-07-01T20:51:31Z")

</div>

React和React Native是强大的技术，是许多网站和移动应用程序的骨干。早些时候，Facebook用户不能同时查看News Feeds和访问聊天记录。为了克服这个问题，Facebook引入了React，也就是ReactJS。 ReactJS是一个JavaScript库，允许开发者创建交互式用户界面。另一方面，React Native扩展了React的功能，为开发本地移动应用提供了一个框架。但许多经验丰富的开发者并不了解Rea…

---

## [React Native 和 Flutter 怎么选](https://www.isharkfly.com/t/react-native-flutter/15892)

<div class="topic-metadata">

**Author:** [@honeymoose](https://www.isharkfly.com/u/honeymoose)\
**Replies:** 0\
**Last updated:** [June 21, 2024, 1:11pm UTC](https://www.isharkfly.com/t/react-native-flutter/15892 "2024-06-21T13:11:44Z")

</div>

React Native 和 Flutter 是跨平台应用开发框架的领导者，它们各有优势和局限的地方，所以它们都有存在和被选择的场景，这取决于开发者的项目需求、成本预算和团队能力。如果你是为了考虑就业，那么所处地区的岗位机会和薪资水平也都是考虑因素。 Flutter和React Native在几个方面有所不同 Flux架构需要JavaScript桥接来实现原生代码和JavaScript之间的交互。 Flutter有更有组织和结构化的…

---

## [我开了一个 宅宅的肉鸽宝可梦](https://www.isharkfly.com/t/topic/15875)

<div class="topic-metadata">

**Author:** [@VegaMonika](https://www.isharkfly.com/u/VegaMonika)\
**Replies:** 0\
**Last updated:** [June 12, 2024, 6:28am UTC](https://www.isharkfly.com/t/topic/15875 "2024-06-12T06:28:11Z")

</div>

---

## [截屏为什么都说应该保存为 PNG 格式](https://www.isharkfly.com/t/png/180)

<div class="topic-metadata">

**Author:** [@honeymoose](https://www.isharkfly.com/u/honeymoose)\
**Replies:** 0\
**Last updated:** [June 17, 2020, 1:18pm UTC](https://www.isharkfly.com/t/png/180 "2020-06-17T13:18:14Z")

</div>

一直都是使用 JPG 存储截屏的。后来发现文件越来越大，放大后的问题越来越难看。 搜到一篇文章，先摘录部分（http://blog.sina.com.cn/s/blog\_46dac66f010004ox.html） PNG 是软件截屏的最佳选择（体积最小；最清晰）；JPG 是根本错误的选择；gif是可以接受的选择；bmp是 最愚蠢的过时方案——绝大多数情况下，这些断言都是成立的。 简言之，软件截屏用 PNG，别用 JPG。 其实…

---

## [Scss 文件结构](https://www.isharkfly.com/t/scss/15760)

<div class="topic-metadata">

**Author:** [@hex](https://www.isharkfly.com/u/hex)\
**Replies:** 0\
**Last updated:** [May 17, 2024, 6:11pm UTC](https://www.isharkfly.com/t/scss/15760 "2024-05-17T18:11:38Z")

</div>

和所有项目一样，我们希望项目的文件夹结构尽量保持规范化。 这样的好处是能够更快的定位文件和降低学习曲线。 针对 Scss 的文件夹架构可以采取下面的结构。 sass/ | |- abstracts/ | |- \_variables.scss | |- \_media-query.scss | |- \_colors.scss | ... | |- \_index.scss | |- base/ | |…

---

## [Scss 如何编译成 css](https://www.isharkfly.com/t/scss-css/15759)

<div class="topic-metadata">

**Author:** [@honeymoose](https://www.isharkfly.com/u/honeymoose)\
**Replies:** 0\
**Last updated:** [May 17, 2024, 5:51pm UTC](https://www.isharkfly.com/t/scss-css/15759 "2024-05-17T17:51:08Z")

</div>

Scss是Sass3版本当中引入的新语法特性，完全兼容css3的同时继承了Sass强大的动态功能。scss文件可以编译为css文件，下面我们来看一下将scss编译为css的方法。 我们可以使用node来将scss编译为css。下面我们来看一下使用node将scss编译为css的方法。 安装 Sass 使用命令进行安装： yarn add sass 编译 编译的命令为： sass style.scss:style.css 这个…

---

## [Node Sass does not 支持的版本错误](https://www.isharkfly.com/t/node-sass-does-not/788)

<div class="topic-metadata">

**Author:** [@lucas](https://www.isharkfly.com/u/lucas)\
**Replies:** 0\
**Last updated:** [December 25, 2020, 2:04pm UTC](https://www.isharkfly.com/t/node-sass-does-not/788 "2020-12-25T14:04:40Z")

</div>

在进行编译的时候运行到下面的错误： Node Sass does not yet support your current environment: Windows 64-bit with Unsupported runtime (88) 这是因为有版本问题： 如果你使用 “node-sass”: “^4.14.1” 的版本的话，那么你需要将 node 的版本调整为： 14 的版本。 然后再重新编译后就没有问题了。

[Previous page](https://www.isharkfly.com/c/computer-technology/web-front-end/26.md)

[Next page](https://www.isharkfly.com/c/computer-technology/web-front-end/26.md?page=2)