1,ios数据无法正常显示，请求接口一直显示need login,

• 登录逻辑： 1，微信授权 2,去请求get的login判断为true,时 3，获取header里的session存储起来，之后每次请求都得带上 4，去请求post的login接口
  所以先从判断授权开始，但是在真机上测试时，一开始并不弹出授权弹窗
• 参考提升用户体验，微信小程序“授权失败”场景的优雅处理
  所以尝试不在登录之前判断微信授权，果然可以请求到数据；而在需要的时候去判断是否授权，具体参考上述文档

但是最后在onShow的时候也遇到一些问题
tabBar页面A navigatorTo 到页面B，然后B switchTab 到A，这里A会执行onShow()；
但是我再从A跳到B再switchTab回来，A就不会再执行onShow()了，
去开发者社区询问，得知此问题在下个版本会修复

用Object.defineProperty()简单实现vue中的数据绑定$watch

function Observer(data) {
    this.data = {};
    for (const key of Object.keys(data)) {
        Object.defineProperty(this.data, key, {
            enumerable: true,
            configurable: true,
            get: function () {
                console.log('你访问了' + key);
                return data[key];
            },
            set: function (newVal) {
                console.log('你设置了' + key);
                console.log('新的' + key + '=' + newVal);
                if (newVal === data[key]) {
                    return;
                }
                data[key] = newVal;
            }
        })
    }
}
Observer.prototype.$watch = function (key, cd) {
    let value = this[key];
    Object.defineProperty(this, key, {
        enumerable: true,
        configurable: true,
        get: function () {
            console.log(`你访问了 ${key}`);
            return value;
        },
        set: function (newValue) {
            cd(newValue);
            value = newValue;
            return newValue;
        },
    })
}

const app1 = new Observer({
    name: 'wangyaxing',
    age: '24',
    a: {
        b: 1,
        c: 2,
    },
});
const app2 = new Observer({
    city: 'beijing'
});
app1.$watch('age', function(newValue) {
    console.log(`我年纪变了，我现在 ${newValue}岁了`);
});

app1.age = 100;
app1.age;
app1.age = 120;
app1.a.b;
app1.a.c = 10;
app1.a = {
    e: 100,
}

了解Web及网络基础

网络基础 TCP/IP

TCP/IP的分层管理

TCP/IP协议族按层次分别为以下4层: 应用层, 传输层和数据链路层

应用层

决定了向用户提供应用服务时通信的活动;
TCP/IP协议族内预存了各类通用的应用服务.比如, FTP(File Transfer Protocol, 文件传输协议)和DNS(Domain Name System, 域名系统)服务就其中两类.
hTTP协议也处于该层;

传输层

传输层对上层应用层,提供处于网络连接中的两台计算机之间的数据传输;
在传输层中有两个性质不同的协议: TCP(Transmission Control Protocal, 传输控制协议)和UDP(User Data Protocal, 用户数据报协议);

网络层(又名网络互连层)

网络层用来处理网络上流动的数据包.数据包是网络传输的最小数据单位.该层规定了通过怎样的路径(所谓的传输路线)到达对方计算机,并把数据包传送给对方;
与对象计算机之间通过多台计算机或网络设备进行传输,网络层所起的作用就是在众多的选项中选择一条传输路线;

链路层(又名数据链路层,网络接口层)

用来处理连接网络的硬件部分.包括控制操作系统,硬件的设备驱动,NIC(Network Interface Card, 网络适配器,即网卡),及光纤等物理可见部分(还包括连接器等一切传输媒介).硬件上的范畴均在链路层的作用范围之内;

TCP/IP的通信传输流

与HTTP关系密切的协议: IP, TCP和DNS

IP协议位于网络层, 作用是把各种数据包传送给对方

TCP位于传输层,提供可靠的字节流服务; TCP协议为了更容易传送打数据才把数据分割,而且TCP协议能够确认数据最终是否送达到对方;
为了准确无误地将数据送达到目标处,TCP协议采用了三次握手策略;用TCP协议把数据包送出去后,TCP不会对传送后的情况置之不理,它一定会向对方确认是否成功送达.握手过程中使用TCP的标志: SYN和ACK;
发送端首先发送一个带SYN标志的数据包给对方.接受端收到后,回传一个带有SYN/ACK标志的数据包以示传达确认信息.最后,发送端再回传一个带ACK标志的数据包,代表'握手'结束;

DNS(Domain Name System)服务是和HTTP协议一样位于应用层的协议.它提供了域名到IP地址之间的解析服务;
DNS协议提供通过域名查找IP地址,或逆向从IP地址反查域名的服务;

URI和URL

简单的HTTP协议

请求报文和响应报文

持久链接节省通信流量

使用浏览器浏览一根 包含多张图片的HTML页面时,在发送请求访问HTML页面资源的同时,也会请求HTML页面里包含的其他资源,因此,每次的请求都会造成武威的TCP连接的建立和端来,增加通信量的开销;
持久连接的特点是: 只要任意一端没有明确提出断开连接,则保持TCP连接状态;
持久连接的好处在于减少了TCP连接的重复建立和断开所造成的额外开销,减轻了服务器端的负载.另外,减少开销的那部分时间,使HTTP请求和响应能够更早地技术,这样Web页面的显示速度也就响应提高了.

使用Cookie的状态管理

http协议是无状态的,增加了cookie来保存一些数据;
Cookie会根据从服务器端发送的响应报文内的一个叫做Set-Cookie的首部字段信息,通知客户端保存Cookie.在下次客户端再往改服务器发送请求时,客户端会自动在请求报文中加入Cookie值后发送出去;
服务器端发现客户端发送过来的Cookie后,会去检查究竟从哪一个客户端发来的连接请求,然后对比服务器上的记录,最后得到之前的状态信息;

返回结果的HTTP状态码

HTTP首部字段

响应首部字段

WWW-Authenticate
WWW-Authenticate: Basic realm="Usagidesign Auth"
用于HTTP访问认证.它会告诉客户端适用于访问请求URI所指定资源的认证方案(Basic或是Digest)和带参数提示的质询(challenge).状态码401 Unauthorized响应中,肯定带有首部字段WWW-Authenticate;
realm字段的字符串是为了辨别请求URI指定资源所受到的保护策略

确保Web安全的HTTPS

确认访问用户身份的认证

Web的攻击技术

因回话管理疏忽引发的安全漏洞

1.回话劫持
回话劫持(Session Hijack)是指攻击者通过某种手段拿到了用户的回话ID,并利用此回话ID伪装成用户,达到攻击的目的.
下面列举几种攻击者可获得回话ID的途径

• 通过非正规的生成方法推测回话ID
• 通过窃听或XSS攻击盗取回话ID
• 通过回话固定攻击(Session Fixation)强行获取回话ID
  2.回话固定攻击
  3.跨站点请求伪造
  跨站点请求伪造(Cross-Site Request Forgeries, CSRF)攻击是指攻击者通过设置好的陷阱,强制对已完成认证的用户进行非预期的个人信息或设定信息等某些状态更新,属于被动攻击;
  可能造成以下影响
• 利用已通过认证的用户权限更新设定信息等
• 利用已通过认证的用户权限购买商品
• 利用已通过认证的用户权限在留言板上发表言论

其他安全漏洞

1.密码破解攻击(Password Cracking)即算出密码,突破认证
有以下两种手段

• 通过网络的密码试错
• 对已加密密码的破解(指攻击者入侵系统,已获得加密或散列处理的密码数据的情况)
  除去突破认证的攻击手段,还有SQL注入攻击逃避认证,跨站脚本攻击窃取密码信息等方法
  2.点击劫持
  利用透明的按钮或链接做成陷阱,覆盖在Web页面之上,然后诱使用户在不知情的情况下,点击那个链接访问内容的一种攻击手段.这种行为又称为界面伪装;
  3.Dos攻击
  一种让运行中的服务呈停止状态的攻击.有时也叫服务器停止攻击或拒接服务攻击.Dos攻击的对象不仅限于Web网站,还包括网络设备及服务器等.
  主要有一下两种Dos攻击方式
• 集中利用访问请求造成资源过载,资源用尽的同事,实际上服务也呈停止状态
• 通过攻击安全漏洞使服务停止
  4.后门程序
  后门程序(Backdoor)是指开发设置的隐藏入口,可不按正常步骤使用受限功能.利用后门程序就能够使用原本受限制的功能
  主要分为以下3种类型
• 开发阶段作为Debug调用的后门程序
• 开发者为了自身利益植入的后门程序
• 攻击者通过某种方法设置的后门程序

js中的数字范围

Number.MAX_SAFE_INTEGER Number.MIN_SAFE_INTEGER
Number.MAX_VALUE Number.MIN_VALUE
最大的整数 2^53-1

整数检测

Number.isInteger()
检测是否是安全的整数
Number.isSafeInteger()

32位有符号整数

虽然最大整数能达到53位，但是有的运算(数位操作)只适用于32位有符号整数,Math.pow(-2,31)~Math.pow(2, 31);

a | 0,可以将变量a转换为有效整数；

一些特殊值NaN和Infinity并不是32位安全范围的

// 特殊值之NaN 是js中唯一一个不等于自身的值
// NaN !== NaN  true 他与任何一个值都不相等
// isNaN() 检测一个参数是否不是NaN,也不是一个数
window.isNaN('foo') // true 'foo'既不是NaN,也不是数字
window.isNaN(2/'foo') // true
ES6 Number.isNaN('foo') //false

// 特殊值之Infinity 无穷数
1/0 Infinity
-1/0 -Infinity
Infinity/Infinity  NaN

 特殊值之 -0
-0除了可用作常量外，也可以是某些数学运算的返回值
var a = 0 / -3 // -0
var b = 0 * -3 // -0

JSON.stringify(-0) // "0"
JSON.parse('-0') //-0
-0 == 0 // true
-0 === 0 // true
区分 -0 和 0
function isNegZero(n) {
    n = Number(n);
    return (n === 0) && (1 / n === Infinity);
}


// Object.is()判断两个值是否绝对相等
 var a = 2 / 'foo';
 var b = -3 * 0;
 Object.is(a, NaN); // true
 Object.is(b, -0); // true
 Object.is(b, 0); // false
 if(! Object.is) {
     Object.is = function(v1, v2) {
        //  判断是否是-0
        if(v1 === 0 && v2 === 0) {
            return 1 / v1 === 1 / v2;
        }
        // 判断是否是NaN
        if(v1 !== v1) {
            return v2 !== v2;
        }
        // 其他情况
        return v1 === v2;
     }
 }

1, 什么是错误优先的回调函数？

• 错误优先的回调函数用于传递错误和数据。第一个参数始终应该是一个错误对象， 用于检查程序是否发生了错误。其余的参数用于传递数据。

fs.readFile(filePath, function(err, data) {  
	if (err) {
		//handle the error
	}
	// use the data
}

2，如何避免回调地狱

你可以有如下几个方法

• 模块化：将回调函数分割为独立的函数
• 使用Promises
• 使用yield来计算生成器或Promise

3，如何用Node监听80端口

在类Unix系统中你不应该尝试去监听80端口，因为这需要超级用户权限。 因此不推荐让你的应用直接监听这个端口。
如果你一定要让你的应用监听80端口的话，你可以有通过在Node应用的前方再增加一层反向代理 （例如nginx）来实现，如下图所示。否则，建议你直接监听大于1024的端口。
方向代理指的是以代理服务器来接收Internet上的连接请求，然后将请求转发给内部网络上的服务器， 并且将服务器返回的结果发送给客户端。

4，什么是事件循环

Node采用的是单线程的处理机制（所有的I/O请求都采用非阻塞的工作方式。而在底层，Node.js借助libuv来作为抽象封装层， 从而屏蔽不同操作系统的差异，Node可以借助livuv来来实现多线程。
Libuv库负责Node API的执行。它将不同的任务分配给不同的线程，形成一个事件循环， 以异步的方式将任务的执行结果返回给V8引擎。

代码整洁之道

感触比较深的几点
1.要敢于修改代码，好的代码是要不断修改的，害怕修改之后带来bug，只会让代码更加难以维护
2.有单元测试和集成测试很重要，这样在重构代码的时候，才能降低对其他模块的影响
3.要不断学习，没人敢找很久不看病的医生，不写代码的架构师不是一个好的架构师
4.每天花几分钟强迫自己，比如：盲打， 一些快捷键，看英文文档

5. TDD(测试驱动开发）的重要性， 代码需要修改的时候可以大胆的修改， 因为修改完成之后可以执行所有的单元测试来判断修改之后有没有产生新的bug
   6.心情不好的时候， 精神状态不好的时候不要写代码，经验会告诉你，这个时候写的代码通常都是需要重新写的
   7.关于会议， 不要参加跟自己当前无关的会议， 除非这个会会给你现在的工作带来实质性的影响；如果一个会议开发一半，发现背离了开会的目的，或者因为某个争论而打乱了会议的节奏，找理由赶紧离开。

前言

1. 如果你有单独的后端开发服务器 API，并且希望在同域名下发送 API 请求 ，那么代理某些 URL 会很有用。
2. 解决开发环境的跨域问题(不用在去配置nginx和host, 爽歪歪~~)

在webpack.config.js中配置

下面简单介绍一下五个经常使用的场景

使用一:

mmodule.exports = {
    //...
    devServer: {
        proxy: {
            '/api': 'http://localhost:3000'
        }
    }
};

请求到 /api/xxx 现在会被代理到请求 http://localhost:3000/api/xxx, 例如 /api/user 现在会被代理到请求 http://localhost:3000/api/user

使用二

如果你想要代码多个路径代理到同一个target下, 你可以使用由一个或多个「具有 context 属性的对象」构成的数组：

module.exports = {
    //...
    devServer: {
        proxy: [{
            context: ['/auth', '/api'],
            target: 'http://localhost:3000',
        }]
    }
};

使用三:

如果你不想始终传递 /api ，则需要重写路径：

module.exports = {
    //...
    devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:3000',
                pathRewrite: {'^/api' : ''}
            }
        }
    }
};

请求到 /api/xxx 现在会被代理到请求 http://localhost:3000/xxx, 例如 /api/user 现在会被代理到请求 http://localhost:3000/user

使用四:

默认情况下，不接受运行在 HTTPS 上，且使用了无效证书的后端服务器。如果你想要接受，只要设置 secure: false 就行。修改配置如下：

module.exports = {
    //...
    devServer: {
        proxy: {
            '/api': {
                target: 'https://other-server.example.com',
                secure: false
            }
        }
    }
};

使用五:

