来自分类 前端2024-10-24 16:20:37
JSDelivr 是由 @Cloudflare 提供的免费开源公共 CDN。针对 npm 和 GitHub 的 JS 和 ESM 交付进行了优化。适用于所有 Web 格式。
官网地址是: https://www.jsdelivr.com/
可以用`https://cdn.jsdelivr.net/npm/package@version/file`来访问 npm 上的文件, 如:
https://cdn.jsdelivr.net/npm/jquery@3.6.4/dist/jquery.min.js
可以用`https://cdn.jsdelivr.net/gh/user/repo@version/file`来访问 github 上的文件, 如:
https://cdn.jsdelivr.net/gh/jquery/jquery@3.6.4/dist/jquery.min.js
但是官方提供的CDN地址`cdn.jsdelivr.net`, 国内是基本打开的, 所以就需要找其他节点来替代
|节点|描述|地区|延迟|超时率|
|-|-|-|-|-|
|jsd.onmicrosof...
来自分类 前端2024-03-28 15:19:24
@[toc]
## nodejs
===框架===
https://github.com/expressjs/express `快速、无约束、极简的node web框架`
===其他===
https://github.com/cheeriojs/cheerio `为服务器特别定制的，快速、灵活、实施的jQuery核心实现` [[文档]](https://github.com/cheeriojs/cheerio/wiki/Chinese-README)
https://github.com/node-schedule/node-schedule `定时任务`
https://github.com/paulmillr/chokidar `最小和高效的跨平台文件监视库`
https://github.com/shelljs/shelljs `Node.js的可移植Unix Shell命令`
https://github.com/caolan/async `async是一个流程控制工具包` [[文档]](http://caolan.github.io/async/v3/index.ht...
来自分类 前端2024-01-19 22:34:19
@[toc]
`Windi CSS`是`Tailwind CSS`的下一代编译器。
如果您已经熟悉`Tailwind CSS`，可以考虑用`Windi CSS`替代`Tailwind CSS`，它提供了更快的加载时间，并支持`Tailwind CSS` v2.0及更高版本中的所有功能。
如果您不熟悉`Tailwind CSS`，则可以将`Windi CSS`视为实用程序优先的CSS库。
数值:
```css
p-${float[0,...infinite]} -> padding: ${float/4}rem
p-2.5 -> padding: 0.625rem;
p-3.2 -> padding: 0.8rem;
```
尺寸:
```css
// ${size} must end up with rem|em|px|vh|vw|ch|ex
p-${size} -> padding: ${size}
p-3px -> padding: 3px;
p-4rem -> padding: 4rem;
```
分数:
```css
w-${fraction} -> wi...
来自分类 前端2024-01-19 22:33:12
#### 代码入下:
```javascript
function addGlobalStyle(css) {
var head, style
head = document.getElementsByTagName('head')[0]
if (!head) {
return
}
style = document.createElement('style')
style.innerHTML = css
head.appendChild(style)
}
function removeNodeInsertedListener(bindedFunc) {
var eventTypeList = ['animationstart', 'webkitAnimationStart', 'MSAnimationStart', 'oAnimationStart']
eventTypeList.forEach(function (eventType) {
document.removeEven...
来自分类 前端2024-01-19 22:32:56
#### 问题
很多网站都有类似「点击加载更多」的功能, 点击按钮后请求 ajax,然后在原列表后追加相关内容, 之前一直滚动条位置不变, 追加元素后, 页面还是列表原来的位置
但是今天发现, 追加元素后, 滚动条位置会自动滚动到「点击加载更多」按钮的位置, 这会造成浏览时很大的麻烦, 加载分页后, 还要往上滚动去找加载分页前的位置, 实在不方便
具体例子可以参考百度百科中的角色介绍的展开全部功能, 相关链接: https://baike.baidu.com/item/%E7%AC%91%E5%82%B2%E6%B1%9F%E6%B9%96/10719298#4
一系列的排查之后, 最终发现是浏览器的问题, 受...
来自分类 前端2024-01-19 22:32:33
```json
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@/*": ["src/*"]
},
"target": "ES6",
"module": "commonjs",
"allowSyntheticDefaultImports": true,
"types": ["uni-app", "html5plus"]
},
"include": ["./src/**/*"],
"files": ["main.ts"]
}
```
只需要在项目根目录随便创建一个空白的`.ts`文件, 然后在`tsconfig.json`添加`files`键即可, 如上面配置...
来自分类 前端2024-01-19 22:31:14
### 1. 用 Canvas 生成图片
```javascript
const getQrCode = () => {
const drp = 2
const width = 290.5 * drp
const height = (width * 462) / 290.5
const c = document.getElementById('myCanvas')
const ctx = c.getContext('2d')
ctx.fillStyle = '#fff'
ctx.fillRect(0, 0, width, height)
return c.toDataURL('image/jpeg')
}
```
### 2. 将 dataURL 转成 Blob
```javascript
const dataURItoBlob = dataURI => {
var byteString
if (dataURI.split(',')[0].indexOf('base64') >= 0) byteStrin...
来自分类 前端2019-12-28 19:30:34
一年多过去了, `Optional Chaining`终于到`Stage 3`了, vscode 之类编辑器也有办法支持该语法了, 现在想用, 可以用`babel`来实现了
#### 安装插件
```bash
# yarn add @babel/plugin-proposal-optional-chaining --dev // 可选链
# yan add @babel/plugin-proposal-nullish-coalescing-operator --dev // 空值合并
```
#### 在 babel 配置文件里添加插件
```javascript
plugins: [
// 其他插件
'@babel/plugin-proposal-optional-chaining',
'@babel/plugin-proposal-nullish-coalescing-operator'
]
```
这样就可以在 js, jsx, vue 里面用了
##### 在 .jsx 中使用:
```javascript
render() {
c...
来自分类 前端2017-12-18 15:07:55
### nvm 使用淘宝镜像
```bash
export NVM_NODEJS_ORG_MIRROR=https://npm.taobao.org/mirrors/node
export NVM_IOJS_ORG_MIRROR=https://npm.taobao.org/mirrors/iojs
```
### npm 使用淘宝镜像安装包
相关文件: ~/.npmrc
```bash
npm config set registry https://registry.npm.taobao.org
npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/
npm config set electron_mirror https://npm.taobao.org/mirrors/electron/
npm config set phantomjs_cdnurl https://npm.taobao.org/mirrors/phantomjs/
```
### yarn 使用淘宝镜像安装包
相关...
来自分类 前端2017-04-08 17:29:12
用了很久的 atom 了, 对于在 .vue 里不能用 emmet 一直感到很郁闷, 今天在看 emmet-atom 的 issue 时, 无意中发现了解决方法: https://github.com/emmetio/emmet-atom/issues/364
点击`文件 - 用户键盘映射`打开配置文件
在配置文件的最后添加
```
'atom-text-editor[data-grammar~="vue"]:not([mini])':
'tab': 'emmet:expand-abbreviation-with-tab'
```
注意: 如果配置文件中已经有`'atom-text-editor[data-grammar~="vue"]:not([mini])':`的其他配置, 那么要在其他配置的下面直接添加`'tab': 'emmet:expand-abbreviation-with-tab'`, 而不能直接添加上面的两行, 不然会报错
重启编辑器
这样就可以愉快的玩耍了......
