天天10個前端知識點：雜技

我的博客已上線，歡迎前去訪問評論！
無媛無端 - wangchloe的我的博客

---

如下內容如有問題煩請即時告知我予以修改，以避免誤導更多人。

---

• toString() && valueOf()

• JSON stringify & parse

• +new Date()

• Array.prototype.slice.call(arguments, 0) 剖析

• JS Bridge創建Native與H5間通訊

  • Hybrid通訊原理

  • JS Bridge

---

有些平時碰到的很零碎的東西我就隨便插入到這個章節裏了。

1. toString() && valueOf()

• toString() 把一個邏輯值轉換爲字符串，並返回結果。

• valueOf() 返回Boolean對象的原始值

源自知乎

這兩個方法通常是交由JS去隱式調用，以知足不一樣的運算狀況。

在數值運算裏，會優先調用valueOf()，如a+b；

在字符串運算裏，會優先調用toString()，如alert(c)。

<script>
    // 該示例來源於腳本之家
    var bbb = {
        i: 10,
        toString: function() {
            console.log('toString');
            return this.i;
        },
        valueOf: function() {
            console.log('valueOf');
            return this.i;
        }
    }

    alert(bbb); // 10 toString
    alert(+bbb); // 10 valueOf
    alert('' + bbb); // 10 valueOf
    alert(String(bbb)); // 10 toString
    alert(Number(bbb)); // 10 valueOf
    alert(bbb == '10'); // true valueOf
    alert(bbb === '10'); // false
</script>

<script>
    console.log({
        valueOf: function() {
            return 20;
        }
    } * {
        valueOf: function() {
            return 30;
        }
    });     // 600
</script>

2. JSON stringify & parse

json2.js - 引入解決IE7及如下版本JSON未定義問題。

1. JSON.stringify(object); 對象 -> 字符串 將對象字符串序列化成標準JSON字符串

eg: {a:1,b:2} -> "{"a":1,"b":2}"

1. JSON.parse(str); 字符串 -> json對象 將字符串序列化成對象

{"name":"wangchloe","age":"22"} ->

{
    age: "22",
    name: "wangchloe",
    _proto: Object
}

<a href="https://www.baidu.com/" attr1='13'>baidu.com</a>

<script>
    var oA = document.querySelector('a');
    console.log(oA.getAttribute('attr1'));  // 13

    oA.setAttribute('attr1', '14');
    var num = oA.getAttribute('attr1');

    console.log(oA.getAttribute('attr1'));  // 14
    console.log(typeof number);  // string 直接設置自定義屬性只能獲得string類型

    oA.setAttribute('attr1', JSON.stringify({name: 14}));

    var num2 = oA.getAttribute('attr1');

    console.log(num2);  // {"name": "14"}
    console.log(JSON.parse(num2));
    // Object {name: "14"}
    //     name: "14"
    //     -> _proto_: Object

    console.log(JSON.parse(num2).name);  // 14
    console.log(typeof JSON.parse(num2).name);  // number JSON轉化獲得了真正類型
</script>

3. +new Date()

<script>
    s = new Date().toString();
    // "Wed May 17 2017 11:00:16 GMT+0800 (中國標準時間)"

    t = (+new Date()).toString();
    // "1494990039861"
    // +new Date(); 等同於 new Date().getTime(); 簡略寫法，獲得毫秒
</script>

4. Array.prototype.slice.call(arguments, 0) 剖析

將具備length屬性的對象轉成數組

<script>
// array.js slice的內部實現
function slice(start, end) {
    var len = ToUint32(this.length),
        result = [];
    for (var i = start; i < end; i++) {
        result.push(this[i]);
    }
    return result;
}
</script>

<script>
    // 傳入arguments類數組，調用Array.prototype.slice原型方法
    // 並用call()方法，將做用域限定在arguments中
    // 這裏Array.prototype就能夠理解爲arguments
    // 參數0爲slice()方法的第一個參數，即開始位置索引，返回整個數組。
    Array.prototype.slice.call(arguments, 0);
</script>

5. JS Bridge創建Native與H5間通訊

Hybrid通訊原理

背景：原生APP開發中有一個webview的組件(Android中是webview,iOS7如下有UIWebview,7以上有WKWebview),這個組件能夠加載Html文件。

• IOS

  • Object-C可直接調用js，只需調用stringByEvaluatingJavaScriptFromString便可，可直接獲取js返回值。

  • js不可直接調用Object-C，利用 shouldStartLoadWithRequest，需攔截每一個url，對指定的schema進行攔截作相應的本地方法。

• Android

  • Java可直接調用js，但不可直接獲取js返回值。

  • Java註冊addJavascriptInterface 後，js可直接調用Native的接口，並獲取Native的返回值。讓Java跟Javascript更加親密

  • 經過 shouldOverrideUrlLoading，也仍是攔截Web的全部URL請求來達到通訊的目的。

基礎通訊存在如下問題

• Android4.2如下,addJavascriptInterface方式有安全漏洞

• iOS7如下,js沒法調用Native

JS Bridge

• url scheme交互方式是一套現有的成熟方案，能夠完美兼容各類版本，不存在上述問題。

經過JSBridge(JS和Native通訊機制),H5頁面能夠調用Native的api,Native也可調用H5頁面的方法或者通知H5頁面回調。

原理：
（1）初始化建立的一個style.display=none 的iframe,並將iframe.src設置爲自有協議，每次js須要與Native通訊時，js端主動調用iframe.src便可，Native收到請求通知後，反向調用fetchQueue(可見源碼)獲取消息內容；若Native須要與js通訊，直接調用js，並獲取返回值

（2）

• IOS
  js->Native：js將要發送的消息存放在js端->調用iframe.src，觸發通知Native->Native攔截請求，調用js bridge裏面的fetchQueue並獲取返回的消息內容，處理消息->將須要返回的數據經過直接調用js的方式，讓js處理

• Android
  js->Native: 經過 shouldOverrideUrlLoading 攜帶Js的返回值

（3）Native->js: Native可直接調用Js並獲取返回的內容

<script>
function bridgeApp(protocol) {
    var iframe = document.createElement("iframe");
    var iframeStyle = document.createAttribute("style");
    var iframeSrc = document.createAttribute("src");

    iframeStyle.nodeValue = "display:none;width:0;height:0;";
    iframeSrc.nodeValue = protocol;
    iframe.setAttributeNode(iframeStyle);
    iframe.setAttributeNode(iframeSrc);
    document.body.appendChild(iframe);

    setTimeout(function() {
        document.body.removeChild(iframe);
    }, 250);
}
</script>

連續五篇講述Hybrid以及JSBridge解決方案

---

更多內容能夠訂閱本人微信公衆號(無媛無端)，一塊兒開啓前端小白進階的世界！

公衆號不發文的時候推送一些我以爲好用的前端網站或者看到的一些問題的解決方案，也更便於你們交流，就醬。