有时你不想代理所有的请求。可以基于一个函数的返回值绕过代理。
在函数中你可以访问请求体、响应体和代理选项。必须返回 false 或路径，来跳过代理请求。

例如：对于浏览器请求，你想要提供一个 HTML 页面，但是对于 API 请求则保持代理。你可以这样做：

module.exports = {
  //...
    devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:3000',
                bypass: function(req, res, proxyOptions) {
                    if (req.headers.accept.indexOf('html') !== -1) {
                        console.log('Skipping proxy for browser request.');
                        return '/index.html';
                    }
                }
            }
        }
    }   
};

解决跨域原理

上面的参数列表中有一个changeOrigin参数, 是一个布尔值, 设置为true, 本地就会虚拟一个服务器接收你的请求并代你发送该请求,

module.exports = {
    //...
    devServer: {
        proxy: {
            '/api': {
                target: 'http://localhost:3000',
                changeOrigin: true,
            }
        }
    }
};

vue-cli中proxyTable配置接口地址代理示例

修改 config/index.js

module.exports = {
    dev: {
    // 静态资源文件夹
    assetsSubDirectory: 'static',
    // 发布路径
    assetsPublicPath: '/',

    // 代理配置表，在这里可以配置特定的请求代理到对应的API接口
    // 使用方法：https://vuejs-templates.github.io/webpack/proxy.html
    proxyTable: {
        // 例如将'localhost:8080/api/xxx'代理到'https://wangyaxing.cn/api/xxx'
        '/api': {
            target: 'https://wangyaxing.cn', // 接口的域名
            secure: false,  // 如果是https接口，需要配置这个参数
            changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
        },
        // 例如将'localhost:8080/img/xxx'代理到'https://cdn.wangyaxing.cn/xxx'
        '/img': {
            target: 'https://cdn.wangyaxing.cn', // 接口的域名
            secure: false,  // 如果是https接口，需要配置这个参数
            changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
            pathRewrite: {'^/img': ''}  // pathRewrite 来重写地址，将前缀 '/api' 转为 '/'。
        }
    },
    // Various Dev Server settings
    host: 'localhost', // can be overwritten by process.env.HOST
    port: 4200, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
}

更多参数

dev-server 使用了非常强大的 http-proxy-middleware , http-proxy-middleware 基于 http-proxy 实现的，可以查看 http-proxy 的源码和文档:https://github.com/nodejitsu/node-http-proxy 。

target：要使用url模块解析的url字符串
forward：要使用url模块解析的url字符串
agent：要传递给http（s）.request的对象（请参阅Node的https代理和http代理对象）
ssl：要传递给https.createServer（）的对象
ws：true / false，是否代理websockets
xfwd：true / false，添加x-forward标头
secure：true / false，是否验证SSL Certs
toProxy：true / false，传递绝对URL作为路径（对代理代理很有用）
prependPath：true / false，默认值：true - 指定是否要将目标的路径添加到代理路径
ignorePath：true / false，默认值：false - 指定是否要忽略传入请求的代理路径（注意：如果需要，您必须附加/手动）。
localAddress：要为传出连接绑定的本地接口字符串
changeOrigin：true / false，默认值：false - 将主机标头的原点更改为目标URL

参考

• 官方文档
• http-proxy-middleware
• node-http-proxy
• API Proxying During Development

类型

使用复合条件检测null的类型

var a = null;
console.log(!a && typeof a === 'object');

函数是'可调用的对象', 是object的一个'子类型', 它有一个内部属性[[Call]], 该属性使其可以被调用
�函数对象的length属性是其声明的参数个数

function a(b, c) {

}
console.log(a.length); // 2

变量是没有类型的,只有值才有;typeof 得到的结果时该变量持有值得类型,因为JavaScript中变量没有类型

typeof 运算符总是会返回一个字符串

console.log( typeof typeof 42); // 'string'

undefined(已在作用域中声明但是还没赋值的变量): 变量在未持有值得时候
undeclared(还没有在作用域中声明过的变量):

var a;
console.log(a); // undefined
console.log(b); // ReferenceError: b is not defined
typeof a; // undefined
typeof b; // undefined  b是一个undeclared变量,没有报错,是因为typeof 有一个特殊的安全防范机制

undefined和is not defined 是两码事

使用typeof 的安全防范机制(阻止报错)来检查undeclared变量

// 这样做会抛出错误 ReferenceError: b is not defined
if(b) {

}
// 这样是安全的
if(typeof b !== 'undefined') {
    console.log(11);
}

值

数组

var a = [1, '2', [3]];
console.log(a.length, a); // 3 [ 1, '2', [ 3 ] ]
delete a[0];
console.log(a.length, a); // 3 [ <1 empty item>, '2', [ 3 ] ]

使用delete运算符可以将单元才能够数组中删除,但是删除后,数组的length不会发生变化 ?

'稀疏'数组(含有空白或空缺单元的数组)

var a = [];
a[0] = 1;
a[2] = [3];
console.log(a.length, a[1]); // 3 undefined

a[1]的值是undefined, 这将与将其显式赋值为undefined(a[1] = undefined) 还是有区别的 ?

类数组
有时候需要将类数组(一组通过数字索引的值)转化为真正的数字;
一般通过 数组工具函数(如indexOf(..), concat(..), forEach(..)等)来实现
工具函数slice(..)经常被用于这类转换

function foo() {
    var arr = Array.prototype.slice.call(arguments);
    arr.push('bam');
    console.log(arr); // [ 'bar', 'baz', 'bam' ]
};
foo('bar', 'baz')

es6的内置函数 Array.from(..)也能实现同样的功能

...
var arr = Array.from(arguments);
...

字符串

字符串经常被当做字符数组, 它们都是类数组,都有length属性以及 indexOf(..)和concat(..)方法;

JavaScript中字符串是不可变的,但是数组是可变的;
字符串不可变是指字符串的成员函数不会改变其原始值,而是创建并返回一个新的字符串.而数组的成员函数都是在其原始值上进行操作;

var a = 'foo';
c = a.toUpperCase();
console.log(a === c); // false
console.log(a, c); // foo FOO

许多数组函数用来处理字符串很方便,虽然字符串没有这些函数,但是可以通过'借用'数组的非变更方法来处理字符串

var a = 'foo';
var c = Array.prototype.join.call(a, '-');
console.log(c); // f-o-o
var d = Array.prototype.map.call(a, function(v) {
    return v.toUpperCase() + '.';
}).join('');
console.log(d); // F.O.O.

另一个不通电在于字符串反转,数组有一个字符串没有的可变更成员函数reverse();
我们无法'借用'数组的可变成员函数,因为字符串是不可变的
一个变通(破解)的方法是先将字符串转换为数组,待处理完后再讲结果转换为字符串

var c = a
       // 将a的值转换为字符数组
       .split('')
        // 将数组中的字符进行倒转
       .reverse()
       // 将数组中的字符拼接会字符串
       .join('');

数字

42.toFixed(2); // SyntaxError
下面的语法都有效
(42).toFixed(3);
0.42.toFixed(3);
42..toFixed(3);

42.toFixed(3)是无效语法,因为.被视为常量42.的一部分;42..toFixed(3)则没有问题,因为第一个.被视为number的一部分,第二个.是属性访问运算度;

较小的数值

整数安全范围

Number.MAX_SAFE_INTEGER
Number.MIN_SAFE_INTEGER

有时JavaScript程序需要处理一些比较大的数字,如数据库的64位ID等,由于JavaScript的数字类型无法精确呈现64位数值,所以必须将他们保存转换为字符串

整数检测

Number.isInteger();
Number.isSafeInteger();

特殊数值

null, undefined,
null是一个特殊关键字,不是标识符,我们不能讲其当做变量来使用和赋值.然而undefined却是一个标识符,非严格模式下可以被当做变量来使用和赋值

void运算符
undefined是一个内置标识符,它的值为undefined,通过viod运算符即可得到该值;
表达式viod没有返回值,因此返回结果是undefined,void并不改变表达式的结果,只是让表达式不返回值

var a = 42;
console.log(void a, a); // undefined 42

习惯上用void 0来获得undefined

function doSomething() {
    if(!App.ready) {
        // 不让表达式返回结果
        return void setTimeout(doSomething, 100);
    }
    var result;
    return result;
}
if(doSomething()) {
    // 
}

类似于

if(!App.ready) {
    setTimeout(doSomething, 100);
    return;
}

总之,如果要将代码中的值(如表达式的返回值)设为undefined,就可以使用void

特殊数字

1.不是数字的数字NaN

如果数学运算的操作数不是数字类型,就无法返回一个有效的数字,这种情况下返回值为NaN;
NaN是一个特殊值,它和自身不相等,是唯一一个非自反(自反, 即 x===x不成立)的值, NaN != NaN 为true
isNaN(..)判断一个值是否为NaN
但是有个验证缺陷, 检查方式过于死板,就是'检查参数是否不是NaN, 也不是数字';

var a = 2 / 'foo';
var b = 'foo';
console.log(a);
console.log(window.isNaN(a), window.isNaN(b)); // true true

es6提供了 Number.isNaN();

实际还有一个更简单的方法,即利用NaN不等于自身这个特点.NaN是JavaScript中唯一一个不等于自身的值;

if(!Number.isNaN) {
    Number.isNaN = function (n) {
        return n !== n;
    }
}

2.无穷数

var a = 1/0; // Infinity
var a = -1/0; // -Infinity
Infinity/Infinity; // NaN

javascript的运算结果有可能溢出, 此时的结果为 Infinity或-Infinity

3.零值

4.特殊等式
NaN和-0在相等比较时有些特别, NaN和自身不相等,使用Number.isNaN(..); -0等于0, 使用isNegZero(..)
Object.is(..)来判断两个值是否绝对相等;
能使用 == 或者 === 时就尽量不要使用Object.is(..);因为前者效率更高,更为通用,后者主要用来处理那些特殊的相等比较

值和引用

简单标量基本类型值(字符串和数字)通过值复制来赋值/传递,而复合值(对象等)通过引用复制来赋值/传递;JavaScript中的引用和其他语言中的引用/指针不同,他们不能指向别的变量/引用,只能指向值

function foo(x) {
    x.push(4); // x:[ 1, 2, 3, 4 ]
    x = [4, 5, 6];
    x.push(7);// x:[ 4, 5, 6, 7 ]
    
}
var a = [1, 2, 3];
foo(a); // a:[ 1, 2, 3, 4 ]

function foo(x) {
    x.push(4); // x:[ 1, 2, 3, 4 ]
    x = [4, 5, 6];
    x.length = 0;
    x.push(4, 5, 6, 7); //a:[ 4, 5, 6, 7 ] 
    
}
var a = [1, 2, 3];
foo(a); // a:[ 4, 5, 6, 7 ]

x.length = 0和x.push(4, 5, 6, 7)并没有创建一个新的数组,而是更改了当前的数组,所以a的值变成了[ 4, 5, 6, 7 ]

如果通过值复制的方式来传递复合值

foo(a.slice());

slice(..)不带参数会返回当前数组的一个浅复本,由于传递给函数的是指向该复本的引用, 所以foo(..)中的操作不会影响a指向的数组

原生函数

常用的原生函数

• String()
• Number()
• Boolean()
• Array()
• Object()
• Function()
• RegExp()
• Date()
• Error()
• Symbol()

内部属性[[Class]]

所有typeof返回值为'object'的对象(如数组)都包含一个内部属性[Class].这个属性无法直接访问,一般通过Object.prototype.toString(..)来查看

Object.prototype.toString.call([1, 2, 3]); // "[object Array]"

封装对象包装

var a = 'abc';
var b = new String(a);
var c = Object(a);
console.log(typeof a); // string
console.log(typeof b); // object
console.log(typeof c); // object
console.log(b instanceof String); // true
console.log(c instanceof String); // true
console.log(Object.prototype.toString.call(b)); // [object String]
console.log(Object.prototype.toString.call(c)); // [object String]

拆封

如果想要得到封装对象中的基本类型值,可以使用valueOf()函数

var a = new String('abc');
var b = new Number(42);
var c = new Boolean(true);

console.log(a.valueOf()); // abc
console.log(b.valueOf()); // 42
console.log(c.valueOf()); // true

隐式拆封(强制类型转换)

var a = new String('abc');
var b = a + '';
console.log(typeof a); // object
console.log(typeof b); // string

将原生函数当做构造函数

Array构造函数只带一个数字参数的时候,该参数就会被当做数组的预设长度(length), 而非只充当数组中的一个元素

var a = new Array(3);
var b = [undefined, undefined, undefined];
var c = [];
c.length = 3;
console.log(a.length, a); // 3 [ <3 empty items> ]
console.log(b); // [ undefined, undefined, undefined ]
console.log(c); // [ <3 empty items> ]
console.log(a.join('-')); // --
console.log(b.join('-')); // --
a.map(function(v, i) {
    console.log(i);
    return i;
});
b.map(function(v, i) {
    console.log(i);
    return i;
})

a.map(..)之所以执行失败,是因为数组中并不存在任何单元,所以map(..)无从遍历, 而join(..)却不一样,具体实现可参考下面代码:

function fakeJoin(arr, connector) {
    var str = '';
    for(var i = 0; i < arr.length; i++) {
        if(i > 0) {
            str += connector;
        }
        if(arr[i] !== undefined) {
            str += arr[i];
        }
    }
    return Storage;
}
var a = new Array(3);
console.log(fakeJoin(a, '-'));

join(..)首先假定数组不为空,然后通过length属性值来遍历其中的元素,而map(..)并不做这样的假定

var a = Array.apply(null, {length: 3});
console.log(a); // [ undefined, undefined, undefined ]

apply(..)是一个工具函数,适用于所有函数对象,它会以一种特殊的方式来调用传递给它的函数
第一个参数是this对象,第二个参数则必须是一个数组(或者类似数组的值, 也叫做类数组对象, array-like object), 其中的值被用作函数的参数;

Object(..), Function(..)和RegExp(..)

除非万不得已,尽量不要使用Object(..), Function(..)和RegExp(..)
建议使用常量形式来定义正则表达式, 这样不仅语法简洁,执行效率也更高;因为JavaScipt引擎在代码执行前会对它们进行预编译和缓存,与其他构造函数不同,RegExp(..)还是很有用的,比如动态定义正则表达式

Date(..)和Error(..);

Date.now();

if(!Date.now) {
    Date.now = function() {
        return (new Date()).getTime();
    }
}

Date()不带 new 关键字, 则会得到当前日期的字符串值

console.log(Date());
console.log(new Date());
 // Wed May 30 2018 16:48:20 GMT+0800 (CST)
 // 2018-05-30T08:48:20.089Z

symbol(..)

原生原型

其他构造函数的原型包含它们各自类型所持有的行为特征;比如Number#toFixed(..)(将数字转换为指定长度的整数字符串)和Array#concat(..)(合并数组), 所有的函数都可以调用Function.prototype中的apply(..), call(..)和bind(..)

小结

1.Javascript为基本数据类型提供了封装对象,称为原生函数(如 String, Number, Boolean等).它们为基本数据类型提供了该子类型所持有的方法和属性(如: String#trim() 和 Array#concat())

2.对于简单标量基本类型之,比如'abc', 如果要访问它的length属性或者String.prototype方法,JavaScript引擎会自动对该值进行封装(即使用相应类型的封装对象来包装它)来实现对这些属性和方法的访问;

强制类型转换

1.toString()
JSON字符串化
工具函数JSON.stringify(..)在将JSON对象序列化为字符串时也用到了toString();

console.log(JSON.stringify(undefined)); // undefined
console.log(JSON.stringify(function() {})); // undefined
console.log(JSON.stringify(
    [1, undefined, function(){}, 4] // [1,null,null,4]
));
console.log(JSON.stringify(
    {
        a: 2,
        b: function (){}, // {"a":2}
    }
));

2.toNumber()
true转换为1, false转换为0, undefined转换为NaN, null转换为0;
对象(包括数组)会被首先转换为相应的基本类型值,如果返回的是非数字的基本类型值,则再遵循以上规则将其强制转换为数字;

为了将转换为相应的基本类型值,抽象操作ToPrimitive会首先(通过内部操作DefaultValue)检查该值是否有valueOf()方法,如果有并且返回基本类型值,就使用该值进行强制类型转换,如果没有就使用toString()的返回值(如果存在)就进行轻质类型转换;
如果valueOf()和toString()均不返回基本类型值,会产生TypeError错误

使用Object.create(null)创建的toString()方法,因此无法进行轻质类型转换

3.toBoolean

以下都是假值

• undefined
• null
• false
• +0, -0和NaN
• ""

假值列表之外的值就是真值

[], {}和function(){}, 都是真值;

字符串和数字之间的转换

String(..),遵循前面讲过的ToString规则,将值转换为字符串基本类型
Number(..)遵循前面讲过的ToNumber规则,将值转换为数字基本类型

var a = 42;
var b = a.toString();
var c = '3.14';
var d = +c;
b; // "42"
d; // 3.14

a.toString(), 也可以转为为字符串,但是其中涉及隐式转换.因为toString()对42这样的基本类型值不适用,所以JavaScript引擎会自动为42创建一个封装对象,然后对该对象调用toString().这里显式转换中含有隐式转换;
一元运算+被普遍认为是显示强制类型转换;
1.日期显式转换为数字
一元运算+另一个常见用途是将日期(Date)对象强制类型转换为数字,返回Unix时间戳,以微秒为单位(从1970年1月1日 00:00:00 UTC到当前时间);

var d = new Date('Wed May 30 2018 16:48:20 GMT+0800 (CST)');
+d;
// 常用下面的方法来获得当前的时间戳
var temestamp = +new Date();

奇特的~运算符 ？

~运算符(即字位操作符'非');
字位操作符只适用于32位整数，运算符会强制操作数使用32位格式，这是通过抽象操作ToInt32实现的
ToInt32首先会执行ToString强制类型转换，比如'123'先被转换为123,然后再执行ToInt32

字位运算符（如| 和~）个某些特殊数字一起使用会产生类似强制类型转换的效果，返回另外一个数字

console.log(0|-0); // 0
console.log(0|NaN); // 0
console.log(0|Infinity); // 0
console.log(0|-Infinity); // 0

以上这些特殊数字无法以32位格式呈现，因此toInt32返回0

~首先将值强制类型转换为32位数字，然后再执行字位操作'非'（对每一个字位进行反转）

字位截除
~~截除数字值的小数部分，

显式转换为布尔值

建议使用 Boolean(a) 和 !!a来进行显式强制类型转换

隐式强制类型转换

var a = [1, 2];
var b = [3, 4];
console.log(a+b); // 1,23,4

某个操作数如果是字符串或者能够通过以下步骤转换为字符串的话， +将进行拼接操作，如果其中一个操作数是对象(包括数组),则首先对其调用ToPromitive抽象操作，该抽象操作再调用[[DefaultValue]]， 以数字作为上下文；
因为数组的valueOf()操作无法得到简单基本类型值，于是她转而调用toString().因此上例中的两个数组变成了'1, 2' 和'3, 4'。+将它们拼接后返回'1,23, 4'

var a = '3.14';
var b = a - 0;
console.log(b); // 3.14

-是数字减法运算符，因此a-0会将a强制类型转换为数字，也可以使用a*1和a/1,因为这两个运算符也只适用于数字

抽象相等

[] == ![]; // true

2 == [2]; // true
'' == [null]; // true

== 右边的值[2]和[null]会进行ToPromitive强制类型转换，以便能和左边的基本类型值(2和'')进行比较,因为数组的valueOf()返回数组本身，所以强制类型转换过程中数组会进行字符串化
[2]会转换成'2',然后通过ToNumber()转换为2;
[null]会直接转换为'';
所以最后的结果就是2 == 2和'' == ''

0 == '\n';//true

''， '\n'(或者' ' 等其他空格组合)等空字符串被toNumber强制转换为0;

'0' == false; // true
false == 0; //true
false == ''; // true
false == []; // true
'' == 0; // true
'' == []; // true
0 == []; // true

其中4中情况涉及 == false，之前我们说过应该避免，
现在剩下3种

'' == 0; // true
'' == []; // true
0 == []; // true

安全运用隐式强制类型转换

我们要对 == 两边的值认真推敲，以下两个原则可以让我们有效地避免出错

• 如果两边的值中有 true或者false,千万不要用 ==
• 如果两边的值中有 [], ''或者 0， 尽量不要使用 ==

抽象关系比较

1.比较双方首先会调用 ToPrimitive, 如果结果出现非字符串,就根据ToNumber规则将双方强制类型转为数字来比较
2.如果都是字符串,则按字母顺序来进行比较
3.<= 应该是 '小于或者等于', 实际上JavaScipt中 <= 是'不大于'的意思(!(a > b), 处理为!(b < a)).同理 a >= b 处理为 b <= a;

相等比较有严格相等,关系比较缺没有'严格关系比较', 如果要避免 a < b中发生隐式强制类型比较,我们只能确保 a和b为相同的类型，除此之外别无它法;
尽量使用 Number(a) < Number(b);

语法

关联

? : 是右关联
右关联不是指从右往左执行,而是指从右往左组合

a ? b : c ? d : e;
// 应该是以下组合顺序
a ? b : (c ? d : e);

某些情况, 返回的结果没有区别,但实际却有十分微妙的差别

var a = true, b = false, c = true, d = true, e = false;

a ? b : (c ? d : e); // false, 执行a和b
(a ? b : c) ? d : e; // false,执行a, b和e

另一个右关联的例子是 = 运算符

var a, b, c;
a = b = c = 42;

它首先执行 c = 42, 然后是b = .., 最后是a = .., 因为是右关联,所以它实际上是这样来处理的: a = (b = (c = 42));

来看一些复杂的例子

var a = 42;
var b = 'foo';
var c = false;
var d = a && b || c ? c || b ? a : c && b : a;
d; // 42
// 根据优先级和关联, 根据组合规则将上方代码分解如下

((a && b) || c) ? ((c || b) ? a : (c && b)) : a;

// 可以通过缩进显式让代码更容易理解
(
    (a && b) 
       || 
    c
) 
? 
(
    (c || b)
      ? 
      a 
       : 
    (c && b))
 : a;

(1) (a && b) 结果为 'foo';
(2) 'foo' || c 结果为 'foo';
(3) 第一个 ? 中 'foo'为真值;
(4)(c || b)结果为'foo'
(5)第二个 ?中, 'foo'为真值
(6) a的值为42
最后结果为42

最后: 如果运算符优先级/关联规则能够令代码更为简洁,就使用运算符优先级/关联规则,如果( )有助于提高代码可读性,就使用( );

自动分号

有时JavaScript会自动为代码补上缺失的分号,即自动分号插入(Automatic Semicolon Insertion ASI;

ASI只在换行符处起作用,而不会再代码行的中间插入分号;只有代码行末尾与韩航服之间除了空格和注释之外没有别的内容,它才会这样做

总结一下小程序的坑

1，遇到安卓上数据显示不出来,但是ios和安卓上显示不出来

• 上网查了一下，参考1，参考2,
• 可能原因如下：
• 1.域名配置问题，证书信任问题
• 2.es6在安卓上有的不支持，即使开启es6转es5的语法，安卓上也不支持
• ...
• 问题一，问了后端，他们说检查好几遍了，不是这儿的问题，所以排除，
• 问题二，查了一下小程序中es6语法的支持把用到的不支持的语法改了(可以用webpack配置babel,但是发现此问题时已经打算提交审核，时间紧迫,所以先把不支持的语法改了)，还是不行，排除问题2；
  后来就冷静的思考了一下，为什么安卓上没有数据，请求数据前的步骤是否走通，然后一步一个log的看，我们这里的登录逻辑是先有个get请求，后端返回true或false来判断是都需要登录，判断为true时需要获取返回信息头部的session字段，然后之后每次请求头部带上这个字段，

function getStorage(key) {
    return new Promise(function (resolve, reject) {
        // 先判断本地数据存储有没有cookie
        wx.getStorage({
            key: key,
            success: function (res) {
                resolve(res.data);
            },
            fail: function (res) {
                console.log(res);
                resolve(null);
                // if (res.errMsg == 'getStorage:fail' || res.errMsg == 'getStorage:fail data not found') {
                    <!--安卓返回 getStorage:fail， ios 返回 res.errMsg == 'getStorage:fail data not found'-->
                //     console.log('没有cookie');
                //     resolve(null);
                // } else {
                //     console.log('这是一个问题');
                //     reject(res.errMsg);
                // }
            },
        });
    });
}

• 判断本地缓存没有 session的时候时请求的第一个登录接口，安卓返回 getStorage:fail， ios 返回 res.errMsg == 'getStorage:fail data not found'，刚开始只判断了res.errMsg == 'getStorage:fail data not found'，所以安卓上会一直走reject，最后错误被catch出来，而并没有请求接口，导致没有数据
• 总结： 微信小程序开发过程中一定要用真机测试，微信开发者工具和真机上很多地方都有出入

算法简介

二分查找

大O表达法

递归

选择排序

递归

快速排序

散列表

DNS解析: 域名到IP的对应
用于缓存

性能

简单查找所需时间为线性时间o(n);
二分查找的速度更快,所需时间为对数时间 o(logn)
散列表中查找时间为常量时间 o(1)

1.散列表的填装因子
散列表包含的元素数/位置总数
填装因子越低,发生冲突的可能性越小,散列表的性能越高.一个不错的经验规则: 一旦填装因子大于0.7,就调整散列表的长度
2.散列函数
良好的散列函数让数组中的值程均匀分布
糟糕的散列函数让值扎堆,导致大量冲突

广度优先搜索

广度优先搜索让你能够找到两样东西之间的最短距离

• 编写国际跳棋,计算最少走多少布就可获胜
• 编写拼写检查器,计算最少编辑多少个地方就可将错拼的单丝改为正确的单词
• 根据你的人际关系网络找到关系最近的医生
  最短路径问题,你经常要找出最短路径,这可能是前往朋友家的最短路径,也可能是国际象棋中把对方将死的最少部署,解决最短路径问题的算法被称为广度优先搜索

图是什么
图由节点和边组成.一个节点可能与众多节点直接相连,这些节点被称为邻居

可用于回答两类问题

1.从节点A出发,有前往节点B的路径吗?
2.从节点A出发,前往节点B的哪条路径最短?

2个步骤

1.使用图来建立问题模型
2.使用广度优先搜索解决问题

只有按照顺序查找时, 广度优先搜索不仅查找A到B的路径,而且找到的是最短路径;
有一个可以实现这种目的的数据结构,就是队列(quene);
队列是一种先进先出(First In First Out, FIFO)的数据结构,栈是一种先进后出(Last In First Out, LIFO)的数据结构;

运行时间

广度优先搜索的运行时间为O(人数+边数), O(V + E), 其中V(vertice)为顶点数, E为边数

狄克斯特拉算法

• 继续图的讨论,介绍加权图-提高或降低某些边的权重
• 介绍狄克斯特拉算法,让你能够找出加权图中前往X的最短路径
• 介绍图中的环,它导致狄克斯特拉算法不管用

使用广度优先搜索,找出的是段数最少的路径;
要找出最快的路径,使用狄克斯特拉算法

4个步骤

1.找出'最便宜'的节点,即可在最短时间内到达的节点
2.更新该节点的邻居的开销
3.重复这个过程,直到对图中的每个节点都这样做了
4.计算最终路径

术语

狄克斯特拉算法用于每条边都有关联数字的饿图,这些数字称为权重;
带权重的图称为加权图;不带权重的图称为非加权图;
要计算非加权图的最短路径,可使用广度优先搜索,要计算加权图中的最短路径,可使用狄克斯特拉算法;
无向图意味着两个节点彼此指向对方,其实就是环!
在无向图中,每条边都是一个环;狄克斯特拉算法只适用于有向无环图(DAG)

负权重

不能将狄克斯特拉算法用于包含负权变得图;在包含负权边的图中,要找到最短路径,可使用另一种算法-贝尔曼-福德算法

实现

节点的开销指的是从起点出发前往该节点需要多长时间;

8.贪婪算法

集合覆盖问题

NP完全问题

你需要计算的所有解,并从中选出最小/最短的那个

9.动态规划

最长公共字符串

最长公共子序列

1.如果两个字母不同,就选择上方和左右邻居中较大的那个
2.如果两个字母相同,就将当前单元格的值设置为左上方单元格的值加1

实际应用

1.git diff, 指出两个文件的差异,也是使用动态规划实现的
2.生物学家根据最长公共序列来确定DNA链的相似性
3.字符串的相似程序,编辑距离指出了两个字符串的相似程度,也是通过动态规划计算得到的;编辑距离算法的用途很多,从拼写检查到判断用户上传的资料是否是盗版

10. K最近邻算法

本章内容

• 学习使用K最近邻算法创建分类系统
• 学习特征抽取
• 学习回归,即预测值,如明天的股价或用户对某部电影的喜欢程度

创建推荐系统

机器学习简介

1.OCR(optical character recognition) 是光学子符识别,这以为着你可拍摄印刷页面的照片,计算机将自动识别出其中的文字

输入url发生了什么

浏览器解析

白屏时间

Chrome
window.chrome.loadTimes().firstPaintTime - timing.navigationStart
IE
timing.msFirstPaint - timing.navigationStart

面试题

HTML

1. window.onload, document.ready, DOMContentLoaded的区别

document.ready: ready事件是在DOM结构绘制完成之后就会执行
DOMContentLoaded: 当初始的 HTML 文档被完全加载和解析完成之后，DOMContentLoaded 事件被触发，而无需等待样式表、图像和子框架的完成加载; 注意：DOMContentLoaded 事件必须等待其所属script之前的样式表加载解析完成才会触发。
window.onload: onload网页中所有内容(包括图片)全部加载完毕之后执行

资源加载和页面加载事件

2. iframe，如何在页面中改变另一个iframe的样式
   document.getElementById('frame').contentWindow.document.getElementById('cc');

3. 尽可能多的方法隐藏一个html元素
   display: none;
   visibility: hidden;
   opacity: 0;

CSS：

1. 盒模型,IE盒模型和标准盒模型，如何改变
   两者的区别在于content的不同, IE盒模型的content包括 border和 padding
   box-sizing:border-box || content-box || inherit
   content-box: 页面将采用标准盒模型模式来解析计算, 同时改模式为默认模式
   border-box: 页面将采用怪异模式解析计算, 怪异模式也称为IE模式

2. 选择器优先级（内联样式在何处）
   !important > 内联样式(权重1000) > id选择器(权重100) > 类(class)选择器(权重10) > 标签选择器

3. less和scss的好处
   都是css的预编译处理语言, 它们引入了mixins, 参数, 嵌套规则, 运算, 颜色, 名字空间, 作用域, javascript赋值

JS

1. 请为所有数组对象添加一个findDuplicate(n)方法，用于返回该数组中出现频率>=n的元素列表

[1,2,3,4,1,2,2,2].findDuplicate(2) => [1,2]
[1,2,3,4,1,2,2,2].findDuplicate(5) => []
[1,2,3,4,1,2,2,2].findDuplicate(-1) => [1,2,3,4]

if (!Array.prototype.findDuplicate) {
    Object.defineProperty(Array.prototype, 'findDuplicate', {
        value: function (n) {
            if (this === void 0 || this === null) {
                throw new TypeError('this is null or not defined');
            };
            var t = Object(this);
            var len = t.length >>> 0;
            var obj = {};
            var result = [];
            for(let i = 0; i < len; i++) {
                obj[t[i]] = (obj[t[i]] || 0)+1;
                if(obj[t[i]] == n) {
                    result.push(t[i]);
                }
            }
            return result;
        }
    });
}

2. 箭头函数的好处
   简洁, 简化回调函数, 可以与变量解构结合使用

3. 判断数组

// 1.使用 instanceof
[] instanceof Array;

// 2.使用constructor
var a = new Array;
a.constructor === Array;
// 或
function isArray(arr){ 
  return typeof arr === "object" && arr.constructor === Array; 
}

// 3.Object.ProtoType.toString()
Object.prototype.toString.call([]); // "[object Array]"

4. typeof和instanceof的区别

typeof操作符

可能返回的值如下

• undefined
• boolean
• string
• number
• object
• function

注意: typeof 的能力有限，其对于null, Date、RegExp类型返回的都是"object"

typeof null // 'object'
typeof {}; // "object" 
typeof []; // "object" 
typeof new Date(); // "object"

使用场景:区分对象和原始类型,要区分一种对象类型和另一种对象类型,可以使用: instanceof运算符或对象contructor属性

instanceof运算符

用法: 左边的运算数是一个object,右边运算数是对象类的名字或者构造函数;返回true或false

[] instanceof Array; // true
[] instanceof Object; // true
[] instanceof RegExp; // false
new Date instanceof Date; // true

如果object是class或者构造函数的实例,则返回true,如果不是或者是null也返回false
instanceof运算符判断是否为数组类型

function isArray(arr){ 
  return arr instanceof Array; 
}

5. new和instanceof的内部机制

6. for...in迭代和for...of有什么区别？

for in 用来遍历对象
for of 用来遍历数组

7. 原型链中prototype和__proto__分别指什么

8. require和import的区别：
   require是CommonJS模块， import是Es6模块，CommonJS是运行时加载， es6模块是编译时加载

9. class实现原理：
   class是一个语法糖，很多都可以用es5的语法实现

10. async和await实现原理:
    基于generator实现的，generator又是基于promise实现的

11. 说一下你对generator的了解？

12. 说一下macrotask 和 microtask？

13. node中事件队列模型

14. fetch api

15. HTTP和HTTPS的区别，如何升级成HTTPS

16. Http请求中的keep-alive有了解吗。

17. 如何让网页离线后还能访问

18. 强缓存和协商缓存

19. vue中用到的设计模式

20. webpack常见的loader和plugin，loader和plugin的区别

21. babel-polyfill

有一个资源加载性能分析工具- PageSpeed,它可以分析网页加载过程中出现的各种问题,并给出各种建议帮助开发者去除掉这些影响性能的问题;

一个不错的blog: https://chinagdg.org/2016/02/pagespeed-insights/

理解一些基础概念

原型链，类，实例， 类属性，类方法， 实例属性，实例方法

class A {
    static b = '1'
    static classMethod() {
        return 'hello'
    }
}
const a = new A();
a.c = 5;
a.sayHello = function() {
    console.log('welcome')
}

A: 类
b: 类属性
classMethod: 类方法
a: 实例
a.c: 实例属性

ES6的类

static：静态属性指的是 Class 本身的属性，即Class.propName，而不是定义在实例对象（this）上的属性。

实现一个promise

Promise简介

要想自己实现一个Promise，我们首先要对Promise的用法有所了解；

Promise 是一个构造函数，用来生成 Promise 实例，接受一个函数作为参数，这个函数有两个参数 resolve 和 reject，是两个函数。resolve 是异步操作成功时调用，并将异步操作的结果作为参数传递出去。reject 是异步操作失败时调用，并将异步操作报出的错误作为参数传递出去。

静态属性或方法：是存在类上的属性或方法，实例上无法访问，只用通过 Promise.xxx 访问

要实现 xxx，首先要明白这个函数是干什么的，那又从那个方面来分析么呢？

• 接收哪些参数
• 返回什么参数
• 如果 xxx，怎么处理

Promise 的静态方法

• Promise.resolve()
• Promise.reject()

Promise.resolve()

• 参数：分为以下两种情况
  • Promise 实例, 直接返回
  • 原始值，或者是一个不具有then方法的对象，返回一个新的 Promise 示例，状态为resolved。
• 返回值：一个新的Promise实例

Promise.reject()

• 参数：分为以下两种情况
  • Promise 实例, 直接返回
  • 原始值，或者是一个不具有then方法的对象，返回一个新的 Promise 示例，状态为rejected。
• 返回值：一个新的Promise实例

以下方法都是接受数组作为参数，数组中的某项如果不是Promise实例，会先调用Promise.resolve方法，将参数转为 Promise实例，再做处理

• Promise.all()
• Promise.race()
• Promise.allSettled()
• Promise.any()

Promise.all()

• 参数：数组，数组中的某项如果不是Promise实例，会先调用Promise.resolve方法，将参数转为 Promise实例，再做处理
• 返回值：
  • 数组：都成功时，返回数组
  • 一个 promise 实例：只要有一个失败，返回值为第一个被reject的实例的返回值

Promise.race()

• 参数：数组，数组中的某项如果不是Promise实例，会先调用Promise.resolve方法，将参数转为 Promise实例，再做处理
• 返回值：
  • 一个 promise 实例：返回那个率先改变的 Promise 实例的返回值

Promise.allSettled()

• 接收一组 Promise 实例作为参数，只有等到所有的参数实例都返回结果才会返回

• 场景：不关心异步操作的结果，只关心是否都结束了。比如多张图片选择后一起上传时，需要判断多张图片上传的结果，成功了几张，失败了几张

• 参数：数组，数组中的某项如果不是Promise实例，会先调用Promise.resolve方法，将参数转为 Promise实例，再做处理

• 返回值：

  • 返回值：数组，数组的每一项都是一个对象具体的结构如下

    [
        {
            status: 'fulfilled',
            value: 1,
        },
        {
            status: 'rejected',
            reason: 1,
        },
    ];

Promise.any()

接收一组 Promise 实例作为参数，只要有一个成功就返回成功的结果，如果所有结果都是失败的，就返回所有失败的结果

• 参数：数组，数组中的某项如果不是Promise实例，会先调用Promise.resolve方法，将参数转为 Promise实例，再做处理
• 返回值：
  • 一个promise实例：只要有一个成功时返回一个 promise 实例的结果
  • 数组：所有都失败时，返回数组

代码实现

class Promise {
    constructor(fn) {
        /**
         *  三种状态 
         *  pending：进行中
         *  fulfilled：已成功
         *  rejected: 已失败
         */
        this.status = 'pending';
        this.resoveList = []; // 成功后回调函数
        this.rejectList = []; // 失败后的回调函数

        fn(this.resolve.bind(this), this.reject.bind(this));
    }
    then(scb, fcb) {
        if (scb) {
            this.resoveList.push(scb);
        }
        if(fcb) {
            this.rejectList.push(fcb);
        }
        return this;
    }
    catch(cb) {
        if (cb) {
            this.rejectList.push(cb);
        }
        return this;
    }
    resolve(data) {
        if (this.status !== 'pending') return;
        this.status = 'fulfilled';
        setTimeout(() => {
            this.resoveList.forEach(s => {
                data = s(data);
            })
        })
    }
    reject(err) {
        if (this.status !== 'pending') return;
        this.status = 'rejected';
        setTimeout(() => {
            this.rejectList.forEach(f => {
                err = f(err);
            })
        })
    }
    /**
     * 实现Promise.resolve
     * 1.参数是一个 Promise 实例, 那么Promise.resolve将不做任何修改、原封不动地返回这个实例。
     * 2.如果参数是一个原始值，或者是一个不具有then方法的对象，则Promise.resolve方法返回一个新的 Promise 对象，状态为resolved。
    */ 
    static resolve(data) {
        if (data instanceof Promise) {
            return data;
        } else {
            return new Promise((resolve, reject) => {
                resolve(data);
            })
        }
    }
    // 实现Promise.reject
    static reject(err) {
        if (err instanceof Promise) {
            return err;
        } else {
            return new Promise((resolve, reject) => {
                reject(err);
            })
        }
    }
    /**
     * 实现Promise.all
     * 1. Promise.all方法接受一个数组作为参数，p1、p2、p3都是 Promise 实例，如果不是，就会先调用下面讲到的Promise.resolve方法，将参数转为 Promise 实例，再进一步处理。
     * 2. 返回值组成一个数组
    */
    static all(promises) {
        return new Promise((resolve, reject) => {
            let promiseCount = 0;
            let promisesLength = promises.length;
            let result = [];
            for(let i = 0; i < promises.length; i++) {
                // promises[i]可能不是Promise类型，可能不存在then方法，中间如果出错,直接返回错误
                Promise.resolve(promises[i])
                    .then(res => {
                        promiseCount++;
                        // 注意这是赋值应该用下标去赋值而不是用push，因为毕竟是异步的，哪个promise先完成还不一定
                        result[i] = res;
                        if(promiseCount === promisesLength) {
                        return resolve(result);
                        }
                    },(err) => {
                        return reject(err);
                    }
                )
            }
        })
    }
    /**
     * 实现Promise.race
     * 1. Promise.race方法的参数与Promise.all方法一样，如果不是 Promise 实例，就会先调用下面讲到的Promise.resolve方法，将参数转为 Promise 实例，再进一步处理。
     * 2. 返回那个率先改变的 Promise 实例的返回值
    */
    static race(promises) {
        return new Promise((resolve, reject) => {
            for(let i = 0; i < promises.length; i++) {
                Promise.resolve(promises[i])
                    .then(res => {
                        return resolve(res);
                    },(err) =>{
                        return reject(err);
                    }
                )
            }
        })
    }
    /**
    * Promise.any()
    * - 参数：数组，数组中的某项如果不是Promise实例，会先调用Promise.resolve方法，将参数转为 Promise实例，再做处理
      - 返回值：
        - 一个promise实例：只要有一个成功时返回一个 promise 实例的结果
        - 数组：所有都失败时，返回数组
    */
    static any(promises) {
        return new Promise((resolve, reject) => {
            const promisesLen = promises.length;
            let promiseCount = 0;
            let errorResult = [];
            for (let i = 0; i < promisesLen; i++) {
                Promise.resolve(promises[i])
                    .then((value) => {
                        return resolve(value);
                    },(err) => {
                        promiseCount++;
                        errorResult[i] = err;
                        if (promiseCount === promisesLen) {
                            return reject(errorResult);
                        }
                    },
                );
            }
        });
    }
    /**
    * Promise.allSettled()
    * - 参数：数组，数组中的某项如果不是Promise实例，会先调用Promise.resolve方法，将参数转为 Promise实例，再做处理
    * - 返回值：数组
    */
    static allSettled(promises) {
        return new Promise((resolve, reject) => {
            const promisesLen = promises.length;
            let promiseCount = 0;
            const result = [];
            for (let i = 0; i < promisesLen; i++) {
                Promise.resolve(promises[i])
                    .then((value) => {
                        promiseCount++;
                        result[i] = {
                            status: 'fulfilled',
                            value,
                        };
                        if (promiseCount === promisesLen) {
                            return resolve(result);
                        }
                    },(err) => {
                        promiseCount++;
                        result[i] = {
                            status: 'rejected',
                            reason: err,
                        };
                        if (promiseCount === promisesLen) {
                            return resolve(result);
                        }
                    },
                );
            }
        });
    }
}

测试用例

1. Promise.then

const p = new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log('resolve');
        resolve(222);
    }, 1000)
})

