发表更新前端 / Css / Flex

[转]Flex 布局教程：语法篇

原文地址 : Flex 布局教程：语法篇 - 阮一峰的网络日志
网页布局（layout）是 CSS 的一个重点应用。

布局的传统解决方案，基于盒状模型，依赖 [display](https://developer.mozilla.org/en-US/docs/Web/CSS/display) 属性 + [position](https://developer.mozilla.org/en-US/docs/Web/CSS/position)属性 + [float](https://developer.mozilla.org/en-US/docs/Web/CSS/float)属性。它对于那些特殊布局非常不方便，比如，垂直居中就不容易实现。

2009年，W3C 提出了一种新的方案—-Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。

Flex 布局将成为未来布局的首选方案。本文介绍它的语法，下一篇文章给出常见布局的 Flex 写法。网友 JailBreak 为本文的所有示例制作了 Demo，也可以参考。
以下内容主要参考了下面两篇文章：A Complete Guide to Flexbox 和 A Visual Guide to CSS3 Flexbox Properties。

阅读更多
发表更新前端 / 环境部署

部署测试加速

对于 IOS 应用的审核, 在进行包提交审核的时候经常会遇到加载 Vue 开发页面出现白屏的情况, 遇到此情况我们将 Vue 页面支持全球加速, 如果是 oss , 开启静态访问, 全球访问

服务器使用 aliyun 弗吉尼亚 进行测试

未加速

已加速

语雀镜像 : 部署测试加速 ,点此 提问

发表更新前端 / 其他 / nvm

Nvm - FAQ

卸载 Nvm

基本上，需要反向执行 install.sh中的步骤-从 ~/.bash_profile(和/或 ~/.profile) 中删除所有 nvm 注册行，然后重新打shell
如果是 nvm 失效, 只需从 .bash_profile或 .profile中删除NVM命令就足够, 如果你有其他的 node 执行环境, 则也需要删除, 则需要执行如下命令

1
2
$ rm -rf ~/.nvm
$ rm -rf ~/nvm

原文地址 : Nvm - FAQ
本站是作者语雀文档的镜像站, 如对文章有任何疑问请移步语雀进行 提问

发表更新前端 / Html

元素 client*, offset*, scroll* 介绍

Client *

clientHeight : 元素内部的高度(单位像素)，包含内边距，但不包括水平滚动条、边框和外边距
clientWidth: 表示元素的内部宽度，以像素计。该属性包括内边距 padding，但不包括边框 border、外边距 margin 和垂直滚动条

image.png

Offset*

offsetWidth : 包含元素的边框(border)、水平线上的内边距(padding)、竖直方向滚动条(scrollbar)（如果存在的话）、以及CSS设置的宽度(width)的值
offsetHeight: 包括元素的边框、内边距和元素的水平滚动条（如果存在且渲染的话），不包含:before或:after等伪类元素的高度
image.png

Scroll*

**scrollHeight : **一个元素内容高度的度量，包括由于溢出导致的视图中不可见内容, 在不使用滚动条的情况下为了适应视口中所用内容所需的最小高度
image.png

clientHeight, clientWidth, offSetHeight, offsetWidth, scrollHeight, scrollWidth, scrollTop, scrollLeft

image.png

原文地址 : 元素 client*, offset*, scroll* 介绍
本站是作者语雀文档的镜像站, 如对文章有任何疑问请移步语雀进行 提问

发表更新前端 / Typescript

Typescript - FAQ

语法

TypeScript and Iterator: Type ‘IterableIterator‘ is not an array type

此问题出现在循环 FormData的时候

1
2
3
4
5
6
7
8
9
for (let pair of oriParams.entries()) {
    if (!isNil(pair[1]) && !isNaN(pair[1])) {
        let sv = pair[1];
        if (typeof pair[1] === 'string') {
            sv = trim(pair[1]);
        }
        params.append(pair[0], sv);
    }
}

如果可能，在 tsconfig.json中将目标更新到 es2015(或更高版本)以解决错误，而不启用下层迭代

1
2
3
4
5
{
  "compilerOptions": {
    "target": "es2015"
  }
}

如果以 ES5 为目标，请在 tsconfig 中显式启用 downlevelIteration

1
2
3
4
5
6
{
  "compilerOptions": {
    "target": "es5",
    "downlevelIteration": true
  }
}

原文地址 : Typescript - FAQ
本站是作者语雀文档的镜像站, 如对文章有任何疑问请移步语雀进行 提问

发表更新前端

Web 常见问题

Error: ResizeObserver loop limit exceeded 问题

发现一个报错 ResizeObserver loop limit exceeded，这个报错是在公司平台项目监听系统中提示的，而浏览器的 console 中却没有提示



如果要在本地开发中调试定位这个问题，可以在项目代码里加入一个方法，在控制台中输出这个错误：

1
2
3
window.onerror = function (errorMessage, scriptURI, lineNumber, columnNumber, error) {
    console.log('错误', errorMessage);
};

对于一些说法是这个错误可以给予忽略

参考地址 : https://stackoverflow.com/questions/49384120/resizeobserver-loop-limit-exceeded

原文地址 : Web 常见问题
本站是作者语雀文档的镜像站, 如对文章有任何疑问请移步语雀进行 提问

发表更新前端 / 包管理

使用 pnpm 替代 yarn, npm

pnpm 的优势不用多说, 懂得自然了解了, 不懂的去官网看下他们的介绍 项目初衷 | pnpm 这里主要的目的是使用 pnpm 替换掉 yarn 和 npm

  • npm 是 node 的包管理工具, 所以我的理解是 node 是基础, 需要 npm 必须要有 node
  • yarn 作为 npm 的一个包, 必须要有 npm , 才能够使用 yarn
  • 然而 node 的版本也可以支持切换, 这样再切换 node 的时候则需要使用到 nvm , 而 nvm 是依赖于 npm 和 yarn 的.

这样造成的依赖循环逃脱不了轮回, 就会导致东西关联较多
在我了解了 pnpm 之后他可以很好的解决以上问题并且还有它自己独到的优势

  • 纯净安装, 依托于 brew
  • 可以管理全局 node , 并支持自动安装
  • 包管理使用软链接方式, 不必在多项目之间重复下载占用磁盘空间

所以就打算用他替换掉 nvm, yarn, npm 这些工具, 仅仅使用一个即可

阅读更多
发表更新前端 / 包管理

Node 更换源使用国内镜像

Npm

TaoNpm 的更新流程示意图:

为什么要换源? npm 官方站点 http://www.npmjs.org/ 并没有被拦截,但是下载第三方依赖包的速度由于和外网联通的限制, 速度不能满足实际的使用需求.为了加速访问, 我们可以使用镜像来进行访问
国内有几个镜像站点可以供我们使用

速度非常快,镜像站会实时更新,为我们节省了好多时间.

临时更换访问源

通过 config 配置指向国内镜像源

1
2
$ npm config set registry https://registry.npmmirror.com
$ npm info express

通过 npm 命令指定下载源

1
2
# 在安装时候临时指定
$ npm --registry https://registry.npmmirror.com info express

永久更换访问源

使用 **nrm** 来更换访问源
nrm 是 NPM Registry Manager 的缩写, 通过他可以快速切换源, 文档地址 : https://www.npmjs.com/package/nrm

1
2
$ npm install -g nrm
$ yarn global add nrm
1
2
3
4
5
6
7
8
9
10
# list all
$ nrm ls
* npm ---------- https://registry.npmjs.org/
  yarn --------- https://registry.yarnpkg.com/
  tencent ------ https://mirrors.cloud.tencent.com/npm/
  cnpm --------- https://r.cnpmjs.org/
  taobao ------- https://registry.npmmirror.com/
  npmMirror ---- https://skimdb.npmjs.com/registry/
# 替换使用
$ nrm use taobao

[linux]在配置文件 **~/.npmrc** 文件写入源地址

1
2
3
4
# 打开配置文件
$ vim ~/.npmrc
# 写入配置文件
registry=https://registry.npmmirror.com/

如果你不想使用国内镜像站点,只需要将 写入 ~/.npmrc 的配置内容删除即可.
下面是我本地下载 ejs 包的截图,可以看到默认源地址指向了 cnpm

使用 cnpm 来替代 npm

使用说明查看 : https://npmmirror.com
cnpm 支持所有 npm 的命令并且可以快速同步任意模块

1
$ cnpm sync koa connect mocha

如果不想安装 cnpm cli 怎么办? 我们还有一个 web 页面:
例如我想马上同步 koa, 直接打开浏览器: http://npmmirror.com/sync/koa
或者你是命令行控, 通过 open 命令打开:

1
open http://npmmirror.com/sync/koa

如果你安装的模块依赖了 C++ 模块, 需要编译, 肯定会通过 node-gyp 来编译, node-gyp 在第一次编译的时候, 需要依赖 node 源代码, 于是又会去 node dist 下载, 于是大家又会吐槽, 怎么 npm 安装这么慢…
好吧, 于是又要提到 --disturl参数, 通过中国镜像来下载:

1
2
3
$ npm install microtime \
  --registry=http://registry.npmmirror.com \
  --disturl=https://npmmirror.com/mirrors/node

再次要提到 cnpm cli, 它已经默认将 --registry 和 --disturl 都配置好了, 谁用谁知道 . 写到这里, 就更快疑惑那些不想安装 cnpm cli 又吐槽 npm 慢的同学是基于什么考虑不在本地安装一个 cnpm 呢?
nodejs 源码路径
对于在淘宝上下载 nodejs 源码指定的地址是: [https://npmmirror.com/dist](https://npmmirror.com/dist)
直接更改源文件中的配置文件地址来更改加载路径
~/node_modules/npm/lib/config/defaults.js
Line : 181
registry : "https://registry.npmjs.org/"
将这个注册地址 更改为: [https://registry.npmmirror.com/](https://registry.npmmirror.com/)

Yarn

执行 yarn 各种命令的时候，默认是去 npm/yarn 官方镜像源获取需要安装的具体软件信息
以下命令查看当前使用的镜像源

1
yarn config get registry

默认源地址在国外，从国内访问的速度肯定比较慢

阿里旗下维护着一个完整的 npm 镜像源 https://npmmirror.com/ 同样适用于 yarn

临时修改

1
yarn save 软件名 --registry https://npmmirror.com/

全局修改

1
yarn config set registry https://npmmirror.com/

使用第三方软件快速修改、切换 yarn 镜像源

YARN registry manager:
https://github.com/i5ting/yrm
yrm 不仅可以快速切换镜像源，还可以测试自己网络访问不同源的速度
安装 yrm

1
npm install -g yrm

列出当前可用的所有镜像源

1
2
3
4
5
6
7
8
$ yrm ls
    npm -----  https://registry.npmjs.org/
    cnpm ----  http://r.cnpmjs.org/
    taobao --  https://registry.npm.taobao.org/
    nj ------  https://registry.nodejitsu.com/
    rednpm -- http://registry.mirror.cqupt.edu.cn
    skimdb -- https://skimdb.npmjs.com/registry
    yarn ----  https://registry.yarnpkg.com

使用淘宝镜像源

1
yrm use taobao

测试访问速度

1
2
3
4
5
6
7
$ yrm test
  npm ------ 1174ms
  yarn ----- 1787ms
  tencent -- 1284ms
  cnpm ----- 2970ms
* taobao --- 133ms
  npmMirror - 886ms

更多用法查看 yrm GitHub

Nodejs Release 镜像使用帮助

Nodejs Release 为各平台提供预编译的 nodejs 和 npm 等二进制文件，是 https://nodejs.org/dist/ 的镜像。
使用方法:

1
2
# 设定环境变量
export NODE_MIRROR=http://npmmirror.com/mirrors/node

参考网站:

  • 快速搭建 Node.js / io.js 开发环境以及加速 npm
  • 给电脑换源 npm 国内镜像 cnpm

更新说明

2021 年 10 月 27 日

原文地址 : Node 更换源使用国内镜像
本站是作者语雀文档的镜像站, 如对文章有任何疑问请移步语雀进行 提问

链接

归档

×