Javascript 盲区和 操作实例 笔记
第一個總結：
1.
Splice 函數(shù)是直接對原數(shù)組進行操作，會影響原數(shù)組
Slice 是從原數(shù)組中取一段元素，生成新的數(shù)組，原數(shù)組不變。
第二個總結：
2. 判斷一個對象為數(shù)組類型。三種方法。
第三個總結：
3. push 從數(shù)組末尾加元素，返回新長度。Pop 刪除最后一個元素，并且返回
Unshift 向數(shù)組開頭添加元素，返回新的長度；shift 刪除第一個元素，并且返回。
第四個總結：
4. 截取URL 參數(shù)方法
//截取URL 的相關方法
fucntion queryURLtoString(url){
var str = url.split("?");
var items = str.split("&");
var result = [];
var arr = “”;
for(var i=0;i<items.length;i++){
arr = items.split("=");
result[arr[0]] = arr[1];
}
return result;
}
第五個總結：
5. 同源策略 與跨域請求。這次我一定要弄明白，而且記住。
首先是著名的同源策略
源 ： 源（origin）就是協(xié)議、域名和端口號。
以上url中的源就是：http://www.company.com:80。若地址里面的協(xié)議、域名和端口號均相同則屬于同源。
以下是相對于 http://www.a.com/test/index.html 的同源檢測
? http://www.a.com/dir/page.html ----成功
? http://www.child.a.com/test/index.html ----失敗，域名不同
? https://www.a.com/test/index.html ----失敗，協(xié)議不同
? http://www.a.com:8080/test/index.html ----失敗，端口號不同
假設 在test.com 先的 test.php 頁面。他做出如下事情：
$.ajax({
Type: “get”,
url : ‘http://www.qianduan.com/books.php’
});
這時，頁面會報錯誤，報出跨域請求錯誤。【Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.】因為你發(fā)送的請求不是在你現(xiàn)在的服務器目錄下的資源。還有一種常見如下：
原因如下：1.
2.
同源策略是瀏覽器的一個安全功能，不同源的客戶端腳本在沒有明確授權的情況下，不能讀寫對方資源。所以a.com下的js腳本采用ajax讀取b.com里面的文件數(shù)據(jù)是會報錯的。
? 不受同源策略限制的：
1、頁面中的鏈接，重定向以及表單提交是不會受到同源策略限制的。
2、跨域資源的引入是可以的。但是js不能讀寫加載的內容。如嵌入到頁面中的，，，>等。
?什么是跨域
受前面所講的瀏覽器同源策略的影響，不是同源的腳本不能操作其他源下面的對象。想要操作另一個源下的對象是就需要跨域。
2、跨域的實現(xiàn)形式
? 降域 document.domain
同源策略認為域和子域屬于不同的域，如：child1.a.com 與 a.com，child1.a.com 與 child2.a.com，xxx.child1.a.com 與 child1.a.com
兩兩不同源，可以通過設置 document.damain=‘a.com’，瀏覽器就會認為它們都是同一個源。想要實現(xiàn)以上任意兩個頁面之間的通信，兩個頁面必須都設置 documen.damain=‘a.com’。
此方式的特點：
? 其它類似方法
? JSONP跨域
JSONP和JSON并沒有什么關系！
JSONP的原理：（舉例：a.com/jsonp.html想得到b.com/main.js中的數(shù)據(jù)）在a.com的jsonp.html里創(chuàng)建一個回調函數(shù)xxx，動態(tài)添加
1 function addScriptTag(src) {
2 ? var script = document.createElement(‘script’);
3 ? script.setAttribute(“type”,“text/javascript”);
4 ? script.src = src;
5 ? document.body.appendChild(script);
6 ? }
7 ? window.onload = function () {
8 ? addScriptTag(‘http://b.com/main.js?callback=foo’);
9 ? } //window.onload是為了讓頁面加載完成后再執(zhí)行
10 ? function foo(data) {
11 ? console.log(data.name+“歡迎您”);
12 ? };
//b.com/main.js中的代碼
foo({name:“hl”})
這樣便實現(xiàn)了跨域的參數(shù)傳遞。
采用jsonp跨域也存在問題：
? CORS
CORS是一個W3C標準，全稱是"跨域資源共享"（Cross-origin resource sharing）。
它允許瀏覽器向跨源服務器，發(fā)出XMLHttpRequest請求，從而克服了AJAX只能同源使用的限制。
剛才的例子中，在b.com里面添加響應頭聲明允許a.com的訪問，代碼：
Access-Control-Allow-Origin: http://a.com
然后a.com就可以用ajax獲取b.com里的數(shù)據(jù)了。
注意：此方法IE8以下完全不支持，IE8-10部分支持。詳見caniuse-CORS
詳細內容請參考：跨域資源共享 CORS 詳解
那么現(xiàn)在說說我自己對跨域請求和解決方案了》》》
1.由于瀏覽器的同源策略，在a.com 下請求 b.com 的資源，是不允許的，處于安全考慮，因為不同源。
2.如果要想實現(xiàn)在a.com 下請求 b.com 的資源，那么就是跨域了。就是垮了域名。
3.但是，要想實現(xiàn)跨域，瀏覽器對img ,link ,script ，iframe, a ，標簽這些是不做限制的。
因此就可以使用這些標簽的 src 實現(xiàn)跨域，最經典的就是 使用google 的Jquery CDN 。因此是不是理解了。
那么就動態(tài)生成script標簽，加載src 資源，但是這個src 有要求，要有毀掉函數(shù)。
Src = ‘http://www.test.com/test.ptp?callback=JsonpHandle’ ;
本人對實現(xiàn)跨域的使用。
1.jsonp 看著你們學習的
2. document.domain 和window.name 因為當時在深信服使用 iframe 時需要用到。所以印象深刻。
3.CORS 設置（沒有用過）Access-Control-Allow-Origin: http://a.com
其中動態(tài)生成script 的步驟如下
Function JsonpHandle (data){
} 這個就是處理函數(shù)
var Jsonp = document.createElement(‘script’); //創(chuàng)建標簽
Jsonp.type = ‘text/javascript’;
Jsonp.src = “http://www.qianduan.com/Jsonp.php?callback=JsonpHandle”;
//在header 后面添加這個script 標簽
document.getElementsByTagName(‘head’)[0].appendChild(Jsonp);
第六個總結：
6. 事件委托實現(xiàn)一波
主要流程有以下：獲取父元素，給父元素注冊監(jiān)聽事件，獲取到以后在給子元素注冊監(jiān)聽。
//實現(xiàn)一波事件委托噠
window.onload = function(){
var content = document.getElementById(‘content’);
content.onclick = function(ev){
var e = ev||window.ev;
var target = e.target||e.srcElement;
target.onclick = function(){
alert(‘test’);
}
}
}
第七個總結：
CSS 的彈性布局和多列布局
彈性布局：有很多的屬性設置，其中最主要的就是display 屬性的設置，彈性布局是為了兼容各類屏幕和尺寸大小。
display: -webkit-flex; /* Safari /
display: flex;
多列布局：就是為了防止文本一行顯示，移動麻煩，就用 多列布局，
-moz-column-count:3; / Firefox /
-webkit-column-count:3; / Safari and Chrome */
column-count:3;
第八個總結：
Reflow 回流 和 replain 重繪
首先 ： 弄清楚什么是回流和重繪
1.瀏覽器解析html 源碼，構造出DOM 樹，
2.瀏覽器開始對CSS 進行解析，構造渲染樹。
3.繪制。
4. 重繪與回流
當?shù)谝淮未蜷_一個頁面時，至少會有一次重繪和回流。之后，如果渲染樹發(fā)生了變動，那么可能會觸發(fā)重繪或回流中的一個或二者。
如果渲染樹的結點發(fā)生了結構性變化，例如寬度、高度或者位置上的變化時，那么會觸發(fā)Reflow(回流)的邏輯。我們第一次進入一個頁面時便會至少觸發(fā)一次這個邏輯。
如果渲染樹結點發(fā)生了非結構性變化，例如背景色等的變化時，那么會觸發(fā)Repaint(重繪)的邏輯。
其次，相關觸發(fā)機制
觸發(fā)Repaint或Reflow
我們具體看看哪些操作會導致重繪或回流：
增加、刪除、修改DOM結點
使用display:none;的方式隱藏一個結點會導致repaint與reflow，使用visibility:hidden;進行dom隱藏僅僅導致repaint(沒有結構性變化，僅僅看不見而已)
移動dom或著該dom進行動畫
添加新的樣式，或者修改某個樣式
用戶的一些操作諸如改變?yōu)g覽器窗口大小，調整字體大小，滾動等等
我們看些例子：
var bstyle = document.body.style; // cache
bstyle.padding = “20px”; // reflow, repaint
bstyle.border = “10px solid red”; // another reflow and a repaint
bstyle.color = “blue”; // repaint only, no dimensions changed
bstyle.backgroundColor = “#fad”; // repaint
bstyle.fontSize = “2em”; // reflow, repaint
// new DOM element - reflow, repaint
document.body.appendChild(document.createTextNode(‘dude!’));
第三點：如何減少。
1. 壓縮replaints 和 reflows ，使用CSS 去盡量減少這些，一次性操作完畢。
2. 對多個dom進行操作時，我們可以使用一種“離線”方式。
3. 不要經常去訪問計算后的樣式
第九個總結：
9.1 實現(xiàn)空格的截取，
window.onload = function(){
var _rstrsBtn = document.getElementById(‘rstrsBtn’);
var _strs = document.getElementById(‘strs’);
_rstrsBtn.onclick = function (){
_strs.value = _strs.value.replace(/^(\s|u00A0)+|(\s|u00A0)+$/g,"");
}
};
9.2 判斷文本框內容是否為空
alert(!_strs.value?true:false);
9.3 禁止輸入
9.4 禁止復制粘貼
var _banCopyPaste = document.getElementById(‘banCopyPaste’);
_banCopyPaste.oncopy = function(){
return false;
}
_banCopyPaste.onpaste = function(){
return false;
}
9.4 只運行輸入數(shù)字
這個方式IE 不兼容。
兼容IE 方案，使用正則表達式
var banNumber = document.getElementById(‘banNumber’);
clearNumber = function(tThis){
var _v= tThis.value;
tThis.value = _v.replace(/\D/g,"");
}
’
9.5 限制輸入長度
第二種方式 ，截取的方式。
var limitLength = document.getElementById(“l(fā)imitLength”), //獲取限制對象
clearNonumber = function(tThis){ //清除數(shù)字
var _v = tThis.value,
_vLen = _v.length,
dataLength = tThis.getAttribute(“data-length”),//獲取長度屬性
dataModel = tThis.getAttribute(“data-model”),
subLen = dataLength;
if(_vLen > dataLength) tThis.value = _v.substr(0, subLen);//判斷長度
};
limitLength.onfocus = function(){ //獲取焦點事件
clearNonumber(this);
}
limitLength.onkeyup = function(){ //鍵盤事件
clearNonumber(this);
}
limitLength.onblur = function(){ //失去焦點事件
clearNonumber(this);
}
9.5 輸入框的長度提示實現(xiàn)
測試1：還可以輸入：6個字符
var inputLength = document.getElementById(‘inputLength’);
var remainingLength = document.getElementById(‘remainingLength’);
RemainingLength = function(tThis){
var _v = tThis.value;
var _vlength = _v.length;
var maxLength = tThis.getAttribute(‘data-length’);
remainingLength.innerText = maxLength-_vlength;
if(maxLength-_vlength <= 0)
remainingLength.innerText = 0;
if(_vlength>maxLength){
tThis.value = _v.substr(0,maxLength);
}
}
inputLength.onfocus = function(){
RemainingLength(this);
}
inputLength.onkeyup = function(){
RemainingLength(this);
}
inputLength.onblur = function(){
RemainingLength(this);
}
9.6 類似密碼復雜度提示實現(xiàn)一下
var inputLength = document.getElementById(‘inputLength’);
var remainingLength = document.getElementById(‘remainingLength’);
RemainingLength = function(tThis){
var _v = tThis.value;
var _vlength = _v.length;
var maxLength = tThis.getAttribute(‘data-length’);
var low = document.getElementById(‘low’);
var middle = document.getElementById(‘middle’);
var high = document.getElementById(‘high’);
if(_vlength <= 6){
middle.style.display = ‘none’;
high.style.display = ‘none’;
}
if(_vlength > 6&&_vlength <=12){
middle.style.display = ‘inline’;
high.style.display = ‘none’;
low.style.background = ‘yellow’;
}
if(_vlength > 12){
high.style.display = ‘inline’;
// high.style.display = ‘none’;
low.style.background = ‘yellow’;
middle.style.background = ‘yellow’;
}
9.7 文本框默認提示信息
9.8 提示密碼的相關強度
2.13節(jié),密碼強度實時驗證密碼強度實時驗證
9.8 實現(xiàn)下拉菜單實時更新，省市聯(lián)動效果
下拉框聯(lián)動效果
省級:
市級:
9.9 文件的上傳相關操作 2.37節(jié),JavaScript對上傳文件相關操作JavaScript對上傳文件相關操作
這里，主要了解了，文件的 files[0]的相關屬性。
第十個總結：
第十一個總結：
總結
以上是生活随笔為你收集整理的Javascript 盲区和 操作实例 笔记的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 小苏打可以喷辣椒叶面？
- 下一篇： java美元兑换,（Java实现） 美元