亚洲必赢登录 > 亚洲必赢app > 【亚洲必赢登录】茴字的三种写法,浅拷贝与深

原标题:【亚洲必赢登录】茴字的三种写法,浅拷贝与深

浏览次数:128 时间:2019-10-10

茴字的各种写法——浅谈移动前端适配

2018/04/16 · 基本功技巧 · 移动端

原来的文章出处: tomc   

话说自个儿刚职业的时候,就起来用rem了,过了没多长期,接触到了flexible,系统化且帮助iOS的retina屏赶快制服了自个儿,近日又来看了大漠大神的vw。所以本文想成功一篇一整套的稿子,能够系统的打听前端适配的产生。闲话少叙,登时开端。

浏览器渲染原理及流程

2017/05/26 · 基本功本事 · 浏览器

原稿出处: 李某龙   

咱俩可能都了解浏览器含有三个渲染引擎,用来渲染窗口所突显的剧情。暗许境况下,渲染引擎能够来得html、xml文书档案及图片,它也能够依赖插件(一种浏览器增添)展现别的项目数据,举例使用PDF阅读器插件,用于显示PDF格式。可是其现实的渲染原理和流程估算也是有过多少人都不亮堂依然不亮堂啊。这几个天商量了一晃浏览器的渲染原理,有了些心得,在此地跟大家大饱眼福一下,这里只谈谈渲染引擎最要害的用处——呈现应用了CSS之后的html及图片。

渲染引擎简单介绍

正文所商酌的浏览器——Firefox、Chrome和Safari是基于两种渲染引擎营造的,Firefox使用吉优ko——Mozilla自己作主研发的渲染引擎,Safari和Chrome都施用webkit。

渲染主流程

渲染引擎首先通过互连网获得所央求文档的从头到尾的经过,经常以8K分块的艺术成就。上面是渲染引擎在获得内容之后的主导流程:

解析html以构建dom树 -> 构建render树 -> 布局render树 -> 绘制render树

亚洲必赢登录 1

此地先解释一下多少个概念,方便大家明白:

DOM Tree:浏览器将HTML深入分析成树形的数据结构。

CSS Rule Tree:浏览器将CSS分析成树形的数据结构。  

Render Tree: DOM和CSSOM合併后生成Render Tree。

layout: 有了Render Tree,浏览器已经能知晓网页中有怎么着节点、各样节点的CSS定义以至他们的直属关系,进而去总结出每一种节点在显示器中的位置。

painting: 依据算出来的条条框框,通过显卡,把内容画到荧屏上。

reflow(回流):当浏览器发掘某些部分产生了点变化影响了布局,须要倒回去重新渲染,内行称这么些回落的历程叫 reflow。reflow 会从那个 root frame 初叶递归往下,依次计算有所的结点几何尺寸和岗位。reflow 大致是无法幸免的。未来分界面上流行的片段成效,例如树状目录的折叠、张开(实质上是因素的显 示与掩饰)等,都将引起浏览器的 reflow。鼠标滑过、点击……只要这一个表现引起了页面上一点因素的占位面积、定位情势、边距等属性的变型,都会唤起它里面、周围依然整个页面包车型客车重新渲 染。日常大家都无法儿预估浏览器到底会 reflow 哪一部分的代码,它们都互相互相影响着。

repaint(重绘):改动某些成分的背景象、文字颜色、边框颜色等等不影响它周边或内部布局的属性时,显示器的一片段要重画,不过成分的几何尺寸没有变。

小心:(1)display:none 的节点不会被插足Render Tree,而visibility: hidden 则会,所以,要是某些节点最早步是不显得的,设为display:none是更优的。   

(2)display:none 会触发 reflow,而 visibility:hidden 只会触发 repaint,因为未有察觉地方变动。

(3)某些景况下,比方修改了成分的体制,浏览器并不会马上reflow 或 repaint 叁回,而是会把那样的操作储存一群,然后做贰回 reflow,这又叫异步 reflow 或增量异步 reflow。不过在有个别景况下,举例resize 窗口,改造了页面暗许的字体等。对于这个操作,浏览器会霎时开展 reflow。 

