純日常知識點收集和整理

yeooo 發布于2019-08-01 18:02 / 820人閱讀

摘要：而通過加載的文件內容是能夠被客戶端獲取到的，所以必須遵循同源策略，否則被引入文件的內容會泄漏或者存在其他風險此處可以是服務端的數據接口直接返回需要的信息的美妙之處值在不同的頁面甚至不同域名加載后依舊存在，并且可以支持非常長的值。

一分頁優化

首次查詢的時候緩存結果。這樣情況就變得簡單了，無論是結果條目的數量，總共的頁面數量，還是取出其中的部分條目。

不顯示總共有多少條目。Google搜索結果的分頁顯示就用了這個特性。很多時候你可能看了前幾頁，就夠了。那么我可以這樣，每次我都把結果限制在500條（這個數據越大資源消耗越大）然后你每次查詢的時候，都查詢501條記錄，這樣，如果結果真有501個，那么我們就顯示鏈接 “顯示下500條記錄”。

不顯示總頁面數。只給出“下一頁”的鏈接，如果有下一頁的話。(如果用戶想看上一頁的話，他會通過瀏覽器來回到上一頁的)。那你可能會問我“不顯示總頁面數”怎么知道是不是有下一頁呢？這里有一個很好的小技巧：你在每次顯示你當前頁面條目的時候你都多查詢一條，例如你要顯示第11-20個條目時，你就取出11-21條記錄（多取一條，并不顯示這多取的內容），那么當你發現第21條存在的時候就顯示“下一頁的鏈接”，否則就是末頁了。這樣你就不用每次計算總頁面數量了，特別是在做緩存很困難的時候這樣做效率非常好。

估算總結果數。Google就是這么做的，事實證明效果很好。用EXPLAIN 來解釋你的SQL，然后通過EXPLAIN的結果來估算。EXPLAIN結果有一列”row”會給你一個大概的結果。(這個辦法不是處處都行，但是某些地方效果是很好的)這些辦法可以很大程度上減輕數據庫的壓力，而且對用戶體驗不會有什么影響。

二為什么跨域怎么解決 1 動態創建script標簽

為什么script標簽引入的文件不受同源策略的限制？因為script標簽引入的文件內容是不能夠被客戶端的js獲取到的，不會影響到被引用文件的安全，所以沒必要使script標簽引入的文件遵循瀏覽器的同源策略。而通過ajax加載的文件內容是能夠被客戶端js獲取到的，所以ajax必須遵循同源策略，否則被引入文件的內容會泄漏或者存在其他風險

function loadScript(url, func) {
            var head = document.head || document.getElementByTagName("head")[0];
            var script = document.createElement("script");
            script.src = url;
            script.onload = script.onreadystatechange = function() {
                if(!this.readyState || this.readyState == "loaded" || this.readyState == "complete") {
                    func();
                    script.onload = script.onreadystatechange = null;
                }
            };
            head.appendChild(script);
        }
        window.baidu = {
            sug: function(data) {
                console.log(data);
            }
        }
        loadScript("http://suggestion.baidu.com/su?wd=w", function() {
            console.log("loaded")
        });
//此處可以是服務端的數據接口直接返回需要的信息
//        loadScript("http://localhost:8080/resteasyDemo/rest/echo/test?test=1", function() {
//            console.log("loaded")
//            console.log(name)
//        });

2 window.name+iframe

window.name 的美妙之處：name 值在不同的頁面（甚至不同域名）加載后依舊存在，并且可以支持非常長的 name 值（2MB）。

步驟 1 創建包含獲取和創建iframe代碼的A域名下a.html

步驟 2 創建A域名下的空頁面b.html

目的是當iframe設置跨域后的頁面后立即重新src到同源的b.html頁面，從而完成加載的是跨域頁面而實際src是同源頁面，用來實現同源獲取值

a.html頁面寫如下代碼