p.then(data => {
    setTimeout(() => {
        console.log('data', data);
    })
    return 3333;
}).then(data2 => {
    console.log('data2', data2);
}).catch(err => {
    console.error('err', err);
});

2. Promise.reject

const p1 = Promise.reject('出错了');
p1.then(null, function (s) {
    console.log(s); // 出错了
});

3. Promise.all && Promise.race && Promise.any && Promise.allSettled

const q1 = new Promise((resolve, reject) => {
    resolve('hello')
});

const q2 = new Promise((resolve, reject) => {
    reject('world')
});

Promise.all([q1, q2])
.then((res) => {
    console.log(res);
}, (err) => {
    console.log(err); // world
});

Promise.race([q1, q2]).then(res => {
    console.log(res); // hello
});

Promise.any([q1, q2]).then(res => {
    console.log(res); // hello
});

Promise.allSettled([q1, q2]).then(res => {
    console.log(res); 
    /**
      [
        { status: 'fulfilled', value: 'hello' },
        { status: 'rejected', reason: 'world' }
        ]
    */
});

关于默认this

• 浏览器默认的this为window

function test() {
    console.log(this);
}
test(); //window

• node.js中

  • 全局环境默认this为{}

  console.log(this); // {}
  

  • 普通函数中默认this为global

  function test() {
      console.log(this);
  }
  test(); //global
  

  • 箭头函数中默认this为所在作用域的this

  var obj = {
  say: function () {
    setTimeout(() => {
      console.log(this)
    });
  }
  }
  obj.say(); // obj,此时this指的是定义他的obj
  

