JS ( encodeURI | decodeURI )
encodeURI('https://jian shu.com') // 'https://jian%20shu.com'
decodeURI('https://jian%20shu.com') // 'https://jian shu.com'
CSS ( :root )
The :root CSS pseudo-class matches the root element of a tree representing the document. In HTML, :root represents the <html> element and is identical to the selector html, except that its specificity is higher.
/* Selects the root element of the document:
<html> in the case of HTML */
:root {
background: yellow;
}
:root can be useful for declaring global CSS variables:
:root {
--main-bg-color: coral;
--main-txt-color: blue;
--main-padding: 15px;
}
#div1 {
background-color: var(--main-bg-color);
color: var(--main-txt-color);
padding: var(--main-padding);
}
#div2 {
background-color: var(--main-bg-color);
color: var(--main-txt-color);
padding: var(--main-padding);
}
参考资料：
https://developer.mozilla.org/en-US/docs/Web/CSS/:root
favicon ( html 结构中找不到时 )
参考资料：
https://support.mozilla.org/en-US/questions/1114909
Changing the color of an hr element
Supported Browser：IE、Edge、FireFox、Opera、Chrome
hr {
margin: 0 .44rem;
height: 1px;
border: 0;
background-color: #E7E7E7;
}
参考资料：
https://stackoverflow.com/questions/6382023/changing-the-color-of-an-hr-element
样式嵌套 ( postcss + precss)
PreCSS lets you use Sass-like markup and staged CSS features in CSS.
1. 安装 precss
npm install precss --save-dev
2. 配置 webpack
{
loader: require.resolve('postcss-loader'),
options: {
plugins: () => [
require('precss'),
],
},
},
3. 使用
:local(.search-history) {
width: 100%;
height: 3.2rem;
padding: 0 .4rem;
/* 配置后支持样式嵌套 */
& > p {
height: .6rem;
background-color: crimson;
}
}
参考资料：
https://www.npmjs.com/package/precss
new命令本身就可以执行构造函数，所以后面的构造函数括号可带可不带
下面两行代码是等价的，但是为了表示这里是函数调用，推荐使用括号。
// 推荐的写法
var v = new Vehicle();
// 不推荐的写法
var v = new Vehicle;
参考资料：
http://javascript.ruanyifeng.com/oop/basic.html
Comma operator ( , )
执行顺序 Left To Right
let ww = 2;
let a = (ww= 4, ww + 2); // 先执行 ww = 4, 后执行 ww + 2 并赋值给 a
a // 6
ww // 4
The comma operator (,) is used to separate two or more expressions that are included where only one expression is expected. When the set of expressions has to be evaluated for a value, only the right-most expression is considered.
For example, the following code:
a = (b=3, b+2);
would first assign the value 3 to b, and then assign b+2 to variable a. So, at the end, variable a would contain the value 5 while variable b would contain value 3.
http://www.cplusplus.com/doc/tutorial/operators/
media-query
结论：未匹配时，html 标签默认的 font-size 为 20px？
@media screen and (max-width: 320px) {
html {
font-size:17.06667px;
}
}
@media screen and (min-width: 540px) {
html {
font-size:28.8px;
}
}
screen < 320px ⇒ font-size: 17.0667px;
320px < screen < 540px ⇒ font-size: ( 63 / 3.15 = 20px );
screen > 540px ⇒ font-size: 28.8px;
media-query-min-width-max-width.gif
@media screen and (min-width: 320px) {
html {
font-size:17.06667px;
}
}
@media screen and (min-width: 540px) {
html {
font-size:28.8px;
}
}
screen < 320px ⇒ font-size: ( 63 / 3.15 = 20px );
320px < screen < 540px ⇒ font-size: 17.0667px;
screen > 540px ⇒ font-size: 28.8px;
media-query-min-width-max-width02.gif
https://codesandbox.io/s/1o1xmyro37
Object.prototype.toString
let o = new Object();
o.toString() // "[object Object]"
Object.prototype.toString.call(null) // "[object Null]" IE9+
Object.prototype.toString.call(undefined) // "[object Undefined]" IE9+
如何才能看懂别人写的代码
-
先看设计模式方面的书,不看这个,的确很多人写的代码你不会明白是什么意思.因为抽象程度不一样。
-
如果对方是高手,那么看人工智能方面的书,不然很多代码也会看不明白,因为你不明白人家的解题思路。
-
不要追求细节,明白类 \ 方法的大体意思就行了,因为人家的代码毕竟已经运行正常,如不需要修改,只需明白其功能则可,到修改时再具体研究.另外,最好附加功能模块,而不是直接修改人家的代码,除非你希望你离开以后还有人可以很方便的接手你的工作。
-
最后一招,就是多看代码,这是最有效的方法,代码读得越多,分析能力越强。
-- CSDN ( lnwuyaowei )
https://bbs.csdn.net/topics/200053534
How to quickly and effectively read other people’s code
https://selftaughtcoders.com/how-to-quickly-and-effectively-read-other-peoples-code/
Symbol.toStringTag
class Student {
get [Symbol.toStringTag]() {
return 'Student'
}
}
/*
* [object Student]
* https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Symbol/toStringTag
*/
console.log(Object.prototype.toString.apply(new Student()))
NWSs
NWS 是基于腾讯内部框架纯自研的一套 web server，应用于自研业务与云上业务
全部文件缓存默认时间 30 天是可以修改的配置：）
Tengine
Tengine是由淘宝网发起的Web服务器项目。
AND Operator &&
typeof abc === 'object' && tool ? 1 : 0 // 0 ( tool 虽然未定义，但不会报错 )
tool ? 1 : 0 // tool is not defined
img1
img2
20190109155801.gif
时间操作
new Date('2018-01-01 00:00:00').getTime() // 1514736000000
Date.now() // 1539766599728
+new Date // 1540671388246
Moment.js
Parse, validate, manipulate, and display dates and times in JavaScript.
moment(Date.now()).format('YYYY-MM-DD HH:mm:ss') // "2018-10-17 17:12:39"
moment('2018-12-13T19:51:44.074341').format('YYYY-MM-DD HH:mm:ss') // 2018-12-13 19:51:44
moment('2018-12-13T19:51:44.074341').format('YYYY-MM-DD hh:mm:ss') // "2018-12-13 07:51:44"
moment('2018-12-13T19:51:44.074341').format('YYYY年MM月DD日 HH:mm:ss') // "2018年12月13日 19:51:44"
moment(new Date()).format("YYYY年MM月DD日HH:mm:ss") // "2019年01月09日16:10:39"
utc to local time
import moment from "moment";
const date = "2019-04-12 11:06:01";
const localTime = moment.utc(date ).local().format("HH:mm");
console.log(localTime); // 19:06
https://momentjs.com/
https://stackoverflow.com/questions/32540667/moment-js-utc-to-local-time
Regular Expressions
- /g enables "global" matching. When using the replace() method, specify this modifier to replace all matches, rather than only the first one.
'a b c d e a b c d e'.match(/a/) // ["a", index: 0, input: "a b c d e a b c d e", groups: undefined]
'a b c d e a b c d e'.match(/a/g) // (2) ["a", "a"]
- /i makes the regex match case insensitive.
'A b c d e a b c d e'.match(/a/)
["a", index: 0, input: "a b c d e A b c d e", groups: undefined]
'A b c d e a b c d e'.match(/a/i)
["A", index: 0, input: "A b c d e a b c d e", groups: undefined]
- plus ( + )
var regExpPattern = /(\w+)/; // ' + ' Matches 1 or more of the preceding token.
var str = 'abcdedf';
console.log(str.match(regExpPattern));
https://regexr.com/
https://www.regular-expressions.info/javascript.html
String.prototype.replace()
image.png
image.png
'ab-cef'.replace(/(\w)/, function (_, __, ___) {console.log(_, __, ___);}) // a a 0 换行 undefinedb-cef
Get Pseudo-Element Properties with JavaScript ( 通过 JS 获取伪元素的属性 )
// 获取 .ele:before 的颜色
var color = window.getComputedStyle(
document.querySelector('.ele'), ':before'
).getPropertyValue('color');
// 获取 .ele:before 的 content
var content = window.getComputedStyle(
document.querySelector('.ele'), ':before'
).getPropertyValue('content');
https://davidwalsh.name/ways-css-javascript-interact
user agent stylesheet
user_agent_stylesheet.png
https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css
https://meiert.com/en/blog/user-agent-style-sheets/
JSON.stringify
JSON.stringify(new Date()) // "2018-10-19T19:57:23.054Z"
Object.create
let newObj = Object.create(null)
Object.setPrototypeOf(newObj, Object.prototype) // set new object's prototype to the "generic" object (NOT standard-object)
let newObj2 = Object.create({})
let obj = Object.create({a: 1}, {
foo: {
writable: true,
configurable: true,
value: 'hello'
},
bar: {
configurable: false,
get: function() { return 10; },
set: function(value) {
console.log('Setting `o.bar` to', value);
}
}
})
// IE8
Object.create // undefined
// IE9
Object.create // function create ...
newObj
typeof Object.create
obj
window.self / self / window / window.window / self.self / self.window ( IE7+ )
var w1 = window;
var w2 = self;
var w3 = window.window;
var w4 = window.self;
// ( w1, w2, w3, w4 all strictly equal ), but only w2 will function in workers
self === self.self // true
// difference
chrome
self.window === window // true
// IE8- ( include IE8 )
self.window === window // false
// IE8
self.self === self // true
typeof self // "object"
https://developer.mozilla.org/en-US/docs/Web/API/Window/self
Object.keys
In ES5, if the argument to this method is not an object (a primitive), then it will cause a TypeError. In ES2015, a non-object argument will be coerced to an object.
IE8
Object.keys // undefined
IE9
Object.keys('foo') // Object.keys: argument is not an Object
Chrome
Object.keys('foo') // (3) ["0", "1", "2"]
Object.keys({name: 'jack', age: 20}) // ['name', 'age']
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object/keys
Array.isArray
IE8
Array.isArray // undefined
IE9
Array.isArray // function isArray ...
Math.random
Math.random() // [0, 1) 大于等于 0 小于 1 的随机数
Math.random() * (max - min) + min
// 0 3 1 1 -> 0 * 2 + 1 -> 1
Math.random() * (max - min) + min
// 0.1482673154862 3 1 1 -> 0.2965346309724 + 1 -> 1.2965346309724
Math.random() * (max - min) + min
Math.floor
The Math.floor() function returns the largest integer less than or equal to a given number. ( Math.floor（）函数返回小于或等于给定数字的最大整数。 )
// 0.98 3 1 1 -> 1.96 + 1 -> Math.floor(2.96) -> 2
Math.random() * (max - min) + min
// 0.2 3 1 1 -> 0.4 + 1 -> Math.floor(1.4) -> 1
Math.random() * (max - min) + min
Bitwise operation ( 位运算 )
and operation ( & )
and 运算通常用于二进制的取位操作，例如， 一个数 and 1 的结果就是取二进制的最末位。这可以用来判断一个整数的奇偶，二进制的最末位为0表示该数为偶数，最末位为1表示该数为奇数。
运算方法：
相同位的两个数字都为1，则为1；若有一个不为1，则为0。
4 & 1 // 0 ( even )
1 0 0 ( 4 )
0 0 1 ( 1 )
-------
0 0 0 ( 0 )
5 & 1 // 1 ( odd )
1 0 1 ( 5 )
0 0 1 ( 1 )
-------
0 0 1 ( 1 )
13 & 4 // 4
1 1 0 1 ( 13 )
0 1 0 0 ( 4 )
----------
0 1 0 0 ( 4 )
or operation ( | )
or 运算通常用于二进制特定位上的无条件赋值，例如 一个数 or 1 的结果就是把二进制最末位强行变成1。如果需要把二进制最末位变成 0，对这个数or 1之后再减一就可以了，其实际意义就是把这个数强行变成最接近的偶数。
运算方法：
相同位只要一个为 1 即为 1 。
10 | 1 // 11
1 0 1 0 // ( 10 )
0 0 0 1 // ( 1 )
----------
1 0 1 1 // ( 11 )
(14.3 | 1) - 1 // 14
(-7.234 | 1) - 1 // -8
XOR operation ( ^ )
如果某位不同则该位为 1, 否则该位为 0
4 ^ 1 // 5
1 0 0 ( 4 )
0 0 1 ( 1 )
-------
1 0 1 ( 5 )
4.1 ^ 3 // 7
xor 运算的逆运算是它本身，也就是说两次异或同一个数最后结果不变。
(4 ^ 1) ^ 1 // 4
step 1
1 0 0 // ( 4 )
0 0 1 // ( 1 )
-------
1 0 1 // ( 5 )
step 2
1 0 1 ( 5 )
0 0 1 ( 1 )
-------
1 0 0 ( 4 )
520 ^ 7890 // 7386
7386 ^ 7890 // 520
not operation ( ~ )
~-200 // 199
~-3 // 2
~3 // -4
~20 // -21
Left shift ( << )
5 << 2 // 20
1 0 1 ( 5 )
-------
1 0 1 0 0 ( 20 )
// ??? 负数搞不清楚
-3 << 1 // -6
1 1 ( 3 )
----
1 1 0 ( 6 )
-3 << 2 // -12
1 1 ( 3 )
----
1 1 0 0 ( 12 )
Right shift ( >> )
5 >> 2 // 1
1 0 1 ( 5 )
-------
0 0 1 ( 1 )
// ??? 负数搞不清楚
-3 >> 1 // -2
-3 >> 2 // -1
-3 >> 3 // -1
-8 >> 1 // -4
https://baike.baidu.com/item/%E4%BD%8D%E8%BF%90%E7%AE%97/6888804?fr=aladdin
http://www.cnblogs.com/zichi/p/4787145.html
https://www.khanacademy.org/computing/computer-science/cryptography/ciphers/e/bitwise-operators
this
构造器调用
但用 new 调用构造器时，还要注意一个问题，如果构造器显式地返回了一个 object 类型的对
象，那么此次运算结果最终会返回这个对象，而不是我们之前期待的 this：
var myClass = function () {
this.name = 'sven'
return { // object
name: 'anne'
}
}
var obj = new myClass()
obj.name // 'anne'
var myClass = function () {
this.name = 'jane'
return 'rose' // string
}
var obj = new myClass()
obj.name // 'jane'
var func = function( a, b, c ){
alert ( this === window ); // true
}
func(null, 1, 2, 3)
var func = function( a, b, c ){
'use strict'
alert ( this === null ) // true
}
func.apply( null, [ 1, 2, 3 ] )
for
let arr = ['a', 'b', 'c']
for (let i = 0, ele; ele = arr[i++];) { // 执行到 ele = arr[3] -> undefined
console.log(ele) // 'a' 'b' 'c'
}
for (let i = 0; undefined; i++) {
console.log(i) // 不会执行
}
for (let i = 0, res; res = false; i++) {
console.log(i) // 不会执行
}
for (let i = 0; i < 100; i += 22) { // statement1 ; statement2 ; statement3
console.log(i) // 0 22 44 66 88
}
JavaScript Statements
JavaScript statements are composed of:
Values, Operators, Expressions, Keywords, and Comments.
( JS 语句由 值、操作符、表达式、关键字、注释组成 )
let a = 3 // undefined
let c
c = 3 // 3
Circular Reference ( 循环引用 )
image.png
原型链
[].__proto__ === Array.prototype // true
Array.__proto__ === Function.prototype // true
Array.prototype.__proto__ === Object.prototype // true
(function () {}).__proto__ === Function.prototype // true
Function.__proto__ === Function.prototype // true
Function.prototype.__proto__ === Object.prototype // true
Array.prototype.push.__proto__ === Function.prototype // true
Element.getBoundingClientRect()
The Element.getBoundingClientRect() method returns the size of an element and its position relative to the viewport.
const app = document.getElementById('app')
console.log(app.getBoundingClientRect())
console.log(app.getBoundingClientRect()['bottom'])
https://codesandbox.io/s/olpnpwyvy5
https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect
设计模式
DOM 操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="container"></div>
<script>
console.time('t1')
let container = document.querySelector('#container')
let content = ''
for (let i = 0; i < 1000; i++) {
content += '<span>' + i + '</span>'
}
container.innerHTML = content
console.timeEnd('t1') // t1: 3.70703125ms
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="container"></div>
<script>
console.time('t1')
for (let i = 0; i < 1000; i++) {
document.querySelector('#container').innerHTML += '<span>' + i + '</span>'
}
console.timeEnd('t1') // t1: 1224.35986328125ms
</script>
</body>
</html>
撤销和重做
image.png
队列、堆、栈
队列是先进先出，有出口和入口，先进去可以先出来。
栈就像一个箱子，后放上去的，可以先出来
堆是在程序运行时，而不是在程序编译时，申请某个大小的内存空间。即动态分配内存，对其访问和对一般内存的访问没有区别。{ 堆是指程序运行时申请的动态内存，而栈只是指一种使用堆的方法（ 即先进后出 ）}。
栈是先进后出的，但是于堆而言却没有这个特性，两者都是存放临时数据的地方。 对于堆，我们可以随心所欲的进行增加变量和删除变量，不要遵循什么次序，只要你喜欢。
堆（ Heap ) 是应用程序在运行的时候请求操作系统分配给自己内存。
作者：萌萌白白
来源：CSDN
原文：https://blog.csdn.net/qq_42092177/article/details/80459227
版权声明：本文为博主原创文章，转载请附上博文链接！
https://stackoverflow.com/questions/1590247/how-do-you-implement-a-stack-and-a-queue-in-javascript
http://codetunnel.com/9-javascript-tips-you-may-not-know/
区分函数声明和表达式
区分函数声明和表达式最简单的方法是看 function 关键字出现在声明中的位置（不仅仅是一行代码，而是整个声明中的位置）。如果 function 是声明中的第一个词，那么就是一个函数声明，否则就是一个函数表达式。
(function... // 函数表达式
function // 函数声明
《你不知道的JavaScript（上）》P.27
undefined
// IE9-
undefined = true
undefined // true
var f
f === undefined // false
// example
undefined = true
(function () {
var a
if (a !== undefined) {
console.log('good') // 'good'
}
})()
undefined = true;
(function (undefined) {
var a
if (a === undefined) {
console.log('good') // 'good'
}
})()
IIFE ( Immediately Invoked Function Expression ) 立即执行函数表达式
var a = 2;
(function IIFE( global ) {
var a = 3;
console.log( a ); // 3
console.log( global.a ); // 2
})( window );
console.log( a ); // 2
IIFE 还有一种变化的用途是倒置代码的运行顺序，将需要运行的函数放在第二位，在 IIFE执行之后当作参数传递进去。这种模式在 UMD（Universal Module Definition）项目中被广泛使用。尽管这种模式略显冗长，但有些人认为它更易理解。
// UMD ( Universal Module Definition )
var a = 2;
(function IIFE( def ) {
def( window );
})(function def( global ) {
var a = 3;
console.log( a ); // 3
console.log( global.a ); // 2
});
《你不知道的JavaScript》P.30
块作用域
垃圾收集
function process(data) {
// 在这里做点有趣的事情
}
var someReallyBigData = {};
process( someReallyBigData );
var btn = document.getElementById( "my_button" );
btn.addEventListener( "click", function click(evt) {
console.log("button clicked");
console.log(someReallyBigData); // {}
}, /*capturingPhase=*/false );
function process(data) {
// 在这里做点有趣的事情
}
// 在这个块中定义的内容可以销毁了！
{
let someReallyBigData = {};
process( someReallyBigData );
}
var btn = document.getElementById( "my_button" );
btn.addEventListener( "click", function click(evt){
console.log("button clicked");
console.log(someReallyBigData); // 002.html:25 Uncaught ReferenceError: someReallyBigData is not defined
}, /*capturingPhase=*/false );
事件驱动
Tetris
built-in iterables
String, Array, TypedArray, Map and Set are all built-in iterables, because each of their prototype objects implements an @@iterator method.
[[Scopes]]
image.png
[[Scopes]] is a private property that Chrome developer tools add and use internally, in C++, here in the source. It displays the variables that are in the scope of a function, i.e. which variables can be accessed from that function.
function fn() {}
console.dir(fn)
image.png
Codepen: https://codepen.io/MonguDykrai/pen/RqdGeQ
https://stackoverflow.com/questions/45506745/what-is-scopes-in-dispatch-of-redux
how-to-disable-resizable-property-of-textarea
https://stackoverflow.com/questions/5235142/how-to-disable-resizable-property-of-textarea
宏任务、微任务
https://blog.csdn.net/qq_31001889/article/details/80358908
favicon
<link rel="icon" type="image/x-icon" href="http://example.com/favicon.ico" />
http://iconhandbook.co.uk/reference/examples/favicons/
alert
20190109153702.gif
网友评论