function proxy(url, func) {
                var isFirst = true,
                    ifr = document.createElement("iframe"),
                    loadFunc = function() {
                        if(isFirst) {
                            ifr.contentWindow.location = "http://10.149.4.6:8020/b.html";
                            isFirst = false;
                        } else {
                            func(ifr.contentWindow.name);
                            ifr.contentWindow.close();
                            document.body.removeChild(ifr);
                            ifr.src = "";
                            ifr = null;
                        }
                    };

                ifr.src = url;
                ifr.style.display = "none";
                if(ifr.attachEvent) ifr.attachEvent("onload", loadFunc);
                else ifr.onload = loadFunc;

                document.body.appendChild(ifr);
            }

調用跨域頁面

proxy("http://10.149.4.10:8080/c.html", function(data) {
                console.log(JSON.stringify(data));
            });

c頁面設置window.name

3 postMessage HTML5中 XMLHttpRequest level2中的 API

a.com/index.html

b.com/index.html

4 jsonP

不用多說..js標簽執行回調

5 web sockets

var socket = new WebSockt("ws://www.baidu.com");//http->ws; https->wss
socket.send("hello WebSockt");
socket.onmessage = function(event){
    var data = event.data;
}

三事件委托

需要了解的是對象的冒泡事件和捕獲事件(true)

1 針對同一個元素來說捕獲事件和冒泡事件的執行順序取決于對這個元素綁定事件的先后聲明

2 對于除去本身點擊元素外的父元素來說，捕獲事件優先于冒泡事件觸發

e.target和e.currentTarget區別是前者是事件觸發的元素，后者是事件綁定的觸發元素

四實現extend

對淺拷貝的一次遞歸實現了深拷貝

function cloneOriginal(obj) {
                if(typeof obj != "object" && obj != null || obj == null) return obj;
                var temObj = obj.constructor === Array?[]:{};
                for(var key in obj) {
                    temObj[key] = cloneOriginal(obj[key]);
                }
                return temObj;
            }
            
            function extend() {
                if(arguments.length < 2) return arguments;
                var temObj = cloneOriginal(arguments[0]);
                for(var i = 1;i
而其中json解析的方法對于序列化的簡單的拷貝來說可以，但是對于很大沒有完全序列化的對象來說是不行的
例：var a = {name:111,b:function() {}}

五 Event Loop

上圖中，主線程運行的時候，產生堆（heap）和棧（stack），棧中的代碼調用各種外部API，它們在"任務隊列"中加入各種事件（click，load，done）。只要棧中的代碼執行完畢，主線程就會去讀取"任務隊列"，依次執行那些事件所對應的回調函數。
執行棧中的代碼（同步任務），總是在讀取"任務隊列"（異步任務）之前執行

六 同一幀數管理頁面
當頁面動畫非常繁多，并且需要不斷的刷新不同動畫數據的時候，瀏覽器每次收到從Server端發來的消息，js腳本都會將消息的內容作為一個新的文本節點添加到頁面中去。這樣做，會立刻導致HTML文檔的部分DOM樹重構，部分渲染樹重構，部分渲染樹重排，已經部分渲染樹重繪。也就是說，每當瀏覽器收到一條消息，都會執行上面的4個步驟。這樣一來，處理每條消息時，瀏覽器畫在更新渲染頁面上的時間大大超出了js腳本運行所需的時間。于是我們看到的結果就是頁面變得非常卡，用戶體驗極差。

通過setTimeout遞歸調用自己，并且是每隔16ms調用一次，大約一秒60次。每次被調用的時候，該函數都會挨個檢查頁

七 promise詳解
具體API都在這里了
知識點：偏函數應用
偏函數應用  閉包應用的一種
實例：
function joinWords(a,b) { return [a,b].join(" "); }

function prefixer(word) { return function(b) { return joinWords(word,b); } }

var prefixWithHate = prefixer("Hate"); console.log(prefixWithHat("Java"));
prefixer函數授受一個詞作為參數，返回一個函數并預先填入這個詞作為第一個參數，這是利用閉包，word 對于內部函數是可以訪問的，
學習點，
偏函數中的閉包     參數對于子函數永遠可見
函數內用retrurn 返回函數的寫法    
用一個變量獲得成為一個函數，
偏函數設置默認的是值，并不變量，類似閉包實現

八 基本類型和引用類型
ECMAScript 中，所有函數的參數都是按值來傳遞的。基本類型值的傳遞和基本類型變量復制一致（采用在棧內新建值），引用類型值的傳遞和引用類型變量的復制一致（棧內存空間的復制，棧內存放的是指針，指向堆中同一對象

九 bind
Function.prototype.bind_ = function() {
            var t = this,
                param = Array.prototype.slice.call(arguments),
                fn = param.shift(),
                content = param;
            return function() {
                return t.apply(fn, content.concat(Array.prototype.slice.call(arguments)));
            }
        }
        
        //賦值默認值
        var fuzhi = function() {
            var t = this,
                param = Array.prototype.slice.call(arguments),
                fn = param.shift(),
                content = param;
            return function() {
                return fn.apply(this,content.concat(Array.prototype.slice.call(arguments)))
            }
        }
        
        function test(n,name) {
            setTimeout(function() {
                console.log(name);
            },n)
        }
        
        var test_ = fuzhi(test,2000);
        test_("hahah");
}
十 關于new運算符
這是在書中看到的，拿來總結下
當一個函數對象被創建時，Function構造器產生的函數對象會運行這樣的一段代碼：
Function.prototype = {constructor:this}
new的實際意義：
Function.prototype.method = function(name,fn) {
                if(this.prototype[name]) return this;
                this.prototype[name] = fn;
                return this;
            }
            Function.method("new",function() {
                var that = Object.create(this.prototype);
                var other = this.apply(that,arguments);
                return (typeof other === "object" && other) || that;
            })
}
簡單應用例子
//簡單的偽類繼承
            Function.method("jc",function(jcObj) {
                this.prototype = new jcObj();
                return this;
            })
            
            var people = function() {
                this.name = "people";
            }.method("getName",function() {
                console.log(this.name);
            })
            
            var man = function() {
                this.manName = "man";
            }
            .jc(people)
            .method("detail",function() {
                console.log("my father`s name is: "+this.name);
                console.log("my name is: "+this.manName);
            })
            
            var obj = new man();
            obj.detail()
            }
