2021.3.8今天是3.8妇女节，祝妈妈节日快乐。上传一些笔记，很杂乱。但没办法知识点本来就不扎实。

encodeURIComponent

用于将把字符串作为 URI 组件进行编码。

该方法不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码： - _ . ! ~ * ' ( ) 。

其他字符（比如：;/?😡&=+$,# 这些用于分隔 URI 组件的标点符号），都是由一个或多个十六进制的转义序列替换的。

function ajax (url, data) {
let args = [];
for (let key in data) {
    // 参数需要转义
  args.push(`${encodeURIComponent(key)} = 
                                 ${encodeURIComponent(data[key])}`);
}
let search = args.join("&");
// 判断当前url是否已有参数
url += ~url.indexOf("?") ? `&${search}` : `?${search}`;

let xhr = new XMLHttpRequest();
xhr.open("GET", url);
xhr.send();
}

请求头：
User-Agent：用户代理信息 - Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_3) AppleWebKit/537.36 ...
Accept：客户端可识别的内容类型列表 - text/html,application/xhtml+xml,application/xml
Accept-Language：客户端可接受的自然语言 - zh-CN,zh;q=0.8,en;q=0.6,id;q=0.4
Accept-Encoding：客户端可接受的编码压缩格式 - gzip, deflate, sdch, br
Host：请求的主机名，允许多个域名同处一个IP地址，即虚拟主机 - www.baidu.com
connection：连接方式
close：告诉WEB服务器或代理服务器，在完成本次请求的响应后，断开连接
keep-alive：告诉WEB服务器或代理服务器。在完成本次请求的响应后，保持连接，以等待后续请求

Cookie：存储于客户端扩展字段，向同一域名的服务端发送属于该域的cookie - PSTM=1490844191; BIDUPSID=2145FF54639208435F60E1E165379255;

console.log(Number(undefined))//NaN

console.log(Number(0))//0

console.log(Number())//0

console.log(Number(''))//0

console.log(Number('0'))//0

console.log(Number(false))//0

console.log(Number(null))//0

console.log(Number([]))//0

console.log(Number([0]))//0

console.log(parseInt(undefined))//NaN

console.log(parseInt(0))//0

console.log(parseInt())//NaN

console.log(parseInt(''))//NaN

console.log(parseInt('0'))//0

console.log(parseInt(false))//NaN

console.log(parseInt(null))//NaN

console.log(parseInt([]))//NaN

console.log(parseInt([0]))//0

RegExp三个方法：
test（）
exec（）
commpile（）在脚本执行过程中编译正则表达式，也可以改变已有表达式

compile 编译正则表达式。

compile 方法将正则表达式转换为内部的格式，从而执行得更快。例如，这允许在循环中更有效地使用正则表达式。当重复使用相同的表达式时，编译过的正则表达式使执行加速。

test 检索字符串中指定的值。返回 true 或 false。
语法：RegExpObject.test(string)

如果字符串 string 中含有与 RegExpObject 匹配的文本，则返回 true，否则返回 false。

exec 检索字符串中指定的值。返回找到的值，并确定其位置。
如果 exec 方法没有找到匹配，将返回 null。如果找到匹配项，则 exec 方法返回一个数组

检测对象是数组：（我老是和判断两个变量相等混淆。。。。）

Array.isArray（）
instanceof
Object.prototype.toString.call（）

Angular大大减少了对DOM的访问。
jQuery极大的丰富了DOM操作

以下是四种touch事件

touchstart: //手指放到屏幕上时触发

touchmove: //手指在屏幕上滑动式触发

touchend: //手指离开屏幕时触发

touchcancel: //系统取消touch事件的时候触发，这个好像比较少用

每个触摸事件被触发后，会生成一个event对象，event对象里额外包括以下三个触摸列表

touches: //当前屏幕上所有手指的列表

targetTouches: //当前dom元素上手指的列表，尽量使用这个代替touches

changedTouches: //涉及当前事件的手指的列表，尽量使用这个代替touches

链式作用域是js本身自然存在的一种获取变量的方式。链式作用域外部可以访问内部，内部访问外部需要设置一个函数，由此产生闭包。就是里面可以看外面，外面不可以看里面

document.getElementById();

document.getElementsByTagName();

document.getElementsByName();

document.getElementsByClassName();

除了ById是Element，其余都是Elements，其他都是数组了

运算中，+号，数字隐式转换成字符串。其余的运算符号是字符串隐式转换成数字。

// 如果你在括号内放置了表达式，没有错误抛出...
// 但是函数也不会执行，因为:

function foo(){ /* code */ }( 1 );

// 它与一个函数声明后面放一个完全无关的表达式是一样的:

function foo(){ /* code */ }

( 1 );

