记录－交流－Web开发知识分享
网页的设计的样式都由css控制, 我们的css大小单位,一般用 px,或rem,或vw,vh.
由px控制的大小是固定的,不具有响度式的.
响应式设计一般由两种方案实现.
实现方法 :
1.head中加
<meta name="viewport" content="width=device-width, initial-scale=1.0" />(function flexible(window, document) {
function resetFontSize() {
const size = (document.documentElement.clientWidth / 1920) * 37.5;//1920为设计稿宽度
document.documentElement.style.fontSize = size + 'px';
}
// reset root px
px就是pixel像素的缩写，相对长度单位，网页设计常用的基本单位。像素px是相对于显示器屏幕分辨率而言的
em
em是相对长度单位。相对于当前对象内文本的字体尺寸（参考物是父元素的font-size）
如当前父元素的字体尺寸未设置，则相对于浏览器的默认字体尺寸
特点：
1. em的值并不是固定的；
2. em会继承父级元素的字体大小
rem
rem是CSS3新增的一个相对单位，rem是相对于HTML根元素的字体大小（font-size）来计算的长度单位
如果你没有设置html的字体大小，就会以浏览器默认字体大小，一般是16px
html{font-size: 62.5%} /* 10 ÷ 16 × 100% = 62.5% */
body{font-size: 1.4rem;} /* 1.4 × 10px = 14px */
/*在根元素中定义了一个基本字体大小为62.5%（也就是10px。设置这个值主要方便计算，如果没有设置，将是以“16px”为基准 ）*/
优点是，只需要设置根目录的大小就可以把整个页面的成比例的调好
rem兼容性：除了IE8及更早版本外，所有浏览器均已支持rem
em与rem的区别：…
本文以 “前端监控上报数据” 的业务场景，重点解析在 页面实例关闭 时，如何将监控数据上传到服务端的解决方案。
其中，涉及到4种方案，分别为：
const data = JSON.stringify({
time: performance.now()
});
var xhr = new XMLHttpRequest();
// 第三个参数false，表示当前请求是同步
xhr.open('post', 'http://api.wangxiaokai.vip/test'异步操作的模式:
1 回调函数:callback
2 事件监听:onXxxx,addEventListener.
3 发布/订阅(设计模式)
4 Promise 是异步编程的一种解决方案，比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现，ES6 将其写进了语言标准，统一了用法，原生提供了Promise对象
5 Generator 函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同,Generator 函数将 JavaScript 异步编程带入了一个全新的阶段。
6 async 函数:ES2017 标准引入了 async 函数，使得异步操作变得更加方便。 async 函数是什么？一句话，它就是 Generator 函数的语法糖。
当然 .定时器和ajax也可以看作是.
更多请查看
https://www.php.cn/website-design-ask-488572.html
https://blog.csdn.net/ZYS10000/article/details/104601839/
…
遇到了一个需求就是，在浏览器被关闭之前要调用一个后端提供的请求，我一开始用axios,信誓旦旦的说，木有问题，后端后来告诉我，没有接收到有请求，这个时候我就去排除下原因，我debugger看了下，明明有发送请求只不过在unload的时候还是pending状态。猜测是不是请求被中断了。尝试用同步请求发现还是没有用，那我能想到的就是用原生的http同步请求，但是缺点也很明显，性能差。所以我又百思不得其解，终于在mdn上找到了一个api
window.addEventListener("unload", function() {
let ISEdit = sessionStorage.getItem("isCanEdit") == "true" ? true : false;
if (ISEdit) {
let params = new FormData();
params.append("patientContentId", self.getquestionId);
navigator.sendBeacon(
`${config.baseurl}/patient/deleteExclusive`,
params
);
;
}
});要后端配合的就是需要post请求并且要改成formdata方式入参，大功告成
Question & Solution
Beacon API 不会延缓网页卸载，不会严重影响用户体验。
为了解决网页卸载时，异步请求无法成功的问题，浏览器特别实现了一个 …
通常直接按F12，如果此键被禁止，可以通过SHIFT + CTRL + I，或者通过浏览器菜单里面的“开发者工具”打开。
选择控制台，输入以下代码回车即可。
// 开启文字选择
document.onselectstart = function(){ return true; };
// 开启复制
document.oncopy = function(){ return true; };
// <video src="a.mp4" muted autoplay></video>
<a onclick="openFullscreen();">full</a>
<script>
var elem = document.getElementsByTagName("video")[0];
function openFullscreen() {
if (elem.requestFullscreen) {
elem.requestFullscreen().then(() => {
//after fullscreen do someting
}).catch((err) => {
//alert(`Error attempting to enable fullscreen mode: ${err.message} (${err.name})`);
});
} else if (elem.mozRequestFullScreen) … 答： ES6是新一代的JS语言标准，对分JS语言核心内容做了升级优化，规范了JS使用标准，新增了JS原生方法，使得JS使用更加规范，更加优雅，更适合大型应用的开发。学习ES6是成为专业前端正规军的必经之路。不学习ES6也可以写代码打鬼子，但是最多只能当个游击队长。
答： ES2015特指在2015年发布的新一代JS语言标准，ES6泛指下一代JS语言标准，包含ES2015、ES2016、ES2017、ES2018等。现阶段在绝大部分场景下，ES2015默认等同ES6。ES5泛指上一代语言标准。ES2015可以理解为ES5和ES6的时间分界线。
答：babel是一个 ES6 转码器，可以将 ES6 代码转为 ES5 代码，以便兼容那些还没支持ES6的平台。
答： 在ES6之前，声明变量只能用var，var方式声明变量其实是很不合理的，准确的说，是因为ES5里面没有块级作用域是很不合理的，甚至可以说是一个语言层面的bug(这也是很多c++、java开发人员看不懂，也瞧不起JS语言的劣势之一)。没有块级作用域会带来很多难以理解的问题，比如for循环var变量泄露，变量覆盖等问题。let 声明的变量拥有自己的块级作用域，且修复了var声明变量带来的变量提升问题。
答：
ES6新增了字符串模板，在拼接大段字符串时，用反斜杠(`)取代以往的字符串相加的形式，能保留所有空格和换行，使得字符串拼接看起来更加直观，更加优雅。
ES6在String原型上新增了includes()方法，用于取代传统的只能用indexOf查找包含字符的方法(indexOf返回-1表示没查到不如includes方法返回false更明确，语义更清晰), 此外还新增了startsWith(), endsWith(), padStart(),padEnd(),repeat()等方法，可方便的用于查找，补全字符串。
答：
a. 数组解构赋值。ES6可以直接以let [a,b,c] = [1,2,3]
近期评论