當前位置：首頁 > 编程语言 > java >内容正文

java

Javascript 盲区和操作实例笔记

發布時間：2024/10/8 java 25 豆豆

生活随笔收集整理的這篇文章主要介紹了 Javascript 盲区和操作实例笔记小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

第一個總結：
1.
Splice 函數是直接對原數組進行操作，會影響原數組
Slice 是從原數組中取一段元素，生成新的數組，原數組不變。
第二個總結：
2. 判斷一個對象為數組類型。三種方法。
第三個總結：
3. push 從數組末尾加元素，返回新長度。Pop 刪除最后一個元素，并且返回
Unshift 向數組開頭添加元素，返回新的長度；shift 刪除第一個元素，并且返回。
第四個總結：
4. 截取URL 參數方法
//截取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）就是協議、域名和端口號。
以上url中的源就是：http://www.company.com:80。若地址里面的協議、域名和端口號均相同則屬于同源。
以下是相對于 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 ----失敗，協議不同
? 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.】因為你發送的請求不是在你現在的服務器目錄下的資源。還有一種常見如下：

原因如下：1.
2.

同源策略是瀏覽器的一個安全功能，不同源的客戶端腳本在沒有明確授權的情況下，不能讀寫對方資源。所以a.com下的js腳本采用ajax讀取b.com里面的文件數據是會報錯的。
? 不受同源策略限制的：
1、頁面中的鏈接，重定向以及表單提交是不會受到同源策略限制的。
2、跨域資源的引入是可以的。但是js不能讀寫加載的內容。如嵌入到頁面中的，，，>等。
?什么是跨域
受前面所講的瀏覽器同源策略的影響，不是同源的腳本不能操作其他源下面的對象。想要操作另一個源下的對象是就需要跨域。
2、跨域的實現形式

? 降域 document.domain
同源策略認為域和子域屬于不同的域，如：child1.a.com 與 a.com，child1.a.com 與 child2.a.com，xxx.child1.a.com 與 child1.a.com
兩兩不同源，可以通過設置 document.damain=‘a.com’，瀏覽器就會認為它們都是同一個源。想要實現以上任意兩個頁面之間的通信，兩個頁面必須都設置 documen.damain=‘a.com’。
此方式的特點：

只能在父域名與子域名之間使用，且將 xxx.child1.a.com域名設置為a.com后，不能再設置成child1.a.com。

存在安全性問題，當一個站點被攻擊后，另一個站點會引起安全漏洞。

這種方法只適用于 Cookie 和 iframe 窗口。
? 其它類似方法

HTML5的postMessage方法

window.name

location.hash

? JSONP跨域
JSONP和JSON并沒有什么關系！
JSONP的原理：（舉例：a.com/jsonp.html想得到b.com/main.js中的數據）在a.com的jsonp.html里創建一個回調函數xxx，動態添加

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是為了讓頁面加載完成后再執行
10 ? function foo(data) {
11 ? console.log(data.name+“歡迎您”);
12 ? };

//b.com/main.js中的代碼
foo({name:“hl”})
這樣便實現了跨域的參數傳遞。
采用jsonp跨域也存在問題：

使用這種方法，只要是個網站都可以拿到b.com里的數據，存在安全性問題。需要網站雙方商議基礎token的身份驗證，這里不詳述。

只能是GET，不能POST。

可能被注入惡意代碼，篡改頁面內容，可以采用字符串過濾來規避此問題。

? CORS
CORS是一個W3C標準，全稱是"跨域資源共享"（Cross-origin resource sharing）。
它允許瀏覽器向跨源服務器，發出XMLHttpRequest請求，從而克服了AJAX只能同源使用的限制。
剛才的例子中，在b.com里面添加響應頭聲明允許a.com的訪問，代碼：
Access-Control-Allow-Origin: http://a.com
然后a.com就可以用ajax獲取b.com里的數據了。
注意：此方法IE8以下完全不支持，IE8-10部分支持。詳見caniuse-CORS
詳細內容請參考：跨域資源共享 CORS 詳解

