认知学习法

时间 2019-11-29

标签认知学习繁體版

原文原文链接

什么是ip代理html

《Python 3网络爬虫开发实战》前端

代理实际上指的就是代理服务器，英文叫做proxy server，它的功能是代理网络用户去取得网络信息。形象地说，它是网络信息的中转站。【在咱们正常请求一个网站时，是发送了请求给Web服务器，Web服务器把响应传回给咱们。若是设置了代理服务器，实际上就是在本机和服务器之间搭建了一个桥，此时本机不是直接向Web服务器发起请求，而是向代理服务器发出请求，请求会发送给代理服务器，而后由代理服务器再发送给Web服务器，接着由代理服务器再把Web服务器返回的响应转发给本机。这样咱们一样能够正常访问网页，但这个过程当中Web服务器识别出的真实IP就再也不是咱们本机的IP了，就成功实现了IP假装，这就是代理的基本原理。】node

简单的 nodejs http.request 示例。重点关注host参数和port参数便可git

// http://nodejs.cn/api/http.html#http_http_request_options_callback
// http://yijiebuyi.com/blog/8221eb14c8482e7efd1868946e99ea7c.html

var postData = JSON.stringify({
        'Phone': mobile,
        'Code': code,
        'Pwd': pwd,
        'Share': share
});

const opt = {
   host: '119.10.67.144', // 这里放代理服务器的ip或者域名，千万不能加http port: '808', // 这里放代理服务器的端口号
    method: 'POST',
    path: 'http://192.168.0.102',
    timeout: 30000,
    headers: {
        'Content-Type': 'application/json;charset=utf-8',
        'X-Requested-With': 'XMLHttpRequest',
        'Content-Length': postData.length
    },
};

const req = http.request(opt, function (res) {
    console.log(`状态码: ${res.statusCode}`);
    console.log(`响应头: ${JSON.stringify(res.headers)}`);

    res.setEncoding('utf8');

    res.on('data', function (data) {
          console.log(`响应主体: ${data}`);
    });

    res.on('end', () => {
        console.log('响应中已无数据。');
    });
});

req.on('error', (e) => {
    console.error('err', e.message);
});

req.write(postData);
req.end();

一、对于延展运算符 / 扩展运算符的理解
参考连接es6

【请注意，它是数组的扩展，而不是对象的。因此只能用于数组。这个思惟必定要肯定好。】github

总的来讲，扩展运算符的做用主要有如下两点：json

一、将多个数值压缩成一个数组。设计模式

function fuck(...argv) {
console.log(argv.join("")); // 12345
}

fuck(1, 2, 3, 4, 5)

二、将一个数组扩展为多个逗号分隔的数值序列。前端工程化

console.log(1, ...[2, 3, 4], 5) // 1 2 3 4 5

// before
array.push(1, 2, 3, 4, 5)
// after
var foo = [1, 2, 3, 4, 5]
array.push(...foo)

另外，学习同样东西最快的方法，就是试图了解它为什么出现。事实上，做者是尝试用扩展运算符来代替 arguments + apply

/**
 * es5 示例
 * 一、代替apply
 * 二、代替arguments
 * 三、省略了将arguments转化为数组的过程
 */
var fn = [].shift.call(arguments);
var args = [].slice.call(arguments);
fn.apply(args);

// es6 示例
fn(...args)

一、JavaScript中定义枚举

var Color;
(function (Color) {
    Color[Color["Red"] = 1] = "Red";
    Color[Color["Green"] = 2] = "Green";
    Color[Color["Blue"] = 4] = "Blue";
})(Color || (Color = {}));

console.log(Color);

一、为何js中要用void 0 代替undefined，有特别的含义呢？

在ES5以前，window下的undefined是能够被重写的，因而致使了某些极端状况下使用undefined会出现必定的差错。

void 0 === undefined // true

补充一下：非严格模式下，undefined是能够重写的，严格模式则不能重写。

一、Function.bind的做用和实现

《JavaScript设计模式与开发实践 p51》

大部分高级浏览器都实现了内置的 Function.prototype.bind ，用来指定函数内部的 this 指向，
即便没有原生的 Function.prototype.bind 实现，咱们来模拟一个也不是难事，代码以下：

Function.prototype.bind = function(context) {
    var self = this; // 保存原函数
    return function() { // 返回一个新的函数
        return self.apply(context, arguments); // 执行新的函数的时候，会把以前传入的 context
        // 看成新函数体内的 this
    }
};
var obj = {
    name: 'sven'
};
var func = function() {
    alert(this.name); // 输出：sven
}.bind(obj);