来走访webkit的显要流程:

亚洲必赢登录 2

再来看看Geoko的第一级程:

亚洲必赢登录 3

Gecko 里把格式化好的可视成分称做“帧树”(Frame tree)。每一种成分正是三个帧(frame)。 webkit 则选择”渲染树”这么些术语,渲染树由”渲染对象”组成。webkit 里使用”layout”表示成分的布局,Gecko则称之为”reflow”。Webkit使用”Attachment”来三回九转DOM节点与可视化音信以营造渲染树。三个非语义上的小差异是Gecko在HTML与DOM树之间有一个附加的层 ,称作”content sink”,是创制DOM对象的工厂。

亚洲必赢登录,就算Webkit与Gecko使用略微差别的术语,那几个进度或许基本同样的,如下:

  1. 浏览器会将HTML解析成三个DOM树,DOM 树的创设进度是二个纵深遍历进度:当前节点的全部子节点都创设好后才会去创设当前节点的下贰个男士节点。

  2. 将CSS解析成 CSS Rule Tree 。

  3. 据说DOM树和CSSOM来布局 Rendering Tree。注意:Rendering Tree 渲染树并不同 DOM 树,因为部分像Header或display:none的东西就没须要放在渲染树中了。

  4. 有了Render Tree,浏览器已经能知道网页中有啥节点、各类节点的CSS定义以至他们的依赖关系。下一步操作称之为layout,看名称就能够想到其意义便是计量出每一种节点在显示屏中的地点。

  5. 再下一步便是绘制,即遍历render树,并动用UI后端层绘制每一个节点。

注意:上述这么些进程是日益到位的,为了更加好的客户体验,渲染引擎将会一心一意早的将内容显示到显示器上,并不会等到具备的html都解析完毕之后再去塑造和布局render树。它是解析完部分内容就展示一部分剧情,相同的时间,大概还在经过网络下载别的内容

1 赞 5 收藏 评论

亚洲必赢登录 4

ES6 变量评释与赋值:值传递、浅拷贝与深拷贝详解

2017/08/16 · JavaScript · es6

原稿出处: 王下邀月熊   

ES6 变量阐明与赋值:值传递、浅拷贝与深拷贝详解综合于小编的当代JavaScript 开拓:语法基础与推行本领连串小说。本文首先介绍 ES6 中常用的三种变量表明形式,然后商讨了 JavaScript 按值传递的特色,最终介绍了复合类型拷贝的本领;风乐趣的能够阅读下一章节 ES6 变量效用域与升迁:变量的生命周期详解。

浅说 XSS 和 CSRF

2018/07/16 · 基本功技巧 · CSRF, XSS

原稿出处: dwqs   

在 Web 安环球中,XSS 和 CS翼虎F 是最广泛的攻击格局。本文将会简介 XSS 和 CSLacrosseF 的进攻和防守难题。

声称:本文的现身说法仅用于演示相关的抨击原理

在后面一脾质量优化中利用HTTP缓存的三部曲

2017/02/24 · 基础本事 · HTTP, 前端

正文小编: 【亚洲必赢登录】茴字的三种写法,浅拷贝与深拷贝详解。伯乐在线 - ThoughtWorks 。未经小编许可,制止转发!
招待参加伯乐在线 专栏撰稿人。

斯Pike先生是Best Experience公司的IT运行部门主办,他的团队成功地应用Http Cache优化了前面一个工程。

Spike将通过多少个Scenario来展示他的组织是什么样产生那点的:

  • 通过安插Http Cache Expire来消减访谈压力,升高客户体验
  • 由此版本化来强制失效本地的过期缓存
  • 因此内容摘要命名文件来更标准的调整缓存以至贯彻非覆盖式的公布

1. 怎么是前者适配

