other
同源策略
同源就是域名, 端口和协议都相同. 同源策略是指浏览器出于安全考虑, 只支持同源的接口交互, 不同源的话在没有授权的情况下不能访问对方的资源.
白屏时间
- 在
</head>
前输入以下代码可以获得白屏时间
javascript
console.log(new Date() - performance.timing.navigationStart);
rem 适配大屏展示
- rem.js
javascript
function resize() {
let designSize = 1920; // 设计图尺寸
let html = document.documentElement;
let wW = html.clientWidth; // 窗口宽度
if (wW < 1440) {
wW = 1440;
}
let rem = (wW * 100) / designSize;
// console.log(rem)
document.documentElement.style.fontSize = rem + "px";
// document.documentElement.style.height = 100 + '%';
}
resize();
window.onresize = resize;
- main.js 导入即可(使用)
GoTop
vue
<script>
export default {
methods: {
GoTop() {
(function smoothscroll() {
const currentScroll
= document.documentElement.scrollTop || document.body.scrollTop
if (currentScroll > 0) {
window.requestAnimationFrame(smoothscroll)
window.scrollTo(0, currentScroll - currentScroll / 10)
}
})()
}
}
}
</script>
// methods
<template>
<div id="GoTop" @click="GoTop()">
<span class="glyphicon glyphicon-chevron-up" />
</div>
</template>
<style scoped>
#GoTop {
width: 50px;
height: 50px;
position: fixed;
right: 20px;
bottom: 20px;
z-index: 99999999;
cursor: pointer;
}
#GoTop > span {
display: block;
width: 100%;
height: 100%;
color: rgb(8, 162, 233);
font-size: 30px;
}
</style>
完整 ESLint 文件配置属性解释
javascript
/*
* ESLint的JSON文件是允许JavaScript注释的,但在gist里显示效果不好,所以我把.json文件后缀改为了.js
*/
/*
* ESLint 配置文件优先级:
* .eslintrc.js(输出一个配置对象)
* .eslintrc.yaml
* .eslintrc.yml
* .eslintrc.json(ESLint的JSON文件允许JavaScript风格的注释)
* .eslintrc(可以是JSON也可以是YAML)
* package.json(在package.json里创建一个eslintConfig属性,在那里定义你的配置)
*/
/*
* 你可以通过在项目根目录创建一个.eslintignore文件告诉ESLint去忽略特定的文件和目录
* .eslintignore文件是一个纯文本文件,其中的每一行都是一个glob模式表明哪些路径应该忽略检测
*/
{
//ESLint默认使用Espree作为其解析器
//同时babel-eslint也是用得最多的解析器
"parser": "espree",
//parser解析代码时的参数
"parserOption": {
//指定要使用的ECMAScript版本,默认值5
"ecmaVersion": 5,
//设置为script(默认)或module(如果你的代码是ECMAScript模块)
"sourceType": "script",
//这是个对象,表示你想使用的额外的语言特性,所有选项默认都是false
"ecmafeatures": {
//允许在全局作用域下使用return语句
"globalReturn": false,
//启用全局strict模式(严格模式)
"impliedStrict": false,
//启用JSX
"jsx": false,
//启用对实验性的objectRest/spreadProperties的支持
"experimentalObjectRestSpread": false
}
},
//指定环境,每个环境都有自己预定义的全局变量,可以同时指定多个环境,不矛盾
"env": {
//效果同配置项ecmaVersion一样
"es6": true,
"browser": true,
"node": true,
"commonjs": false,
"mocha": true,
"jquery": true,
//如果你想使用来自某个插件的环境时,确保在plugins数组里指定插件名
//格式为:插件名/环境名称(插件名不带前缀)
"react/node": true
},
//指定环境为我们提供了预置的全局变量
//对于那些我们自定义的全局变量,可以用globals指定
//设置每个变量等于true允许变量被重写,或false不允许被重写
"globals": {
"globalVar1": true,
"globalVar2": false
},
//ESLint支持使用第三方插件
//在使用插件之前,你必须使用npm安装它
//全局安装的ESLint只能使用全局安装的插件
//本地安装的ESLint不仅可以使用本地安装的插件还可以使用全局安装的插件
//plugin与extend的区别:extend提供的是eslint现有规则的一系列预设
//而plugin则提供了除预设之外的自定义规则,当你在eslint的规则里找不到合适的的时候
//就可以借用插件来实现了
"plugins": [
"eslint-plugin-airbnb",
//插件名称可以省略eslint-plugin-前缀
"react"
],
//具体规则配置
//off或0--关闭规则
//warn或1--开启规则,警告级别(不会导致程序退出)
//error或2--开启规则,错误级别(当被触发的时候,程序会退出)
"rules": {
"eqeqeq": "warn",
//你也可以使用对应的数字定义规则严重程度
"curly": 2,
//如果某条规则有额外的选项,你可以使用数组字面量指定它们
//选项可以是字符串,也可以是对象
"quotes": ["error", "double"],
"one-var": ["error", {
"var": "always",
"let": "never",
"const": "never"
}],
//配置插件提供的自定义规则的时候,格式为:不带前缀插件名/规则ID
"react/curly": "error"
},
//ESLint支持在配置文件添加共享设置
//你可以添加settings对象到配置文件,它将提供给每一个将被执行的规则
//如果你想添加的自定义规则而且使它们可以访问到相同的信息,这将会很有用,并且很容易配置
"settings": {
"sharedData": "Hello"
},
//Eslint检测配置文件步骤:
//1.在要检测的文件同一目录里寻找.eslintrc.*和package.json
//2.紧接着在父级目录里寻找,一直到文件系统的根目录
//3.如果在前两步发现有root:true的配置,停止在父级目录中寻找.eslintrc
//4.如果以上步骤都没有找到,则回退到用户主目录~/.eslintrc中自定义的默认配置
"root": true,
//extends属性值可以是一个字符串或字符串数组
//数组中每个配置项继承它前面的配置
//可选的配置项如下
//1.字符串eslint:recommended,该配置项启用一系列核心规则,这些规则报告一些常见问题,即在(规则页面)中打勾的规则
//2.一个可以输出配置对象的可共享配置包,如eslint-config-standard
//可共享配置包是一个导出配置对象的简单的npm包,包名称以eslint-config-开头,使用前要安装
//extends属性值可以省略包名的前缀eslint-config-
//3.一个输出配置规则的插件包,如eslint-plugin-react
//一些插件也可以输出一个或多个命名的配置
//extends属性值为,plugin:包名/配置名称
//4.一个指向配置文件的相对路径或绝对路径
//5.字符串eslint:all,启用当前安装的ESLint中所有的核心规则
//该配置不推荐在产品中使用,因为它随着ESLint版本进行更改。使用的话,请自己承担风险
"extends": [
"eslint:recommended",
"standard",
"plugin:react/recommended",
"./node_modules/coding-standard/.eslintrc-es6",
"eslint:all"
]
}
js 写个方法生成 a-z 的数组
- String.fromCharCode('65') // A
- String.fromCodePoint('65') // A
javascript
// 大写的
[...Array(26)].map((e, i) => String.fromCharCode(i + 65));
// 小写的
[...Array(26)].map((e, i) => String.fromCharCode(i + 97));
获取屏幕像素比 window.devicePixelRatio
Window 接口的devicePixelRatio返回当前显示设备的物理像素分辨率与CSS 像素分辨率之比。 此值也可以解释为像素大小的比率:一个 CSS 像素的大小与一个物理像素的大小。 简单来说,它告诉浏览器应使用多少屏幕实际像素来绘制单个 CSS 像素。 当处理标准显示器与 HiDPI 或 Retina 显示器之间的差异时,这很有用,后者使用更多的屏幕像素绘制相同的对象,从而获得更清晰的图像。 您可以使用window.matchMedia() 检查 devicePixelRatio 的值是否发生更改(例如,如果用户将窗口拖动到带有 不同的像素密度)
PS:说白了,获得设备物理像素与 CSS 像素比例
- canvas可能在视网膜屏幕上显得太模糊。 使用 window.devicePixelRatio 确定应添加多少额外的像素密度以使图像更清晰。
performance
performance.now() 方法返回一个精确到毫秒的 DOMHighResTimeStamp 。
如何在苹果将屏幕调到极暗
- Open
Settings
- Navigate to
Accessibility
- Navigate to
Accessibility shortcut
- From the menu select
Reduce White Point