func();

这是一个简化版的bind，同时也说明了bind的第一个做用，就是改变函数中的this指向。（不知道对于箭头函数有没有做用？但暂时不考虑这些）

再来看一个复杂点的实现：

Function.prototype.bind = function() {
    var self = this, // 保存原函数
        context = [].shift.call(arguments), // 须要绑定的 this 上下文
        args = [].slice.call(arguments); // 剩余的参数转成数组
    return function() { // 返回一个新的函数
        return self.apply(context, [].concat.call(args, [].slice.call(arguments)));
        // 执行新的函数的时候，会把以前传入的 context 看成新函数体内的 this
        // 而且组合两次分别传入的参数，做为新函数的参数
    }
};
var obj = {
    name: 'sven'
};
var func = function(a, b, c, d) {
    alert(this.name); // 输出：sven
    alert([a, b, c, d]) // 输出：[ 1, 2, 3, 4 ]
}.bind(obj, 1, 2);
func(3, 4);

先不看实现的过程，先看看使用bind的做用：预参数。
或者说有点【鸠占鹊巢】+【捣蛋王】的意思

总结一下，Function.bind有两个好处
一、修改函数中this的指向（十分相似apply、call）
二、预参数（【鸠占鹊巢】+【捣蛋王】）
咱们能够发现，其实.bind就是.apply的变体。

一、类数组怎么转化为数组?

[].slice.call(arguments)
[].slice.call(document.querySelectorAll('....');)

二、为何babel-loader通常要用.babelrc文件来配置？而不能直接使用options属性来配置？

并非不能，而是存在局限性，譬如说这种options的配置方式，只能做用于test中匹配的文件（一般是.js文件）。而在vue中的es6代码就没法转换了。但若是使用.babelrc就能够解决这种尴尬了。 —— 《前端工程化体系设计与实践》P88

三、什么是科里化？

https://github.com/Chalarangelo/30-seconds-of-code/blob/master/snippets/curry.md

所谓的函数科里化，简单的说就是将函数的参数，变为屡次入参，譬如说，先看看具体的表现形式吧：

Math.min(3, 10, 50 , 2) // 2
// 那么科里化以后就变成这样写了：
curry(Math.min, 3)(10)(50)(2); // 2

四、形参和实参的概念

所谓的形参，就是函数定义时的参数。
所谓的实参，就是使用函数时传入的参数。

https://www.cnblogs.com/52cik/p/js-function-length.html

function.length 能输出函数的形参个数

function test(a, b, c, d) {}
console.log(test.length); // 4 也就是说，形参为4个

function foo () {
    console.log(arguments.length); // 也就是说，实参为10个
}

console.log(foo.length); // 形参为0个
foo(0, 1, 2, 3, 4, 5, 6, 7, 8, 9) // 实参为10个

一、闭包的认知

尽管我知道闭包的意思，也懂得使用闭包，但老是没法一句话说明白，很苦恼。
“所谓的闭包，就是一个引用外部变量的内部函数”
示例以下：

var fuck = function (val) {
    // 一个内部变量
    var cur = val; 
    // 一个内部函数
    return function (v) {
        if (v) {
            // setter
            return cur += v
        } else {
            // setter
            return ++cur
        }
    }
}

var f = fuck(0)
f()    // 1
f()    // 2
f()    // 3
f(100) // 103
f()       // 104
f()       // 105

二、请描述<script>、<script async>和<script defer>的区别？
<script> - HTML 解析中断，脚本被提取并当即执行。执行结束后，HTML 解析继续。
<script async> - 脚本的提取、执行的过程与 HTML 解析过程并行，脚本执行完毕可能在 HTML 解析完毕以前。当脚本与页面上其余脚本独立时，可使用async，好比用做页面统计分析。
<script defer> - 脚本仅提取过程与 HTML 解析过程并行，脚本的执行将在 HTML 解析完毕后进行。若是有多个含defer的脚本，脚本的执行顺序将按照在 document 中出现的位置，从上到下顺序执行。

三、js中各类高度、相对高度、距离高度的认知

- 可视高度 document.documentElement.clientHeight / widow.innerHeight
- 滚动高度 window.scrollY;
- 相对窗口的距离 el.getBoundingClientRect().top

height, innerheight, outerheight, outerheight 四大高度的区别：
一、height元素自己高度
二、innerheight包含padding的高度
三、outerheight包含padding、border的高度
四、outerheight（true）包含padding、border、margin的高度

