每日思考（2019/12/25）
题目概览
- 怎样在页面上实现一个圆形的可点击区域？
- 什么是FOUC？你是如何避免FOUC的？
- "use strict"是什么?
题目解答
怎样在页面上实现一个圆形的可点击区域？
-
map+area：效果
<html><body> <img src="/i/eg_planets.jpg" border="0" usemap="#planetmap" alt="Planets" /> <map name="planetmap" id="planetmap"> <area shape="circle" coords="180,139,14" href ="/example/html/venus.html" target ="_blank" alt="Venus" /> <area shape="circle" coords="129,161,10" href ="/example/html/mercur.html" target ="_blank" alt="Mercury" /> <area shape="rect" coords="0,0,110,260" href ="/example/html/sun.html" target ="_blank" alt="Sun" /> </body></html> -
利用
border-radius: 50%：用一个div,给div添加圆角属性50，在div上添加点击事件div { overflow: hidden; width: 50px; height: 50px; background: red; border-radius: 50%; } -
用canvas画布，弧线画圆，在canvas上监听点击事件
var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.beginPath(); ctx.arc(100,75,50,0,2*Math.PI); ctx.stroke(); -
利用 SVG 作出圆形，然后添加点击事件
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" onclick="alert(3)"/> </svg>
什么是FOUC？你是如何避免FOUC的？
-
现象：如果使用import方法对css进行导入,会导致某些页面在Windows 下的Internet Explorer出现一些奇怪的现象，以无样式显示页面内容的瞬间闪烁,这种现象称之为文档样式短暂失效(Flash of Unstyled Content),简称为FOUC
-
原因：当样式表晚于结构性html 加载，当加载到此样式表时，页面将停止之前的渲染。此样式表被下载和解析后，将重新渲染页面，也就出现了短暂的花屏现象，下列可能会出现：
- 使用import方法导入样式表
- 将样式表放在页面底部
- 有几个样式表，放在html结构的不同位置
-
解决办法：使用link标签将样式表放在文档head中
"use strict"是什么?
-
含义：除了正常运行模式，ECMAscript 5添加了第二种运行模式："严格模式"（strict mode）。顾名思义，这种模式使得Javascript在更严格的条件下运行
-
目的：
- 消除Javascript语法的一些不合理、不严谨之处，减少一些怪异行为
- 消除代码运行的一些不安全之处，保证代码运行的安全；
- 提高编译器效率，增加运行速度；
- 为未来新版本的Javascript做好铺垫
-
进入标志：
"use strict"; //老版本的浏览器会把它当作一行普通字符串，加以忽略。 -
如何调用:
-
针对整个脚本文件：将"use strict"放在脚本文件的第一行，则整个脚本都将以"严格模式"运行。如果这行语句不在第一行，则无效，整个脚本以"正常模式"运行。如果不同模式的代码文件合并成一个文件，这一点需要特别意。(严格地说，只要前面不是产生实际运行结果的语句，"use strict"可以不在第一行，比如直接跟在一个空的分号后面。)
<script> "use strict"; console.log("这是严格模式。"); </script> -
针对单个函数：将"use strict"放在函数体的第一行，则整个函数以"严格模式"运行
function strict(){ "use strict"; return "这是严格模式。" } -
脚本文件的变通写法：因为第一种调用方法不利于文件合并，所以更好的做法是，借用第二种方法，将整个脚本文件放在一个立即执行的匿名函数之中
(function (){ "use strict"; // some code here })();
-
-
语法和行为改变
-
不允许使用未声明的变量
"use strict"; x = 3.14; // 报错 (x 未定义) x = {p1:10, p2:20}; // 报错 (x 未定义:对象也是一个变量) -
不允许删除变量或对象
"use strict"; var x = 3.14; delete x; // 报错 -
不允许删除函数
"use strict"; function x(p1, p2) {}; delete x; // 报错 -
不允许变量重名
"use strict"; function x(p1, p1) {}; // 报错 -
不允许使用八进制
"use strict"; var x = 010; // 报错 -
不允许使用转义字符
"use strict"; var x = \010; // 报错 -
不允许对只读属性赋值
"use strict"; var obj = {}; Object.defineProperty(obj, "x", {value:0, writable:false}); obj.x = 3.14; // 报错 -
不允许对一个使用getter方法读取的属性进行赋值
"use strict"; delete Object.prototype; // 报错 -
变量名不能使用 "eval" 字符串
"use strict"; var eval = 3.14; // 报错 -
变量名不能使用 "arguments" 字符串
"use strict"; var arguments = 3.14; // 报错 -
不允许使用
with语句"use strict"; with (Math){x = cos(2)}; // 报错 -
由于一些安全原因，在作用域 eval() 创建的变量不能被调用
"use strict"; eval ("var x = 2"); alert (x); // 报错 -
禁止this关键字指向全局对象
function f(){ return !this; } // 返回false，因为"this"指向全局对象，"!this"就是false function f(){ "use strict"; return !this; } // 返回true，因为严格模式下，this的值为undefined，所以"!this"为true。 function f(){ "use strict"; this.a = 1; }; f();// 报错，this未定义 -
保留关键字：
implements、interface、let、package、private、protected、public、static、yield"use strict"; var public = 1500; // 报错
-