IIFE（立即调用函数表达式）
IIFE（立即调用函数表达式）是一个在定义时就会立即执行的 JavaScript 函数。

(function () {
statements
})();
这是一个被称为自执行匿名函数的设计模式，主要包含两部分。第一部分是包围在圆括号运算符 () 里的一个匿名函数，这个匿名函数拥有独立的词法作用域。这不仅避免了外界访问此 IIFE 中的变量，而且又不会污染全局作用域。

第二部分再一次使用 () 创建了一个立即执行函数表达式，JavaScript 引擎到此将直接执行函数。

函数提升优先级高于变量提升；
所以
var a = 10;
function a(){}
console.log(typeof a)
等同于
function a(){}
var a；
a = 10;
console.log(typeof a)

java前身才是oak

ES6 规定暂时性死区和let、const语句不出现变量提升，主要是为了减少运行时错误，防止在变量声明前就使用这个变量，从而导致意料之外的行为。这样的错误在 ES5 是很常见的，现在有了这种规定，避免此类错误就很容易了。

总之，暂时性死区的本质就是，只要一进入当前作用域，所要使用的变量就已经存在了，但是不可获取，只有等到声明变量的那一行代码出现，才可以获取和使用该变量。

ES6 明确规定，如果区块中存在let和const命令，这个区块对这些命令声明的变量，从一开始就形成了封闭作用域。凡是在声明之前就使用这些变量，就会报错。

总之，在代码块内，使用let命令声明变量之前，该变量都是不可用的。这在语法上，称为“暂时性死区”（temporal dead zone，简称 TDZ）。

先同步任务，再异步任务分为宏任务和微任务，微任务优先级高于宏任务。promise.then执行的微任务，

Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM，

nextTick用法：

Vue生命周期的created()钩子函数进行的DOM操作一定要放在Vue.nextTick()的回调函数中，原因是在created()钩子函数执行的时候DOM 其实并未进行任何渲染，而此时进行DOM操作无异于徒劳，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。与之对应的就是mounted钩子函数，因为该钩子函数执行时所有的DOM挂载已完成。
2.当项目中你想在改变DOM元素的数据后基于新的dom做点什么，对新DOM一系列的js操作都需要放进Vue.nextTick()的回调函数中；通俗的理解是：更改数据后当你想立即使用js操作新的视图的时候需要使用它
3、在使用某个第三方插件时，希望在vue生成的某些dom动态发生变化时重新应用该插件，也会用到该方法，这时候就需要在 $nextTick 的回调函数中执行重新应用插件的方法。

Vue.nextTick(callback) 使用原理：
原因是，Vue是异步执行dom更新的，一旦观察到数据变化，Vue就会开启一个队列，然后把在同一个事件循环 (event loop) 当中观察到数据变化的 watcher 推送进这个队列。如果这个watcher被触发多次，只会被推送到队列一次。这种缓冲行为可以有效的去掉重复数据造成的不必要的计算和DOm操作。而在下一个事件循环时，Vue会清空队列，并进行必要的DOM更新。
当你设置 vm.someData = 'new value'，DOM 并不会马上更新，而是在异步队列被清除，也就是下一个事件循环开始时执行更新时才会进行必要的DOM更新。如果此时你想要根据更新的 DOM 状态去做某些事情，就会出现问题。。为了在数据变化之后等待 Vue 完成更新 DOM ，可以在数据变化之后立即使用 Vue.nextTick(callback) 。这样回调函数在 DOM 更新完成后就会调用。

x=Math.round(2019.49) ; //2019
x=Math.round(2019.5); //2020
x=Math.round(-2019.5); //-2019
x=Math.round(-2019.51); //-2020
math.round() 方法，原来的数字加上0.5，再向下取整！！！！

1.什么是 XML?

XML 指可扩展标记语言（EXtensible Markup Language）

XML 是一种标记语言，很类似 HTML

XML 的设计宗旨是传输数据，而非显示数据

XML 标签没有被预定义。您需要自行定义标签。

XML 被设计为具有自我描述性。

XML 是 W3C 的推荐标准

2.XML 与 HTML 的主要差异

XML 不是 HTML 的替代。

XML 和 HTML 为不同的目的而设计：

XML 被设计为传输和存储数据，其焦点是数据的内容。

HTML 被设计用来显示数据，其焦点是数据的外观。

HTML 旨在显示信息，而 XML 旨在传输信息。

var str1=new RegExp("e");
str1.exec("hello")
["e", index: 1, input: "hello", groups: undefined]

var str1=new RegExp("l");
str1.exec("hello")
["l", index: 2, input: "hello", groups: undefined]

JavaScript实现继承共6种方式：
原型链继承、借用构造函数继承、组合继承、原型式继承、寄生式继承、寄生组合式继承。（记住就好了）

