MC_mc
前端
获得徽章 0
赞了这篇文章
【下载文件流】
<说明>：
header中需添加responseType: "blob"
<方法>：
function downloadFileBlob(content, fileName) {
const blob = new Blob([content]);
if ("download" in document.createElement("a")) {
// 非IE下载
const elink = document.createElement("a");
elink.download = fileName;
elink.style.display = "none";
elink.href = window.URL.createObjectURL(blob);
document.body.appendChild(elink);
elink.click();
window.URL.revokeObjectURL(elink.href);
// 释放URL 对象
document.body.removeChild(elink);
} else {
// IE10+下载
navigator.msSaveBlob(blob, fileName);
}
}
<说明>：
header中需添加responseType: "blob"
<方法>：
function downloadFileBlob(content, fileName) {
const blob = new Blob([content]);
if ("download" in document.createElement("a")) {
// 非IE下载
const elink = document.createElement("a");
elink.download = fileName;
elink.style.display = "none";
elink.href = window.URL.createObjectURL(blob);
document.body.appendChild(elink);
elink.click();
window.URL.revokeObjectURL(elink.href);
// 释放URL 对象
document.body.removeChild(elink);
} else {
// IE10+下载
navigator.msSaveBlob(blob, fileName);
}
}
展开
2
1
【requestAnimationFrame计时器】
function getRequestAnimation() {
const win: any = window
const requestAnimationFrame =
win.requestAnimationFrame ||
win.mozRequestAnimationFrame ||
win.webkitRequestAnimationFrame ||
win.msRequestAnimationFrame
const cancelAnimationFrame = win.cancelAnimationFrame || win.mozCancelAnimationFrame
let myAnimationRequest: any
function requestAnimation(callback: () => void, time: number) {
let i = 1
myAnimationRequest = requestAnimationFrame(function fn() {
// 计数器% （60/1秒钟执行的次数）
const value = (60 / (1000 / time)).toFixed(0)
if (i % parseFloat(value) === 0) {
callback()
}
i++
myAnimationRequest = requestAnimationFrame(fn)
})
}
function cancelAnimation() {
if (myAnimationRequest) {
cancelAnimationFrame(myAnimationRequest)
myAnimationRequest = null
}
}
return {
requestAnimation,
cancelAnimation,
}
}
function getRequestAnimation() {
const win: any = window
const requestAnimationFrame =
win.requestAnimationFrame ||
win.mozRequestAnimationFrame ||
win.webkitRequestAnimationFrame ||
win.msRequestAnimationFrame
const cancelAnimationFrame = win.cancelAnimationFrame || win.mozCancelAnimationFrame
let myAnimationRequest: any
function requestAnimation(callback: () => void, time: number) {
let i = 1
myAnimationRequest = requestAnimationFrame(function fn() {
// 计数器% （60/1秒钟执行的次数）
const value = (60 / (1000 / time)).toFixed(0)
if (i % parseFloat(value) === 0) {
callback()
}
i++
myAnimationRequest = requestAnimationFrame(fn)
})
}
function cancelAnimation() {
if (myAnimationRequest) {
cancelAnimationFrame(myAnimationRequest)
myAnimationRequest = null
}
}
return {
requestAnimation,
cancelAnimation,
}
}
展开
评论
点赞
===CSS：linear-gradient===
【说明】：
linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。
【例子】：
1）渐变轴45度，从红色渐变到蓝色
background: linear-gradient(45deg, red, blue);
2）从上到下，从50%开始渐变，颜色从红色到蓝色
background: linear-gradient(to bottom, red, red 50%, blue);
3）将红色与蓝色的颜色转换中点移动到30%的位置
background: linear-gradient(red 10%, 30%, blue 90%);
4）如果多个颜色终止在同一位置，则第1个颜色与最后1个颜色的过渡将是一条生硬线
background: linear-gradient(red 50%, blue 50%);
5）从左到右，从完全透明渐变到完全不透明的红色
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
6）允许颜色多个颜色终止位置。（以下三个等价）
background: linear-gradient(red 0%, yellow 50%, yellow 70%, green 90%, green 100%);
background: linear-gradient(red, yellow 50% 70%, green 90%);
background: linear-gradient(red 0%, yellow 50% 70%, green 90% 100%);
7）允许多个linear-gradient
background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
【说明】：
linear-gradient() 函数用于创建一个表示两种或多种颜色线性渐变的图片。
【例子】：
1）渐变轴45度，从红色渐变到蓝色
background: linear-gradient(45deg, red, blue);
2）从上到下，从50%开始渐变，颜色从红色到蓝色
background: linear-gradient(to bottom, red, red 50%, blue);
3）将红色与蓝色的颜色转换中点移动到30%的位置
background: linear-gradient(red 10%, 30%, blue 90%);
4）如果多个颜色终止在同一位置，则第1个颜色与最后1个颜色的过渡将是一条生硬线
background: linear-gradient(red 50%, blue 50%);
5）从左到右，从完全透明渐变到完全不透明的红色
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
6）允许颜色多个颜色终止位置。（以下三个等价）
background: linear-gradient(red 0%, yellow 50%, yellow 70%, green 90%, green 100%);
background: linear-gradient(red, yellow 50% 70%, green 90%);
background: linear-gradient(red 0%, yellow 50% 70%, green 90% 100%);
7）允许多个linear-gradient
background: linear-gradient(217deg, rgba(255,0,0,.8), rgba(255,0,0,0) 70.71%),
linear-gradient(127deg, rgba(0,255,0,.8), rgba(0,255,0,0) 70.71%),
linear-gradient(336deg, rgba(0,0,255,.8), rgba(0,0,255,0) 70.71%);
展开
评论
点赞
1.===JS：判断是否是数字===
function isNumber(value?: any): value is number {
return typeof value === "number" && !Number.isNaN(value)
}
2.===JS：是否无效值（null,undefined,NaN判断）===
function isInvalid(value?: any) {
return (
(typeof value === "number" && Number.isNaN(value)) ||
value === null ||
value === undefined
)
}
function isNumber(value?: any): value is number {
return typeof value === "number" && !Number.isNaN(value)
}
2.===JS：是否无效值（null,undefined,NaN判断）===
function isInvalid(value?: any) {
return (
(typeof value === "number" && Number.isNaN(value)) ||
value === null ||
value === undefined
)
}
展开
评论
点赞
1.===React：对遍历组件绑定ref===
const Template = (props: any) => {
const mapRef = useRef<any>({})
// 获取各个组件的值
const handleClick = useCallback(() => {
let data = {}
for (let item of list) {
data[item.key] = mapRef.current?.[item.key]?.getValues()
}
console.log("data:", data)
}, [])
return (
<div>
{list.map((item) => (
<SubComponent
className="test"
key={item.key}
ref={(el) => (mapRef.current[item.key] = el)}
/>
))}
<button onClick={handleClick}>获取各个组件的值</button>
</div>
)
}
export default Template
2.===JS：复制单行内容到剪贴板===
function copyToClip(content: string) {
let input = document.createElement("input")
input.setAttribute("value", content)
document.body.appendChild(input)
input.select()
document.execCommand("copy")
document.body.removeChild(input)
message.success("已复制内容到剪贴板")
}
const Template = (props: any) => {
const mapRef = useRef<any>({})
// 获取各个组件的值
const handleClick = useCallback(() => {
let data = {}
for (let item of list) {
data[item.key] = mapRef.current?.[item.key]?.getValues()
}
console.log("data:", data)
}, [])
return (
<div>
{list.map((item) => (
<SubComponent
className="test"
key={item.key}
ref={(el) => (mapRef.current[item.key] = el)}
/>
))}
<button onClick={handleClick}>获取各个组件的值</button>
</div>
)
}
export default Template
2.===JS：复制单行内容到剪贴板===
function copyToClip(content: string) {
let input = document.createElement("input")
input.setAttribute("value", content)
document.body.appendChild(input)
input.select()
document.execCommand("copy")
document.body.removeChild(input)
message.success("已复制内容到剪贴板")
}
展开
评论
点赞
1.====JS：四舍五入到千位，不足千位的四舍五入到百位===
function roundToThousands(num) {
if (typeof num === "number" && !Number.isNaN(num)) {
if (num >= 1000) {
return Math.round(num / 1000) * 1000
} else if (num > 0) {
return Math.round(num / 100) * 100
} else {
return 0
}
} else {
return num
}
}
2.====JS：计算文本高度===
function getTextHeight() {
let p = document.createElement("p")
p.textContent = "文本内容"
if (window.getComputedStyle) {
document.body.appendChild(p)
let height = parseFloat(window.getComputedStyle(p).height)
document.body.removeChild(p)
return height
} else {
return null
}
}
function roundToThousands(num) {
if (typeof num === "number" && !Number.isNaN(num)) {
if (num >= 1000) {
return Math.round(num / 1000) * 1000
} else if (num > 0) {
return Math.round(num / 100) * 100
} else {
return 0
}
} else {
return num
}
}
2.====JS：计算文本高度===
function getTextHeight() {
let p = document.createElement("p")
p.textContent = "文本内容"
if (window.getComputedStyle) {
document.body.appendChild(p)
let height = parseFloat(window.getComputedStyle(p).height)
document.body.removeChild(p)
return height
} else {
return null
}
}
展开
评论
1
1.===JS：滚动条滚动到顶部===
【方法1】：
document.getElementById("某个DOM的id").scrollTo({ top: 0, behavior: "smooth" });
【方法2】：
document.getElementById("某个DOM的id").scrollTop = 0;
2.====JS：判断滚动条在底部===
公式：scrollHeight + scrollTop >= contentHeight
scrollHeight：容器高度。
contentHeight：内容高度。
scrollTop：滚动条向下滚动的距离，也就是元素顶部被遮住部分的高度。
3.====JS：获取兄弟元素===
【上一个】：
previousSibling：获取元素的上一个兄弟节点（包含元素节点、文本节点、注释节点即回车、换行、空格、文本等）
previousElementSibling：获取上一个兄弟元素节点（只包含元素节点）
【下一个】：
nextSibling
nextElementSibling
4.====JS：通过子级id向上找到所有的父级id===
function find(
array: { id: string; name: string; children?: any },
id: string
) {
let stack = []
let going = true
let walker = (array, id) => {
array.forEach((item) => {
if (!going) return
stack.push(item["id"])
if (item["id"] === id) {
going = false
} else if (item["children"]) {
walker(item["children"], id)
} else {
stack.pop()
}
})
if (going) stack.pop()
}
walker(array, id)
return stack.join(",")
}
【方法1】：
document.getElementById("某个DOM的id").scrollTo({ top: 0, behavior: "smooth" });
【方法2】：
document.getElementById("某个DOM的id").scrollTop = 0;
2.====JS：判断滚动条在底部===
公式：scrollHeight + scrollTop >= contentHeight
scrollHeight：容器高度。
contentHeight：内容高度。
scrollTop：滚动条向下滚动的距离，也就是元素顶部被遮住部分的高度。
3.====JS：获取兄弟元素===
【上一个】：
previousSibling：获取元素的上一个兄弟节点（包含元素节点、文本节点、注释节点即回车、换行、空格、文本等）
previousElementSibling：获取上一个兄弟元素节点（只包含元素节点）
【下一个】：
nextSibling
nextElementSibling
4.====JS：通过子级id向上找到所有的父级id===
function find(
array: { id: string; name: string; children?: any },
id: string
) {
let stack = []
let going = true
let walker = (array, id) => {
array.forEach((item) => {
if (!going) return
stack.push(item["id"])
if (item["id"] === id) {
going = false
} else if (item["children"]) {
walker(item["children"], id)
} else {
stack.pop()
}
})
if (going) stack.pop()
}
walker(array, id)
return stack.join(",")
}
展开
1
1
1.===CSS：让文本无法被选中===
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
2.===CSS：绘制线条===
【说明】：
绘制一条水平线，左边端点距离左边屏幕100px，右边端点距离右边屏幕100px，自适应长度
【代码】：
.line {
height: 1px;
background-color: #fff;
position: absolute;
left: 100px;
right: 100px;
}
3.===JS：保留数字去除文本的单位===
parseInt("500px"); // 500
4.===GitHub：classnames===
【说明】：
一个简单的 JavaScript 实用程序，用于有条件地将 classNames 连接在一起。
【引入】：
import classNames from "classnames"
【使用】：
classNames ( 'foo' , 'bar' ) ; // => 'foo bar'
classNames ( 'foo' , { bar : true } ) ; // => 'foo bar'
classNames ( { 'foo-bar' : true } ) ; // => 'foo-bar'
classNames ( { 'foo-bar' : false } ) ; // => ''
// 许多不同类型的参数
classNames ( 'foo' , { bar : true , duck : false } , 'baz' , { quux : true } ) ; // => 'foo bar baz quux'
// 其他假值只是被忽略
classNames ( null , false , 'bar' , undefined , 0 , 1 , { baz : null } , '' ) ; // => 'bar 1'
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
2.===CSS：绘制线条===
【说明】：
绘制一条水平线，左边端点距离左边屏幕100px，右边端点距离右边屏幕100px，自适应长度
【代码】：
.line {
height: 1px;
background-color: #fff;
position: absolute;
left: 100px;
right: 100px;
}
3.===JS：保留数字去除文本的单位===
parseInt("500px"); // 500
4.===GitHub：classnames===
【说明】：
一个简单的 JavaScript 实用程序，用于有条件地将 classNames 连接在一起。
【引入】：
import classNames from "classnames"
【使用】：
classNames ( 'foo' , 'bar' ) ; // => 'foo bar'
classNames ( 'foo' , { bar : true } ) ; // => 'foo bar'
classNames ( { 'foo-bar' : true } ) ; // => 'foo-bar'
classNames ( { 'foo-bar' : false } ) ; // => ''
// 许多不同类型的参数
classNames ( 'foo' , { bar : true , duck : false } , 'baz' , { quux : true } ) ; // => 'foo bar baz quux'
// 其他假值只是被忽略
classNames ( null , false , 'bar' , undefined , 0 , 1 , { baz : null } , '' ) ; // => 'bar 1'
展开
评论
1
1.===CSS：transform===
【说明】：
CSS transform属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改CSS视觉格式化模型的坐标空间来实现的。
【取值说明】：
1）transform属性可以指定为关键字值none 或一个或多个<transform-function>值。
2）要应用的一个或多个CSS变换函数。变换函数按从左到右的顺序相乘，这意味着复合变换按从右到左的顺序有效地应用。
【取值】：
1）旋转
transform: rotate(45deg); // 方向顺时针
2）缩放
transform: scale(0.5, 2); // 水平方向缩小一半，垂直方向放大一倍。
3）倾斜
transform: skew(30deg，30deg); //水平方向倾斜30度，垂直方向倾斜30度
transform: skew(30deg); // 只在水平方向进行倾斜，垂直方向不倾斜
4）移动
transform: translate(50px, 50%); // 水平方向移动50px，垂直方向移动50%
transform: translate(50px); // 只在水平方向移动，垂直方向不移动
5）矩阵
transform: matrix(a,b,c,d,e,f);
transform: matrix3d(sx,0,0,0,0,sy,0,0,0,0,sz,0,0,0,0,1);
2.===CSS：transform-origin===
【说明】：
CSS属性，让你更改一个元素变形的原点。
【默认值】：
50% 50% 0
【取值说明】：
1）一个值：
必须是<length>，<percentage>，或 left, center, right, top, bottom关键字中的一个。
2）两个值：
其中一个必须是<length>，<percentage>，或left, center, right关键字中的一个。
另一个必须是<length>，<percentage>，或top, center, bottom关键字中的一个。
3）三个值：
前两个值和只有两个值时的用法相同。
第三个值必须是<length>。它始终代表Z轴偏移量。
【说明】：
CSS transform属性允许你旋转，缩放，倾斜或平移给定元素。这是通过修改CSS视觉格式化模型的坐标空间来实现的。
【取值说明】：
1）transform属性可以指定为关键字值none 或一个或多个<transform-function>值。
2）要应用的一个或多个CSS变换函数。变换函数按从左到右的顺序相乘，这意味着复合变换按从右到左的顺序有效地应用。
【取值】：
1）旋转
transform: rotate(45deg); // 方向顺时针
2）缩放
transform: scale(0.5, 2); // 水平方向缩小一半，垂直方向放大一倍。
3）倾斜
transform: skew(30deg，30deg); //水平方向倾斜30度，垂直方向倾斜30度
transform: skew(30deg); // 只在水平方向进行倾斜，垂直方向不倾斜
4）移动
transform: translate(50px, 50%); // 水平方向移动50px，垂直方向移动50%
transform: translate(50px); // 只在水平方向移动，垂直方向不移动
5）矩阵
transform: matrix(a,b,c,d,e,f);
transform: matrix3d(sx,0,0,0,0,sy,0,0,0,0,sz,0,0,0,0,1);
2.===CSS：transform-origin===
【说明】：
CSS属性，让你更改一个元素变形的原点。
【默认值】：
50% 50% 0
【取值说明】：
1）一个值：
必须是<length>，<percentage>，或 left, center, right, top, bottom关键字中的一个。
2）两个值：
其中一个必须是<length>，<percentage>，或left, center, right关键字中的一个。
另一个必须是<length>，<percentage>，或top, center, bottom关键字中的一个。
3）三个值：
前两个值和只有两个值时的用法相同。
第三个值必须是<length>。它始终代表Z轴偏移量。
展开
评论
点赞
1.===Ant Design：去除Table组件的“取消排序”===
【sorter状态】：
点击升序、点击降序、取消排序
【sortDirections属性】
sortDirections: ['ascend' | 'descend']改变每列可用的排序方式，切换排序时按数组内容依次切换，设置在 table props 上时对所有列生效。
【方法】：
可以通过设置sortDirections: ['ascend', 'descend', 'ascend'] 禁止排序恢复到默认状态。
【注意】：
需要设置排序的默认值defaultSortOrder: 'ascend' 或者 'descend'
【sorter状态】：
点击升序、点击降序、取消排序
【sortDirections属性】
sortDirections: ['ascend' | 'descend']改变每列可用的排序方式，切换排序时按数组内容依次切换，设置在 table props 上时对所有列生效。
【方法】：
可以通过设置sortDirections: ['ascend', 'descend', 'ascend'] 禁止排序恢复到默认状态。
【注意】：
需要设置排序的默认值defaultSortOrder: 'ascend' 或者 'descend'
展开
评论
点赞
1.===ahooks：useRequest===
【说明】：
一个强大的管理异步数据请求的 Hook.
【使用】：
import { useRequest } from "ahooks"
const { data, loading } = useRequest(
() => requestFun(),
{
refreshDeps: [], // refreshDeps 变化时，useRequest 会使用之前的参数重新执行 service
onSuccess: (result) => {}, // service resolve 时触发
onError: (error) => {}, // service 报错时触发
}
);
2.===ahooks：useCreation===
【说明】：
useCreation 是 useMemo 或 useRef 的替代品。因为 useMemo 不能保证被 memo 的值一定不会被重计算，而 useCreation 可以保证这一点。而相比于 useRef，你可以使用 useCreation 创建一些常量，这些常量和 useRef 创建出来的 ref 有很多使用场景上的相似，但对于复杂常量的创建，useRef 却容易出现潜在的性能隐患。
【使用】：
import { useCreation } from "ahooks"
const foo = useCreation(() => new Foo(), []);
3.===ahooks：useSetState===
【说明】：
管理 object 类型 state 的 Hooks，用法与 class 组件的 this.setState 基本一致。
【使用】：
import { useSetState } from 'ahooks';
const [state, setState] = useSetState();
setState({ hello: 'world' });
setState({ foo: 'bar' });
setState((prev) => ({ count: prev.count + 1 }));
【说明】：
一个强大的管理异步数据请求的 Hook.
【使用】：
import { useRequest } from "ahooks"
const { data, loading } = useRequest(
() => requestFun(),
{
refreshDeps: [], // refreshDeps 变化时，useRequest 会使用之前的参数重新执行 service
onSuccess: (result) => {}, // service resolve 时触发
onError: (error) => {}, // service 报错时触发
}
);
2.===ahooks：useCreation===
【说明】：
useCreation 是 useMemo 或 useRef 的替代品。因为 useMemo 不能保证被 memo 的值一定不会被重计算，而 useCreation 可以保证这一点。而相比于 useRef，你可以使用 useCreation 创建一些常量，这些常量和 useRef 创建出来的 ref 有很多使用场景上的相似，但对于复杂常量的创建，useRef 却容易出现潜在的性能隐患。
【使用】：
import { useCreation } from "ahooks"
const foo = useCreation(() => new Foo(), []);
3.===ahooks：useSetState===
【说明】：
管理 object 类型 state 的 Hooks，用法与 class 组件的 this.setState 基本一致。
【使用】：
import { useSetState } from 'ahooks';
const [state, setState] = useSetState();
setState({ hello: 'world' });
setState({ foo: 'bar' });
setState((prev) => ({ count: prev.count + 1 }));
展开
评论
1
赞了这篇沸点
1.===React：useParams===
【说明】：
该useParams()钩子帮助我们从当前路由访问 URL 参数。
【场景】：
<Route path="/users/:id" component={Users} />
可以使用useParams()钩子访问组件:id内的param 值。
【引入】：
import { useParams } from "react-router-dom"
【使用】：
const { id } = useParams();
2.===axios在http status为500状态下，拿到返回的错误码及信息===
.catch(function (error) {
// error.response
});
3.===本地项目上传到Github===
1）创建本地仓库：git init
2）放入文件，把项目添加到暂存区：git add .
3）把项目提交到本地仓库：git commit -m "注释内容"
4）在Github上设置好SSH密钥后，新建一个远程仓库
5）将本地仓库和远程仓库进行关联：git remote add origin <git_address>
6）本地仓库的项目推送到远程仓库：git push --set-upstream <branch_name>
4.===vscode：保存时代码自动缩进对齐===
【步骤】：
1）左下角齿轮–->“设置”-->搜索框搜索“emmet.include”-->点击“在settings.json中编辑”
2）在打开的文件中输入
"editor.formatOnType": true,
"editor.formatOnSave": true,
3）保存
【说明】：
该useParams()钩子帮助我们从当前路由访问 URL 参数。
【场景】：
<Route path="/users/:id" component={Users} />
可以使用useParams()钩子访问组件:id内的param 值。
【引入】：
import { useParams } from "react-router-dom"
【使用】：
const { id } = useParams();
2.===axios在http status为500状态下，拿到返回的错误码及信息===
.catch(function (error) {
// error.response
});
3.===本地项目上传到Github===
1）创建本地仓库：git init
2）放入文件，把项目添加到暂存区：git add .
3）把项目提交到本地仓库：git commit -m "注释内容"
4）在Github上设置好SSH密钥后，新建一个远程仓库
5）将本地仓库和远程仓库进行关联：git remote add origin <git_address>
6）本地仓库的项目推送到远程仓库：git push --set-upstream <branch_name>
4.===vscode：保存时代码自动缩进对齐===
【步骤】：
1）左下角齿轮–->“设置”-->搜索框搜索“emmet.include”-->点击“在settings.json中编辑”
2）在打开的文件中输入
"editor.formatOnType": true,
"editor.formatOnSave": true,
3）保存
展开
评论
点赞
3.===cur===
【介绍】：
curl 是一个运行在命令行的 http 客户端。使用 curl 命令可以发起 http 请求并返回结果。
【使用】：
curl [options] [URL...]
可以使用 Git Bash 或者 Cygwin来执行 curl 命令。
【例子】：
1）curl
www.baidu.com
不加任何参数使用 curl 命令只是返回http的响应正文内容
2）curl -vwww.baidu.com
查看完整的http请求信息
【复制所请求的 curl 命令】：
右击“Network”中的某个请求地址-->“Copy”-->“Copy as cURL(cmd)”或者“Copy as cURL(bash)”
4.===chrome浏览器开启跨域模式===
【步骤】：
1）新建一个文件夹 C:\MyChrome
2）右击Chrome，打开“属性”
3）在“目标”输入框中加上 --disable-web-security --user-data-dir=C:\MyChrome
4）点击“应用”-->“确定”
5）重新打开chrome，弹出“--disable-web-security”相关的提示即配置成功
【说明】：
1）--disable-web-security：可以降低chrome浏览器的安全性，禁用同源策略，利于开发人员本地调试。
2）--user-data-dir：自定义用户数据目录。相当于是用户在自己电脑创建了一套chrome的私有化浏览器，里边的设置配置等均为私有化设置。
【介绍】：
curl 是一个运行在命令行的 http 客户端。使用 curl 命令可以发起 http 请求并返回结果。
【使用】：
curl [options] [URL...]
可以使用 Git Bash 或者 Cygwin来执行 curl 命令。
【例子】：
1）curl
www.baidu.com 不加任何参数使用 curl 命令只是返回http的响应正文内容
2）curl -v
www.baidu.com 查看完整的http请求信息
【复制所请求的 curl 命令】：
右击“Network”中的某个请求地址-->“Copy”-->“Copy as cURL(cmd)”或者“Copy as cURL(bash)”
4.===chrome浏览器开启跨域模式===
【步骤】：
1）新建一个文件夹 C:\MyChrome
2）右击Chrome，打开“属性”
3）在“目标”输入框中加上 --disable-web-security --user-data-dir=C:\MyChrome
4）点击“应用”-->“确定”
5）重新打开chrome，弹出“--disable-web-security”相关的提示即配置成功
【说明】：
1）--disable-web-security：可以降低chrome浏览器的安全性，禁用同源策略，利于开发人员本地调试。
2）--user-data-dir：自定义用户数据目录。相当于是用户在自己电脑创建了一套chrome的私有化浏览器，里边的设置配置等均为私有化设置。
展开
评论
点赞
1.===React：一个组件返回多个元素===
【方法1】：
render() {
return [
<ChildA />,
<ChildB />,
<ChildC />
]
}
【方法2】：
render() {
return (
<React.Fragment>
<ChildA />
<ChildB />
<ChildC />
</React.Fragment>
);
}
【方法3】：
render() {
return (
<>
<ChildA />
<ChildB />
<ChildC />
</>
);
}
【说明】：
1）Fragments 允许你将子列表分组，而无需向 DOM 添加额外节点。
2）在 React 中， <></> 是 <React.Fragment/> 的语法糖。
3）<></> 语法不能接受key或属性。
4）key 是唯一可以传递给 Fragment 的属性。
2.===GitHub：hox===
【地址】：
github.com
【说明】：
在 hox 中，任意的 custom Hook，经过 createModel 包装后，就变成了持久化，且全局共享的数据。
【创建】：
import { createModel } from "hox"
function useCounter() {...}
export default createModel(useCounter)
【使用】：
const counter = useCounterModel();
【方法1】：
render() {
return [
<ChildA />,
<ChildB />,
<ChildC />
]
}
【方法2】：
render() {
return (
<React.Fragment>
<ChildA />
<ChildB />
<ChildC />
</React.Fragment>
);
}
【方法3】：
render() {
return (
<>
<ChildA />
<ChildB />
<ChildC />
</>
);
}
【说明】：
1）Fragments 允许你将子列表分组，而无需向 DOM 添加额外节点。
2）在 React 中， <></> 是 <React.Fragment/> 的语法糖。
3）<></> 语法不能接受key或属性。
4）key 是唯一可以传递给 Fragment 的属性。
2.===GitHub：hox===
【地址】：
github.com【说明】：
在 hox 中，任意的 custom Hook，经过 createModel 包装后，就变成了持久化，且全局共享的数据。
【创建】：
import { createModel } from "hox"
function useCounter() {...}
export default createModel(useCounter)
【使用】：
const counter = useCounterModel();
展开
1
点赞
1.==【Windows全屏截屏快捷键】==
Ctrl+PrtScSysRq-->Ctrl+V
2.==【Chrome浏览器无痕模式】==
方式1：
界面右上角“...”-->“打开新的无痕窗口”
方式2：
Ctrl+Shift+N
3.==【Windows10修改Hosts文件】==
说明：
hosts文件里面存放的是ip地址、主机名和主机缩略名的内容，一般可以用于测试本机上的网站，以及访问某些特定的站点。
步骤：
1）windows 键+X打开菜单，选择“Windows Powershell（管理员）”
2）powershell 界面输入“notepad”，按回车，出现记事本的界面
3）记事本中，“文件”-->“打开”-->找到路径c:\windows\system32\drivers\etc\-->右下角选择“所有文件”-->选择“hosts”文件打开
4）添加你需要的IP地址和主机名，例如“127.0.0.1 example.com”
5）Ctrl+S保存即可
Ctrl+PrtScSysRq-->Ctrl+V
2.==【Chrome浏览器无痕模式】==
方式1：
界面右上角“...”-->“打开新的无痕窗口”
方式2：
Ctrl+Shift+N
3.==【Windows10修改Hosts文件】==
说明：
hosts文件里面存放的是ip地址、主机名和主机缩略名的内容，一般可以用于测试本机上的网站，以及访问某些特定的站点。
步骤：
1）windows 键+X打开菜单，选择“Windows Powershell（管理员）”
2）powershell 界面输入“notepad”，按回车，出现记事本的界面
3）记事本中，“文件”-->“打开”-->找到路径c:\windows\system32\drivers\etc\-->右下角选择“所有文件”-->选择“hosts”文件打开
4）添加你需要的IP地址和主机名，例如“127.0.0.1 example.com”
5）Ctrl+S保存即可
展开
1
点赞