关于this指向

• 普通函数的this指向函数的调用者
• 箭头函数的this指向所在作用域的this

var obj = {
    name: 'objName',
    say() {
        console.log(this.name);
    }
    read: () => {
        console.log(this);
        console.log(this.name);
    }
}
obj.say() // objName
obj.read() // {}, undefined

window.val = 1;
var obj = {
    val: 2,
    dbl: function() {
        this.val *= 2;
        val *= 2;
        console.log(val);
        console.log(this.val);
    }
}
obj.dbl(); // 2 4
var func = obj.dbl;
func(); // 8 8

obj.dbl();执行这行代码时，this指的是obj，所以this.val === obj.val*=2,最后结果为4,val*=2 === window.val *= 2，最后结果是2

func()，执行这行代码时，func()没有任何前缀，this指的是window.func();所以此时this值得是window，this.val === window.val *= 2,此时window.val 为4，val*=2 === window.val *2,最后结果为8，最后console.log(this.val),与console.log(val),指的都是window.val，最后结果都是8

nginx location 详解

语法

location [=|~|~*|^~] /uri/ { … }

• = 表示精确匹配; 要求字符串与uri严格匹配, 如果匹配成功,则停止向下搜索,并立即处理此请求
• ~ 表示区分大小写的正则匹配
• ~* 表示不区分大小写的正则匹配
• ^~ 表示uri以某个常规字符串开头, 不是正则匹配
• / 表示通用匹配, 如果没有其他匹配, 任何请求都会匹配到