从UI表现层面上:
咱俩意在分化尺寸的装置,页面可以自适应的来得要么扩充等比缩放,进而在分歧的尺寸的设施下看起来和煦或者差不多

从代码完成规模上:
大家盼望前端适配可以用用用尽了全力精简的代码来落到实处。最佳一套代码落实宽容全体器材,并不是对各种或每一个设备都写一套方案,不是历次都选取最万般无奈的方案(Android和iOS分开编写)。

变量注明与赋值

ES6 为我们引进了 let 与 const 三种新的变量注解关键字,同期也引进了块效能域;本文首先介绍 ES6 中常用的两种变量注明格局,然后商量了 JavaScript 按值传递的性状以致四种的赋值方式,最终介绍了复合类型拷贝的技巧。

XSS

XSS,即 克罗斯 Site Script,中译是跨站脚本攻击;其原本缩写是 CSS,但为了和层叠样式表(Cascading Style Sheet)有所分裂,因此在四平领域叫做 XSS。

XSS 攻击是指攻击者在网址上注入恶意的客商端代码,通过恶意脚本对顾客端网页进行曲解,进而在顾客浏览网页时,对客户浏览器举行支配只怕获得客户隐衷数据的一种攻击方式。

攻击者对顾客端网页注入的恶意脚本常常包罗 JavaScript,临时也会包涵 HTML 和 Flash。有很七种方法开展 XSS 攻击,但它们的共同点为:将有些心事数据像 cookie、session 发送给攻击者,将受害者重定向到一个由攻击者调节的网址,在被害人的机械上进展局地恶心操作。

XSS攻击能够分成3类:反射型(非持久型)、存款和储蓄型(漫长型)、基于DOM。

首先个故事:笔者不想要那么多服务器和带宽

2. 关键字

若是你询问那个根本字,那么这段大能够跳过,假诺前面凌驾了难题,感到微微思疑,也得以再回到查阅。

变量注脚

在 JavaScript 中,基本的变量表明能够用 var 格局;JavaScript 允许省略 var,直接对未注解的变量赋值。相当于说,var a = 1 与 a = 1,这两条语句的效用同样。然则出于那样的做法很轻便神不知鬼不觉地成立全局变量(特别是在函数内部),所以提出总是利用 var 命令申明变量。在 ES6 中,对于变量注明的格局开展了扩张,引进了 let 与 const。var 与 let 多个主要字成立变量的界别在于, var 注解的变量效率域是近年来的函数块;而 let 申明的变量功用域是新近的闭合块,往往会小于函数块。另一方面,以 let 关键字创立的变量即使同样被晋级到职能域底部,可是并无法在实际上评释前使用;假若强行使用则会抛出 ReferenceError 非凡。

反射型

反射型 XSS 只是简短地把客商输入的数据 “反射” 给浏览器,这种攻击格局往往必要攻击者诱使客商点击一个恶心链接,可能提交叁个表单,或然步向三个恶意网址时,注入脚本步向被攻击者的网址。

看叁个演示。笔者先妄图八个之类的静态页:

亚洲必赢登录 5

恶意链接的地址指向了 localhost:8001/?q=111&p=222。然后,作者再启三个轻便易行的 Node 服务管理恶意链接的诉求:

JavaScript

const http = require('http'); function handleReequest(req, res) { res.setHeader('Access-Control-Allow-Origin', '*'); res.writeHead(200, {'Content-Type': 'text/html; charset=UTF-8'}); res.write('<script>alert("反射型 XSS 攻击")</script>'); res.end(); } const server = new http.Server(); server.listen(8001, '127.0.0.1'); server.on('request', handleReequest);

1
2
3
4
5
6
7
8
9
10
11
const http = require('http');
function handleReequest(req, res) {
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.writeHead(200, {'Content-Type': 'text/html; charset=UTF-8'});
    res.write('<script>alert("反射型 XSS 攻击")</script>');
    res.end();
}
 
const server = new http.Server();
server.listen(8001, '127.0.0.1');
server.on('request', handleReequest);

