web前端筆記

##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;

}

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末此改,一起剝皮案震驚了整個濱河市趾撵,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌共啃,老刑警劉巖占调,帶你破解...
    沈念sama閱讀 206,214評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異移剪,居然都是意外死亡究珊,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,307評論 2 382
  • 文/潘曉璐 我一進(jìn)店門挂滓,熙熙樓的掌柜王于貴愁眉苦臉地迎上來苦银,“玉大人啸胧,你說我怎么就攤上這事♂B玻” “怎么了纺念?”我有些...
    開封第一講書人閱讀 152,543評論 0 341
  • 文/不壞的土叔 我叫張陵,是天一觀的道長想括。 經(jīng)常有香客問我陷谱,道長,這世上最難降的妖魔是什么瑟蜈? 我笑而不...
    開封第一講書人閱讀 55,221評論 1 279
  • 正文 為了忘掉前任烟逊,我火速辦了婚禮,結(jié)果婚禮上铺根,老公的妹妹穿的比我還像新娘宪躯。我一直安慰自己,他們只是感情好位迂,可當(dāng)我...
    茶點(diǎn)故事閱讀 64,224評論 5 371
  • 文/花漫 我一把揭開白布访雪。 她就那樣靜靜地躺著,像睡著了一般掂林。 火紅的嫁衣襯著肌膚如雪臣缀。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 49,007評論 1 284
  • 那天泻帮,我揣著相機(jī)與錄音精置,去河邊找鬼。 笑死锣杂,一個胖子當(dāng)著我的面吹牛脂倦,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播蹲堂,決...
    沈念sama閱讀 38,313評論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼狼讨,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了柒竞?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 36,956評論 0 259
  • 序言:老撾萬榮一對情侶失蹤播聪,失蹤者是張志新(化名)和其女友劉穎朽基,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體离陶,經(jīng)...
    沈念sama閱讀 43,441評論 1 300
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡稼虎,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 35,925評論 2 323
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了招刨。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片霎俩。...
    茶點(diǎn)故事閱讀 38,018評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出打却,到底是詐尸還是另有隱情杉适,我是刑警寧澤,帶...
    沈念sama閱讀 33,685評論 4 322
  • 正文 年R本政府宣布柳击,位于F島的核電站猿推,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏捌肴。R本人自食惡果不足惜蹬叭,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 39,234評論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望状知。 院中可真熱鬧秽五,春花似錦、人聲如沸饥悴。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,240評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽铺坞。三九已至起宽,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間济榨,已是汗流浹背坯沪。 一陣腳步聲響...
    開封第一講書人閱讀 31,464評論 1 261
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留擒滑,地道東北人腐晾。 一個月前我還...
    沈念sama閱讀 45,467評論 2 352
  • 正文 我出身青樓,卻偏偏與公主長得像丐一,于是被迫代替她去往敵國和親藻糖。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 42,762評論 2 345

推薦閱讀更多精彩內(nèi)容

  • <a name='html'>HTML</a> Doctype作用库车?標(biāo)準(zhǔn)模式與兼容模式各有什么區(qū)別? (1)巨柒、<...
    clark124閱讀 3,456評論 1 19
  • 1.幾種基本數(shù)據(jù)類型?復(fù)雜數(shù)據(jù)類型?值類型和引用數(shù)據(jù)類型?堆棧數(shù)據(jù)結(jié)構(gòu)? 基本數(shù)據(jù)類型:Undefined、Nul...
    極樂君閱讀 5,498評論 0 106
  • 圖/小久英 文/小久英 《盈盈潮中水》 盈盈潮中水柠衍,延延念遠(yuǎn)岸 遠(yuǎn)岸不可及洋满,杓鷸晚呢呢 呢呢杓鷸歸,未歸遠(yuǎn)征人 征...
    小久英閱讀 169評論 8 5
  • 國慶學(xué)校放了7天小長假,1號下午搭長途車回到家已是晚上10點(diǎn)多阵漏,和家人吃了夜宵驻民,便早早洗洗睡了翻具,少來,明明就是人...
    席哈兒閱讀 211評論 0 0
  • 英國詩人約翰·梅斯菲爾德曾經(jīng)說“快樂的日子回还,是我們聰明”裆泳。正因?yàn)槿绱耍鞓穾淼闹腔鄞嬖谟谇逦男撵`感知中懦趋,并伴隨...
    妖殤杜佳閱讀 270評論 0 0