offset 系列的意义：
offsetHeight/offsetWidth：获取对象的宽高，与style.widtht的区别是：若对象的宽度设定值为百分百宽度，不管页面变大或变小，style.width都返回此百分比；而offsetWidth则返回页面中对象的宽度值而不是百分比。
offsetLeft/offsetTop：表示当前元素对象相对于其定位元素的垂直/水平偏移量

Dom 操做中, after、before、append的区别

一、after 就是在元素的后边（兄弟节点，邻居节点）

el.insertAdjacentHTML('afterend', htmlString);

二、before 就是在元素的前（兄弟节点，邻居节点）

el.insertAdjacentHTML('beforebegin', htmlString);

三、append 就是在元素的里边，也就是插入（添加子节点，插入！）

document.body.appendChild(el);

认知a:斐波那契数列

斐波那契数列因古希腊建筑《伯特农神殿》和雕塑《米罗的维纳斯》上出现的“黄金分割”而闻名，有许多有趣的数学特性。斐波那契数列由两个 1 开端，其后的每一位数字都是前两位数字之和。譬如 1 和 1 的和为 2，1 和 2 的和为 3，2 和 3 的和为 5，3 和 5 的和为 8……一直这样继续计算下去，就获得下面这样的数列。 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, … 这个数列就是“斐波那契数列” 。计算这个数列中相邻两个数的商值，能够获得如表1 所示的结果。能够看到，商值最终慢慢地趋近 1.618。这就是有名的“黄金分割”的由来。

认知零：二进制和十进制

首先想一想平常使用的数字。好比说“渔夫今天打到了238斤鱼”就是十进制计数。十进制就是用0 ~ 9 这十个数字来表示数的数字系统。

与此相似，二进制只使用 0 和 1 来表示数。

举个例子，若是给定十进制数 19，则求对应的二进制数的过程以下。
19÷2 ＝ 9 余 1
9÷2 ＝ 4 余 1
4÷2 ＝ 2 余 0
2÷2 ＝ 1 余 0
1÷2 ＝ 0 余 1
从下往上排列余数后就能够获得二进制数 10011。

认知1、什么是私有方法/属性？就是构造器函数中定义的内容，譬如：

function Person (name) {
    // 私有属性
    this.name = name;
    // 私有方法
    this.getName = function () {
    　　return this.name
    }
}

认知2、优先访问私有方法/属性

function Person(name) {
    // 私有属性
    this.name = name;
    // 私有方法
    this.getName = function() {
        return this.name + "，你正在访问私有方法。"
    }
}

Person.prototype.getName = function() {
    return this.name
}

var p1 = new Person('Tom');
p1.ge

认知3、new 操做到底发生什么事合集

案例一

// 一、建立一个空对象
var p = {};
// 二、能够经过运行 alert( p.__proto__ === person.prototype ) 来验证。结果返回true
p.__proto__ = person.prototype;
// 三、经过这一步，p能够调用person中的属性或函数
person.call(p);

案例二

1）建立一个空对象 instance。
2）instance.__proto__ = instanceClass.prototype
3）将构造器函数里面的 this = instance
4）执行构造器里面的代码
5）断定有没有返回值，若是有，则判断返回值的类型，若是类型为 Object，Array 等复合数据类型，就返回该对象，不然返回this（实例）

案例三

1）先建立一个新的、空的实例对象；
2）将实例对的ua那行，指向构造函数的原型；
3）将构造函数内部的this，修改成指向实例；
4）最后返回该实例对象。

模拟new的过程

function New(func) {
    // 声明一个中间对象，该对象为最终返回的实例
    var res = {};

    if (func.prototype != null) {
        // 将实例的原型指向构造函数的原型
        res.__proto__ = func.prototype;
    }

    // 执行构造函数，而且传递参数
    // 将构造函数内部的this指向修改成res，既实例对象
    var ret = func.apply(res, Array.prototype.slice.call(arguments, 1));

    // 若是构造函数中返回了对象或者函数，那么返回的结果就应该是它们
    if ((typeof ret === 'object' || typeof ret === 'function') && ret !== null) {
        return ret;
    }

    // 默认返回res
    return res;
}

认知四：判断对象是否包含某个属性

console.log('name' in p1);
// 咱们经常使用 in 的这种特性来判断当前页面所处的环境是否在移动端
var isMobile = 'ontouchstart' in document;

认知5、堆、栈与队列

栈：乒乓球盒，盘子、LIFO 、先进后出，后进先出队列：排队安检，FIFO，先进先出，后进后出。堆：一般容易和队里搞混，实际上是能够任意取