【跟着大佬学JavaScript】之数据基础类型
JavaScript数据类型JavaScript基本数据类型/原始数据类型/值类型(六种)
Null
Undefined
String
Number
Boolean
Symbol
注:Symbol 是 ES6 引入了一种新的原始数据类型,表示独一无二的值。
注:在es10中加入了原始数据类型BigInt,现已被最新Chrome支持
12345console.log(BigInt) // ƒ BigInt() { [native code] }console.log(typeof 1n) // bigintconsole.log(1n instanceof BigInt) //falseconsole.log(Object.prototype.toString.call(1n)) //[object BigInt]console.log(jQuery.type(1n)) // bigint
BigInt MDN
引用数据类型/对象数据类型(一种)
Object
Array
Function ...
【跟着大佬学JavaScript】之null和undefined的区别
白话文
null: 你有一个种树的想法,圈一块地,说你要在这里种树;
undefined:你有一个种树的想法,圈一块地,说你要在这里种树;同时你还挖了一个坑准备种树(仅仅是挖坑,也还没有种树);
共性在javascript里,null和undefined都表示不存在的数据,并且undefined也是从null中继承而来的;
null和undefined都是表示没有的,不存在的值;他们两个在进行逻辑转换时候都是false;这两个值进行比较是true;
Null和undefined没有toString方法;所以null和undefined和人和数据比较都是false;
因为undefined派生自null,所以undefined和null做数据类型比较的时候的true;
区别null表示空引用,它是object类型,undefined表示未定义,它是undefined类型;
null是object类型,但不是object的实例;用instanceof为false;
Number(null) // 0 Number(undefined) // ...
【浏览器】之缓存
概览
浏览器缓存,也就是客户端缓存,既是网页性能优化里面静态资源相关优化的一大利器,也是无数 web 开发人员在工作过程不可避免的一大问题,所以在产品开发的时候我们总是想办法避免缓存产生,而在产品发布之时又在想策略管理缓存提升网页的访问速度。
缓存,是优化网络请求。(js,css,img 可以被缓存)
它分为强缓存和协商缓存:
1)浏览器在加载资源时,先根据这个资源的一些 http header 判断它是否命中强缓存,强缓存如果命中,浏览器直接从自己的缓存中读取资源,不会发请求到服务器。比如某个 css 文件,如果浏览器在加载它所在的网页时,这个 css 文件的缓存配置命中了强缓存,浏览器就直接从缓存中加载这个 css,连请求都不会发送到网页所在服务器;
2)当强缓存没有命中的时候,浏览器一定会发送一个请求到服务器,通过服务器端依据资源的另外一些 http header 验证这个资源是否命中协商缓存,如果协商缓存命中,服务器会将这个请求返回,但是不会返回这个资源的数据,而是告诉客户端可以直接从缓存中加载这个资源,于是浏览器就又会从自己的缓存中去加载这个资源;
3)强缓存与协商缓 ...
【浏览器】之跨域
什么是跨域?(CORS、同源策略)
同源策略:限制从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。这是一个用于隔离潜在恶意文件的关键的安全机制。(来自 MDN 官方的解释)
受浏览器同源策略的限制,非同源的两个 URL 间不能通信,非同源的脚本不能操作其他源下面的对象,但在实际开发场景中, 这种情况经常出现, 此时需要通过跨域进行非同源通信
跨域问题的来源是浏览器为了请求安全而引入的基于同源策略的安全特性。当页面和请求的协议、主机名或端口不同时,浏览器判定两者不同源,即为跨域请求。需要注意的是跨域是浏览器的限制,服务端并不受此影响。
出于安全性,浏览器限制脚本内发起的跨源 HTTP 请求。例如,XMLHttpRequest 和 Fetch API 遵循同源策略。这意味着使用这些 API 的 Web 应用程序只能从加载应用程序的同一个域请求 HTTP 资源,除非响应报文包含了正确 CORS 响应头。
当产生跨域时,我们可以通过 JSONP、CORS、postMessage 等方式解决。
同源策略有什么限制
源包括三个部分:协议、域名、端口(http 协议的默认端口是 80)。 ...
【浏览器】之同源策略
什么是浏览器同源策略?同源:如果两个 URL 的协议、域名(主机名)和端口都相同,我们就称这两个 URL 同源。这两个 URL 是同源的
12https://time.geekbang.org/?category=1https://time.geekbang.org/?category=0
源:就是协议、域名和端口号。
同源策略:SOP(Same origin policy)是由 Netscape 公司 1995 年引入浏览器的一种约定,是浏览器最核心、最基本的安全功能,若缺少了同源策略,浏览器很容易受到 XSS、CSFR 等攻击。所谓同源是指”协议+域名+端口”三者相同,若两个 URL 的协议、域名、端口号都相同,则两者为同源,有一个不同则非同源,即便两个不同的域名指向同一个 ip 地址,也是非同源的
非同源的 URL 在没有明确授权的情况下,不能读写对方资源(不能相互通信)
具体来讲,同源策略主要表现在 DOM、Web 数据和网络这三个层面。
第一个,DOM 层面。同源策略限制了来自不同源的 JavaScript 脚本对当前 DOM 对象读和写的操作。
第二个,数据层面。 ...
【浏览器】之渲染机制
浏览器渲染机制首先,浏览器的渲染机制中有几个基本概念名称:
(1)、DOM:浏览器将 HTML 解析成树形的数据结构
(2)、CSSOM:浏览器将 CSS 解析成树形的数据结构
(3)、Render Tree:DOM 和 CSSOM 合并后生成 Render Tree(渲染树)
(4)、Layout:计算出 Render Tree 每个节点的具***置
(5)、Painting:通过显卡,将 Layout 后的节点内容分别呈现到屏幕上
浏览器整个渲染流程如下:
(1)、用户输入一个 URL 后,浏览器就会向服务器发出一个请求,请求 URL 对应的资源
(2)、接到服务器的响应内容后,浏览器的 HTML 解析器,会将 HTML 文件解析成一颗 DOM 树,DOM 树的构建是一个深度遍历的过程,当前节点的所有子节点都构建完成后,才会去构建当前节点的下一个兄弟节点
(3)、将 CSS 解析成 CSSOM 树
(4)、根据 DOM 树与 CSSOM 树,构建 Render Tree
(5)、浏览器会根据 Render Tree 能知道网页中哪些有节点,各个节点的 CSS,以及各个节点的从属关系 ...
【tinymce】tinymce的media设置,解决视频不能选中删除bug
概览
媒体插件为用户增加了将 HTML5 视频和音频元素添加到可编辑区域的能力。它还在“插入”菜单下添加了“插入/编辑视频”项目以及工具栏按钮。
由于,是之前老项目的 tinymce,对其进行相关的优化,并且不影响老项目其他引用模块,只对相应的 media 上传进行设置。
本文主要针对【media 的基本配置】、【视频不能正常显示 bug】、【视频不能选中删除的 bug】、以及【自定义上传】进行描述和解决。
需要注意的是本文针对的 tinymce 版本是 v4,其他高版本不一定适用。
基本设置这里的基本设置,是配置 tinymce 需要配置的工具。初始化时,必须的属性
selector :tinymce 需要配置的相应 html,如’#tinydemo4’
plugins: 必须的插件
toolbar:必须的工具栏
123456tinymce.init({ selector: 'textarea', // change this value according to your HTML plugins: 'media' ...
最长公共子序列
题目描述
给定序列 X={x1,xn},序列 Z{z1,zn},是 X 的子序列是指存在一个严格递增下标序列{i1,ik}使得对于所有 j=1,..k 有 zj = xij
例如 Z={B,C,D,B}是序列 X={A,B,C,D,B,A}的子序列,想要的递增下标序列为{2,3,5,7}
穷举法
找出 X 字符所有可能的子序列 2^n
对于 x 的每一个子序列,判断其是否是 Y 的一个子序列,需要的时间为 m
求的总时长 (2^n) * m
动态规划最优值当 X 有 i 个元素,Y 有 j 个元素,最长公共子序列的长度 lij
12345lij = { 0 i=0 或者j=0 (边界条件) l(i-1,j-1)+1 i>0,j>0, and Xi = Yj max{l[i-1,j],l[i,j-1]} i>0,j>0,and Xi≠Yj}
自底向上计算最优值