匹配顺序
一个具体的请求path过来之后, nginx的具体匹配过程可以分为几步

关于location匹配结尾的斜杠

在location后面接的表达式中的斜杠, 可有可无, 并没有影响;
而对于URL中的 / 则是当有/时表示目录, 没有时则表示文件.当有 /是服务器会自动去对应 目录下找默认文件, 而如果没有 / 则会优先去匹配文件. 如果找不到文件才会重定向到目录, 查默认文件

root和alias的区别

root指令会将location中的部分附加到root定义的末尾形成一个完整的路径;
alias则不会包含location中定义的部分
比如：

location /static {
    root /var/www/app/static/;
    autoindex off;
}

那么当 Nginx 寻找路径时会是：

/var/www/app/static/static/

如果这个在 static 目录的 static 目录不存在则显而易见会产生 404 错误。这是因为 location 中的 static 部分被附加到了 root 指定的路径后面，因此正确的做法是：

location /static {
    root /var/www/app/;
    autoindex off;
}

而对于 alias 正确的做法则是：

location /static {
    alias /var/www/app/static/;
    autoindex off;
}

锚点的添加

1.使用 id 定位

这种定位最大的好处就是可以针对任何标签来定位
给一个a标签一个href=“#锚点”，然后要跳的锚点给个id=“锚点”

<!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>锚点</title>
    <style>
        #div1 {
            margin-top: 2000px;
        }
    </style>
</head>
<body>
    <h2>
        <a href="#div1">to div1</a>
    </h2>
    <div id="div1">div1</div>
</body>
</html>

2.使用 name 定位

使用 name 定位只用于 <a>标签,其他的标签就不管用了。

<!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>锚点</title>
    <style>
        a[name="a"]{
            margin-top: 2000px;
            display: block;
        }
    </style>
</head>
<body>
    <h2>
        <a href="#a">定位到A</a>
    </h2>
    <a name="a">A</a> 
</body>
</html>

3.使用js定位

element.scrollIntoView()方法让当前元素滚动到浏览器窗口的可视区域内(有浏览器的兼容问题)

<!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>锚点</title>
    <style>
        #a {
            margin-top: 2000px;
        }
    </style>
</head>
<body>
    <div onclick="javascript:document.getElementById('a').scrollIntoView()">
        定位到A
    </div>
    <div id="a">
        A
    </div>
</body>
</html>

node中可以通过process.argv来获取参数

1. 新建一个shell.js

console.log(process.argv);

在终端输入 node shell.js

[ '/Users/wangyaxing/.nvm/versions/node/v10.7.0/bin/node',
  '/Users/wangyaxing/temp/vue-project/shell.js' ]

在终端输入 node shell.js abc

[ '/Users/wangyaxing/.nvm/versions/node/v10.7.0/bin/node',
  '/Users/wangyaxing/temp/vue-project/shell.js',
  'abc' ]

process.argv的用法是第一个是node文件， 第二个是脚本文件， 第三个是参数

npm scripts（npm脚本）发送命令行参数

什么是npm scripts

npm 允许在package.json文件里面，使用scripts字段定义脚本命令。

{
  // ...
  "scripts": {
    "build": "node build.js"
  }
}

上面代码是package.json文件的一个片段，里面的scripts字段是一个对象。它的每一个属性，对应一段脚本。比如，build命令对应的脚本是node build.js。

原理

执行npm run ,会自动创建一个shell, 在这个shell里面执行指定的脚本命令。
比较特别的是， 这个shell 会自动将当前目录下的node_modules/.bin子目录加入PATH，执行结束， 再将PATH变量恢复原样

通配符

由于 npm 脚本就是 Shell 脚本，因为可以使用 Shell 通配符。

"lint": "jshint *.js"
"lint": "jshint **/*.js"

上面代码中，*表示任意文件名，**表示任意一层子目录。
如果要将通配符传入原始命令，防止被 Shell 转义，要将星号转义。

"test": "tap test/\*.js"

传参

将命令行参数发送到npm脚本：

npm run [command] [-- <args>]

注意必要的--，需要将参数传递到npm命令本身，并将其传递给脚本。

使用webpack.DefinePlugin在打包时对文件中的变量进行替换

plugins: [
    new webpack.DefinePlugin({
      'domain':  process.argv[2]
    }),
}

参考

npm scripts 使用指南
如何向npm脚本发送命令行参数？
编译环境中的几种传参方法

redux

redux的三个概念: action reducer store

• action: 一个包含type的object, 通常把一个返回action对象的函数称为action函数, 直接简称为action

function action(data) {
    return {
        type: 'Action1',
        data,
    };
}

• reducer: 一个根据action type来更新数据的函数

function reducer(state = { data: 1 }, action) {
    switch (action.type) {
        case 'action1': {
            const newState = JSON.parse(JSON.stringify(state));
            return newState;
        }
        case 'action2': {
             const newState = JSON.parse(JSON.stringify(state));
             return newState;
        }
        default: {
            return state;
        }
    }
}

• store: 使用createStore从reducer函数创建的数据对象, 包含getState和dispatch方法

import { createStore } from 'redux';

let store = createStore(reducer);
console.log(store.getState())

store.dispatch(action(0))
console.log(store.getState())

注意! 更新数据需要dispatch对应的action

react-redux

用于将redux于react结合

• Provider: 顶层组件, 注入store对象

import { Provider } from 'react-redux';

ReactDom.render(
    <Provider store={store}>
        <App />
    </Provider>,
    document.getElementById('app'),
);

• connect: 工具函数, 参数一为函数, 该函数接收state, 返回一个对象, 对象包含一系列数据. 参数二为函数, 该函数接收dispatch, 返回一个对象, 对象包含一系列方法

import { connect } from 'react-redux';  

class App extends Component {
    componentDidMount() {
        this.props.dispatch({
            type: 'action1',
            data: 1,
        });
    }

    render() {
        // this.props.func1();
        // this.props.func2();
        return (
            <div>
            </div >
        );
    }
}

export default connect(
    state => ({
        data: state.data,
        obj: state.obj,
    }),
    dispatch => ({ dispatch }),
)(App);

immutable.js

特殊的object(MAP)/array(LIST)

• 更新数据: set setIn update updateIn
• 读取数据: get getIn
• 可以直接比较(深层比较)
• 创建(fromJS), 还原(toJS)

上述的reducer可以用下面的代码优化

function reducer(state = immutable.fromJS({ data: 1, obj: { aa: 1 } }), action) {
    switch (action.type) {
        case 'action1': {
            return state.set('data', action.data * 10);
        }
        case 'action2': {
            return state.setIn(['obj', 'aa'], action.data);
        }
        default: {
            return state;
        }
    }
}

优点

• 无需深复制, 更新数据自动返回一个新对象
• 适合与react shouldComponentUpdate结合来优化性能

pure-render-decorator

自动创建shouldComponentUpdate的工具, 需要配置babel decorator特性才能使用

尾调用，就是在函数的最后一步调用另一个函数

function foo(x) {
     return g(x);
}

尾调用不一定出现在函数尾部，只要是最后一步操作就行

function f(x) {
  if (x > 0) {
    return m(x)
  }
  return n(x);
}

函数m和n都属于尾调用，他们都是函数的最后一步操作

尾调用优化

函数调用会在内存形成一个’调用记录‘，保存调用位置和内部变量等信息，如果在A函数中调用B函数，在A函数的调用记录上还会形成一个B的调用记录，等到B函数运行结束后，把结果返回到A，B的调用记录才会消失。如果函数B内部还调用C函数，那就是还有一个C的调用记录栈，以此类推，所有的调用记录，就会形成一个’调用栈‘。

尾调用在于它特殊的调用位置。由于是函数最后一步操作，所以不需要保留外层函数的调用记录，因为调用位置和内部变量都不会再用到了。

’尾调用优化‘，只调用内层函数的调用记录。如果所有函数都是尾调用，那么完全可以做到每次执行时，调用记录只有一项，这将大大节省内存。

浏览器的缓存机制

缓存过程

浏览器与服务器通信的方式为应答模式, 即是:
浏览器发起HTTP请求-服务器响应请求, 那么浏览器怎么确定一个资源该不该请求缓存呢?
浏览器第一次向服务器发起该请求后拿到请求结果, 将请求结果和缓存标识存入浏览器缓存, 浏览器对于缓存的处理是根据第一次请求资源时返回的响应头来确定的

分为强制缓存和协商缓存

强制缓存优先于协商缓存, 强制缓存(expires和Cache-control)生效则直接使用强制缓存, 若不生效则进行协商缓存(Last-Modified/If-Modified-Since和Etag/If-None-Match), 协商缓存由服务器决定是否使用缓存, 如果协商缓存失效, 那么代表该请求的的缓存失效, 返回200,重新返回资源的缓存标识, 再存入浏览器缓存中; 生效则返回304, 继续使用缓存;

Cache-control优先级高于expires
Etag/If-None-Match优先级高于Last-Modified/If-Modified-Since

区别

1. 强缓存不发请求, 直接在缓存中获取; 弱缓存需要发送一个请求, 验证是都可以使用缓存, 如果可以则返回304直接使用缓存, 如果不可以使用缓存, 则直接返回该资源的数据
2. 强缓存返回200(from cache), 弱缓存返回304

强制缓存

不会向服务器请求资源, 直接从缓存中读取资源, 在chrome控制台的netWork选项中可以看到该请求返回200的状态码, size显示 from disk cache和from memory cache;

• from disk cache 从硬盘中读取缓存;
• from memory cache 从内存中读取缓存;浏览器会在js和图片资源等文件解析后直接存入内存缓存中, 那么当刷新页面时只需直接从内存缓存中读取(from memory cache);

协商缓存

协商缓存是无法减少请求数的开销的, 但是可以减少返回的正文大小;

用户行为对缓存的影响

1.地址栏访问, 链接跳转是正常用户的行为, 将会触发浏览器缓存机制
2.F5刷新, 浏览器会设置max-age=0, 跳过强制缓存判断, 会进行协商缓存判断
3.ctrl+F5刷新, 会跳过强制缓存和协商缓存, 直接从服务器拉取资源

javascript是一门编译语言，不是提前编译，边编译边执行；'动态'或解释执行

编译
1、分词/词法分析
2.解析/语法分析
AST(抽象语法树): Abstract Syntax Tree ？
3.代码生成
AST转换成可执行代码

引擎？，编译器 ？，作用域
LHS
RHS

LHS, RHS

LHS: 赋值操作的目标;
a = 2

RHS: 谁是赋值操作的源头; 得到某某的值
console.log(a);
去找到a的值,并把它给我

function foo(a) {
    console.log(a);
}
foo(2);

a = 2; LHS查询, 2会被分配给参数a

对a的RHS引用,并且经得到的值传给 console.log(..);console.log(...)本身也需要一个引用才能执行,因此会对console对象进行RHS查询,并且检查得到的值中是否有一个叫log的方法

异常

在变量还未声明的情况下,两种查询的行为是不一样的;
RHS查询不到,引擎报 ReferenceError异常
LHS查询不到,(非严格模式下)全局作用域就会创建一个具有该名称的变量,并将其返还给引擎

RHS查询找到, 尝试对变量进行不合理的操作,试图
1.对一个非函数类型的值进行函数调用;
2.引用null和undefined类型的值中的属性,引擎会抛出 TypeError

ReferenceError同作用域判别失败有关,TypeError代表作用域判别失败了,但是岁结果的操作是非法或不合理的

小结

如果查找的目的是对变量进行赋值,就会使用LHS操作,如果目的是获取变量的值,就会使用RHS查询
赋值操作符会导致LHS查询. = 操作符或调用函数时传入的参数操作都会导致关联作用域的赋值操作

function foo(a) {
    var b = a;
    return a + b;
}
var c = foo(2);

3处LHS查询

c = ..; a = 2(隐式变量分配); b = ..

4处RHS查询