当客商点击恶意链接时,页面跳转到攻击者预先希图的页面,会开掘在攻击者的页面施行了 js 脚本:

亚洲必赢登录 6

那般就时有发生了反射型 XSS 攻击。攻击者能够注入任性的黑心脚本举办抨击,或然注入恶作剧脚本,或许注入能博得客户隐秘数据(如cookie)的剧本,那取决攻击者的指标。

Best Experience面对的财富访谈压力和客商体验方面包车型客车标题

趁着Best Experience提供的前端采取更抓实大,Spike的压力也更是大:

  • IT部门为了应对来自静态财富的拜见压力,不断买入服务器和带宽。
  • 倒霉的客商体验使得客商转投到竞争对手的网址。

程序员们刚刚经过应用Minify、英特尔、打包、Gzip等招数优化了后面一个页面包车型的士感受, 最后获得如下图所示的八个财富引用关系:

亚洲必赢登录 7

“依旧广大东西要下载啊,该拿什么来拯救该死的推迟呢?”——Spike看着图想到。

他陡然想起来:在将来间,Yahoo曾颁发了关于优化前端体验的35条提构和教导,在这之中第三条是:“Add an Expires or a Cache-Control Header”。

Yahoo是如此汇报那条建议的:

Web page designs are getting richer and richer, which means more scripts, stylesheets, images, and Flash in the page. A first-time visitor to your page may have to make several HTTP requests, but by using the Expires header you make those components cacheable. This avoids unnecessary HTTP requests on subsequent page views. Expires headers are most often used with images, but they should be used on all components including scripts, stylesheets, and Flash components.

Browsers (and proxies) use a cache to reduce the number and size of HTTP requests, making web pages load faster.

“那一个正是自家搜寻的银弹”——Spike得意的笑了。

于是,Spike写下了第一个Technology Story。

用作IT 部门的不行:

小编期望经过动用HTTP缓存技巧,重用已经下载过的财富,

用来消减客户在浏览页面时爆发的不须要的Http Request。

那一个,来进步客商在浏览页面时候的感受,

以致收缩对于集团服务器财富的拜见压力。

并找来了工程师汤姆。

2.1 Viewport/视口

浅显的讲,移动道具上的viewport便是道具的显示屏上能用来呈现大家的网页的那一块区域[1],但不必然是大家可知的区域。具体来讲,分为以下二种。

var

var 是 JavaScript 中基础的变量注明格局之一,其主干语法为:

var x; // Declaration and initialization x = "Hello World"; // Assignment // Or all in one var y = "Hello World";

1
2
3
4
5
var x; // Declaration and initialization
x = "Hello World"; // Assignment
 
// Or all in one
var y = "Hello World";

ECMAScript 6 在此之前笔者们在 JavaScript 中并不曾别的的变量表明格局,以 var 评释的变量成效于函数成效域中,若无相应的闭合函数功能域,那么该变量会被用作暗中同意的全局变量进行处理。

function sayHello(){ var hello = "Hello World"; return hello; } console.log(hello);

1
2
3
4
5
function sayHello(){
var hello = "Hello World";
return hello;
}
console.log(hello);

像如上这种调用格局会抛出特别: ReferenceError: hello is not defined,因为 hello 变量只好效用于 sayHello 函数中,但是若是依据如下先注脚全局变量方式再采用时,其就可以预知健康调用:

var hello = "Hello World"; function sayHello(){ return hello; } console.log(hello);

1
2
3
4
5
var hello = "Hello World";
function sayHello(){
return hello;
}
console.log(hello);

存储型

存款和储蓄型 XSS 会把客商输入的数据 “存款和储蓄” 在劳务器端,当浏览器央浼数据时,脚本从服务器上传到并实施。这种 XSS 攻击全体很强的安澜。

正如常见的二个景观是攻击者在社区或论坛上写下一篇包涵恶意 JavaScript 代码的稿子或评头品足,小说或评头品足宣布后,全数访谈该小说或臧否的客户,都会在她们的浏览器中施行这段恶意的 JavaScript 代码。