在事件中，this指向触发这个事件的对象，特殊的是，IE中的attachEvent中的this总是指向全局对象Window；

target这个属性指定所链接的页面在浏览器窗口中的打开方式，

它的参数值主要有：_blank、_parent、_self、_top，这些参数值代表的含义如下：

_blank，在新浏览器窗口中打开链接文件。
_parent，将链接的文件载入含有该链接框架的父框架集或父窗口中。

如果含有该链接的框架不是嵌套的，则在浏览器全屏窗口中载入链接的文件，

就象_self参数一样。

_self，在同一框架或窗口中打开所链接的文档。此参数为默认值，通常不用指定。
_top，在当前的整个浏览器窗口中打开所链接的文档，因而会删除所有框架。

一个常用的针对移动网页优化过的页面的 viewport meta 标签大致如下：

width：控制 viewport 的大小，可以指定的一个值，如 600，或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。 height：和 width 相对应，指定高度。 initial-scale：初始缩放比例，也即是当页面第一次 load 的时候缩放比例。 maximum-scale：允许用户缩放到的最大比例。 minimum-scale：允许用户缩放到的最小比例。 user-scalable：用户是否可以手动缩放。

电子邮件
<a href=”mailto:love@baidu.com”>love@baidu.com</a>

表单作用：为了收集用户信息，如登录、注册、搜索。
表单标记有文本框、密码框、单选框、多选框、下拉框、多行文本框、上传按钮、隐藏表单、提交按钮、重置按钮、图片提交按钮、普通按钮。
但是没有table标签，这是html的标签，和表单标记没有关系

HTML5之前的版本是 HTML 4.01 ，HTML5版本为当前最新的HTML版本。
HTML4.01、HTML5 之间的区别：声明区别
HTML有多个不同的版本，只有准确的在页面中指定确切的HTML版本，浏览器才能正确无误的显示HTML页面。这就是的用处。
不是HTML标签，它只是为浏览器提供一项声明，因此它没有闭合/结束标签！

HTML5是html标准中现今的最新标准，2014年10月发布
新增：

更富语义的标签，以便更好的被机器识别
Canvas+WEBGL等技术，实现无插件的动画以及图像、图形处理能力；
本地存储，可实现offline应用；
websocket，一改http的纯pull模型，实现数据推送的梦想；
用于媒介回放的 video 和 audio 元素

图片验证发送到客户端的只有图片形式的验证码，服务器端保存cookie对应的图形验证码的正确文本。客户端表单提交时到服务器端验证。

HTML5新增的表单元素有：
autocomplete、autofocus、form、formaction、formenctype、formmethod、formnovalidate、formtarget、height、list、max、min、multiple、pattern、placeholder、required、step、width。
自动完成、自动对焦、窗体、窗体、窗体类型、窗体方法、窗体更新日期、窗体目标、高度、列表、最大值、最小值、倍数、图案、占位符、所需值、步长、宽度

在HTML5中，为input元素新增了以下一些type属性值：
color：用于指定颜色的控件。
date：用于输入日期的控件（年，月，日，不包括时间）。
month：用于输入年月的控件，不带时区。
week：用于输入一个由星期-年组成的日期，日期不包括时区
time：用于输入不含时区的时间控件。
datetime：基于UTC时区的日期时间输入控件（时，分，秒及几分之一秒）。
datetime-local：用于输入日期时间控件，不包含时区。
email：用于应该包含 e-mail 地址的输入域。在提交表单时，会自动验证 email 域的值。
number: 用于应该包含数值的输入域。只能输入数字
range：用于应该包含一定范围内数字值的输入域。range 类型显示为滑动条。
search：用于输入搜索字符串的单行文本字段。换行会被从输入的值中自动移除。
tel：用于输入电话号码的控件。在移动端输入会显示数字键盘，PC端无效果
url：用于编辑URL的字段。

实现一个bind：

Function.prototype.bind = function() {
var args = arguments || [];
var context = args[0];
var func = this;
var thisArgs = Array.prototype.slice.call(args, 1);
var returnFunc = function() {
  Array.prototype.push.apply(thisArgs, arguments);
  // 最关键的一步，this是new returnFunc中创建的那个新对象，此时将其传给func函数，其实相当于做了new操作最后一步（执行构造函数）
  return func.apply(this instanceof func ? this : context, thisArgs);
}
returnFunc.prototype = new func()
return returnFunc
}

posted @ 2021-03-08 23:53 梦中少女的心阅读(62) 评论(0) 收藏举报

刷新页面返回顶部

梦中少女的心

2021.3.8今天是3.8妇女节，祝妈妈节日快乐。上传一些笔记，很杂乱。但没办法知识点本来就不扎实。

encodeURIComponent

公告