foo(2.., = a; a.. ..b

词法作用域

词法作用域以为这作用域是由书写代码函数声明的位置来决定的;编译的词法分析阶段基本能够知道全部标识在哪里以及是如何声明的,从而能够预测在执行过程中如何对它们进行查找;

javascript中有两个机制可以'欺骗'词法作用域: eval(..)和with;前者可以对一段包含或多个声明'代码'字符串进行演算,并借此来修改已经存在的的词法作用域(运行时);后者本质上是通过讲一个对象的引用当做作用域来处理,将对象的属性当做作用域中的标识来处理,从而创建了一个新的词法作用域(同样是在运行时);
这两个机制的副作用是引擎无法再编译时对作用域查找进行优化;因此引擎只能谨慎地认为这样的优化是无效的.使用这其中任何一个机制都将导致代码运行变慢,不要使用它们;

函数作用域和块级作用域

function是声明的第一个词,就是一个函数声明,否则就是函数表达式;
函数表达式可以是匿名的(匿名函数表达式),函数声明则不可以省略函数名

(function foo() { .. })(); => IIFE 立即执行函数表达式
第一个()将函数变成表达式,第二个()执行了这个函数;
(function foo() { .. }());

提升

引擎会在解释javascript代码之前首先对其进行编译,编译阶段中的一部分工作就是找到所有的声明,并用合适的作用域将他们关联起来
包含变量和函数在内的所有声明都会在任何代码前首先被处理;可以形象的想象成所有的声明(变量和函数)都会被'移动'到各自作用域的最顶端,这个过程被称为提升

var a = 2;
javascript实际上会将其看成两个声明: var a; 和a = 2;
第一个定义声明是在编译阶段进行的;第二个赋值声明会被留在原地等待执行阶段

a = 2;
var a;
console.log(a);

其中一部分是编译,而第二部分是执行;

console.log(a);
var a = 2;

实际按照以下流程处理

var a;
console.log(a);
a = 2;

只有变量声明和函数声明会被提升,但是函数表达式却不会被提升

foo(); // 不是ReferenceError, 而是TypeError
bar(); // ReferenceError
var foo = function bar() {

}

变量标识符foo()被提升并分配给所在作用域(在这里是全局作用域),因此foo()不会导致ReferenceError;
但是foo此时并没有赋值(如果它是一个函数声明而不是函数表达式,name就会赋值). foo()由于对undefined值进行函数调用而导致非法操作,因此跑出TypeError

函数声明和变量声明都会被提升,但是有一个值得注意的细节(这个细节可以出现在有多个'重复'声明的代码中)但是函数会首先被提升,然后才是变量,但是出现在后面的函数声明还是可以覆盖前面的

闭包

当函数可以记住并访问所在的词法作用域时,就产生了闭包,即使是在当期词法作用域之外执行的

function foo() {
    var a = 2;
    function bar() {
        console.log(a);
    }
    return bar;
}
var baz = foo();
baz();

函数bar()的作用域能够访问foo()的内部作用于,然后我们将bar()函数本身当做一个值类型进行传递;在这个例子中,我们将bar所引用的函数对象本身当做返回值;
在foo()执行后,其返回值(也就是内部bar()函数)赋值给变量baz并调用baz();实际上只是通过不同的标识符引用调用了内部函数bar();

? 
function wait(message) {
    setTimeout(function timer() {
        console.log(message);
    }, 1000)
};
wait('hello, closure')

将一个内部函数(timer)传递给setTimeout(..), timer具有涵盖wait(..)作用域的闭包,因此还保有对变量message的引用

?
function makeAdder(x) {
    function add(y) {
        return y + x;
    }
    return add;
}
var plusOne = makeAdder(1);
var plusTen = makeAdder(10);

console.log(plusOne(3)); // 4
console.log(plusTen(41)); // 51
console.log(plusTen(13)); // 23

本质上无论何时何地,如果将函数(访问它们各自的词法作用域)当做第一级的值类型并到处传递, 你就会看到闭包在这些函数中的应用;
在定时器,事件监听器,ajax请求, 跨窗口通信, Web Workers或者任何其他的异步(或者同步)任务中,只要使用了回调函数,实际上就是使用了闭包

循环和闭包

for(var i = 1; i <= 5; i++) {
    setTimeout(function timer() {
        console.log(i);
    }, i*1000)
}

运行时会以每秒一次的频率输出5次6
为什么?
1.6是哪里来的,这个循环的终止条件是i不再<=5;条件首次成立时i的值是6; 因此,输出显示的是循环结束时i的终值
2.延时函数的回调会在循环结束时才执行
我们试图假设循环中的每个迭代在运行时都会给自己'捕获'一个i的副本,但是根据作用域的工作原理,实际情况是尽管循环中的五个函数是在个个迭代中分别定义的,但是他们都被封闭在一个共享的全局作用域,因此实际上只有一个i

for(var i = 1; i <= 5; i++) {
    (function (j) {
        setTimeout(function timer() {
            console.log(j);
        }, j*1000)
    })(i)
    
}

在迭代内使用IIFE会为每个迭代都生成一个新的作用域,使得延迟函数的回调可以将新的作用域封闭在每个迭代内部,每个迭代中都会含有一个具有正确值的变量供我们访问;

模块

function CoolModule() {
    var something = 'cool';
    var another = [1, 2, 3];
    function doSomething() {
        console.log(something);
    }
    function doAnother() {
        console.log(another.join("!"));
    }
    return {
        doSomething: doSomething,
        doAnother: doAnother,
    }
}
var foo = CoolModule();
foo.doSomething();
foo.doAnother();

模块模式需要具备两个必要条件
1.必须有外部的封闭函数,该函数必须至少被调用一次(每次调用都会创建一个新的模块实例);
2.封闭函数必须返回至少一个内部函数,这样内部函数才能在私有作用域中形成闭包,而且可以访问或者修改私有的状态

模块

var MyModules = (function Manager() {
    var modules = {};
    function define(name, deps, impl) {
        for(var i = 0; i < deps.length;i++) {
            deps[i] = modules[deps[i]];
        }
        modules[name] = impl.apply(impl, deps);
    }
    function get(name) {
        return modules[name];
    }
    return {
        define: define,
        get: get,
    }
})();

MyModules.define('bar', [], function() {
    return hello(who) {
        return 'let me introduce: ' + who;
    }
    return {
        hello: hello,
    }
});

MyModules.define('foo', ['bar'], function(bar) {
    var hunhry = 'hippo';
    function awesome() {
        console.log(bar.hello(hungry).toUpperCase());
    }
    return {
        awesome: awesome
    }
});
var bar = MyModules.get('bar');
var foo = MyModules.get('foo');
console.log(bar.hello('hippo'));
foo.awesome();

动态作用域

function foo() {
    console.log(a); // 2
}
function bar() {
    var a = 3;
    foo();
}
var a = 2;
bar();

前言

我们写css的时候经常会遇到要清楚一些默认的样式,其实每次做项目中需要清除的样式就经常是那么几个,最常见的比如

• 清除表单元素input,select,textarea的默认样式,
• CSS3中隐藏滚动条但仍能继续滚动,
• 多行文本溢出省略号显示等等,

所以就总结了一下,持续更新中...,也请大家多多贡献更多的常见的需要清除默认样式的方法😊

1.多行文本溢出省略号显示

• 让文本只显示一行，然后溢出省略号显示

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

• 让文本显示两行，然后溢出部分省略号显示

    line-height: 1.3rem;
    max-height: 2.6rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

2.滚动条的处理

CSS3中隐藏滚动条但仍能继续滚动

::-webkit-scrollbar {
    width: 0px;
    height: 0px;
}

清除浏览器默认的滚动条

::-webkit-scrollbar, ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb, ::-webkit-scrollbar-corner {
    display: none;
}

::-webkit-scrollbarMDN

3. 解决iPhone中overflow:scroll;滑动速度慢或者卡的问题

-webkit-overflow-scrolling : touch;

4.消除input,textarea等的默认样式

input, button, select, textarea {
    outline: none;
    -webkit-appearance: none;
    border-radius: 0;
    border:0;
}
textarea{
    resize:none;
}

• outline: none;去掉chrome浏览器自带的点击input框出现边框情况
• -webkit-appearance: button;使元素标签看起来像个按钮样式,意思定义了按钮样式
  -webkit-appearance: none;去掉按钮样式
• border-radius: 0; 去掉圆角
  border:0; 去掉border
• textarea{resize:none}取消chrome下textarea可拖动放大：

1.vue技术栈(vue-cli + vue-router + vuex + NPM + +es6 webpack + babel)

• vue-cli： 是一个脚手架工具，用于自动生成vue项目的文件和目录；
• vue-router：vue提供的前端路由工具，用其我们实现页面的路由控制，局部刷新及按需加载，构建单页面应用，实现前后端分离；
• vuex：是状态管理工具，用于实现统一管理我们项目各种数据的交互与重用，存储我们所需要的数据对象；
• NPM： 是nodejs的包管理工具，用于统一管理项目中需要用到的包，插件，工具，命令，便于维护和开发；
• es6：JavaScript的最新版本，又称ECMAJavaScript2015，用它我们可以简化我们的代码，并利用其提供的强大功能来快速实现我们的js逻辑；
• webpack 是一个强大的文件打包工具，可以将我们前端项目文件统一打包压缩到js中，用vue-loader加载器实现语法转化与加载
• babel 是一款将es6 代码转化为浏览器兼容的es5代码的插件

2.构建大型应用

项目前端目录及文件构建（vue-cli）

npm install -g vue-cli
vue init webpack my-project
cd my-project
npm install
npm run dev

slice方法

slice方法返回一个从开始到结束(不包括结束)选择的一部分浅拷贝到另一个新数组的对象,且原始数组不会被修改

[].slice.call()或者Array.prototype.slice.call()

• [].slice.call()或者Array.prototype.slice.call(), 就是截取(更重要的是获取,slice是得到的子数组的)函数的参 数, 然后让arguments等伪数组也可以使用数组的各种方法;
• ES6的Array.from()也是类似的用法;不单单可以转换arguments,元素集合,还可以转化类数组对象;
• ES6新增的拓展运算符也可以实现相同的功能

// 按照新的ES6的行为方式实现
function foo(...args) {
    // args已经是一个真正的数组
    // 丢弃args中的第一个元素
    args.shift();
    // 将整个args作为参数传给console.log(..)
    console.log(...args);
}
// 按照前ES6的老派行为方式实现
function bar() {
    // 把arguments转换为一个真正的数组
    var args = Array.prototype.slice.call(arguments);
    // 在尾端添加几个元素
    args.push(4, 5);
    // 过滤掉奇数
    args = args.filter(function(v) {
        return v % 2 == 0;
    })
    // 把整个args作为参数传给foo(..)
    foo.apply(null, args);
}
bar(0, 1, 2, 3); // 2, 4

函数foo(..)声明的...args收集参数,console.log(..)调用中的...args将其展开；

参考

Array.prototype.slice.call()方法详解
Array.prototype.slice() MDN

####1，小程序接口异步问题

• 没有使用别的框架，单纯的按照微信小程序的官方文档来写，所以并不能用es7的 async函数和await，只能用目前小程序所支持的promise,但是对每一个封装有很麻烦
• 解决方案：写一个转换函数，将小程序的所有api转换成promise函数

const wx = {
    fun1: () => console.log(1),
    fun2: ({a, b, success, fail}) => {
        if (a + b > 10) {
            fail('error: a + b > 10');
            return;
        }
        success(a + b);
    },
};
function promiseify(func) {
    return (args) => {
        return new Promise((resolve, reject) => {
            func(Object.assign(args, {
                success: resolve,
                fail: reject,
            }));
        })
    }
}
for (const key in wx) {
    if (Object.prototype.hasOwnProperty.call(wx, key) && typeof wx[key] === 'function') {
        wx[`_${key}`] = promiseify(wx[key]);
    }
}
wx._fun2({a: 3, b: 4}).then(sum => {
    console.log(sum);
}).catch(err => {
    console.log(err);
});

wx._fun2({a: 5, b: 6}).then(sum => {
    console.log(sum);
}).catch(err => {
    console.log(err);
});

前言

程序语言的编码风格指南对于一个长期维护的软件而言是非常重要的;
团队合作需要制定一些代码规范还有利用一些工具来强制要求团队代码的风格统一.毕竟很多情况下以后不一定是由写一手代码的人来维护代码,所以有一个统一的代码风格很重要!!!
最近看了一下编写可维护的JavaScript和编写高质量代码:Web前端开发修炼之道,根据书中提倡的一些写法,同时结合我个人的经验和喜好做了一些改动,大致整理了如下JavaScript编码风格

JavaScript编码风格

1.缩进

每一行的层级由4个空格组成,避免使用制表符(Tab)进行缩进

if (true) {
    doSomething();
}

2.行的长度

每行长度不应该超过80个字符.如果一行多于80个字符,应当在一个运算符(逗号,加好等)后换行.下一级应当增加两级缩进(8个字符).

// 好的写法
doSomething(arg1, arg2, arg3, arg4,
        arg5);

// 不好的写法: 第二行只有4个空格的缩进
doSomething(arg1, arg2, arg3, arg4,
    arg5);
// 不好的写法: 在运算符之前换行
doSomething(arg1, arg2, arg3, arg4
        ,arg5);

3.原始值

特殊值null除了下述情况应当避免使用

• 用来初始化一个变量,这个变量可能被赋值为一个对象
• 用来和一个已经初始化的变量比较,这个变量可以是也可以不是一个对象
• 当函数的参数期望是对象时,被用作返回值传出

// 好的做法
var person = null;

判断一个变量是否定义应当使用 typeof 操作符

// 好的写法
if (typeof variable == 'undefined') {
    // do something
}

// 不好的写法
if (variable == 'undefined') {
    // do something
}

4.运算符间距

二元运算符前后必须使用一个空格来保持表达式的整洁.操作符包括赋值运算符和逻辑运算符

// 好的写法
var found = (values[i] === item);
// 不好的写法: 丢失了空格
var found = (values[i]===item);

// 好的写法
if (found && (count > 10)) {
    doSomething();
}
// 不好的写法: 丢失了空格
if (found&&(count>10)) {
    doSomething();
}

// 好的写法
for(let i = 0; i < count; i++) {
    process(i);
}
// 不好的写法: 丢失了空格
for(let i=0; i<count; i++) {
    process(i);
}

5.括号间距

当使用括号时,紧接左括号之后和紧接右括号之前不应该有空格

// 好的写法
var found = (values[i] === item);
// 不好的写法: 左括号之后有额外的空格
var found = ( values[i] === item);

// 好的写法
if (found && (count > 10)) {
    doSomething();
}
// 不好的写法: 右括号之后有额外的空格
if (found && (count > 10) ) {
    doSomething();
}

// 好的写法
for(let i = 0; i < count; i++) {
    process(i);
}
// 不好的写法: 参数两边有额外的空格
for(let i = 0; i< count; i++) {
    process( i );
}

6.对象直接量

对象直接量应当使用如下格式

• 起始左花括号应当同表达式保持同一行
• 每个属性的名值对应当保持一个缩进,第一个属性应当在左花括号后另起一行.
• 每个属性的名值对应当使用不含引号的属性名,其后紧跟一个冒号(之前不含空格),而后是值
• 倘若属性值是函数类型,函数体应当在属性名之下另起一行,而且其前后均应保留一个空行
• 一组相关的属性前后可以插入空行以提高代码的可读性
• 结束的右花括号应当独占一行

// 好的写法
var object = {

    key1: value1,
    key2: value2,

    func: function() {

    },

    key3: value3,
};

// 不好的写法: 不恰当的缩进
var object = {
        key1: value1,
        key2: value2,
    };

// 不好的写法:函数体缺少空行
var object = {

    key1: value1,
    key2: value2,
    func: function() {

    },
    key3: value3,
};

当对象字面量作为函数参数时,如果值是变量,起始花括号应当同函数名在同一行.所有其余先前列出的规则同样适用

// 好的写法
doSomething({
    key1: value1,
    key2: value2,
});

// 不好的写法
doSomething({ key1: value1, key2: value2 });

7.注释

频繁地适用注释有助于他人理解你的代码.如下情况应当使用注释

• 代码晦涩难懂
• 可能被误认为错误的代码
• 必要但不明显的针对特定浏览器的代码
• 对于对象,方法或者属性,生成文档是有必要的(使用恰当的文档注释).

1).单行注释