举二个演示。

先谋算四个输入页面:

<input type="text" id="input"> <button id="btn">Submit</button> <script> const input = document.getElementById('input'); const btn = document.getElementById('btn'); let val; input.addEventListener('change', (e) => { val = e.target.value; }, false); btn.addEventListener('click', (e) => { fetch('', { method: 'POST', body: val }); }, false); </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<input type="text" id="input">
<button id="btn">Submit</button>  
 
<script>
    const input = document.getElementById('input');
    const btn = document.getElementById('btn');
 
    let val;
    
    input.addEventListener('change', (e) => {
        val = e.target.value;
    }, false);
 
    btn.addEventListener('click', (e) => {
        fetch('http://localhost:8001/save', {
            method: 'POST',
            body: val
        });
    }, false);
</script>

初始二个 Node 服务监听 save 诉求。为了简化,用二个变量来保存客户的输入:

const http = require('http'); let userInput = ''; function handleReequest(req, res) { const method = req.method; res.setHeader('Access-Control-Allow-Origin', '*'); res.setHeader('Access-Control-Allow-Headers', 'Content-Type') if (method === 'POST' && req.url === '/save') { let body = ''; req.on('data', chunk => { body += chunk; }); req.on('end', () => { if (body) { userInput = body; } res.end(); }); } else { res.writeHead(200, {'Content-Type': 'text/html; charset=UTF-8'}); res.write(userInput); res.end(); } } const server = new http.Server(); server.listen(8001, '127.0.0.1'); server.on('request', handleReequest);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
const http = require('http');
 
let userInput = '';
 
function handleReequest(req, res) {
    const method = req.method;
    res.setHeader('Access-Control-Allow-Origin', '*');
    res.setHeader('Access-Control-Allow-Headers', 'Content-Type')
    
    if (method === 'POST' && req.url === '/save') {
        let body = '';
        req.on('data', chunk => {
            body += chunk;
        });
 
        req.on('end', () => {
            if (body) {
                userInput = body;
            }
            res.end();
        });
    } else {
        res.writeHead(200, {'Content-Type': 'text/html; charset=UTF-8'});
        res.write(userInput);
        res.end();
    }
}
 
const server = new http.Server();
server.listen(8001, '127.0.0.1');
 
server.on('request', handleReequest);

当客户点击提交按键将输入音讯交到到服务端时,服务端通过 userInput 变量保存了输入内容。当客商通过 http://localhost:8001/${id} 访谈时,服务端会重临与 id 对应的内容(本示例简化了管理)。借使客商输入了恶心脚本内容,则别的客商访问该内容时,恶意脚本就能在浏览器端实行:

亚洲必赢登录 8

Expire带来的美好生活

Tom刚刚到场了前一轮的优化工作,就算成果斐然,但是他并不满意。

当汤姆看见吉米写下的Story时万物更新:“那一个措施太赞了!笔者以至能够在报到页面尾巴部分放置对任何页面能源的援用。进步客户在全体网址的浏览体验。”——汤姆的小宇宙瞬间产生,极快就完了了新的优化方案。

Best-Experience的顾客在接下去的岁月里浏览页面,会这么下载财富,以图纸bgimage.png为例:

  • 顾客率先次得到图片的时候,Http Request 如图:

亚洲必赢登录 9

  • 从此顾客再度获得图片的时候,则一心能够从浏览器的缓存中读取数据了。

亚洲必赢登录 10

因为运用了Http缓存方案,

  • 客户的feedback越来越好,访谈量提升了;
  • IT部门也不用那么多服务器和带宽了。

财务组长特邀Spike共进晚饭,并说到了自身在希腊(Ελλάδα)的度假。

“小编想本身也应该去圣托里尼度个假,犒劳下自个儿”——Spike美滋滋的想到。

2.1.1 Visual Viewport