那么現在說說我自己對跨域請求和解決方案了》》》
1.由于瀏覽器的同源策略，在a.com 下請求 b.com 的資源，是不允許的，處于安全考慮，因為不同源。
2.如果要想實現在a.com 下請求 b.com 的資源，那么就是跨域了。就是垮了域名。
3.但是，要想實現跨域，瀏覽器對img ,link ,script ，iframe, a ，標簽這些是不做限制的。
因此就可以使用這些標簽的 src 實現跨域，最經典的就是使用google 的Jquery CDN 。因此是不是理解了。
那么就動態生成script標簽，加載src 資源，但是這個src 有要求，要有毀掉函數。
Src = ‘http://www.test.com/test.ptp?callback=JsonpHandle’ ;

本人對實現跨域的使用。
1.jsonp 看著你們學習的
2. document.domain 和window.name 因為當時在深信服使用 iframe 時需要用到。所以印象深刻。
3.CORS 設置（沒有用過）Access-Control-Allow-Origin: http://a.com
其中動態生成script 的步驟如下
Function JsonpHandle (data){

} 這個就是處理函數
var Jsonp = document.createElement(‘script’); //創建標簽
Jsonp.type = ‘text/javascript’;
Jsonp.src = “http://www.qianduan.com/Jsonp.php?callback=JsonpHandle”;
//在header 后面添加這個script 標簽
document.getElementsByTagName(‘head’)[0].appendChild(Jsonp);

//后臺Jsonp.php 的代碼 echo $_GET["callback"]."([)'helloworld')"; //數據就帶回去了

第六個總結：
6. 事件委托實現一波
主要流程有以下：獲取父元素，給父元素注冊監聽事件，獲取到以后在給子元素注冊監聽。
//實現一波事件委托噠
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. 重繪與回流
當第一次打開一個頁面時，至少會有一次重繪和回流。之后，如果渲染樹發生了變動，那么可能會觸發重繪或回流中的一個或二者。
如果渲染樹的結點發生了結構性變化，例如寬度、高度或者位置上的變化時，那么會觸發Reflow(回流)的邏輯。我們第一次進入一個頁面時便會至少觸發一次這個邏輯。
如果渲染樹結點發生了非結構性變化，例如背景色等的變化時，那么會觸發Repaint(重繪)的邏輯。

其次，相關觸發機制
觸發Repaint或Reflow
我們具體看看哪些操作會導致重繪或回流：
增加、刪除、修改DOM結點
使用display:none;的方式隱藏一個結點會導致repaint與reflow，使用visibility:hidden;進行dom隱藏僅僅導致repaint(沒有結構性變化，僅僅看不見而已)
移動dom或著該dom進行動畫
添加新的樣式，或者修改某個樣式
用戶的一些操作諸如改變瀏覽器窗口大小，調整字體大小，滾動等等
我們看些例子：
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 實現空格的截取，
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 只運行輸入數字

這個方式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(“limitLength”), //獲取限制對象
clearNonumber = function(tThis){ //清除數字
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 輸入框的長度提示實現

測試1：還可以輸入：6個字符

9.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’);
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’;
}

}inputLength.onfocus = function(){RemainingLength(this);}inputLength.onkeyup = function(){RemainingLength(this);}inputLength.onblur = function(){RemainingLength(this);}

9.7 文本框默認提示信息

9.8 提示密碼的相關強度

2.13節,密碼強度實時驗證

密碼強度實時驗證

9.8 實現下拉菜單實時更新，省市聯動效果

2.33節,下拉框聯動效果

下拉框聯動效果

省級:

市級:

9.9 文件的上傳相關操作 2.37節,JavaScript對上傳文件相關操作

JavaScript對上傳文件相關操作

這里，主要了解了，文件的 files[0]的相關屬性。

第十個總結：

第十一個總結：

總結

以上是生活随笔為你收集整理的Javascript 盲区和操作实例笔记的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。