使用单行注释当用来说明一行代码或者一组代码.单行注释可能有三种使用方式

• 独占一行的注释,用来解释下一行代码
• 在代码行的尾部的注释,用来解释它之前的代码
• 多行,用来注释掉一个代码块

// 好的写法
if (condition) {

    // 如果代码执行到这里,则说明通过了所有的安全性检测
    allowed();
}

// 不好的写法:注释之前没有空行
if (condition) {
    // 如果代码执行到这里,则说明通过了所有的安全性检测
    allowed();
}

// 不好的写法: 错误的缩进
if (condition) {

// 如果代码执行到这里,则说明通过了所有的安全性检测
    allowed();
}

// 不好的写法: 这里应当用多行注释
// 接下来的这段代码非常难, 那么,让我详细的解释一下
// 1. xxxx
// 2. xxxx
if (condition) {

// 如果代码执行到这里,则说明通过了所有的安全性检测
    allowed();
}

对于代码行尾单行注释的情况,应确保代码结尾同注释之间至少一个缩进

// 好的写法
var result = something + somethingElse; // somethingElse will never be null

// 不好的写法: 代码和注释间没有足够的空格
var result = something + somethingElse;// somethingElse will never be null

注释一个代码块时在连续多行使用单行注释是唯一可以接受的情况.多行注释不应当在这种情况下使用

// 好的写法
// if(condition) {
//     doSomething();
// }

2).多行注释

多行注释应当在代码需要更多文字去解释的时候使用.每个多行注释都至少有如下三行.
1.首行仅仅包括 /* 注释开始.该行不应当有其他文字
2.接下来的行以 * 开头并保持左对齐.这些行可以由文字描述
3.最后一行以 */开头并同先前行保持对齐.也不应当有其他文字

多行注释的首行应当保持同它描述代码的相同层次的缩进.后续的每行应当有同样层次的缩进并附加一个空格(为了适当保持 * 字符的对齐).每一个多行代码之前应当预留一个空格

// 好的写法
if (condition) {

    /*
     * 如果代码执行到这里
     * 说明通过了所有的安全性检测
    */
    allowed();
}

// 不好的写法: 注释之前无空行
if (condition) {
    /*
     * 如果代码执行到这里
     * 说明通过了所有的安全性检测
    */
    allowed();
}
// 不好的写法: 星号后没有空格
if (condition) {

    /*
     *如果代码执行到这里
     *说明通过了所有的安全性检测
    */
    allowed();
}
// 不好的写法: 错误的缩进
if (condition) {

/*
 * 如果代码执行到这里
 * 说明通过了所有的安全性检测
*/
    allowed();
}

// 不好的写法: 代码尾部注释不要用多行注释格式
var result = something + somethingElse; /* somethingElse 不应当取值为null */

3)注释声明

注释有时候可以用来给一段代码声明额外的信息.这些声明的格式以单个单词打头并紧跟一个双引号.可使用的声明如下

• TODO: 说明代码还未完成.应当包含下一步要做的事情
• HACK: 表明代码实现走了一个捷径
• XXX: 说明代码是有问题的并应当尽快修复
• FIXME: 说明代码是有问题的并应当尽快修复.重要性略次于XXX
• REVIEW: 说明代码任何可能的改动都需要评审

8.命名

变量命名应当采用驼峰命名格式,首字母小写,每个单词首字母大写.变量名的第一个单词应当是一个名词(而非动词)比避免同函数混淆.不要在变量名中使用下划线

// 好的写法
var myName = 'Jack';

// 不好的写法: 大写字母开头
var MyName = 'Jack';

// 不好的写法: 动词开头
var getMyName = 'Jack';

// 不好的写法: 使用下划线
var my_name = 'Jack';

函数命名应当采用驼峰命名格式.函数名的第一个单词应当是动词(而非名词)来避免同变量混淆.函数名中最好不要使用下划线.

// 好的写法
function doSomething() {
    // 代码
}

// 不好的写法: 大写字母开头
function DoSomething() {
    // 代码
}
// 不好的写法: 名词开头
function car() {
    // 代码
}
// 不好的写法: 使用下划线
function do_something() {
    // 代码
}

构造函数--通过new元素安抚创建新对象的函数--也应使用驼峰合适命名,首先首字母大写.构造函数命名应当以非动词开头,因为new代表着创建一个对象实例的操作

// 好的写法
function MyObject() {

}
// 不好的写法: 小写字母开头
function myObject() {
    
}
// 不好的写法: 使用下划线
function My_Object() {
    
}
// 不好的写法: 动词开头
function getMyObject() {
    
}

常量(不会被改变的变量)的命名应当是所有字母大写,不同单词之间用单个下划线隔开

// 好的写法
var TOTAL_COUNT = 10;
// 不好的写法
var totalCount = 10;
// 不好的写法: 混合模式
var total_COUNT = 10;

对象的属性同变量的命名规范相同.对象的方法同函数的命名规则相同.如果属性或者方法是私有的,应当在之前加一个下划线

// 好的写法
var object = {
    _count: 10,

    _getCount: function() {
        return this._count;
    }
}

8.赋值

当给变量赋值时,如果右侧是含有比较语句的表达式,需要用圆括号包裹

// 好的写法
var flag = (i < count);

// 不好的写法:遗漏圆括号
var flag = i < count;

9.等号运算符

使用 === (严格相等) 和 !==(严格不相等)代替 ==(相等) 和 !=(不等) 来避免弱类型转换错误

// 好的写法
var same = (a === b);

// 不好的写法: 使用 == 
var same = (a == b);

10.三元操作符

三元运算符应当仅仅用在条件赋值语句中,而不要作为if语句的替代品.

// 好的写法
var value = condition ? value1 : value2;

// 不好的写法: 没有赋值,应当使用 if 表达式
condition ? doSomething() : doSomethingElse();

11.语句

简单语句

每一行最多只包含一条语句.所有简单的语句都应该以分号(;)结束.

// 好的写法
var a = 1;
var b = 2;
var c = a + b;

// 不好的写法: 多个表达式写在一行
var a = 1;var b = 2;var c = a + b;

返回语句

返回语句当返回一个值的时候不应当使用圆括号包裹,除非在某些情况下这么做可以让返回值更容易理解.例如:

return;
return collection.size();
return (size > 0 ? size : defaultSize)

复合语句

复合语句是大括号括起来的语句列表;

• 括起来的语句应当较复合语句多缩进一个层级
• 开始的大括号应当在复合语句所在行的末尾;结束的大括号应当独占一行且同复合语句的开始保持同样的缩进.
• 当括号时控制结构的一部分时,诸如if或者for语句,所有语句都需要用打括号括起来,也包括单个语句.这个约定使得我们更方便地添加语句而不用担心忘记加括号而引起bug
• 像if一样的语句开始的关键词,其后应当紧跟一个空格,起始大括号应当在空格之后

if语句

if (condition) {
    statements
} else if (condition) {
    statements
} else {
    statements
}

绝不允许在if语句中省略花括号

// 好的写法
if (condition) {
    doSomething();
} 
// 不好的写法: 不恰当的空格
if(condition){
    doSomething();
} 
// 不好的写法: 遗漏花括号
if (condition) 
    doSomething();

// 不好的写法: 所有代码写在一行
if (condition) { doSomething(); }
// 不好的写法: 所有代码写在一行且没有花括号
if (condition) doSomething();

for语句

for (initialization; condition; update) {
    statements
}

for (variable in object) {
    statements
}

当使用 for-in 语句时,记得使用 hasOwnProperty() 进行双重检查来过滤出对象的成员

while语句

while (condition) {
    statements
}

do语句

do {
    statements
} while (condition)

switch语句

switch (expression) {
    case expression:
        statements
    default:
        statements
}

switch下的每一个case都叮当保持一个缩进.除第一个之外包括default在内的每一个case都应当在之前保持一个空行
每一组语句(除了default)都应当以break, return, throw结尾,或者用一行注释表示跳过

// 好的写法
switch (value) {
    case 1:
       /* falls through */
    case 2:
        doSomething();
        break;
    case 3:
       return true;
    default:
       throw new Error('this should not happen');
}

try语句

try {
    statements
} catch (variable) {
    statements
} finally {
    statements
}

12.严格模式

严格模式应当仅限在函数内部使用,千万不要在全局使用.

ES6 的模块自动采用严格模式，不管你有没有在模块头部加上"use strict";。

13.变量声明

所有的变量在使用前都应事先定义.变量定义应放在函数开头.
变量定义前应当初始化,并且赋值操作符应当保持一致的缩进.初始化的变量应当在未初始化变量之前.

14.函数声明

函数声明应当在使用前提前定义.
一个不是作为方法的函数(也就是没有作为一个对象的属性)应当使用函数定义的格式(不是函数表达式和Function构造器格式).
函数名和开始圆括号之前不应当有空格.结束的圆括号和右边的花括号之间应该留一个空格.右侧的花括号应当同function关键字保持同一行.开始和结束括号之间不应该有空格.参数名之间应当在逗号之后保留一个空格.函数体应当保持一级缩进

// 好的写法
function doSomething(arg1, agr2) {
    return arg1 + arg2;
}
// 不好的写法: 第一行不恰当的空格
function doSomething (arg1, agr2) {
    return arg1 + arg2;
}
// 不好的写法: 
var doSomething = function doSomething(arg1, agr2) {
    return arg1 + arg2;
}
// 不好的写法: 左侧的花括号位置不对
function doSomething(arg1, agr2)
{
    return arg1 + arg2;
}
// 错误的写法: 使用Function构造器
var doSomething = new Function('arg1', 'agr2', 'return arg1 + arg2');

15.留白

在逻辑相关的代码块之间添加空行可以提高代码的可读性

两行空行权限在如下情况使用

• 在不同的源代码文件之间
• 在类和接口定义之间

单行空行权限在如下情况使用

• 方法之间
• 方法中局部变量和第一行语句之间
• 多行或单行注释之前
• 方法中逻辑代码块之间以提高代码的可读性

空格应当在如下情况中使用

• 关键词后跟括号的情况应当用空格隔开
• 参数列表中逗号之后应当保留一个空格
• 所有的除了点(.)之外的二元运算符,其操作数都应当用空格隔开.单目运算符的操作数之间不应该用空白隔开,诸如一元减号,递增(++),递减(--)
• for语句中的表达式之间应当用空格隔开

16. 需要避免的

• 切勿使用像String一类的原始包装类型创建的新对象
• 避免使用eval()
• 避免使用with语句.改语句在严格模式中不复存在,可能在未来也将去除

使用工具(eslint)来强制约束

eslint 规则

eslint规则在.eslintrc.js中定义,觉得不合理的可以禁掉某条规则,或者有好的建议的也可以添加;
主要注意一下几条:

• 代码缩进用4空格
• 语句必须默认后加分号
• 使用单引号
• 提交代码前将console.log语句删掉或注释掉(不然影响其他开发人员调试)
• 禁止使用var,使用es6的let,const声明变量

还有一些情况是不需要检测的,例如第3方的库, 框架、组件、ui库等等,可以将这些文件放在.eslintignore文件中,可以忽略eslint的检测

在文件顶部加上下面这行,可以禁掉整个文件的eslint规则

/* eslint-disable */

pre-commit

代码提交之前会强制code-review,不符合规范的不允许提交代码
使用方法
1.在命令行安装

npm i --save-dev pre-commit

2.在package.json中配置

{
    "scripts": {
        "eslint": "eslint ./ --ext js,vue --ignore-pattern .eslintignore --cache --fix",
        "lint-message": "echo '开始 eslint 检查, 存在 error 则会拒绝提交'"
    },
    "pre-commit": [
        "lint-message",
        "eslint" // 进行eslint检查并自动修复一些简单的格式错误
    ],
}

代码提交之前会强制code-review,不符合规范的不允许提交代码

如果项目实在没时间去改的话，可以 git commit -m 'XXX' --no-verify 或 git commit -n 'xxx' 强制提交

小技巧-vscode可以配置保存自动修复eslint错误

vscode安装eslint插件,在配置中配置如下

{
     "eslint.autoFixOnSave": true,
     "eslint.enable": true,
     "eslint.options": {
        "extensions": [".js", ".vue", ".jsx"]
     },
     "eslint.validate": [
          {

              "language": "vue",
              "autoFix": true
          },
          {
              "language": "javascript",
              "autoFix": true
          },
          {
              "language": "javascriptreact",
              "autoFix": true
          }
      ],
}

参考

• 编写可维护的JavaScript
• 编写高质量代码:Web前端开发修炼之道
• ESLint

什么是tree-shaking

通过工具'摇'我么的JS文件,将其中用不到的代码'摇'掉;
具体来说, 在webpack项目中,有一个入口文件,相当于一棵树的主干,m入口文件有很多依赖模块,相当于树枝.实际情况中,虽然依赖了某个模块,但其实只使用其中的某些功能,通过tree-,shaking,将没有使用的模块摇掉,这样来达到删除无用代码的目的;
支持tree-shaking的构建工具

• Rollup
• Webpack2
• Closure compiler