Visual Viewport: 可以看到视口。正是活动道具上能够被大家见到的片段。宽度在运动端通过window.innerWidth获得(只限移动端,PC上便是是chrome模拟也可能有例外的结果)。

亚洲必赢登录 11

let

在 ECMAScript 6 中大家能够利用 let 关键字打开变量注明:

let x; // Declaration and initialization x = "Hello World"; // Assignment // Or all in one let y = "Hello World";

1
2
3
4
5
let x; // Declaration and initialization
x = "Hello World"; // Assignment
 
// Or all in one
let y = "Hello World";

let 关键字申明的变量是属于块作用域,也正是满含在 {} 之内的效果于。使用 let 关键字的优势在于能够减少临时的失实的可能率,因为其保障了每一种变量只可以在一点都不大的作用域内开展访谈。

var name = "Peter"; if(name === "Peter"){ let hello = "Hello Peter"; } else { let hello = "Hi"; } console.log(hello);

1
2
3
4
5
6
7
var name = "Peter";
if(name === "Peter"){
let hello = "Hello Peter";
} else {
let hello = "Hi";
}
console.log(hello);

上述代码同样会抛出 ReferenceError: hello is not defined 分外,因为 hello 只可以够在密闭的块效率域中开展访谈,大家得以扩充如下修改:

var name = "Peter"; if(name === "Peter"){ let hello = "Hello Peter"; console.log(hello); } else { let hello = "Hi"; console.log(hello); }

1
2
3
4
5
6
7
8
var name = "Peter";
if(name === "Peter"){
let hello = "Hello Peter";
  console.log(hello);
} else {
let hello = "Hi";
  console.log(hello);
}

我们得以应用这种块级成效域的个性来幸免闭包中因为变量保留而致使的主题素材,举个例子如下二种异步代码,使用 var 时老是循环中运用的都以千篇一律变量;而使用 let 评释的 i 则会在历次循环时举办分歧的绑定,即每趟循环中闭包捕获的都以例外的 i 实例:

for(let i = 0;i < 2; i++){ setTimeout(()=>{console.log(`i:${i}`)},0); } for(var j = 0;j < 2; j++){ setTimeout(()=>{console.log(`j:${j}`)},0); } let k = 0; for(k = 0;k < 2; k++){ setTimeout(()=>{console.log(`k:${k}`)},0); } // output i:0 i:1 j:2 j:2 k:2 k:2

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
for(let i = 0;i < 2; i++){
        setTimeout(()=>{console.log(`i:${i}`)},0);
}
 
for(var j = 0;j < 2; j++){
        setTimeout(()=>{console.log(`j:${j}`)},0);
}
 
let k = 0;
for(k = 0;k < 2; k++){
        setTimeout(()=>{console.log(`k:${k}`)},0);
}
 
// output
i:0
i:1
j:2
j:2
k:2
k:2

基于DOM

据说 DOM 的 XSS 攻击是指通过恶意脚本修改页面包车型客车 DOM 结构,是纯粹发生在客商端的口诛笔伐。

看如下代码:

<h2>XSS: </h2> <input type="text" id="input"> <button id="btn">Submit</button> <div id="div"></div> <script> const input = document.getElementById('input'); const btn = document.getElementById('btn'); const div = document.getElementById('div'); let val; input.addEventListener('change', (e) => { val = e.target.value; }, false); btn.addEventListener('click', () => { div.innerHTML = `<a href=${val}>testLink</a>` }, false); </script>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<h2>XSS: </h2>
<input type="text" id="input">
<button id="btn">Submit</button>
<div id="div"></div>
<script>
    const input = document.getElementById('input');
    const btn = document.getElementById('btn');
    const div = document.getElementById('div');
 
    let val;
    
    input.addEventListener('change', (e) => {
        val = e.target.value;
    }, false);
 
    btn.addEventListener('click', () => {
        div.innerHTML = `<a href=${val}>testLink</a>`
    }, false);
</script>

