##Javascript 多瀏覽器兼容性問題及解決方案
1 自定義屬性問題
問題說明:IE下卫漫,可以使用獲取常規(guī)屬性的方法來獲取自定義屬性,也可以使用 getAttribute() 獲取自定義屬性肾砂;Firefox下列赎,只能使用 getAttribute() 獲取自定義屬性。
解決方法:統(tǒng)一通過 getAttribute() 獲取自定義屬性镐确。
2? input.type屬性問題
問題說明:IE下 input.type 屬性為只讀包吝;但是Firefox下 input.type 屬性為讀寫肛根。
解決辦法:不修改 input.type 屬性。如果必須要修改漏策,可以先隱藏原來的input派哲,然后在同樣的位置再插入一個新的input元素。
##3 window.event問題
window.event 只能在IE下運(yùn)行掺喻,而不能在Firefox下運(yùn)行芭届,這是因?yàn)镕irefox的event只能在事件發(fā)生的現(xiàn)場使用。
解決方法:在事件發(fā)生的函數(shù)上加上event參數(shù)感耙,在函數(shù)體內(nèi)(假設(shè)形參為evt)使用 var myEvent = evt?evt:(window.event?window.event:null)
##4? 事件委托方法
問題說明:IE下褂乍,使用 document.body.onload = inject; 其中function inject()在這之前已被實(shí)現(xiàn);在Firefox下即硼,使用 document.body.onload = inject();
解決方法:統(tǒng)一使用 document.body.onload=new Function('inject()'); 或者 document.body.onload = function(){/* 這里是代碼 */}
##5
//獲取元素的非行間樣式值
function getStyle(object,oCss) {
if (object.currentStyle) {
return object.currentStyle[oCss];//IE
}else{
return getComputedStyle(object,null)[oCss];//除了IE
}
}
####二 :? JavaScript? 如何實(shí)現(xiàn)繼承
http://www.jb51.net/article/81766.htm
1 原型鏈
基本思想:利用原型讓一個引用類型繼承另外一個引用類型的屬性和方法逃片。
構(gòu)造函數(shù),原型只酥,實(shí)例之間的關(guān)系:每個構(gòu)造函數(shù)都有一個原型對象褥实,原型對象包含一個指向構(gòu)造函數(shù)的指針,而實(shí)例都包含一個指向原型對象的內(nèi)部指針裂允。
2 借用構(gòu)造函數(shù)
基本思想:在子類型構(gòu)造函數(shù)的內(nèi)部調(diào)用超類構(gòu)造函數(shù)损离,通過使用call()和apply()方法可以在新創(chuàng)建的對象上執(zhí)行構(gòu)造函數(shù)。
3 組合繼承
4.原型式繼承
借助原型可以基于已有的對象創(chuàng)建新對象绝编,同時還不必須因此創(chuàng)建自定義的類型僻澎。
ECMAScript5通過新增Object.create()方法規(guī)范化了原型式繼承,這個方法接收兩個參數(shù):一個用作新對象原型的對象和一個作為新對象定義額外屬性的對象十饥。
5.寄生式繼承
基本思想:創(chuàng)建一個僅用于封裝繼承過程的函數(shù)窟勃,該函數(shù)在內(nèi)部以某種方式來增強(qiáng)對象,最后再像真正是它做了所有工作一樣返回對象逗堵。
6.寄生組合式繼承
基本思想:通過借用函數(shù)來繼承屬性秉氧,通過原型鏈的混成形式來繼承方法
###三? 數(shù)組去重
var arr = [1, 11, 2, 3, 4, 5, 4, 2, 3, 6, 9]
var temp = []
var obj = {};
for (var i = 0; i < arr.length; i++) {
if (!obj[arr[i]]) {
obj[arr[i]] = true;
temp.push(arr[i])
}
}
console.log(temp.sort(function(a, b) {
return a - b
}))
###四 Retina屏幕1px邊框
0.5px邊框
解決方案是通過 JavaScript 檢測瀏覽器能否處理0.5px的邊框,如果可以砸捏,給html標(biāo)簽元素添加個class谬运。
使用border-image實(shí)現(xiàn)
使用background-image實(shí)現(xiàn)
.background-image-1px {
background: url(../img/line.png) repeat-x left bottom;
-webkit-background-size: 100% 1px;
background-size: 100% 1px;
}
鏈接:http://www.reibang.com/p/7e63f5a32636
來源:簡書
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)垦藏,非商業(yè)轉(zhuǎn)載請注明出處梆暖。
使用box-shadow模擬邊框
利用css 對陰影處理的方式實(shí)現(xiàn)0.5px的效果
viewport + rem 實(shí)現(xiàn)
####五: 什么是事件冒泡 什么是事件委托 怎么阻止事件冒泡和事件委托
JavaScript與HTML之間的交互是通過事件實(shí)現(xiàn)的。事件掂骏,就是文檔或?yàn)g覽器窗口中發(fā)生的一些特定的交互瞬間轰驳。可以使用偵聽器來預(yù)訂事件,以便事件發(fā)生時執(zhí)行相應(yīng)的代碼级解。
事件冒泡:
就是當(dāng)一個子元素的事件被觸發(fā)的時候(如onclick事件)冒黑,該事件會從事件源(被點(diǎn)擊的子元素)開始逐級向上傳播,觸發(fā)父級元素的點(diǎn)擊事件勤哗。
那么我們應(yīng)該如何組織這討厭的事件冒泡機(jī)制呢抡爹?
很簡單,在事件觸發(fā)時芒划,會傳入一個相應(yīng)的event對象冬竟,其中有一個stopPropagation()方法可以阻止事件冒泡(IE中為cancleBubble=true),以下是詳細(xì)代碼:
事件委托
就是將子元素的事件通過冒泡的形式交由父元素來執(zhí)行民逼。下面經(jīng)過詳細(xì)的例子來說明事件委托:
####HTTP? 協(xié)議:
面向連接
HTTP是一個屬于應(yīng)用層的面向?qū)ο蟮膮f(xié)議 由于其簡捷泵殴、快速的方式,適用于分布式超媒體信息系統(tǒng)拼苍。
HTTP? 是無狀態(tài)的? ? 可以在http? 中使用 cookie
TCp
udp
HTTP 應(yīng)用層 笑诅、
運(yùn)輸層 TCp
網(wǎng)際層
網(wǎng)絡(luò)接口層
網(wǎng)絡(luò)之前7層? 現(xiàn)在5層
http請求由三部分組成,分別是:請求行疮鲫、消息報(bào)頭吆你、請求正文
HTTP消息報(bào)頭包括普通報(bào)頭、請求報(bào)頭棚点、響應(yīng)報(bào)頭早处、實(shí)體報(bào)頭。
報(bào)文的
請求報(bào)文
請求報(bào)文的方法
get? post? delete
響應(yīng)報(bào)文
vue 生命周期
beforecreated:el 和 data 并未初始化
created:完成了 data 數(shù)據(jù)的初始化瘫析,el沒有
beforeMount:完成了 el 和 data 初始化
另外在標(biāo)紅處,我們能發(fā)現(xiàn)el還是 {{message}}默责,這里就是應(yīng)用的 Virtual DOM(虛擬Dom)技術(shù)贬循,先把坑占住了。到后面mounted掛載的時候再把值渲染進(jìn)去桃序。
mounted :完成掛載
$route可以在子組件任何地方調(diào)用杖虾,代表當(dāng)前路由對象,這個屬性是只讀的媒熊,里面的屬性是 immutable(不可變) 的奇适,不過你可以 watch(監(jiān)測變化) 它。
##對象的深度克隆
###jQuery 相關(guān)分析
1). 自執(zhí)行的匿名函數(shù)芦鳍。
2). $("...")形式調(diào)用返回 jQuery.fn.init對象嚷往。
3). 框架里最常見的 extend 函數(shù)。
jQuery.prototype為jQuery的原型方法柠衅,這里用jQuery.fn來代替jQuery.prototype皮仁,
### 面向?qū)ο蠛兔嫦蜻^程
###? 遞歸的優(yōu)化
###? 冒泡排序的優(yōu)化
### web安全
解決方案
綜上所述,我們可以這樣審視我們的WEB站點(diǎn):
1.永遠(yuǎn)不要相信客戶端傳來的任何信息,對這些信息都應(yīng)先進(jìn)行編碼或過濾處理贷祈;
2.謹(jǐn)慎返回用戶輸入的信息趋急;
3.使用黑名單和白名單處理(即“不允許哪些敏感信息”或“只允許哪些信息”,白名單的效果更好但局限性高)势誊;
4.檢查呜达、驗(yàn)證請求來源,對每一個重要的操作都進(jìn)行重新驗(yàn)證粟耻;
5.使用SSL防止第三方監(jiān)聽通信(但無法阻止XSS闻丑、CSRF、SQL注入攻擊)勋颖;
6.不要將重要文件嗦嗡、備份文件存放在公眾可訪問到的地方;
7.會話ID無序化饭玲;
8.對用戶上傳的文件進(jìn)行驗(yàn)證(不單單是格式驗(yàn)證侥祭,
比方一張gif圖片還應(yīng)將其轉(zhuǎn)為二進(jìn)制并驗(yàn)證其每幀顏色值<無符號8位>和寬高值<無符號16位>);
9.WSDL文檔應(yīng)當(dāng)要求用戶注冊后才能獲惹牙濉矮冬;
10.在報(bào)頭定義CSP(Content Security Policy);
11.次哈。胎署。。
雖然我們有一些必要的手段來防止WEB攻擊窑滞,但永遠(yuǎn)不會有一枚silver bullet來徹底解決問題琼牧,
先不談那些數(shù)不勝數(shù)的已知的、可被攻擊的漏洞哀卫,對于謎一樣的0-day漏洞巨坊,我們所能做的只是提前發(fā)現(xiàn)并及時修補(bǔ)它們。
#### 獲取地址欄參數(shù)
function GetQueryString(name)
{
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if(r!=null)return? unescape(r[2]); return null;
}