認知學習法

 

什麼是ip代理

《Python 3網絡爬蟲開發實戰》

 

《代理的基本原理》

 

代理實際上指的就是代理服務器，英文叫做proxy server，它的功能是代理網絡用戶去取得網絡信息。形象地說，它是網絡信息的中轉站。【在咱們正常請求一個網站時，是發送了請求給Web服務器，Web服務器把響應傳回給咱們。若是設置了代理服務器，實際上就是在本機和服務器之間搭建了一個橋，此時本機不是直接向Web服務器發起請求，而是向代理服務器發出請求，請求會發送給代理服務器，而後由代理服務器再發送給Web服務器，接着由代理服務器再把Web服務器返回的響應轉發給本機。這樣咱們一樣能夠正常訪問網頁，但這個過程當中Web服務器識別出的真實IP就再也不是咱們本機的IP了，就成功實現了IP假裝，這就是代理的基本原理。】

簡單的 nodejs http.request 示例。重點關注host參數和port參數便可

 

 

// 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();

 

 

 

一、對於延展運算符 / 擴展運算符的理解
參考連接

【請注意，它是數組的擴展，而不是對象的。因此只能用於數組。這個思惟必定要肯定好。】

總的來講，擴展運算符的做用主要有如下兩點：

一、將多個數值壓縮成一個數組。

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，先進先出，後進後出。 堆：一般容易和隊裏搞混，實際上是能夠任意取