点击 Submit 按键后,会在当前页面插入一个链接,其地址为客商的输入内容。若是客户在输入时协会了如下内容:

'' onclick=alert(/xss/)

1
2
'' onclick=alert(/xss/)
 

客户提交之后,页面代码就成为了:

<a href onlick="alert(/xss/)">testLink</a>

1
<a href onlick="alert(/xss/)">testLink</a>

那时,客商点击生成的链接,就能够施行相应的本子:

亚洲必赢登录 12

其次个传说:失效缓存是个手艺活

2.2.2 Layout Viewport

Layout Viewport: 布局视口。

亚洲必赢登录 13

比方把PC上的页面放到移动端,以iphone8为例,假诺只体现为可知视口的幅度(375px),那么页面会被缩减的特意窄而显得错乱,所以移动浏览器就决定暗中同意情形下把viewport设为四个较宽的值,比如980px,那样的话尽管是那多少个为桌面设计的网址也能在运动浏览器上平时呈现了。[1]

而实际上,我们平日看不到如上海教室这样出现横向滚动条的分界面;在手提式无线电话机上访问页面时,往往是下图的旗帜:亚洲必赢登录 14

那是出于页面body宽度设置了百分百而尚未点名四个有血有肉的大幅导致的,进而使页面被等比缩放了。由于客商能够缩放,所以还算能不荒谬浏览。

const

const 关键字日常用来常量注明,用 const 关键字注脚的常量必要在宣称时实行最早化并且不得以再扩充改换,并且 const 关键字评释的常量被界定于块级效能域中张开访谈。

