Javascript 盲区和 操作实例 笔记
第一個總結(jié)：
1.
Splice 函數(shù)是直接對原數(shù)組進(jìn)行操作，會影響原數(shù)組
Slice 是從原數(shù)組中取一段元素，生成新的數(shù)組，原數(shù)組不變。
第二個總結(jié)：
2. 判斷一個對象為數(shù)組類型。三種方法。
第三個總結(jié)：
3. push 從數(shù)組末尾加元素，返回新長度。Pop 刪除最后一個元素，并且返回
Unshift 向數(shù)組開頭添加元素，返回新的長度；shift 刪除第一個元素，并且返回。
第四個總結(jié)：
4. 截取URL 參數(shù)方法
//截取URL 的相關(guān)方法
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;
}
第五個總結(jié)：
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 ----失敗，端口號不同
假設(shè) 在test.com 先的 test.php 頁面。他做出如下事情：
$.ajax({
Type: “get”,
url : ‘http://www.qianduan.com/books.php’
});
這時(shí)，頁面會報(bào)錯誤，報(bào)出跨域請求錯誤。【Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.】因?yàn)槟惆l(fā)送的請求不是在你現(xiàn)在的服務(wù)器目錄下的資源。還有一種常見如下：
原因如下：1.
2.
同源策略是瀏覽器的一個安全功能，不同源的客戶端腳本在沒有明確授權(quán)的情況下，不能讀寫對方資源。所以a.com下的js腳本采用ajax讀取b.com里面的文件數(shù)據(jù)是會報(bào)錯的。
? 不受同源策略限制的：
1、頁面中的鏈接，重定向以及表單提交是不會受到同源策略限制的。
2、跨域資源的引入是可以的。但是js不能讀寫加載的內(nèi)容。如嵌入到頁面中的，，，>等。
?什么是跨域
受前面所講的瀏覽器同源策略的影響，不是同源的腳本不能操作其他源下面的對象。想要操作另一個源下的對象是就需要跨域。
2、跨域的實(shí)現(xiàn)形式
? 降域 document.domain
同源策略認(rèn)為域和子域?qū)儆诓煌挠?#xff0c;如：child1.a.com 與 a.com，child1.a.com 與 child2.a.com，xxx.child1.a.com 與 child1.a.com
兩兩不同源，可以通過設(shè)置 document.damain=‘a(chǎn).com’，瀏覽器就會認(rèn)為它們都是同一個源。想要實(shí)現(xiàn)以上任意兩個頁面之間的通信，兩個頁面必須都設(shè)置 documen.damain=‘a(chǎn).com’。
此方式的特點(diǎn)：
? 其它類似方法
? JSONP跨域
JSONP和JSON并沒有什么關(guān)系！
JSONP的原理：（舉例：a.com/jsonp.html想得到b.com/main.js中的數(shù)據(jù)）在a.com的jsonp.html里創(chuàng)建一個回調(diào)函數(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”})
這樣便實(shí)現(xiàn)了跨域的參數(shù)傳遞。
采用jsonp跨域也存在問題：
? CORS
CORS是一個W3C標(biāo)準(zhǔn)，全稱是"跨域資源共享"（Cross-origin resource sharing）。
它允許瀏覽器向跨源服務(wù)器，發(fā)出XMLHttpRequest請求，從而克服了AJAX只能同源使用的限制。
剛才的例子中，在b.com里面添加響應(yīng)頭聲明允許a.com的訪問，代碼：
Access-Control-Allow-Origin: http://a.com
然后a.com就可以用ajax獲取b.com里的數(shù)據(jù)了。
注意：此方法IE8以下完全不支持，IE8-10部分支持。詳見caniuse-CORS
詳細(xì)內(nèi)容請參考：跨域資源共享 CORS 詳解
那么現(xiàn)在說說我自己對跨域請求和解決方案了》》》
1.由于瀏覽器的同源策略，在a.com 下請求 b.com 的資源，是不允許的，處于安全考慮，因?yàn)椴煌础?br /> 2.如果要想實(shí)現(xiàn)在a.com 下請求 b.com 的資源，那么就是跨域了。就是垮了域名。
3.但是，要想實(shí)現(xiàn)跨域，瀏覽器對img ,link ,script ，iframe, a ，標(biāo)簽這些是不做限制的。
因此就可以使用這些標(biāo)簽的 src 實(shí)現(xiàn)跨域，最經(jīng)典的就是 使用google 的Jquery CDN 。因此是不是理解了。
那么就動態(tài)生成script標(biāo)簽，加載src 資源，但是這個src 有要求，要有毀掉函數(shù)。
Src = ‘http://www.test.com/test.ptp?callback=JsonpHandle’ ;
本人對實(shí)現(xiàn)跨域的使用。
1.jsonp 看著你們學(xué)習(xí)的
2. document.domain 和window.name 因?yàn)楫?dāng)時(shí)在深信服使用 iframe 時(shí)需要用到。所以印象深刻。
3.CORS 設(shè)置（沒有用過）Access-Control-Allow-Origin: http://a.com
其中動態(tài)生成script 的步驟如下
Function JsonpHandle (data){
} 這個就是處理函數(shù)
var Jsonp = document.createElement(‘script’); //創(chuàng)建標(biāo)簽
Jsonp.type = ‘text/javascript’;
Jsonp.src = “http://www.qianduan.com/Jsonp.php?callback=JsonpHandle”;
//在header 后面添加這個script 標(biāo)簽
document.getElementsByTagName(‘head’)[0].appendChild(Jsonp);
第六個總結(jié)：
6. 事件委托實(shí)現(xiàn)一波
主要流程有以下：獲取父元素，給父元素注冊監(jiān)聽事件，獲取到以后在給子元素注冊監(jiān)聽。
//實(shí)現(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’);
}
}
}
第七個總結(jié)：
CSS 的彈性布局和多列布局
彈性布局：有很多的屬性設(shè)置，其中最主要的就是display 屬性的設(shè)置，彈性布局是為了兼容各類屏幕和尺寸大小。
display: -webkit-flex; /* Safari /
display: flex;
多列布局：就是為了防止文本一行顯示，移動麻煩，就用 多列布局，
-moz-column-count:3; / Firefox /
-webkit-column-count:3; / Safari and Chrome */
column-count:3;
第八個總結(jié)：
Reflow 回流 和 replain 重繪
首先 ： 弄清楚什么是回流和重繪
1.瀏覽器解析html 源碼，構(gòu)造出DOM 樹，
2.瀏覽器開始對CSS 進(jìn)行解析，構(gòu)造渲染樹。
3.繪制。
4. 重繪與回流
當(dāng)?shù)谝淮未蜷_一個頁面時(shí)，至少會有一次重繪和回流。之后，如果渲染樹發(fā)生了變動，那么可能會觸發(fā)重繪或回流中的一個或二者。
如果渲染樹的結(jié)點(diǎn)發(fā)生了結(jié)構(gòu)性變化，例如寬度、高度或者位置上的變化時(shí)，那么會觸發(fā)Reflow(回流)的邏輯。我們第一次進(jìn)入一個頁面時(shí)便會至少觸發(fā)一次這個邏輯。
如果渲染樹結(jié)點(diǎn)發(fā)生了非結(jié)構(gòu)性變化，例如背景色等的變化時(shí)，那么會觸發(fā)Repaint(重繪)的邏輯。
其次，相關(guān)觸發(fā)機(jī)制
觸發(fā)Repaint或Reflow
我們具體看看哪些操作會導(dǎo)致重繪或回流：
增加、刪除、修改DOM結(jié)點(diǎn)
使用display:none;的方式隱藏一個結(jié)點(diǎn)會導(dǎo)致repaint與reflow，使用visibility:hidden;進(jìn)行dom隱藏僅僅導(dǎo)致repaint(沒有結(jié)構(gòu)性變化，僅僅看不見而已)
移動dom或著該dom進(jìn)行動畫
添加新的樣式，或者修改某個樣式
用戶的一些操作諸如改變?yōu)g覽器窗口大小，調(diào)整字體大小，滾動等等
我們看些例子：
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!’));
第三點(diǎn)：如何減少。
1. 壓縮replaints 和 reflows ，使用CSS 去盡量減少這些，一次性操作完畢。
2. 對多個dom進(jìn)行操作時(shí)，我們可以使用一種“離線”方式。
3. 不要經(jīng)常去訪問計(jì)算后的樣式
第九個總結(jié)：
9.1 實(shí)現(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 判斷文本框內(nèi)容是否為空
alert(!_strs.value?true:false);
9.3 禁止輸入
9.4 禁止復(fù)制粘貼
var _banCopyPaste = document.getElementById(‘banCopyPaste’);
_banCopyPaste.oncopy = function(){
return false;
}
_banCopyPaste.onpaste = function(){
return false;
}
9.4 只運(yùn)行輸入數(shù)字
這個方式IE 不兼容。
兼容IE 方案，使用正則表達(dá)式
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(){ //獲取焦點(diǎn)事件
clearNonumber(this);
}
limitLength.onkeyup = function(){ //鍵盤事件
clearNonumber(this);
}
limitLength.onblur = function(){ //失去焦點(diǎn)事件
clearNonumber(this);
}
9.5 輸入框的長度提示實(shí)現(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 類似密碼復(fù)雜度提示實(shí)現(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 文本框默認(rèn)提示信息
9.8 提示密碼的相關(guān)強(qiáng)度
2.13節(jié),密碼強(qiáng)度實(shí)時(shí)驗(yàn)證密碼強(qiáng)度實(shí)時(shí)驗(yàn)證
9.8 實(shí)現(xiàn)下拉菜單實(shí)時(shí)更新，省市聯(lián)動效果
下拉框聯(lián)動效果
省級:
市級:
9.9 文件的上傳相關(guān)操作 2.37節(jié),JavaScript對上傳文件相關(guān)操作JavaScript對上傳文件相關(guān)操作
這里，主要了解了，文件的 files[0]的相關(guān)屬性。
第十個總結(jié)：
第十一個總結(jié)：
總結(jié)
以上是生活随笔為你收集整理的Javascript 盲区和 操作实例 笔记的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 小苏打可以喷辣椒叶面？
- 下一篇： Java实战项目开发学习书籍