tree-shaking原理

Tree-shaking的本质是消除无用的js代码. 无用代码消除在广泛存在于传统的编程语言编辑器;编译器可以判断出哪些代码根本不影响输出,然后消除这些代码,这个称之为DCE(dead code elimination);

Tree-shaking是DCE的一种新的实现,JavaScript同传统的编译语言不同的是,javascript绝大多数情况需要通过网络进行加载,然后执行,加载的文件大小越小,整体执行时间更短,所以去除无用代码以减少文件体积,对JavaScript来说更有意义

Tree-shaking和传统的DCE方法又不太一样,传统的DCE消灭不可能执行的代码,而Tree-shaking更关注与消除没有用到的代码

编译型语言:程序执行之前,有个单独的编译过程,将程序翻译成机器语言,以后执行这个程序的时候,就不用再进行翻译了;
解释性语言: 是在运行的时候将程序翻译成机器语言,所以运行速度相对于编译型语言要慢
https://zhidao.baidu.com/question/193596037.html

(1)DCE消除大法

• 代码不会被执行,不可到达
• 代码执行的结果不会被用到
• 代码只会影响死变量(只写不读)

传统编译型的语言中,都是由编译器将Dead Code从AST(抽象语法树)中删除,那Javascript中由谁来做DCE呢
首先肯定不是浏览器做DCE,因为当我们的代码送到浏览器,那还谈什么消除无法执行的代码来优化,所以肯定是送到浏览器之前的步骤进行优化

(2) Tree-shaking

主要关注与无用模块的消除
消除原理依赖ES6的模块特性
ES6 module特点

• 只能作为模块顶层的语句出现
• import的模块名只能是字符串变量
• import binding是immutable的

ES6模块依赖关系是确定的,和运行时的状态无关,可以进行可靠度的静态分析,这是Tree-shaking的基础
所谓静态分析就是不执行代码,从字面量上对代码进行分析,ES6之前的模块化,如果动态require一个模块,只有执行后才知道引用的什么模块,不能通过静态分析去优化;

无用的类不能消除

• rollup只处理函数和顶级的import/export变量,不能把没用到的类的方法消除掉
• JavaScript动态语言的特性使得静态分析比较困难

参考

• Tree-Shaking性能优化实践 - 原理篇
• 你的Tree-Shaking并没什么卵用

说一说cookie

设置cookie => cookie被自动添加到request header中 => 服务端接收到cookie

cookie怎么工作的

当网页要发送http请求时, 浏览器会先检查是否有相应的cookie, 有则自动添加request header字段中.这些事浏览器自动帮我们做的, 而且每一次http请求浏览器都会自动帮我们做;
每个域名下的cookie的大小最大为4kb, 每个域的cookie数量最多为20个

cookie的格式

如何设置cookie

cookie既可以由服务端设置, 也可以由客户端来设置

服务端设置cookie

不管你是请求一个资源文件(如html/js/css/图片), 还是发送一个ajax请求, 服务端都会返回response.而response header中有一项叫set-cookie, 是服务端专门用来设置cookie的;

• 一个set-cookie只能设置一个cookie, 当你想设置多个, 需要添加同样多的set-cookie
• 服务端可以设置cookie的所有选项: expires, domain, path, secure, HttpOnly

客户端设置cookie

document.cookie = "name=xiaoming; age=12 "

• 客户端可以设置cookie的一下选项: expires, domain, path, secure(只有在https协议的网页中, 客户端设置secure类型cookie才能生效), 但无法设置httpOnly选项

cookie的属性

domain表示cookie所在的域

a.com默认的domain是a.com, test.a.com和test1.a.com访问都会有跨域问题, 如果想一个cookie所有以"a.com"结尾的域名中都可以访问, 则需要设置domain为".a.com";

domain可以访问该Cookie的域名。如果设置为“.baidu.com”，则所有以“baidu.com”结尾的域名都可以访问该Cookie；第一个字符必须为“.”

path表示cookie的使用路径

isHttpOnly

cookie和session的区别

cookie保存在客户端, session保存在服务端
常用的是sessionId存在cookie中

原生编辑器

浏览器提供了两个原生属性

• contenteditable
  contenteditable特性, 指定某一容器变成可编辑区域, 即用户可以在容器内直接输入内容, 或者删减处理
• document.execCommand()
  对于选中的某一结构体, 执行一个命令, 譬如赋予黑体格式

1. 浏览器兼容问题
2. 只接受有限的command()

存在一下的问题:

• 兼容性问题
• 能力局限

TouchEvent(触摸事件)

TouchEvent是一类描述手指在触摸平面(触摸屏, 触摸板等)的状态变化事件.这类事件用于描述一个或多个触电, 使开发者可以检测触点的移动, 触点的增加和减少等
每个touch对象代表一个触点:每个触点都由位置, 大小, 形状, 压力大小和目录element描述.TouchList对象代表多个触点的一个列表

• touchstart: 当手指触摸屏幕时触发；即使已经有一个手指放在了屏幕上也会触发
• touchmove: 当手指在屏幕上滑动时连续的触发。在这个事件发生期间，调用preventDefault()可阻止滚动。
• touchend: 当手指从屏幕上移开时触发。
• touchcancel: 当系统停止跟踪触摸时触发。关于此事件的确切触发事件，文档中没有明确说明。

除了常见的DOM属性以外, 触摸事件还包含下列用于跟踪触摸的属性

• touches: 表示当前跟踪的触摸操作的Touch对象的数组。
• targetTouches: 特定于事件目标的Touch对象的数组。
• changeTouches: 表示自上次触摸以来发生了什么改变的Touch对象的数组。

每个touch对象包含下列属性

• screenX: 触摸点相对于屏幕的位置
• screenY: 触摸点相对于屏幕的位置的位置(Y坐标)
• clientX: 触摸点相对于浏览器窗口的位置(X坐标)
• clientY: 触摸点相对于浏览器窗口的位置
• pageX: 触摸点相对于页面的位置(X坐标)
• pageY: 触摸点相对于页面的位置(Y坐标)
• identifier: 表示触摸的唯一ID
• target:

GestureEvent(手势事件)

非标准的事件;
当两个手指触摸屏幕时就会产生手势

• gesturestart: 当一个手指已经按在屏幕上面另一个手指有触摸屏幕时触发。
• gesturechange: 当触摸屏幕的任何一个手指的位置发生变化时触发。
• gestureend: 当任何一个手指从屏幕上面移开时触发。

DragEvent(拖拽事件)

• dragstart
• drag
• dragend

参考

• HTML5 手势检测原理和实现
• 鼠标按钮button属性
• 拖放

1. 带着问题去阅读
   读每个章节之前, 先自己给自己提几个问题, 读完这个章节之后看有没有把这个问题给弄明白, 如果不明白,就反复阅读跟这个问题有关的部分.
   突然一下子理解了在学校的时候语文设置阅读理解这个部分的意义了

类型

null

console.log(typeof null);  // object

原理: 不同的对象在底层都表示为二进制,而javascript二进制前三位都为0的话会被判断为object类型,null的二进制表示是全0,自然前三位也是0, 所以执行typeof 时会返回object
函数值对象的一个子类型(从技术角度来说就是'可调用的对象')

内置对象

• String
• Number
• Boolean
• Object
• Function
• Array
• Date
• RegExp
• Error

var strObject = new String('I am a string');
Object.prototype.toString.call(strObject); // [Object String]

原始值I am a string 并不是一个对象,它只是一个字面量,而且是一个不可变的值,如果要在这个字面量上执行一些操作,比如获取
长度,访问其中某个字符,那就需要将其转换为String对象;

var strObject = 'I am a string';
console.log(strObject.length);
console.log(strObject.charAt(3));

引擎自动将字面量转换成String对象,所以可以访问属性和方法;类似 1.2345.toFixed(2)的方法,引擎会把1.2345转换为new Number(1.2345);
null和undefined没有对象的构造形式,只有文字形式;Date只有构造形式,没有文字形式;
Object,Array,Function, RegExp,无论使用文字形式还是构造形式,他们都是对象,不是字面量;

内容

.操作符和[]操作符;.a语法为'属性访问', ['a]语法是'键访问';区别['..']可以接受任意UTF-8/Unicode字符串作为属性名;
在对象中,属性名永远都是字符串

1.可计算属性名
[]包裹一个表达式来当做属性名

存在性

in操作符会检查属性是否在对象及其[[prototype]]原型链中, hasOwnProperty(..)只会检查属性是否在myObject对象中,不会检查[[protoType]]链;
普通对象都可以对于 Object.prototype的委托来访问 hasOwnProperty(..),但是有的对象可能没有连接到 Obeject.prototype(Object.create(null)),这种可以使用 Object.prototype.hasOwnProperty.call(myObject, 'a')

in操作符是检查容器内是否有某个值,实际上检查的是某个属性名是否存在,对于数组来说这个区别很重要, 4 in [2, 4 ,6]的结果并不是你所期待的true, 因为[2, 4, 6]这个数组中包含的属性名为 0, 1, 2, 没有4

for in 遍历对象是无法获取属性值的,它实际遍历的是对象中所有可枚举属性,需要手动获取属性值;
且遍历对象属性时的顺序是不确定的;

for of

for of 循环首先会向被访问对象请求一个迭代器对象,然后通过调用迭代器对象的next()方法来遍历所有值;
遍历数组

var myObject = {
    a: 2,
    b: 3,
};

Object.defineProperty(myObject, Symbol.iterator, {
    enumerable: false,
    writable: false,
    configurable: true,
    value: function () {
        var o = this;
        var idx = 0;
        var ks = Object.keys(o);
        return {
            next: function() {
                return {
                    value: o[ks[idx++]],
                    done: (idx > ks.length),
                }
            }
        }
    }
})
var it = myObject[Symbol.iterator]();
console.log(it.next());
console.log(it.next());
console.log(it.next());

/*
{ value: 2, done: false }
{ value: 3, done: false }
{ value: undefined, done: true }
*/

求数组arr中的最大的值

方法一： 0.072s

var arr = [[1, 2, ,3], 4, -1, [11, 22, 33, 45, [7, 123, 1]], 98, [[123]]];
function maxOfArr() {
    var targetArr = [];
    // forEach为es5的数组迭代方法
    // 展开多维数组为一维数组的函数，递归调用
    var fnExpandArray = function (arr) {
        arr.forEach(function(item) {
            if (Array.isArray(item)) {
                fnExpandArray(item);
            } else {
                targetArr.push(item);
            }
        });
    }
    fnExpandArray(arr);
    // console.log(targetArr);

    // 求出最大值得函数，假设第一个值为最大值，并且与后面的值进行比较
    var fnMax = function (arr) {
        var max = arr[0];
        arr.forEach( function (item) {
            if(item > max) {
                max = item;
            }
        })
        return max;
    }
console.log('最大值是' + fnMax(targetArr));
}
maxOfArr();

方法二： 0.068s

 function maxAndMin(arr) {
   return {
        max: Math.max.apply(null, arr.join(',').split(',')),
        min: Math.min.apply(null, arr.join(',').split(',')),
     }
 }
 console.log(maxAndMin([[1, 2, ,3], 4, -1, [11, 22, 33, 45, [7, 123, 1]], 98, [[123]]]));

使用css自定义属性实现一键换肤功能

css自定义属性简介

css 的自定义属性功能(var), 在css中使用变量,和less及scss不同的是,在js中可以直接修改变量值;

用法: MDN

它们使用自定义属性符号（例如--main-color: black;）进行设置，并使用var()函数。
例如: color: var(--main-color);

:root {
  --main-color: brown;
}

.one {
  color: white;
  background-color: var(--main-color);
  margin: 10px;
  width: 50px;
  height: 50px;
  display: inline-block;
}

可以在javascript中设置

// get variable from inline style
element.style.getPropertyValue("--my-var");

// get variable from wherever
getComputedStyle(element).getPropertyValue("--my-var");

// set variable on inline style
element.style.setProperty("--my-var", 'red');

浏览器支持
css自定义属性目前支持的浏览器有

使用css-vars-polyfill

polyfill

补充polyfill 的简单解释
polyfill用于表示根据新特性的定义,创建一段与之行为等价但能够在旧的javascript环境中运行的代码

引用 wiki 里的一句话解释

In web development, a polyfill is code that implements a feature on web browsers that do not support the feature. Most often, it refers to a JavaScript library that implements an HTML5web standard, either an established standard (supported by some browsers) on older browsers, or a proposed standard (not supported by any browsers) on existing browsers. Formally, "a polyfill is a shim for a browser API".

可以这样简单的理解一下:
css自定义变量在IE浏览器中无法使用,但是使用了css-vars-polyfill ,就可以让我们在IE9+中也可以使用该属性;
还记得 babel-polyfill 么, babel允许我们使用es6的语法,它主要是把es6的语法转成大多数浏览器可是支持的es5语法, 可以使用 工具 来看一下平常所写的es6语法对应到es5是什么样的, 例如

但是像 Array.from , Object.assign, Array.prototype.includes, promise, async ,await 这些都是es5语法中没有的,我们还是想使用,但是很多浏览器不支持怎么办, babel-polyfill就是帮我们解决这个问题的

gzip压缩简介

1. 为什么要开启gzip压缩?

加快资源加载速度

2.开启gzip为什么会加快资源加载速度?

没有开启压缩的时候, 资源加载时间为: 获取资源时间 + 资源下载时间
开启压缩的时候, 资源加载时间为: 压缩资源时间 + 获取压缩后资源时间 + 下载压缩后的资源时间 + 解压缩资源时间
咋一看开启压缩后的时候比没开启压缩时间要多一个压缩和解压缩的时间, 举个例子, 获取一个js文件比如没开始压缩的时候, 所用时间为 5ms + 5ms = 10ms; 开启压缩的时间为 1ms + 2ms+ 2ms + 1ms = 6ms, 这样算下来, 开启压缩就会加快资源加载速度.

但是并不是什么资源开启压缩之后都会加快资源加载速度, 像图片资源这种就不需要开启压缩, 因为图片这种不会压缩很多, 因为它们已经内置了压缩

3.怎么在nginx开启gzip压缩

# 开启gzip
gzip on;
# 启用gzip压缩的最小文件，小于设置值的文件将不会压缩
gzip_min_length 1k;
# gzip 压缩级别，1-10，数字越大压缩的越好，也越占用CPU时间，后面会有详细说明
gzip_comp_level 2;
# 进行压缩的文件类型。javascript有多种形式。其中的值可以在 mime.types 文件中找到。
gzip_types text/plain application/javascript application/x-javascript text/css application/xml text/javascript;