function f() { { let x; { // okay, block scoped name const x = "sneaky"; // error, const x = "foo"; } // error, already declared in block let x = "inner"; } }

1
2
3
4
5
6
7
8
9
10
11
12
13
function f() {
  {
let x;
    {
      // okay, block scoped name
const x = "sneaky";
      // error, const
      x = "foo";
    }
    // error, already declared in block
let x = "inner";
  }
}

JavaScript 中 const 关键字的表现于 C 中留存着自然出入,比如下述使用格局在 JavaScript 中正是准确的,而在 C 中则抛出十一分:

# JavaScript const numbers = [1, 2, 3, 4, 6] numbers[4] = 5 console.log(numbers[4]) // print 5 # C const int numbers[] = {1, 2, 3, 4, 6}; numbers[4] = 5; // error: read-only variable is not assignable printf("%dn", numbers[4]);

1
2
3
4
5
6
7
8
9
# JavaScript
const numbers = [1, 2, 3, 4, 6]
numbers[4] = 5
console.log(numbers[4]) // print 5
 
# C
const int numbers[] = {1, 2, 3, 4, 6};
numbers[4] = 5; // error: read-only variable is not assignable
printf("%dn", numbers[4]);

从上述相比大家也可以见到,JavaScript 中 const 限制的绝不值不可变性;而是创立了不可变的绑定,即对于有些值的只读援引,何况防止了对于该引用的重赋值,即如下的代码会触发错误:

const numbers = [1, 2, 3, 4, 6] numbers = [7, 8, 9, 10, 11] // error: assignment to constant variable console.log(numbers[4])

1
2
3
const numbers = [1, 2, 3, 4, 6]
numbers = [7, 8, 9, 10, 11] // error: assignment to constant variable
console.log(numbers[4])

我们得以参谋如下图片通晓这种体制,各样变量标识符都会涉嫌某些存放变量实际值的物理地址;所谓只读的变量就是该变量标记符无法被重新赋值,而该变量指向的值依然可变的。

JavaScript 中留存着所谓的原始类型与复合类型,使用 const 注解的原始类型是值不可变的:

# Example 1 const a = 10 a = a + 1 // error: assignment to constant variable # Example 2 const isTrue = true isTrue = false // error: assignment to constant variable # Example 3 const sLower = 'hello world' const sUpper = sLower.toUpperCase() // create a new string console.log(sLower) // print hello world console.log(sUpper) // print HELLO WORLD

1
2
3
4
5
6
7
8
9
10
11
# Example 1
const a = 10
a = a + 1 // error: assignment to constant variable
# Example 2
const isTrue = true
isTrue = false // error: assignment to constant variable
# Example 3
const sLower = 'hello world'
const sUpper = sLower.toUpperCase() // create a new string
console.log(sLower) // print hello world
console.log(sUpper) // print HELLO WORLD

而假诺大家希望将某些对象一样成为不可变类型,则须求利用 Object.freeze();不过该方法仅对于键值对的 Object 起效果,而不可能成效于 Date、Map 与 Set 等品种:

# Example 4 const me = Object.freeze({name: “Jacopo”}) me.age = 28 console.log(me.age) // print undefined # Example 5 const arr = Object.freeze([-1, 1, 2, 3]) arr[0] = 0 console.log(arr[0]) // print -1 # Example 6 const me = Object.freeze({ name: 'Jacopo', pet: { type: 'dog', name: 'Spock' } }) me.pet.name = 'Rocky' me.pet.breed = 'German Shepherd' console.log(me.pet.name) // print Rocky console.log(me.pet.breed) // print German Shepherd

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
# Example 4
const me = Object.freeze({name: “Jacopo”})
me.age = 28
console.log(me.age) // print undefined
# Example 5
const arr = Object.freeze([-1, 1, 2, 3])
arr[0] = 0
console.log(arr[0]) // print -1
# Example 6
const me = Object.freeze({
  name: 'Jacopo',
pet: {
    type: 'dog',
    name: 'Spock'
  }
})
me.pet.name = 'Rocky'
me.pet.breed = 'German Shepherd'
console.log(me.pet.name) // print Rocky
console.log(me.pet.breed) // print German Shepherd

纵然是 Object.freeze() 也不得不幸免顶层属性被修改,而不能界定对于嵌套属性的修改,那点大家会在下文的浅拷贝与深拷贝部分继续探究。

XSS 攻击的防御

前几日主流的浏览器内置了防卫 XSS 的法门,举例 CSP。但对此开垦者来讲,也理应搜索可信的缓和方案来防护 XSS 攻击。

其一BUG大家一目通晓修了呀!

一天,QA Tyke发掘以来一轮公布的前端选拔中并未有包含众多新的feature。杰瑞承诺说已经随着前些时间的release上线了,还测验过了。经过一番煎熬,杰瑞开采浏览器一贯在选拔旧的缓存,并非新型的版本。Spike找来了Jerry和Tom,三人共同手动对引用的财富做了重命名、做了急如星火修复。

“真是没有银弹啊,小编的圣托里尼啊!”——斯Pike头疼的想到。

Spike、杰瑞、汤姆和Tyke坐在了一齐,得出了新的定论:

  • 缓存前端工程中的能源时,须要考虑缓存保质期的难题
  • 就算如此35条提出和引导中国建工业总集合团议“Configure ETags”,不过很难明确静态能源缓存的保质期
  • 虽说Http缓存能够支撑No-Cache大概max-age =0的主意,保障浏览器每便都向服务器验证缓存有效性,但是这么会大大扩充服务器的压力
  • 能够透过在能源援用上平添形如:<…. src=”###.js?v=$version$”>的版本化方式,来强制浏览器更新缓存。

斯派克写下了新的Technology Story

用作IT部门的不行:

本身梦想在前端系统中,对援用的静态能源扩充版本化管理。

使之既可以够透过Http缓存来提高客户体验,减少服务器压力;

也足以一本万利客商即时得到更新后的能源。

“那都八月了,看来是去不成圣托里尼了,总认为这一个方案哪儿有标题”——Spike忐忑不安。

本文由亚洲必赢登录发布于亚洲必赢app,转载请注明出处:【亚洲必赢登录】茴字的三种写法,浅拷贝与深

关键词:

上一篇:商业事务入门,不相符复杂的前端项目

下一篇:没有了