實際簡單總結下就是如下代碼
step1 ：創建構造函數
function A() {
    this.name = "a";
}
var a = new A();
step2 創建a實例使用new經歷了以下四個步驟
1 var obj = {};
2 obj.__proto__ = A.prototype;
3 A.call(obj);
4 return obj;

云服務器 GPU云服務器整理收集大數據收集整理方案服務器日常運行和保養 asp整理目錄和文件

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51536.html

純日常知識點收集和整理

摘要：而通過加載的文件內容是能夠被客戶端獲取到的，所以必須遵循同源策略，否則被引入文件的內容會泄漏或者存在其他風險此處可以是服務端的數據接口直接返回需要的信息的美妙之處值在不同的頁面甚至不同域名加載后依舊存在，并且可以支持非常長的值。一分頁優化首次查詢的時候緩存結果。這樣情況就變得簡單了，無論是結果條目的數量，總共的頁面數量，還是取出其中的部分條目。不顯示總共有多少條目。Googl...

Juven 2019-08-21 17:41 評論0 收藏0
純日常知識點收集和整理

摘要：而通過加載的文件內容是能夠被客戶端獲取到的，所以必須遵循同源策略，否則被引入文件的內容會泄漏或者存在其他風險此處可以是服務端的數據接口直接返回需要的信息的美妙之處值在不同的頁面甚至不同域名加載后依舊存在，并且可以支持非常長的值。一分頁優化首次查詢的時候緩存結果。這樣情況就變得簡單了，無論是結果條目的數量，總共的頁面數量，還是取出其中的部分條目。不顯示總共有多少條目。Googl...

MorePainMoreGain 2019-08-29 13:51 評論0 收藏0
JavaScript文章

摘要：我對知乎前端相關問題的十問十答張鑫旭張鑫旭大神對知乎上經典的個前端問題的回答。作者對如何避免常見的錯誤，難以發現的問題，以及性能問題和不好的實踐給出了相應的建議。但并不是本身有問題，被標準定義的是極好的。這一次，徹底弄懂 JavaScript 執行機制本文的目的就是要保證你徹底弄懂javascript的執行機制，如果讀完本文還不懂，可以揍我。不論你是javascript新手還是老...

mumumu 2019-08-22 13:50 評論0 收藏0