互聯網 - 大數據

3月 09 週四 201720:20
遇見幸福的自己

文章出處
幸福不在別處，一直在我們的身邊，在我們的心中
一個智慧聰明的人，永遠不會缺少一雙幸福的慧眼。
駕馭自己的心態
別忘記要常常為自己建立積極的心態，只有這樣才能享受生活。
心態好了，一切就好，而心態不好則會事事皆不順。
生活就是酸甜苦辣皆而有之，只有放下抱怨，讓自己擁有一個健康的心態，加上理性、寬容與平和，幸福就會變成一種生活的習慣
人生需要在等待中尋找結果，所以想要獲得幸福的生活，就應該學會等待，在等待中尋找新的目標。幸福不在于到達目的地的那一刻，而在我們一步一步地向上移動接近目標的過程中。
正視自己的欠缺，接受自己的不足，挖掘自己其它方面的能力和素質特點，努力給自己一個正確的追求目標，學會避開短片和發揚長處，將欠缺化為一種力量。
上帝是公平的，在為你關上一扇門的時候必會為你打開另一扇窗，而當你心存適度的謙卑時，你就會獲得勝不驕敗不餒的心境。
刻意追求，不如隨遇而安
把事情往好處想，并一點點去適應和改變環境。
一個真正聰明的人，不會執著于那些自己無法把握的東西，只要自己凡事盡力去做了，就是一種幸福，至于是否能得到回報，則不要太掛心。
非淡泊無以明志，非寧靜無以致遠
積極心態是獲得幸福的動力
一個聰明的、有思想的人，一定會懂得如何正確對待幸運與不幸（如果你認為自己總是不幸，那么你可能真的遭遇霉運，這是幸運的重要法則）
要常常提醒自己，你的生活中充滿著多姿多彩的激情、浪漫、美好、幸福
讓自己擁有強大的內心世界，內心的強大才可以使你擁有感知幸福的能力
內心強大的人是指一個人的心靈境界達到真正的寧靜，并能找到自己的位置，知道自己該要什么，明白自己想要什么，有自己的主見，不會輕易被外界的輿論影響，時刻保持心無旁騖，依然固守內心自己想要的堅持。內心的強大才能讓我們清晰地看到自己的優勢和目標。一個擁有強大內心的人，懂得如何接納自己、肯定自己，給自己積極的心態。當你心中的力量強大起來后，全世界都會為你讓路
在人生的轉角處遇見快樂
改變心態的秘訣是：平如、自然、不較真
寵辱不驚，閑看庭前花開花落；去留無意，漫隨天外云卷云舒
全心投入地去做生活中的每一件小事，心無雜念的享受生活的每一個瞬間
人就要學會笑著去面對人生，不管未來如何
用微笑看著生活，無論生活給予我什么（無論痛苦也好，快樂也罷，最后都是要面對現實，那何必糾結于痛苦之中而不能超脫呢）
面對現實、面對困境，只要能發自內心地一笑置之，便可輕松下來
常常為自己創建快樂的心境，這才是最可貴的
讓遺忘成為生活的本能，將頭腦中儲存的東西進行適應的整理，把該留下的留下來，不該留下的就趕緊拋棄，對那些無法讓人快樂生活的因素，就要義無反顧的刪除遺忘，這樣人才能活得更加灑脫
除了努力去改變困境，還要學會遺忘煩惱，看淡一些，放開一些，簡單一分，你就會解開心靈的枷鎖。
每一件事情都有積極的一面和不積極的一面，就看你如何選擇了，不同的選擇，結果也不同。幸運和不幸、快樂和悲傷是并存的，關鍵是看你用什么樣的心境去尋找。
所謂生活的智者，是那種能讓自己在失意時也能獲得快樂心境的人，所以不妨讓自己盡量快樂的地生活，如果真的沒有快樂的心境，就先學會佯裝很快樂吧。
生活中并不缺少歡樂，而是缺少制造歡樂的能力和心境
靜謐：世無靜土，皆因心無靜土
讓寧靜的心靈，不染塵埃（將心靈擦拭干凈）（讓每一縷陽光都能夠沖破重重陰霾，照進你心靈的每個曾經冰冷的角落）
收拾心情，重新上路，心靈的輕松將陪伴著幸福的收獲與你一起度過人生的每一個陽光滿溢的日子
得之我幸、失之我命、不驚不喜、不悲不戚
一切都會過去，一切都可以改變
看清自己并改變自己的心態，敢于直面心靈的苦悶掙扎并愿意擺脫自我的勇氣，它也要極大的智慧
萬般煩擾皆因心的煩惱
浮躁是因為我們太缺乏感悟快樂和幸福的心境，太過于在意得失。除去內心深處的浮躁，才能找到真正的快樂與幸福
對自己、對別人、對社會理解而不苛求，保持著自己內心的清雅、不慌不亂
清淡的人生，沒在煩心的憂愁，沒有失意的無奈，沒有落寞的感傷，有的只是從容。生活不必有濃墨重彩的情意，淺淺淡淡的就好
一個懂得淡然處世的人，才是真正的英雄，真正生活的強者。
平凡而不平庸的人生才最精彩，只有懂得用淡定的心態去以身試法，平凡就可以成為不平庸
做適合自己做的事情，留住平凡也就留住了幸福
退后是為了更好的前進
做人應當進則進，當退則退，只要心里還有目村和前進的方向，那么適應的后退是一種心靈的修養
無謂的計較，何苦降低自己的心靈修養，降低自己的層級。
學會不計較，我們的生活將會輕松許多
做人不要太計較，不妨試著改變自己的處事方式和觀念，努力放下成見，喜歡你周圍的每一個人，你就會贏得別人的好感，做一個寬容豁達，樂觀正直的人。
凡事不能不認真，凡事不能太認真
跌倒就是前進的起點，悲傷就是幸福的轉折，不幸就是幸運的前奏....禍兮福之所倚，福兮禍之所伏。
多一些理性的妥協，學會低頭，懂得適度忍讓，不強勢，不較真，心境平和豁達，即使懷才不遇，遇人不淑，也不會萬念俱灰，因為心靈的寬厚，所以能輕松處之。能屈能伸是智者的行徑
低頭并不是讓我們失去自我，失去個性，而是一個進退自如的處事方式
難得糊涂
糊涂不是真傻，不是愚昧，而是一種智慧，一種修養，一種氣度。人生的很多事情，不看到比看到好，看到卻看不清楚，是最好
大事清楚，小事糊涂，而要真正做到小事不較真，不是件很容易的事，需要一種善解人意的思維方法
偶爾裝傻，凡事無需要斤斤計較（沒有必要把所有的事情都弄得那么清楚，那么認真），，即是一種智慧，也是一種人生境界。
不該說的不說
何必自尋煩惱，又何必庸人自擾
如果你想離幸福更近一些，那么你可以尋找快樂的心情，你可以尋找甜美的生活，何必自尋煩惱呢，很多人心頭的煩惱并不是因為那些真的無法避免的事，而是庸人自擾。要善于忽略煩惱，遺忘煩惱。
大多數的困擾大多源于心態的多慮，未來的煩惱不一定會真的出現，然而無謂的擔憂卻會讓我們失去當下的幸福
“失眠都睡不著，是因為他們擔心會失眠，而他們越擔心，就越是睡不著”
當煩惱來襲時，先讓自己理智的冷靜下來，再想一想有沒有好的解決方法，如果可以解決，那么就想辦法解決，如果暫時無法解決，就干脆不去想它，轉移注意力，去想一些歡樂的事情。生活就是一面鏡子，你對它笑，它就會對你笑。
別想太多，用內存的心理力量去化解內心的煩惱，慢慢培養自己擁有懂得快樂生活的心靈吧
凡事往前看，一切都會過去，一切都可以改變
珍惜眼前擁有
曾經不管多么美好，曾經不管多么痛苦不堪回首，都已經過去，只有放下過去，才能經營好當下。
學會放下，放下曾經的遺憾和錯誤，只要今天的我們還有體驗幸福的能力，就是最大的收獲。笑看人生的所有錯過和缺憾
學會放手，是一種釋然的心態，其實有時候我們以為無法放手的，也許并不是想象中不能沒有的至寶
放手并不意味著失去，只是有了更多的可以選擇的空間。放手就是把握今天，將傷痛丟給昨天，把幸福留給明天。
后悔是一場沒有結果的自我折磨（不要為打翻的牛奶哭泣），總結失敗的經驗，避免以后再發生錯誤的選擇，然后拋棄一切的嘆息，大膽朝前看，給自己一個不猶豫、不后悔的美好人生
活在當下：一心一意的享受現在（只有學會專注于當下，人才不會徒生焦慮感）
生命的質量來自于每一天好心態的積累，每天的心態又來自于每一個現在的心境。如果你能給予現在好心情，那么你就會用無數個好心情串織起快樂的一天，你能讓自己的每一天都快樂，那么你的生活質量就會大大提高
有些事情你并非要刻意完全忘記它們，只需要放下它們，忽略它們，它們就會慢慢的離你而去
學會及時處理你人生的包袱，世上沒有淌不過的河，只有丟不下的包袱，邁不開的腳
學會欣賞困難（人生無絕境）
生命并不是總風和日麗，很多時候當我們在逆境中身陷絕地時，并非真的就沒有路可以走，只是我們的心被灰心失望所蒙蔽，看不到前邊的路
不管你現在快樂與否，灰心與否，其實天無絕人之路，更無絕人之境，走出困境，人生就是碧海藍天
身處痛苦時，不要封閉自己，敞開心扉，找到感興趣的事情去分散對痛苦的注意力
命運掌握在自己手上，面對絕境時，只有自己能改變自己的境遇，一切的逃避、灰心都無濟于事，因為我們只有踏實的做些事情，才能幫助自己走出困境。
牛奶會有的，面包也會有的，希望其實一直都在，只要你不放棄希望（人生之所以有絕境，是因為命運需要你學會如何突破戰勝自己）
什么事情都在于自己的心態（一切無關其它，全在于心境）
其實多一次挫敗，就多一分成熟；多一次絕境，就多一次機會，別太在意困境
每一次經歷都是成長的機會
心靈是需要信念做支撐的，只要你不放棄堅強的信念，那沒有任何事是你想做卻做不成的。人生不能沒有希望和信念（不能沒有夢）
只要心中有信念，任何外界因素都影響不了你對未來的追求
命運從來不曾放棄過任何人，只要你不放棄自己
愛上自己，是幸福的開始
要想自信的生活下去，愛自己的心是必不可少的。
愛自己不是一種自以為是，是在要求我們肯定自己、認可自己、接受自己，要有理智的思維，清清楚楚的接受自己的優點和缺點，同時也要自尊，做自己該做的事情，不因為外界的因素而否定甚至放棄自己
要相信，活著就是為了遇見最好的自己，要相信，活著不是為了迎合別人的眼光，而是要實現自己的生活，這樣才會有更多的信心去走自己的路
自己相信自己，比別人相信你更重要
一個愿意相信自己的人，通常都愿意接受自己，改變自己，并為自己找到更好的更適合自己的生活方式
你就是你，沒有必要跟隨別人，也不必為了順應別人而失去本色的自己，留下沒有自己思想的靈魂該是多可怕的一件事情啊
跟著自己的心走就是了（做真實的自己）
真正的成功，不是擁有了多少，而是有一天當你輝煌不再的時候，還有人在你身邊陪伴著你，還能真實的感受著幸福的美好
我們為什么會苦惱，因為我們總是太看重別人眼中那個理想的自我，而迷失了真實的自我
愛情、親情
真正的愛情是一輩子的不離不棄，心心相依。對對方多一些體貼，少一點苛求。
愛是互相約束，互相尊重（尊重對方的人格）
爭取多一些的時間去陪陪父母，父母真的沒有多少時間可以讓我們孝順了。這世上最無私愛著我們的人無不是我們的父母
幸福只不過是一米陽光
每個人都在尋找幸福，幸福其實就在你的身邊，關鍵在于你有沒有一顆感受幸福和發現幸福的心靈
做任何事情都要心態平和，不必羨慕別人，更不必嫉妒別人，你只要過你自己想要的生活就可以，所以我們只要用心去生活，就會找到樂趣
不要對生活寄予太大的期望（不要總期待彼岸花開）
自己對事情的判斷是很重要的，因為感受在自己身上，合不合適只有自己知道
幸福靠自己，永遠不要指望別人給你幸福。幸福是沒人能給的，一個人如果不能給予自己幸福的話，那就沒人能夠真正給予他幸福了。如果我們總是將希望寄托在別人身上，處處依賴著別人，萬一哪一天那個我們一心一意依靠的人不能給予我們依靠了，那么幸福又在哪里？其實，你要明白，你的幸福掌握在自己的手中，沒有人能決定你的幸福，除了你自己。
幸福需要你自己不斷去尋找和感悟，當沒有幸福感的時候，就要學會為自己創造點兒幸福

(繼續閱讀...)

AutoPoster 發表在痞客邦留言(0) 人氣(3)

個人分類：生活學習

▲top

3月 09 週四 201720:20
看看這些JavaScript題目你會做嗎？

文章出處
題目1
咋一看這題目，還以為答案選擇B呢，其實正確答案為D,知道原因嗎？接著往下看
map對數組的每個元素調用定義的回調函數并返回包含結果的數組，咋一看還以為它會像如下這樣執行：

function testFuc(a){
return parseInt(a);
}
console.info(["1","2","3"].map(testFuc));

但事實上，map中回調函數的語法如下所示：function callbackfn(value, index, arr)，可使用最多三個參數來聲明回調函數。第一參數value，數組元素的值；第二個參數index，數組元素的數組所以；arr，包含該元素的數組對象。
所以事實上題目執行的原理如下所示：

function testFuc(a,x){
return parseInt(a,x);
}
console.info(["1","2","3"].map(testFuc));

也就是[parseInt(1,0),parseInt(2,1),parseInt(3,2)] 所以最終答案是[1, NaN, NaN]

題目2
這個題目相對來說比較簡單，答案為A
typeof用以獲取一個變量或者表達式的類型，typeof一般只能返回如下幾個結果：number,boolean,string,function（函數）,object（NULL,數組，對象）,undefined。
instanceof 表示某個變量是否是某個對象的實例，null是個特殊的Object類型的值，表示空引用的意思。但null返回object這個其實是最初JavaScript的實現的一個錯誤
題目3
其實這個題目前面一部分的執行原理如下所示（pow() 方法可返回 x 的 y 次冪的值）：

function testFuc(x,y){
console.info(x +" : "+y);
return Math.pow(x,y);
}
console.info([3,2,1].reduce(testFuc));

但是要注意pow的參數都是必須的，[].reduce(Math.pow)，等同于執行Math.pow();會導致錯誤
所以題目的答案為A
題目4
這個題目相信大家多會，題目會先執行字符串拼接，再執行三則運算，所以答案為A
題目5
相信大家看到湯姆大叔的JavaScript系列文章就知道js有變量提前聲明，但不會提前賦值
所以上述的答案是A
題目6
這個題目，我到現在也沒明白原因，但是書上解釋是說：
filter會接觸到沒有被賦值的元素，即在arr中，長度為10但實際數值元素列表為[0, 1, 2, 10]，因此，最終返回一個空的數組[]
所以正確的答案為C
題目7
題目答案是C
大家都知道兩個浮點數相加或者相減，將會導致一定的正常的數據轉換造成的精度丟失問題eight-six = 0.20000000000000007。
JavaScript中的小數采用的是雙精度(64位)表示的，由三部分組成：　符 + 階碼 + 尾數，在十進制中的 1/10，在十進制中可以簡單寫為 0.1 ，但在二進制中，他得寫成：0.0001100110011001100110011001100110011001100110011001…..（后面全是 1001 循環）。因為浮點數只有52位有效數字，從第53位開始，就舍入了。這樣就造成了“浮點數精度損失”問題。
更嚴謹的做法是(eight-six ).toFiexd(1)或者用用Math.round方法回歸整數運算。
判斷兩個浮點數是否相等，還是建議用逼近的比較，比如if((a-b) < 1E-10)
題目8
可能大家都認為答案是A，可偏偏答案是C，為什么呢，事實上你可以在函數內把value的值打印出來就知道傳進去的到底是一個什么
使用new String()，使用構造函數調用，將一個全新的對象作為this變量的值，并且隱式返回這個新對象作為調用的結果
題目9
相信如果弄懂上面一題，這題目根本就太容易了，答案是A
直接調用String("A")創建的變量和"A"無異。
題目10
看了這題目有點暈，但是事實上

function isSane(num){
　　return isEven(num)||isOdd(num);
}

該函數判斷num是否為正整數，'13'被強制轉換為數值13，-9%2結果為-1，Infinity %2為NaN
所以答案為C
題目11
答案為D
parseInt() 函數可解析一個字符串，并返回一個整數。當參數 radix 的值為 0，或沒有設置該參數時，parseInt() 會根據 string 來判斷數字的基數。
題目12
答案為A
在此特意說明一下，
Array.prototype為[]，Array.isArray(a)是一個判斷a是否為數組的方法
判斷對象是否為數組的方法：
1）ES5函數isArray(),該函數測試對象的內部[[Class]]屬性是否為Array:
　　Arrray.isArray(a);
2）判斷對象的構造函數是否為Array:
　　a.constructor === Array
3）使用對象內部[[Class]]屬性創建結果字符串：
　　Object.prototype.toString.call(a)
4）使用instanceof操作符測試對象是否繼承自Array：（但由于，一個頁面的iframe不會繼承自另外一個頁面的iframe，該方法不可靠）
　　a instanceof Array
題目13
這個相對來說挺簡單的，你稍微仔細一點就會了，看看你做對了沒
在if條件判斷語句相對于==比較寬松中，只要if(n)，n不為null，0，undefined數值，都會轉換為true。進入console.info(a == true);最終返回false
也就是說答案為B
題目14
這個答案為B，是因為數組在 Javascript 中是對象，對象使用 == 比較都是比較的引用。簡單的說，就是，如果是同一個對象，就相等，如果不是同一個對象，就不等。每次使用 [] 都是新建一個數組對象，所以 [] == [] 這個語句里建了兩個數據對象，它們不等。
題目15
這個相信你只要懂JavaScript中的+號運算肯定能做對答案，答案是A
執行'5'+3，加號具備拼接字符串功能，會將3強制轉換為字符串'3'和'5'拼接。
執行'5'-3，減號只具備數值運算的功能，因此會將'5'轉化為數值，進行5-3的數值運算
題目16
答案為D
區分賦值和聲明。雖然var arr = Array(3);但它只創建一個長度為3的數組，后面的那句話才只為第一個元素賦值，因此arr的實際長度為1，即最終參與map的只有一個元素，結果返回
題目17
最終結果為10+1+10
所以答案為D
題目18
答案為B,您猜對了嗎？？
原因是javascript的精確整數最大為:Math.pow(2,53)-1 =9007199254740991.
var a = 111111111111111110000,
max = 9007199254740992;
a的值大于javascript所能表示的最大整數精度，因此和任何數值相加將會導致失真。
題目19
大家在控制臺里面一測試就知道了
所以正確的調用方式應該是：x.call([])
答案不言而喻為C
題目20
在JavaScript中，Number.MIN_VALUE表示的最小值為5e-324，MIN_VALUE代表的并不是負最小，而是最接近0的一個數，因此Number.MIN_VALUE>0。
負最小值可以使用-Number.MAX_VALUE表示。
答案為A
題目21
這個不多說，答案為A
1<2，返回true，執行true<3，會強制將true轉換為1，1<3，最終返回true。
3<2，返回false，執行false<1,會強制將false轉換為0，0<1，最終返回true。
題目22
使用a==b判斷a和b對象是否相等，可以會將b對象強制轉換為a對象的類型，即執行2 == [[[2]]]，會隱式調用parseInt([[[2]]])將[[[2]]]強制轉化為數字基本量，即2，2==2，最終返回true。
引用評論的一番話：
console.info([[2]]==2); //true
console.info([[2,2]]==2); //false
console.info(parseInt([[2,2]])); //2
可以說
如果數組中只有單個字符的話隱式調用parseInt
答案為A
題目23
在立即調用函數內執行，var x1 =y1 =1;創建局部變量x1和全局變量y1。函數外部試圖訪問函數內部的變量，將會導致錯誤。
所以答案選擇C

(繼續閱讀...)

AutoPoster 發表在痞客邦留言(0) 人氣(7)

個人分類：生活學習

▲top

3月 09 週四 201720:20
說說css3布局

文章出處
使用float屬性或position屬性布局的缺點

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
div {
width: 20em;
float: left;
}
#div1 {
margin-right: 2em;
}
#div3 {
width: 100%;
background-color: yellow;
height: 200px;
}
</style>
</head>
<body>
<div id="div1">
<p>
示例文字。相對來說比較長的示例文字。
示例文字。相對來說比較長的示例文字。
示例文字。相對來說比較長的示例文字。
示例文字。相對來說比較長的示例文字。
示例文字。相對來說比較長的示例文字。
示例文字。相對來說比較長的示例文字。
示例文字。相對來說比較長的示例文字。
示例文字。相對來說比較長的示例文字。
示例文字。相對來說比較長的示例文字。
</p>
</div>
<div id="div2">
<p>
示例文字。相對來說比較長的示例文字。
示例文字。相對來說比較長的示例文字。
示例文字。相對來說比較長的示例文字。
示例文字。相對來說比較長的示例文字。
示例文字。相對來說比較長的示例文字。
示例文字。相對來說比較長的示例文字。
示例文字。相對來說比較長的示例文字。
示例文字。相對來說比較長的示例文字。
示例文字。相對來說比較長的示例文字。
</p>
</div>
<div id="div3">
頁面中其它內容
</div>
</body>
</html>

View Code
使用上面代碼頁面顯示如下所示：
但是當上面示例中div1和div2中任何一個元素中添加了一點不一樣的東西，比如說增加一個圖片
那么顯示的頁面效果就會如下所示，（也就是說無法實現兩個元素的詢問對齊）
那么該怎么樣解決這個問題呢
css3中加入多欄布局，使用多欄布局可以將一個元素中的內容分成多欄顯示，并且確保各欄中內容底部對齊。主要可以使用如下屬性
column-count：要顯示的列數
column-width：當前列顯示的寬度（通過指定每欄的最小寬度，讓瀏覽器自動計算分欄的數量）
column-gap:多欄之間的間隔距離
column-rule:在欄與欄之間增加一條間隔線，并設置該間隔線的寬度顏色等
一般性盒布局
一般性頁面布局都是分成左中右，像如下的例子一樣的

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
#left-sidebar {
float: left;
width: 200px;
padding: 20px;
background-color: orange;
}
#contents {
float: left;
width: 300px;
padding: 20px;
background-color: yellow;
}
#right-sidebar {
float: left;
width: 200px;
padding: 20px;
background-color: limegreen;
}
#left-sidebar, #contents, #right-sidebar {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
</style>
</head>
<body>
<div id="container">
<div id="left-sidebar">
<h2>左側邊欄</h2>
<ul>
<li><a href="#">超鏈接</a></li>
<li><a href="#">超鏈接</a></li>
<li><a href="#">超鏈接</a></li>
<li><a href="#">超鏈接</a></li>
<li><a href="#">超鏈接</a></li>
</ul>
</div>
<div id="contents">
<h2>內容</h2>
<p>
示例文字。相對來說比較長的示例文字。
示例文字。相對來說比較長的示例文字。
示例文字。相對來說比較長的示例文字。
示例文字。相對來說比較長的示例文字。
示例文字。相對來說比較長的示例文字。
示例文字。相對來說比較長的示例文字。
示例文字。相對來說比較長的示例文字。
示例文字。相對來說比較長的示例文字。
示例文字。相對來說比較長的示例文字。
</p>
</div>
<div id="right-sidebar">
<h2>右側邊欄</h2>
<ul>
<li><a href="#">超鏈接</a></li>
<li><a href="#">超鏈接</a></li>
<li><a href="#">超鏈接</a></li>
</ul>
</div>
</div>
</body>
</html>

View Code
代碼運行后的界面效果如下所示：
可以看到使用float屬性或position屬性，左右兩側或多欄中div元素的底部并沒有對齊
使用盒布局
下面使用盒布局的方式來使得底部對齊，將上面的css改為如下所示：

 #container {
display:-moz-box;
display:-webkit-box;
}
#left-sidebar { 
width: 200px;
padding: 20px;
background-color: orange;
}
#contents { 
width: 300px;
padding: 20px;
background-color: yellow;
}
#right-sidebar {
width: 200px;
padding: 20px;
background-color: limegreen;
}
#left-sidebar, #contents, #right-sidebar {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}

其實也就是在最外層的div上使用了display:box,并去除了里面三個div的float:left的屬性，界面運行效果圖如下所示：
這里順便說一下，使用盒而已和多欄布局的區別：1、多欄布局每欄寬度必須相等2、使用多欄布局不可能具體指定什么欄顯示什么內容，也就是說多欄布局適合在使用顯示文章內容的時候而不適合用于安排整個網頁的各個元素的結構
使用自適應窗口的彈性盒布局
對于上面的例子，如果我們想讓這三個div的總寬度等于瀏覽器窗口的寬度，也就是說隨著瀏覽器窗口寬度的改變而改變，應該怎么做呢
事實上很簡單，只要在中間的div上增加-webkit-box-flex:1;-moz-box-flex:1; 這個屬性就可以了,css代碼如下所示：

 #container {
display:-moz-box;
display:-webkit-box;
}
#left-sidebar { 
width: 200px;
padding: 20px;
background-color: orange;
}
#contents { 
-webkit-box-flex:1;
-moz-box-flex:1; 
width: 300px;
padding: 20px;
background-color: yellow;
}
#right-sidebar {
width: 200px;
padding: 20px;
background-color: limegreen;
}
#left-sidebar, #contents, #right-sidebar {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}

界面運行效果如所示所示：
改變元素的顯示順序
那么我們怎樣改變元素的顯示順序呢，比如說我想讓左側欄在最右，內容欄在最左顯示，怎么辦？
css3提供了一個屬性box-ordinal-group屬性來改變各元素的顯示順序，大家看看我的css只是在里面的每個div增加了box-ordinal-group，就輕而易舉的改變了它們的顯示順序

 #container {
display: -moz-box;
display: -webkit-box;
}
#left-sidebar {
-moz-box-ordinal-group: 3;
-webkit-box-ordinal-group: 3;
width: 200px;
padding: 20px;
background-color: orange;
}
#contents {
-moz-box-ordinal-group: 1;
-webkit-box-ordinal-group: 1;
-webkit-box-flex: 1;
-moz-box-flex: 1;
width: 300px;
padding: 20px;
background-color: yellow;
}
#right-sidebar {
-moz-box-ordinal-group: 2;
-webkit-box-ordinal-group: 2;
width: 200px;
padding: 20px;
background-color: limegreen;
}
#left-sidebar, #contents, #right-sidebar {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}

界面效果圖如下所示（是不是挺神奇的）：
改變元素的排列方向
那如果要改變元素的排列方向呢，在css3中可以使用box-orient來指定多個元素的排列方向。只需要在最外層的div上增加box-orient屬性就可以了。css代碼如下所示：

 #container {
display: -moz-box;
display: -webkit-box;
-moz-box-orient:vertical;
-webkit-box-orient:vertical;
}
#left-sidebar {
-moz-box-ordinal-group: 3;
-webkit-box-ordinal-group: 3;
width: 200px;
padding: 20px;
background-color: orange;
}
#contents {
-moz-box-ordinal-group: 1;
-webkit-box-ordinal-group: 1;
-webkit-box-flex: 1;
-moz-box-flex: 1;
width: 300px;
padding: 20px;
background-color: yellow;
}
#right-sidebar {
-moz-box-ordinal-group: 2;
-webkit-box-ordinal-group: 2;
width: 200px;
padding: 20px;
background-color: limegreen;
}
#left-sidebar, #contents, #right-sidebar {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}

界面立馬就完全變了
元素寬度與高度的自適應
在使用盒布局時，元素的寬度與高度具有自適應性，也就是說元素的寬度與高度可以根據排列方向的改變而改變
看下面的例子，整個html界面代碼如下所示：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
#container {
display: -moz-box;
display: -webkit-box;
border: 5px solid blue;
-moz-box-orient: horizontal;
-webkit-box-orient: horizontal;
width: 500px;
height: 300px;
}
#text-a {
background-color: orange;
}
#text-b {
background-color: yellow;
}
#text-c {
background-color: limegreen;
}
#text-a, #text-b, #text-c {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}
</style>
</head>
<body>
<div id="container">
<div id="text-a">示例文字A</div>
<div id="text-b">示例文字B</div>
<div id="text-c">示例文字C</div>
</div>
</body>
</html>

View Code
界面效果如下所示：
當我們改變上述代碼container里面的css如下所示（也就是改變排列方式為垂直方向）：

 #container {
display: -moz-box;
display: -webkit-box;
border: 5px solid blue;
-moz-box-orient: vertical;
-webkit-box-orient: vertical;
width: 500px;
height: 300px;
}

則界面效果圖如下所示：

使用彈性盒布局來消除空白
看了上面的效果圖，大家一定在想，容器中總還是留出一大片空白的區域，應該要怎樣來消除呢？其實可以使用css3中的彈性盒布局來解決，也就是使得多個參與排列的元素的總寬度與總高度始終等于容器的寬度與高度
下面我們來修改一下上述代碼（將排列方向設置為水平，在中間一個子div上加入box-flex屬性）
css樣式如下所示：

 #container {
display: -moz-box;
display: -webkit-box;
border: 5px solid blue;
-moz-box-orient: horizontal;
-webkit-box-orient: horizontal;
width: 500px;
height: 300px;
}
#text-a {
background-color: orange;
}
#text-b {
background-color: yellow;
-moz-box-flex:1;
-webkit-box-flex:1;
}
#text-c {
background-color: limegreen;
}
#text-a, #text-b, #text-c {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}

界面顯示效果便如下所示了
當然你也可以設置排列方向為垂直，那么界面自然會顯示成如下這樣了
對多個元素使用box-flex屬性
現在我們不只對中間的子div加上box-flex，也對第一個子div加上box-flex，那么結果會怎么樣呢

 #container {
display: -moz-box;
display: -webkit-box;
border: 5px solid blue;
-moz-box-orient: vertical;
-webkit-box-orient: vertical;
width: 500px;
height: 300px;
}
#text-a {
background-color: orange;
-moz-box-flex: 1;
-webkit-box-flex: 1;
}
#text-b {
background-color: yellow;
-moz-box-flex: 1;
-webkit-box-flex: 1;
}
#text-c {
background-color: limegreen;
}
#text-a, #text-b, #text-c {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
}

如果三個子div都加上box-flex屬性，那么每個div高度等于容器的高度除以3，也就是效果圖所示所示：
其實box-flex:1就是讓其占據剛剛好的寬度，也就是說除去其它的部分，它剛好占滿全部
你動手去嘗試一下用box-flex:2，會發現box-flex:2并非box-flex:1的兩倍就是這個道理，1只是代表單位像素，也就是剛剛好的寬高，并非代表數值
指定水平方向與垂直方向的對齊方式
在css2中，如果想方案水平居中就只能用text-align:center，但是卻不能讓文字垂直居中，在css3中，只要讓div元素使用box-align屬性就行了。
示例代碼

 div {
display: -moz-box;
display: -webkit-box;
-moz-box-align: center;
-webkit-box-align: center;
-moz-box-pack: center;
-webkit-box-pack: center;
width: 200px;
height: 100px;
background-color: pink;
}

如果在div容器中放入“示例文字”這幾個字，界面運行效果就會如下所示：（同樣，如果我們在div里面放入圖像也是可以實現水平和垂直方向居中的）

(繼續閱讀...)

AutoPoster 發表在痞客邦留言(0) 人氣(0)

個人分類：生活學習

▲top

3月 09 週四 201720:20
HTML5系列二（標簽元素、FileReader、拖放）

文章出處
nav元素的使用場合
頁面中可以包含多個nav元素，通常情況下頭部和尾部都會包含導航，這樣提高了可訪問性，訪客能夠清晰的將其辨認出來。nav元素是一個可以用來作為頁面導航的鏈接組；其中的導航元素鏈接到其他頁面或當前頁面的其他部分。

<nav>
<ul>
<li><a href="http://www.cnblogs.com">博客園</a></li>
<li><a href="/home/">首頁</a></li>
<li><a href="/newBlog/">新隨筆</a></li>
<li><a href="/link/">聯系</a></li>
<li><a href="/manage/">管理</a></li>
</ul>
</nav>

section：頁面的邏輯區域或內容組合
section區段是頁面上的邏輯區域，在描述頁面邏輯區域時，我們可以使用section元素來代替之前被隨意濫用的div標簽，section可以表示成一個小節。事實上我們就是利用section元素將內容合理歸類。一般來說一個section包含一個head和一個content內容塊。
section元素不是一般的容器元素，所以如果一個元素需要定義相應的style或者script腳本的話，那推薦使用div元素，section的使用條件是確保這個元素的內容能夠明確地展示在文檔的大綱里。
article正文或一篇完整的內部

最適合描述網頁實際內容的元素非article標簽莫屬。section標簽視為對文檔邏輯部分的描述，而將article標簽視為對具體內容的描述。區段可以包含多篇文章，文章內容又可以劃分若干區段。section元素是更通用的元素，可以用來從邏輯上對其他元素進行分組。如果元素的內容集中到一起顯示可以表達相應的意思的話，那就可以定義成article元素，而沒必要使用section元素。
我們可以在article元素內部使用header元素和footer元素，以更方便的描述具體的邏輯區域，也可以使用section元素將文檔分為多個部分。
article代表了一個文檔內容的獨立片段，article 是一個特殊的 section 標簽，它比 section 具有更明確的語義, 它代表一個獨立的、完整的相關內容塊。一般來說， article 會有標題部分(通常包含在 header 內)，有時也會包含 footer 。雖然 section 也是帶有主題性的一塊內容，但是無論從結構上還是內容上來說，article 本身就是獨立的、完整的。當 article 內嵌 article 時，原則上來說，內部的 article 的內容是和外層的 article 內容是相關的。
aside元素的使用場合
有時候我們需要為主要內容添加一些附加信息，如引言、圖表、相關鏈接等，這時候就可以使用aside標簽來標識。
aside元素主要有以下兩種使用方法：
1、被包含在article中作為主要內容的附屬信息部分，其中的內容可以是與當前文章有關的參考資料、名詞解釋等
2、在article元素之外使用，作為頁面或站點全局的附屬信息部分

自定義數據屬性
開發人員可以在任何元素上定義他們想要的任何屬性，只要他們在其之前加上 data- 的前綴，以此避免與未來的HTML版本的沖突，asp.net MVC下的jQuery驗證就是采用這種方式。使用自定義數據屬性為客戶端腳本提供了額外的信息。自定義數據屬性不會使瀏覽器出錯，同時HTML5文檔類型聲明可保證文檔是有效的。因為所有自定義數據屬性都是以data-前綴開頭，HTML5文檔的驗證器會在驗證時忽略它。幾乎在所有的瀏覽器中你都能夠使用自定義屬性，所以我們就可以用JavaScript中輕易獲取它們。

構造可訪問的頁面，第一步就是確保禁用JavaScript的情況下，所有功能仍然能夠正常運轉。順便說一句在HTML5中，廢棄了onclick等，這是因為像onclick屬性它讓行為和內容太緊密耦合了。
看看如下代碼，想想它的用途：

 <!--[if lt IE 9]-->
<script type="text/javascript">
document.createElement('nav');
document.createElement('header');
document.createElement('footer');
document.createElement('aside');
document.createElement('article');
</script>

html5細節概述
1、一個網頁內并未限制header元素的個數，可以擁有多個，也可以為每個內容區塊加一個header元素（footer同理）
header元素是一種具有引導和導航作用的元素。頭部可能包含從公司LOGO到搜索框在內的各種各樣的內容，所以不要把header與h1等標簽混為一談。同一個頁面中可以包含多個header元素，每個獨立的區段或文章段都可以擁有自己的頭部。
footer元素用來為文檔或相鄰區段定義尾部信息。HTML5規范中允許在同一個頁面中出現多個footer元素，也就是說在section或者article中也可以使用footer,footer與header類似通常也包含其它元素。footer通常包括其相關區塊的附加信息，如作者、相關閱讀鏈接以及版權信息等。
2、autofocus：一個頁面上只能有一個控件具有該屬性
autofocus屬性穩定生效的前提是頁面中設置了唯一的autofocus屬性，如果設置了多個，瀏覽器會把用戶光標定位到最后一個設置了autofocus屬性的表單域上。

 function hasAutofocus() {
var element = document.createElement('input');
return 'autofocus' in element;
}

3、pattern屬性：要求輸入內容符合一定的格式

<input pattern="[0-9][A-Z]{3}" name="part" placeholder="輸入內容：一個數字與三個大寫字母" />

4、form元素與input元素都具有一個checkValidity方法，調用該方法可以顯式的進行有有效性驗證
5、兩種方法取消表單驗證：1）利用form元素的novalidate屬性2）利用input元素的input元素或submit元素的formnovalidate屬性，因為利用input元素的formnovalidate屬性可以讓表單驗證對單個input失效，而如果用submit元素的formnovalidate屬性則整個表單都失效
6、自定義錯誤可利用input類型元素的setCustomValidity方法
7、mark元素的兩個應用場景：1）搜索結果中高亮顯示關鍵字2）引用原文的時候，將原文作者沒有特別重要標示出來的內容標示出來
8、progress元素的使用示例

 <h2>progress元素的使用示例</h2>
<p>完成百分比：<progress id="p" max="100"> <span>0</span>%</progress></p>
<input type="button" value="請點擊" onclick="btnClick()" />
<script type="text/javascript">
function btnClick() {
var progressBar = document.getElementById('p');
progressBar.getElementsByTagName('span')[0].textContent = '0';
for (var i = 0; i < 100; i++) {
updateProgress(i);
}
}
function updateProgress(newValue) {
var progressBar = document.getElementById('p');
progressBar.value = newValue;
progressBar.getElementsByTagName('span')[0].textContent = newValue;
}
</script>

9、html5中FileList對象與file對象簡單示例（下例中accept屬性表示可以上傳的文件格式）

 <input type="file" id="file" multiple size="80" accept="image/*"/>
<input type="button" onclick="showFileName();" value="文件上傳" />
<script type="text/javascript">
function showFileName() {
var file;//= document.getElementById('file');
for (var i = 0; i < document.getElementById('file').files.length; i++) {
file = document.getElementById('file').files[i];
console.log(file.name);//文件名
 console.log(file.lastModifiedDate);//文件最后一次修改時間
 console.log(file.size);//文件字節長度
 console.log(file.type);//文件類型 對于圖像類型的文件，Blob對象的type屬性是以image/開頭
 }
}
</script>

10、autocomplete屬性用以通知瀏覽器不要為當前表單域自動填充數據。某些瀏覽器能夠記錄用戶之前輸入的數據，而在某些場合下，我們想告知瀏覽器我們不希望用戶使用記錄數據，這時候autocomplete屬性就起作用啦。
11、contenteditable屬性可以自動完成數據輸入部分的工作，為了保存編輯過的數據，還需要編寫少量用于向服務器端發送數據的JavaScript代碼。任何元素使用contenteditable屬性的話，代表該元素是一個可編輯的區域。用戶可以改變元素的內容以及操作標記。

<h3 contenteditable="true">這是一個可編輯的標題。請試著編輯該文本。</h3>

contenteditable屬性有3種值可選：true, false和空字符，空字符代表true。
如果用js對框架頁面設置contenteditable,可用：框架ID.document.designMode="on" 。
12、spellcheck 屬性規定是否對元素內容進行拼寫檢查

<p contenteditable="true" spellcheck="true">這是可編輯的段落。您可以試試看您編輯的文本是否需要進行拼寫檢查</p>

13、draggable 和 dropzone 屬性可以與新的拖放API一起使用，draggable為是否允許拖放，dropzone代表可以拖放到哪個區域

<p draggable="true" dropzone="myHolder">拖放測試</p>

HTML5中input元素的種類

使用search類型創建搜索域：search 輸入類型用于搜索字段，比如站內搜索或谷歌搜索等。搜索字段的外觀與常規的文本字段無異。

使用range類型創建滑塊

使用數值框處理數字

日期控件

Email類型

URL類型

Color類型

下面來一一詳細說明一下：
使用range類型創建滑塊

<input type="range" min="0" max="10" name="myRange" value="0" id="myRange" />

屬性值描述

max
number
規定允許的最大值。

min
number
規定允許的最小值。

step
number
規定合法數字間隔（如果 step="3"，則合法數字是 -3,0,3,6，以此類推）

value
number
規定默認值。

使用數值框處理數字
number 輸入類型用于包含數字值的輸入字段。您可以設置可接受數字的限制。
與range類型的滑塊類似，可以設定最大值和最小值。但是直接輸入的數字不受最小值和最大值的限制。控件增減的步長由step屬性來指定，step屬性可以是任意數字，其默認值為1

屬性值描述

max
number
規定允許的最大值。

min
number
規定允許的最小值。

step
number
規定合法數字間隔（如果 step="3"，則合法的數字是 -3,0,3,6, 以此類推）

value
number
規定默認值。

Points: <input type="number" name="points" min="1" max="10" />

日期控件
HTML5 擁有多個供選擇日期和時間的新的輸入類型：

date - 選擇日、月、年

month - 選擇月、年

week - 選擇周、年

time - 選擇時間（時、分）

datetime - 選擇時間、日期、月、年（UTC 時間）

datetime-local - 選擇時間、日期、月、年（本地時間）

Date: <input type="month" name="user_month" />

Email類型
email 輸入類型用于應該包含電郵地址的輸入字段。當提交表單時，會自動地對 email 字段的值進行驗證。iPhone 的 Safari 瀏覽器會識別 email 輸入類型，然后改變觸摸屏的鍵盤來適應它

E-mail: <input type="email" name="user_email" />

URL類型
url 輸入類型用于應該包含 URL 地址的輸入字段。會在提交表單時對 url 字段的值自動進行驗證。iPhone 的 Safari 瀏覽器會識別 url 輸入類型，然后改變觸摸屏的鍵盤來適應它

Homepage: <input type="url" name="user_url" />

Color類型
color 輸入類型用于規定顏色。該輸入類型允許您從拾色器中選取顏色。

Color: <input type="color" name="user_color" />

現在暫時只有opera實現了color類型的input，那么我們如何用js來判斷瀏覽器是否支持color類型呢

function hasColorSupport() {
var input = document.createElement('input');
input.setAttribute('type', 'color');
var hasColorType = (input.type != 'text');
if (hasColorType) {
var testString = 'foo';
input.validationMessage = testString;
hasColorType = (input.value != testString);
}
return (hasColorType);
}

FileReader接口
FileReader接口的方法API如下圖所示：
下面用一個示例來說明：

 <script type="text/javascript">
var result = document.getElementById('result');
var file = document.getElementById('file');
if (typeof FileReader == 'undefined') {
result.innerHTML = '您的瀏覽器不支持FileReader'
file.setAttribute('disabled', 'disabled');
}
function readAsDataURL() {
var file = document.getElementById('file').files[0];
if (!/image\/\w+/.test(file.type)) {
alert('請確保文件為圖像類型');
return false;
}
var reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = function (e) {
var result = document.getElementById('result');
result.innerHTML = '<img src="' + this.result + '" alt="" />';
}
}
function readAsBinaryString() {
var file = document.getElementById('file').files[0];
var reader = new FileReader();
reader.readAsBinaryString(file);
reader.onload = function (e) {
var result = document.getElementById('result');
result.innerHTML = this.result;
}
}
function readAsText() {
var file = document.getElementById('file').files[0];
var reader = new FileReader();
reader.readAsText(file);
reader.onload = function (e) {
var result = document.getElementById('result');
result.innerHTML = this.result;
}
}
</script>
<p>
<label>請選擇一個文件：</label>
<input type="file" id="file" />
<input type="button" value="讀取圖像" onclick="readAsDataURL()" />
<input type="button" value="讀取二進制數據" onclick="readAsBinaryString()" />
<input type="button" value="讀取文件文件" onclick="readAsText()" />
</p>
<div id="result"></div>

FileReader接口的事件API如下圖所示：

 <script type="text/javascript">
var result = document.getElementById('result');
var file = document.getElementById('file');
if (typeof FileReader == 'undefined') {
result.innerHTML = '您的瀏覽器不支持FileReader'
file.setAttribute('disabled', 'disabled');
}
function readFile() {
var file = document.getElementById('file').files[0];
if (!/image\/\w+/.test(file.type)) {
alert('請確保文件為圖像類型');
return false;
}
var reader = new FileReader(); 
reader.onload = function (e) {
console.log('onload');
var result = document.getElementById('result');
result.innerHTML = '<img src="' + this.result + '" alt="" />';
}
reader.onprogress = function () {
console.log('progress');
}
reader.onabort = function () {
console.log('abort');
}
reader.onerror = function () {
console.log('loadstart');
}
reader.onloadstart = function () {
console.log('loadstart');
}
reader.onloadend = function () {
console.log('loadend');
}
reader.readAsDataURL(file);
} 
</script>
<p>
<label>請選擇一個圖像文件：</label>
<input type="file" id="file" />
<input type="button" value="顯示圖像" onclick="readFile()" />
</p>
<div id="result"></div>

拖放API

<script type="text/javascript">
function init() {
var source = document.getElementById('dragme');
var dest = document.getElementById('text');
var dragIcon = document.createElement('img');
dragIcon.src = 'http://files.cnblogs.com/files/liyunhua/ctrip.gif';
source.addEventListener('dragstart', function (ev) {
var dt = ev.dataTransfer;//向dataTransfer對象追加數據
 dt.effectAllowed = 'copy';//設置effectAllowed屬性
//dt.setDragImage(dragIcon, -10, 10); //設定自定義圖標
 dt.setData('text/plain', '你好');
}, false);
dest.addEventListener('dragover', function (ev) {
var dt = ev.dataTransfer;
dt.dropEffect = 'copy';//設定dropEffect屬性
 ev.preventDefault();
}, false);
/*因為默認情況下，拖放的目標元素是不允許接受元素的，為了把元素拖放到其中，必須把默認處理給關閉掉*/
dest.addEventListener('dragend', function (ev) {
ev.preventDefault();//不執行默認行為（拒絕被拖放）
 }, false);
/*必須在目標元素的drop事件中關閉默認處理，否則目標地元素不能接受被拖放的元素*/
dest.addEventListener('drop', function (ev) {
var dt = ev.dataTransfer;//從dataTransfer對象獲得數據
var text = dt.getData('text/plain');
dest.textContent += text;
ev.preventDefault();//不執行默認行為（拒絕被拖放）
 ev.stopPropagation();//停止事件傳播
 }, false);
}
//還必須設定整個頁面為不執行默認處理（拒絕被播放）
 document.ondragover = function (e) {
e.preventDefault();
}
document.ondrop = function (e) {
e.preventDefault();
}
</script>
<body onload="init()">
<div id="dragme" draggable="true" style="width: 200px; border: 1px solid gray;">請拖放 </div>
<div id="text" style="width: 300px; height: 300px; border: 1px solid gray;"></div>
</body>

(繼續閱讀...)

AutoPoster 發表在痞客邦留言(0) 人氣(4)

個人分類：生活學習

▲top

3月 09 週四 201720:19
CSS3系列二（媒體支持、文字與字體相關樣式、盒相關樣式）

文章出處
CSS3媒體支持
在css3中允許我們在不改變內容的情況下，在樣式中選擇一種頁面的布局以精確的適應不同的設備，從而改善用戶體驗
可以利用meta標簽在頁面中指定瀏覽器在處理本頁面時按照多少像素的窗口寬度來進行，指定方法如下所示

<meta name="viewport" content="width=600px" />

CSS可以通過設置media來決定該樣式所適用的設備，如screen、tv、print、speech、handheld、all等

<style media="all">
<link media="print" href="xxx.css">

CSS3則可以基于更多的視覺屬性來設置，例如高、寬、高寬比、分辨率、設備的尺寸等等。

<style media="screen and (min-width:600px) and (max-width:900px)">

具體來說，Media Queries的使用方法如下所示：
在Media Queries中可以指定的值與該值所代表的設備類型如下所示：
在Media Queries中具體設備特征的說明如下所示：
使用and關鍵字來指定當某種設備類型的某種特性的值滿足某個條件時所使用的樣式
使用多條語句來將同一樣式應用于不同的設備類型和設備特性中
可以在表達式中加not關鍵字或only關鍵字，not關鍵字表示對后面的表達式執行取反操作
only關鍵字的作用是讓那些不支持Media Queries 但是能夠讀取Media Type的設備的瀏覽器將表達式的樣式隱藏起來
給文字添加陰影
讓文本自動換行
對于西方文字來說，瀏覽器會在半角空格或連字符的地方自動換行，而不會在單詞的當中突然換行。當中文當中含有標點符號的時候，瀏覽器總是不可能讓標點符號位于一行文字的行首。
在css3中可以使用word-break屬性來決定自動換行的處理方法
讓長單詞與URL地址自動換行

 div {
word-wrap:break-word;
}

使用服務器端字體
webfonts是一項非常早的CSS技術，通過下載字體文件，可以讓頁面渲染特定的字體。
使用@font-face屬性顯示客戶端本地的字體時，需要將字體文件路徑的URL屬性值修改為local()形式的屬性值，并且在local后面的括號中寫入使用的字體
在format屬性值中聲明字體文件的格式（使用TrueType文件格式時將format屬性值設定為truetype，使用OpenType格式時將format屬性值設定為opentype。TrueType的文件擴展名為ttf，OpenType格式的文件擴展名為otf 在IE中使用服務器端字體時，只能使用微軟自帶的Embedded OpenType字體文件，文件擴展名為eot）
英文字體不錯，通常在100k以下。但中文字體太大，往往都在3M~5M，甚至更大。TTF/OTF字體非常好找，EOT比較難下載。
在線轉換： http://www.fontsquirrel.com/
對于中文字體，如果僅僅只是需要幾個固定的字（例如導航），可以自行裁剪字庫。類似的小工具很多，例如FontCreator等
在@font-face屬性中，可以指定的屬性值如下所示：

這里說一下font-size-adjust屬性的使用，其實使用方法很簡單，但卻需要使用每個字體自帶的一個aspect值（比例值）

引用《HTML5與css3權威指南》中介紹的一種瀏覽器對于aspect值的計算方法

CSS3盒相關樣式
1、width和height屬性只能使用在block類型的元素上，對inline類型的元素根據不起作用
2、默認情況下table元素屬性block類型的，所以不能與其它文字處于同一行中，但是如果將table元素修改為inline-table類型就可以讓表格與其它文字處于同一行中
3、將元素指定為run-in或compact類型時，如果元素后面還有block類型的元素，run-in類型的元素將被包含在block類型的元素內部，而compact類型的元素將被放置在block類型的元素左邊
4、css3中所有與表格相關的元素及其所屬類型如下所示
各瀏覽器對于各種盒類型的支持情況
超出部分以顯示省略號

 div {
white-space:nowrap;/*使得盒右端的內容不能換行顯示，這樣一來盒中的內容就在水平方向上溢出了*/
overflow:hidden;/*超出div元素部分的文字將會被隱藏起來*/
text-overflow:ellipsis;/*在div元素的末尾出現一個省略號*/
}

盒相關的屬性box-shadow、box-sizing
box-shadow使用方法跟text-shadow是一模一樣的。
box-sizing:可以指定用width屬性與height屬性分別指定的寬度值與高度值是否包含元素內部的補白區域，以及邊框的寬度與高度
使用box-sizing屬性的目的是控制元素的總寬度，如果不使用該屬性，樣式中默認使用的是content-box屬性值，它只對內容的寬度做一個指定，卻沒有對元素的總寬度進行指定，有些場合下利用border-box屬性值會使得頁面布局更加方便
CSS3中其它一些重要細節問題
1）可能認為設置顏色值的alpha通道和opacity沒有特別大的區別，事實上，需要同時對背景色和文字顏色都使用alpha通道才能達到使用opacity的效果

opacity : 0.6; /* 標準瀏覽器和IE9 */
filter : alpha(opacity=0.6); /* IE6 7 8 */

color : rgba(255,100,20,0.6);
background: hsla(10,0,50%,0.4);

2）如果將顏色值指定為transparent，則會將背景、文字或邊框等的顏色設定為完全透明，相當于使用了值為0的alpha通道（在css3中可以在一切指定顏色值的屬性中指定transparent值）
3）大家都知道css2中用outline屬性來使得元素周圍繪制一條輪廓線，具體使用方法如下所示
在默認情況下，對帶有邊框的元素來說，使用outline屬性將緊貼著邊框外圍繪制一條輪廓線，如果我們想讓輪廓線向外偏離幾個像素呢，css3新增的outline-offset屬性就起這個效果，使用很簡單，就是為其指定一個帶像素單位的整數值即可，如果指定為正整數，則向外偏移，如果指定為負整數，則向內偏移
4）css3的resize發展允許用戶通過拖放的方式來修改元素的尺寸（主要用于使用overflow屬性的任何容器元素中）
可以為resize屬性指定的值分為如下幾種
5）在css3中，可以利用initial屬性值取消對元素的樣式指定，但是在個別情況下，對元素使用initial屬性值后的顯示結果并不等于將該元素的樣式設定直接刪除后的結果（因為追加了initial屬性值的樣式設定后，元素的字號和字體粗細均使用css中對字號和字體粗細屬性設定的默認值，并不考慮瀏覽器對元素追加了什么樣式）

(繼續閱讀...)

AutoPoster 發表在痞客邦留言(0) 人氣(0)

個人分類：生活學習

▲top

3月 09 週四 201720:19
LABjs(類似于LazyLoad,但它更加方便管理依賴關系)

文章出處
動態加載JS函數
一般性的，當我們需要加載js文件的時候都會使用script標簽來實現，類似于如下代碼：

<script type="text/javascript" src="example.js"></script>

但是直接使用script標簽來加載js文件會有如下一些缺點：

嚴格的讀取順序。由于瀏覽器按照<script>在網頁中出現的順序，讀取Javascript文件，然后立即運行，導致在多個文件互相依賴的情況下，依賴性最小的文件必須放在最前面，依賴性最大的文件必須放在最后面，否則代碼會報錯。

性能問題。瀏覽器采用"同步模式"加載<script>標簽，也就是說，頁面會"堵塞"（blocking），等待javascript文件加載完成，然后再運行后面的HTML代碼。當存在多個<script>標簽時，瀏覽器無法同時讀取，必須讀取完一個再去讀取另一個，造成讀取時間大大延長，頁面響應緩慢。

這個時候我們就會想到去動態加載JS，動態加載js的實現方法類似于如下代碼

/*
*@desc:動態添加script
*@param src:加載的js文件的地址
*@param callback:js文件加載完成之后需要調用的回調函數
*@demo:
addDynamicStyle('http://webresource.c-ctrip.com/code/cquery/LABjs/LAB.js', function () {
alert('攜程服務器上的lab.js加載完成')
});
*/
function addDynamicJS(src, callback) {
var script = document.createElement("script");
script.setAttribute("type", "text/javascript");
script.src = src[i];
script.charset = 'gb2312';
document.body.appendChild(script);
if (callback != undefined) {
script.onload = function () {
callback();
}
}
}

這樣不會造成頁面堵塞，但會造成另外一個問題：這樣加載的Javascript文件，不在原始的DOM結構之中，因此在DOM-ready（DOMContentLoaded）事件和window.onload事件中指定的回調函數對它無效。
這個時候我們就會想到用一些外部函數庫來有效的管理JS加載問題。
下面進入正題說說LAB.js
LAB.js
如果我們使用傳統的方法來加載js的話，寫的代碼一般會如下方代碼所示風格。

 <script src="aaa.js"></script>
<script src="bbb-a.js"></script>
<script src="bbb-b.js"></script>
<script type="text/javascript">
initAaa();
initBbb();
</script>
<script src="ccc.js"></script>
<script type="text/javascript">
initCcc();
</script>

如果我們使用LAB.js的話，要實現上述代碼功能，則使用如下方式

 <!--先加載lab.js庫-->
<script src="http://webresource.c-ctrip.com/code/cquery/LABjs/LAB.js"></script>
<script type="text/javascript">
$LAB
.script("aaa.js").wait()//不帶參數的.wait()方法表示立即運行剛才加載的Javascript文件
 .script("bbb-a.js")
.script("bbb-b.js")//依次加載aaa.js bbb-a.js bbb-b.js 然后執行initAaa initBbb
 .wait(function () {//帶參數的.wait()方法也是立即運行剛才加載的Javascript文件，但是還運行參數中指定的函數。
 initAaa();
initBbb();
})
.script("ccc.js")//再加載ccc.js 加載完成ccc.js之后執行initCcc方法
 .wait(function () {
initCcc();
});
</script>

可以同時運行多條$LAB鏈，但是它們之間是完全獨立的，不存在次序關系。如果你要確保一個Javascript文件在另一個文件之后運行，你只能把它們寫在同一個鏈操作之中。只有當某些腳本是完全無關的時候，你才應該考慮把它們分成不同的$LAB鏈，表示它們之間不存在相關關系。
一般性的使用示例

$LAB
.script("script1.js") // script1, script2, and script3 相互不依賴, 可以按照任意的順序執行
.script("script2.js")
.script("script3.js")
.wait(function(){
alert("Scripts 1-3 are loaded!");
})
.script("script4.js") //必須等待script1.js,script2.js,script3.js執行完畢之后才能執行
.wait(function(){script4Func();});

$LAB
.script("script.js") 
.script({ src: "script1.js", type: "text/javascript" })
.script(["script1.js", "script2.js", "script3.js"])
.script(function(){
// assuming `_is_IE` defined by host page as true in IE and false in other browsers 
if (_is_IE) {
return "ie.js"; // only if in IE, this script will be loaded
 }
else {
return null; // if not in IE, this script call will effectively be ignored
 }
})

在控制臺看LAB.js的加載信息
如果你想調試或者說在控制臺看各個js加載信息的話，可以使用$LAB.setGlobalDefaults 方法,具體使用請看代碼示例。

 <!--先加載攜程的LAB庫 lab.js在網上也可以下載-->
<script type="text/javascript" src="http://webresource.c-ctrip.com/code/cquery/LABjs/LAB.js" charset="gb2312"></script>
<script type="text/javascript">
$LAB.setGlobalDefaults({ Debug: true }) //打開調試

$LAB
//第一個執行鏈
.script('http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js')
.script('http://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js')
//第二個執行鏈
.wait(function () {
//console.log(window.$)
//console.log(window._)
 })
//第三個執行鏈
.script('http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.min.js')
.script('http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.pack.js')
//第四個執行鏈
.wait(function () {
// console.log(plugin1Function)
// console.log(plugin2Function)
 })
//第五個執行鏈
.script('js/aaa.js')
.script('js/bbb.js')
//第六個執行鏈
.wait(function () {
// console.log(module1Function)
// console.log(module2Function)
 })
</script>

這個時候打開控制臺，看信息，如下圖所示：

我相信你看到這兒肯定會為Lab.js的調試功能驚嘆不已。事實上Lab.js確實是挺強大的，我也只是了解它的一些淺顯的功能。先記下來，拿來分享一下同時也為了以后方便自己。

(繼續閱讀...)

AutoPoster 發表在痞客邦留言(0) 人氣(10)

個人分類：生活學習

▲top

3月 09 週四 201720:19
高性能JavaScript筆記二（算法和流程控制、快速響應用戶界面、Ajax）

文章出處
循環
在javaScript中的四種循環中（for、for-in、while、do-while），只有for-in循環比其它幾種明顯要慢，另外三種速度區別不大
有一點需要注意的是，javascript沒有塊級作用域，只有函數級作用域，也就是說在for循環初始化中的var語句會創建一個函數級變量而非循環級變量
優化循環的方法有如下
1、減少對象成員及數組項的查找次數（使用局部變量保存需要查找的對象成員）
2、顛倒數組的順序來提高循環性能，也就是從最后一項開始向前處理

 for (var i = arr.length-1; i >= 0 ; i--) {
//process
}

3、相信大家都會盡可能的使用for循環而非jQuery的each來遍歷數組，那是因為jQuery的each方法是基于函數的迭代。盡管基于函數的迭代提供了一個更為便利的迭代方法，但它比基于循環的迭代在慢許多。
4、有時候我們會想到底是使用if-else呢還是使用switch，事實上在大多數情況下switch比if-else運行得要快，所以當判斷多于兩個離散值時，switch語句是更佳的選擇
5、優化if-else最簡單的方法就是確保最可能出現的條件放在首位，另外一個方法就是優化條件判斷的次數，看下面的代碼您就懂了

if (value == 0) {
return result0;
} else if (value == 1) {
return result1;
} else if (value == 2) {
return result2;
} else if (value == 3) {
return result3;
} else if (value == 4) {
return result4;
} else if (value == 5) {
return result5;
} else if (value == 6) {
return result6;
} else if (value == 7) {
return result7;
} else if (value == 8) {
return result8;
} else if (value == 9) {
return result9;
} else if (value == 10) {
return result10;
}

下面這種方法就是使用二分搜索法將值域分成一系列區間，然后逐步縮小區范圍，對上面的例子進行的優化

 if (value < 6) {
if (value < 3) {
if (value == 0) {
return result0;
} else if (value == 1) {
return result1;
} else {
return result2;
}
} else {
if (value == 3) {
return result3;
} else if (value == 4) {
return result4;
} else {
return result5;
}
}
} else {
if (value < 8) {
if (value == 6) {
return result06;
} else if (value == 7) {
return result7;
}
} else {
if (value == 8) {
return result8;
} else if (value == 9) {
return result9;
} else {
return result10;
}
}
}

6、使用遞歸雖然可以把復雜的算法變得簡單，但遞歸函數如果終止條件不明確或缺少終止條件會導致函數長時間運行。所以遞歸函數還可能會遇到瀏覽器“調用棧大小限制”
使用優化后的循環來替代長時間運行的遞歸函數可以提升性能，因為運行一個循環比反復調用一個函數的開銷要少的多
如果循環資料太多，可以考慮使用如下介紹的達夫設備原理來提升性能
達夫設備

 var iterations = Math.floor(items.length / 8),
startAt = items.length % 8,
i = 0;
do {
//每次循環最多可調用8次process
switch (startAt) {
case 0: process(items[i++]);
case 7: process(items[i++]);
case 6: process(items[i++]);
case 5: process(items[i++]);
case 4: process(items[i++]);
case 3: process(items[i++]);
case 2: process(items[i++]);
case 1: process(items[i++]);
}
startAt = 0;
} while (--iterations);

 var i = items.length % 8;
while (i) {
process(items[i--]);
}
i = Math.floor(items.length / 8);
while (i) {
process(items[i--]);
process(items[i--]);
process(items[i--]);
process(items[i--]);
process(items[i--]);
process(items[i--]);
process(items[i--]);
process(items[i--]); 
}

Memoization
避免重復是Memoization的核心思想，它緩存前一次計算結果供后續使用，下面代碼就是利用緩存結果的思想計算階乘的

 function memFactorial(n) {
if (!memFactorial.cache) {
memFactorial.cache = {
"0": 1,
"1": 1
};
}
if (!memFactorial.cache.hasOwnProperty(n)) {
memFactorial.cache[n] = n * memFactorial(n - 1);
}
return memFactorial.cache[n];
}

寫成通用方法如下代碼所示：

 function memoize(fundamental, cache) {
cache = cache || {};
var shell = function (arg) {
if (!cache.hasOwnProperty(arg)) {
cache[arg] = fundamental(arg);
}
return cache[arg];
}
return shell;
}
//下面是調用示例
function factorial(n) {
if (n==0) {
return 1;
}else{
return n*factorial(n-1);
}
}
var memfactorial = memoize(factorial, { "0": 1, "1": 1 });
memfactorial(6);

算法和流程控制小結
字符串優化

 str += "one" + "two";
//以下代碼分別用兩行語句直接附加內容給str，從而避免產生臨時字符串 性能比上面提升10%到40%;
str += "one";
str += "two";
//同樣你可以用如下一句達到上面同樣的性能提升
str = str + "one" + "two";
//事實上 str = str + "one" + "two";等價于 str = ((str + "one") + "two");

或許大家都喜歡用Array.prototype.join方法將數組中所有元素合并成一個字符串，雖然它是在IE7及更早版本瀏覽器中合并大量字符串唯一高效的途徑，但是事實上在現代大多數瀏覽器中，數組項連接比其它字符串連接的方法更慢。
在大多數情況下，使用concat比使用簡單的+和+=要稍慢些。
快速響應用戶界面
javascript是單線程的，共用于執行javascript和更新用戶界面的進程通常被稱作為“瀏覽器UI線程”，也就是說某一時間，UI線程只能做一件事情，要么執行javascript，要么更新用戶界面，假設你當前的javascript需要執行很長時間，而這時候用戶點擊了界面按鈕，那么UI線程則無法立即響應用戶點擊更新按鈕UI狀態，導致用戶以為沒點擊而進行多次點擊操作
所以有些瀏覽器會限制javascript任務的運行時間
單個javascript操作花費的總時間不應該超過100毫秒，所以應該限制所有javascript任務在100毫秒或更短的時間內完成，但是。。。
應該讓出UI控制權（也就是停止執行javascript）使得UI線程有機會更新，然后再繼續執行javascript
使用setTimeout和setInterval來創建定時器（定時器代碼只有在創建它的函數執行完成之后，才有可能被執行）
使用setTimeout和使用setInterval幾乎相同，唯一的區別在于如果UI隊列中已經存在由同一個setInterval創建的任務，那么后續任務不會被添加到UI隊列中
每個定時器最好使用至少25毫秒，因為更小的延時對于大多數UI更新根本不夠用

 function processArray(items,process,callback) {
var todo = items.concat();//克隆原數組
setTimeout(function () {
process(todo.shift());
if (todo.length > 0) {
setTimeout(arguments.callee, 25);
} else {
callback(items);
}
}, 25);
}
//for example
var items = [123, 45, 443, 35, 53, 7544, 7654, 75, 75, 32, 653, 76];
function outputValue(value) {
console.log(value);
}
processArray(items, outputValue, function () {
console.log("Done");
});

同理，分割任務也是一樣。

 function multiStep(steps,args,callback) {
var tasks = steps.concat();//克隆數組
setTimeout(function () {
var task = tasks.shift();//執行下一個任務
task.apply(null, args || []);
//檢查是否還有其它任務
if (tasks.length > 0) {
setTimeout(arguments.callee, 25);
} else {
callback();
}
}, 25);
}
//for example
var tasks = [openDoc, writeText, closeDoc, updateUI];//由待執行函數組成的數組
multiStep(tasks, [id], function () {
console.log("Done");
});

相信了解過Html5的都知道，h5中引用了web worker來執行與ui更新無關的長腳本，這個也可以改善用戶響應時間。具體請見我的另外博文
web worker
快速響應的用戶界面小結
數據傳輸
有5種常用技術用于向服務器請求數據：

XMLHttpRquest(XHR)

Dynamic script tag insertion動態腳本注入

iframes

Commet

Multipart XHR

XMLHttpRquest：允許異步發送和接收數據，可以在請求中添加任何頭信息和參數，并讀取服務器返回的所有頭信息及響應文本
使用XHR時，POST和GET的對比，對于那些不會改變服務器狀態，只會獲取數據（這種稱作冪等行為）的請求，應該使用GET，經GET請求的數據會被緩存起來，如果需要多次請求同一數據的時候它會有助于提升性能。
只有當請求的URL加上參數的長度接近或超過2048個字符時，才應該用POST獲取數據，這是因為IE限制URL長度，過長時將會導致請求的URL截斷
另外需要注意的是：因為響應消息作為腳本標簽的源碼，所以返回的數據必須是可執行的javascript代碼，所以你不能使用純xml，純json或其它任何格式的數據，無論哪種格式，都必須封裝在一個回調函數中
使用XHR發送數據到服務器時，GET方式會更快，因為對于少量數據而言，一個GET請求往服務器只發送一個數據包，而一個POST請求至少發送兩個數據包，一個裝載頭信息，另一個裝載POST正文，POST更適合發送大量數據到服務器
Multipart XHR：允許客戶端只用一個HTTP請求就可以從服務器向客戶羰傳送多個資源，它通過在服務器端將資源打包成一個由雙方約定的字符串分割的長字符串并發送到客戶端，然后用javaScript處理那個長字符串，并根據mime-type類型和傳入的其它頭信息解析出每個資源
multipart XHR使用了流的功能，通過監聽readyState為3的狀態，我們可以在一個較大的響應還沒有完全接受之前就把它分段處理，這樣我們就可以實時處理響應片段，這也是MXHR能大幅提升性能的主要原因
使用Multipart XHR的缺點（但是它能顯著提升頁面的整體性能）：

獲得的資源不能被瀏覽器緩存

老版本的IE不支持readyState為3的狀態和data:URL(圖片不是由base64字符串轉換成二進制，而是使用data:URL的方式創建，并指定mime-type為image/jpeg 使用readyState為3是因為你不可能等所有數據都傳輸完成再處理，那樣會很慢)

Beacons技術
使用javascript創建一個新的Image對象，并把src屬性設置為服務器上腳本的URL，該URL包含我們要通過GET傳回的鍵值對數據（并沒有創建img元素，也沒有插入DOM）,服務器會接收到數據并保存起來，它需向客戶端發送任何回饋信息。這種方式是給服務器回傳信息最有效的方式，雖然它的優點是性能消耗很小，但它的缺點也顯而易見
發送的數據長度限制得相當小
如果要接收服務器端返回的數據一種方式是監聽Image對象的load事件，另外一種方式就是檢查服務器返回圖片的寬高來判斷服務器狀態
數據格式
現在xml這種數據格式已全然被json取代了，原因很多，主要原因是XML文件大小太大，解析速度慢，雖然XPath在解析xml文檔時比getElementsByTagName快許多，但XPath并未得到廣泛支持
JSON相對xml來說，文件體積相對更少，通用性強
JSON數據被當成另一個JavaScript文件并作為原生代碼執行，為實現這一點，這些數據必須封裝在一個回調函數中，這就是所謂的JSON填充（JSON with padding）JSON-P
最快的JSON格式就是使用數組形式的JSON-P
使用JSON-P必須注意安全性，因為JSON-P必須是可執行的JavaScript，它可能被任何人調用并使用動態腳本注入技術插入到網站，另一方面，JSON在eval前是無效的JavaScript，使用XHR時它只是被當作字符串獲取，所以不要把任何敏感數據編碼在JSON-P中。
理想的數據格式應該是只包含必要的結構，以便你可以分解出每一個獨立的字段，所以自定義格式相對來說體積更小點，可以快速下載，且易于解析（只要用split函數即可），所以當你創建自定義格式時，最重要的決定之一就是采用哪種分隔符

 var rows = req.responseText.split(/\u0001/);//正則表達式作為分隔符
var rows = req.responseText.split("\u0001");//字符串作為分隔符（更為保險）

數據格式總結
緩存數據

在服務器，設置HTTP頭信息以確保你的響應會被瀏覽器緩存

在客戶端，把獲取到的信息存儲到本地，從而避免再次請求

如果你希望Ajax響應能被瀏覽器緩存，請必須使用GET方式發出請求。設置Expires頭信息是確保瀏覽器緩存Ajax響應最簡單的方法，而且其緩存內容能跨頁面和跨會話
當然也可以手工管理本地緩存，也就是直接把服務器接收到的數據緩存起來
用習慣了Ajax類庫了，然后卻連自己怎么寫一個XMLHttpRequest都不知道了，事實上很多Ajax類庫都有這樣那樣的局限（比如說不允許你直接訪問readystatechange事件，這也意味著你必須等待完整的響應接收完畢之后才能開始使用它）所以......
Ajax小結

(繼續閱讀...)

AutoPoster 發表在痞客邦留言(0) 人氣(4)

個人分類：生活學習

▲top

3月 09 週四 201720:19
高性能JavaScript筆記三（編程實踐）

文章出處
避免雙重求值
有四個標準函數可以允許你傳入代碼的字符串，然后它才你動態執行。它們分別是：eval、Function、setTimeout、setInterval
事實上當你在javascript代碼中執行另外一段javascript代碼時，都會導致雙重求值的性能消耗，所以在大多數情況下，沒必要使得eval和Function函數，因此最好避免使用它們。至于setTimeout和setInterval，建議傳入函數而不是字符串來作為第一個參數
現在Safari4和chrome的javaScript引擎會緩存住那些使用了eval且重復運行的代碼，這也是一個性能提升點。
使用Object/Array直接量
使用直接量的兩大好處

運行速度更快

節省代碼量、減少文件尺寸(事實上對象屬性或者數組項數量越多，使用直接量的好處就越明顯)

不要重復工作
有兩種方法避免重復工作

延遲加載

條件預加載

以一個例子來說明吧

 function addHandler(target,eventType,handler) {
if (target.addEventListener) {//DOM2 Events
target.addEventListener(eventType, handler, false);
} else {//IE
target.attachEvent('on' + eventType, handler);
}
}
function removeHandler(target, eventType, handler) {
if (target.removeEventListener) {//DOM2 Events
target.removeEventListener(eventType, handler, false);
} else {//IE
target.detachEvent('on' + eventType, handler);
}
}

事實上頁面一加載，你就知道用戶是使用的哪種瀏覽器，但是這時候如果頁面上有100個元素需要添加事件綁定就需要判斷100次（而本身事實上你只需要去判斷一次）
下面使用延遲加載的方式來試試

 function addHandler(target, eventType, handler) {
if (target.addEventListener) {//DOM2 Events
addHandler = function (target, eventType, handler) {
target.addEventListener(eventType, handler, false);
}
} else {//IE
addHandler = function (target, eventType, handler) {
target.attachEvent('on' + eventType, handler);
}
}
addHandler(target, eventType, handler);//調用新的函數
 }
function removeHandler(target, eventType, handler) {
if (target.removeEventListener) {//DOM2 Events
removeHandler = function (target, eventType, handler) {
target.removeEventListener(eventType, handler, false);
}
} else {//IE
removeHandler = function (target, eventType, handler) {
target.detachEvent('on' + eventType, handler);
}
}
removeHandler(target, eventType, handler);//調用新的函數
}

調用延遲加載函數時，第一次會相對慢些，后面每次調用時都會很快，所以當一個函數在頁面中不會立即調用時，延遲加載是最好的選擇
另外一種方式是使用條件預加載：會在腳本加載期間提單檢測，而不會等到函數被調用

 var addHandler = document.body.addEventListener ?
function (target, eventType, handler) {
target.addEventListener(eventType, handler, false);
} :
function (target, eventType, handler) {
target.attachEvent('on' + eventType, handler);
};
var removeHandler = document.body.removeEventListener ?
function (target, eventType, handler) {
target.removeEventListener(eventType, handler, false);
} :
function (target, eventType, handler) {
target.detachEvent('on' + eventType, handler);
};

位操作
javascript中的數字都是以64位格式進行存儲的，在位操作中，數字被轉換為有符號32位格式，每次運算都是直接操作該32位數得到結果，事實上javascript位操作比其它數學運算和布爾運算操作都要快
舉例來說明一下
1、對2取模，一般性的大家會如下這樣寫

 if (i % 2) {
//是奇數
} else {
//是偶數
}

但下面這樣寫會更快些

 if (i & 1) {
//是偶數
} else {
//是奇數
}

2、位掩碼（也就是使用單個數字的每一位來判定是否選項成立，從而有效的把數字轉換為由布爾值標記組成的數組）示例代碼如下所示

 var OPTION_A = 1;
var OPTION_B=2;
var OPTION_C = 3;
var OPTION_D = 4;
var options = OPTION_A | OPTION_B | OPTION_C | OPTION_D;
if (options&OPTION_A) {
//選項a在列表中，進行處理processing
 }
if (options & OPTION_B) {
//選項b在列表中，進行處理processing
}

使用原生方法
無論你的javascript如何優化，都不會比js引擎提供的原生方法更快，原因很簡單這些原生方法在你寫代碼之前就已經存在瀏覽器中了，并且是使用低級語言寫的，這就說明這些代碼已經被編譯成機器碼成為瀏覽器的一部分了，啟能不比你的代碼快？
小結

(繼續閱讀...)

AutoPoster 發表在痞客邦留言(0) 人氣(0)

個人分類：生活學習

▲top

3月 09 週四 201720:19
HTML5系列四（特征檢測、Modernizr.js的相關介紹）

文章出處
Modernizr:一個HTML5特征檢測庫
Modernizr幫助我們檢測瀏覽器是否實現了某個特征，如果實現了那么開發人員就可以充分利用這個特征做一些工作
Modernizr是自動運行的，無須調用諸如modernizr_init()之類的初始化方法
Modernizr的官網地址http://modernizr.com/
在官網首頁你就可以下載modernizr.js（它分兩個版本Development和Production版本。其實它們都會導向同一個下載頁面，只不過前者會幫我們把選項預先勾上而已。）
當我把下載的modernizr.js引用到頁面中時（這時我什么也沒做），看如下的圖片就知道modernizr.js是自執行的
使用了Modernizr后，頁面中渲染后的html代碼是這個樣子的：
其中有很多以no作為前綴的class，當然大部分都沒有這個前綴。事實上，如果一個類名以no作為前綴，比如 no-touch 這表示瀏覽器不支持touch特性
modernizr還有一個test頁面，大家可以在自己的瀏覽器里面打開這個test頁面看看瀏覽器對于html5和css3的支持情況（據我所知chrome應該是對html5和css3支持最好的一個瀏覽器）
test頁面的地址http://modernizr.github.io/Modernizr/test/index.html
HTML5特征檢測（分別介紹使用JS原生方法檢測及使用modernizr類庫檢測）

檢測瀏覽器是否支持canvas API

 /*
*@desc:檢測瀏覽器是否支持canvas API
*/
function supports_canvas() {
return !!document.createElement('canvas').getContext;
}

 if (Modernizr.canvas) {
//support
} else {
//not support
}

檢測瀏覽器是否支持canvas 文本API

 //瀏覽器支持canvas API并不意味著支持canvas文本API（原因是繪制文本的函數是后來才被納入規范中）
/*
*@desc:檢測瀏覽器是否支持canvas 文本API
*/
function supports_canvas_text() {
if (!supports_canvas()) {
return false;
}
var dummy_canvas = document.createElement('canvas');
var context = dummy_canvas.getContext('2d');
return typeof context.fillText == 'function';
}

 if (Modernizr.canvastext) {
//support
} else {
//not support
}

檢測瀏覽器是否HTML5的video

 /*
*@desc:檢測瀏覽器是否HTML5的video
*/
function supports_video() {
return !!document.createElement('video').canPlayType;
}

 if (Modernizr.video) {
//support
} else {
//not support
}

檢測視頻格式

 //檢測視頻格式
/*
*@desc:檢測Mac 和iPhone支持的受專利保護的格式
*/
function supports_h264_baseline_video() {
if (!supports_video()) {
return false;
}
var v = document.createElement('video');
return v.canPlayType('video/mp4;codecs="avc1.42E01E,mp4a.40.2"');
}
/*
*@desc:檢測被Mozilla Firefox和其它一些開源瀏覽器 支持的開放視頻格式
*/
function supports_ogg_theora_video() {
if (!supports_video()) {
return false;
}
var v = document.createElement('video');
return v.canPlayType('video/ogg;codecs="theora,vorbis"');
}
/*
*@desc:WebM（一種開源的視頻編碼格式） 檢測被Chrome FireFox Opera支持的開放視頻格式
*/
function supports_webm_video() {
if (!supports_video()) {
return false;
}
var v = document.createElement('video');
return v.canPlayType('video/webm;codecs="vp8,vorbis"');
}

 if (Modernizr.video) {
//可以播放視頻格式 但播放哪種格式的呢
if (Modernizr.video.ogg) {
} else {
if (Modernizr.video.h264) {
} else {
if (Modernizr.video.webm) {
}
}
}
} else {
//not support
}

檢測瀏覽器是否支持本地存儲

 /*
*@desc:檢測瀏覽器是否支持本地存儲
*/
function supports_local_storage() {
return ('localStorage' in window) && window['localStorage'] != null;
}

 if (Modernizr.localstorage) {
//support
} else {
//not support
}

檢測瀏覽器是否支持web worker

 /*
*@desc:檢測瀏覽器是否支持web worker
*/
function supports_local_storage() {
return !!window.Worker;
}

 if (Modernizr.webworkers) {
//support
} else {
//not support
}

檢測瀏覽器是否支持離線web應用

 /*
*@desc:檢測瀏覽器是否支持離線web應用
*/
function supports_offline() {
return !!window.applicationCache;
}

 if (Modernizr.applicationcache) {
//support
} else {
//not support
}

檢測瀏覽器是否支持地理定位

 /*
*@desc:檢測瀏覽器是否支持地理定位
*/
function supports_geolocation() {
return !!navigator.geolocation;
}

 if (Modernizr.geolocation) {
//support
} else {
//not support
}

檢測瀏覽器是否支持占位文本

 /*
*@desc:檢測瀏覽器是否占位文本
*/
function supports_input_placeholder() {
var i = document.createElement('input');
return 'placeholder' in i;
}

 if (Modernizr.input.placeholder) {
//support
} else {
//not support
}

檢測瀏覽器是否支持web worker

 /*
*@desc:檢測瀏覽器是否支持自動聚焦
*/
function supports_input_autofocus() {
var i = document.createElement('input');
return 'autofocus' in i;
}

 if (Modernizr.input.autofocus) {
//support
} else {
//not support
}

還有很多，這里就不一一介紹了，總之，通過上面的特征檢測可以知道，用modernizr.js更加方便，使用原生的方法相對來說會要復雜一些。
細說modernizr.js
Modernizr幫助我們檢測瀏覽器是否實現了某個feature，如果實現了那么開發人員就可以充分利用這個feature做一些工作，反之沒有實現開發人員也好提供一個fallback。
舉例來說，當我們引入了Modernizr.js類庫后， <html> 標簽的class屬性就會被相應的賦值，以顯示瀏覽器是否支持某類CSS屬性。比如在IE6下面，不支持boderradius特性，那么在 <html> 標簽中就會出現 no-borderradius 類，我們可以做一些fallback的工作：

.no-borradius div{
/*-- do some hacks here --*/
}

上面我們已經介紹了，檢測瀏覽器是否支持某項特性，我們可以用這種語法：

Modernizr.featuretodetect

再舉一個通常的例子

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.1.min.js">

一般我們都會這樣加載jQuery類庫，先從Google CDN上拿，如果沒拿到再加載本地的。
Modernizr.load()根據一些條件判斷來動態選擇加載CSS和JavaScript，這無疑對避免不必要的資源加載有極大的幫助。
那么上面的例子可以用Modernizr.load寫成如下所示

Modernizr.load([
{
load: '//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js',
complete: function () {
if ( !window.jQuery ) {
Modernizr.load('js/libs/jquery-1.7.1.min.js');
}
}
},
{
// This will wait for the fallback to load and
// execute if it needs to.
load: 'needs-jQuery.js'
}
]);

事實上Modernizr.load最簡單的語法如下所示：

Modernizr.load(
test: Modernizr.webgl,
yep : 'three.js',
nope: 'jebgl.js' 
);

也就是當瀏覽器支持WebGL的時候，就引入 three.js 這個類庫做一些3D效果。瀏覽器不支持WebGL的時候可以使用 jebgl.js 做一些fallback操作。
有興趣可以去官網看看具體API

(繼續閱讀...)

AutoPoster 發表在痞客邦留言(0) 人氣(17)

個人分類：生活學習

▲top

3月 09 週四 201720:19
格拉西安《智慧書》中最有價值的23條法則

文章出處
人人都希望別人覺得自己重要，這是人性的渴望。
每個人都希望得到別人的賞識，所以他們總是找機會表現自我。
每個人對別人的憂慮或者利益的關注程度都不及對自己的憂慮或者利益，唯一的例外是和自己有關。
每個人在生活中經常關注的兩件事是幸福和成功。但最大的問題是經常懷疑自己的能力，同時不信任別人。
不要去挑釁別人的尊嚴。如果你的態度讓別人感覺到輕視，會傷人至深。
別人只有感覺到你對他重視時，他才會真正和你交往。
絕大多數人做決定，往往帶有感情色彩，但會理性地去自衛。
這句話的意思是，通常做了，但是很少有人會認錯。
普通人的智慧是有限的，他們只不過有一點點小聰明而已。
意思是不要對別人的智慧寄予過高的要求。
擁有共同利益的人，自然愿意非常接近。
人們都希望別人理解，而往往忽視去理解別人。
絕大多數人都希望挑剔別人，指點別人；而不愿意被別人挑剔，被別人指點。
人們往往只愿意接近自己感興趣的人。
每個人一般都希望能和某些方面幫助自己的人交流。共同利益是交際的基礎。所謂交際，是利益的交流。
人都懷有嫉妒之心，此為愚人之苦。
現實生活中，絕大多數人都喜歡盲從于他人。
有不少人總認為自己是正確的，自己比一般人高明。
絕大多數人都認為自己比別人聰明。
在平淡生活中，我們往往挫敗于個人的惰性。
我們最大的敵人往往就是我們自己。我們總是難以控制自己。我們的敵人往往是自己尋找和制造出來的。
很少人愿意真的認錯，除非形勢所迫
每個人都很在乎別人對自己的看法，雖然多數人口頭上恥于承認這點。
多數人內心深處對自己有諸多的不滿意。
真正智慧的人，不去挑剔別人，不去非議別人，也不是憤世嫉俗的人，而是讓自己過上平安且幸福生活的人。
馬斯洛原則：人的欲望是不斷上升的。
痛苦來自于欲望得不到滿足。
白金法則：交往以對方為中心。
這個據說是現代溝通的第一法則。所以，要戒除以自我中心的習慣。在和人交往，尤其是剛剛開始和人交談時，要多找找對方的興趣和擅長的事情。有一句話：交際高手是為別人創造表現機會的人。
卡洛法則
當你遭遇不幸的時候，你往往會最容易獲得友誼和同情。當你獲得成功的時候，你就會失去朋友；你突然成功的臨界點，就是人際關系的危機。追求完美可以做到，但要滿足一個假設，就是你在所在圈子里是絕對的弱者。
總結
人們做任何事情都是有目的的。每一種目的都最終指向自己或最終指向于滿足自己的利益

(繼續閱讀...)

AutoPoster 發表在痞客邦留言(0) 人氣(13)

個人分類：生活學習

▲top

«1 ...262728 230 »

pop-under

參觀人氣

本日人氣：
累積人氣：

互聯網 - 大數據

本部落格為互聯網熱門頭條訊息管理中心

遇見幸福的自己

看看這些JavaScript題目你會做嗎？

說說css3布局

HTML5系列二（標簽元素、FileReader、拖放）

CSS3系列二（媒體支持、文字與字體相關樣式、盒相關樣式）

LABjs(類似于LazyLoad,但它更加方便管理依賴關系)

高性能JavaScript筆記二（算法和流程控制、快速響應用戶界面、Ajax）

高性能JavaScript筆記三（編程實踐）

HTML5系列四（特征檢測、Modernizr.js的相關介紹）

格拉西安《智慧書》中最有價值的23條法則

pop-under

參觀人氣

線上人數

Marquee

最新文章

熱門文章

文章分類

最新留言

文章搜尋

文章精選

誰來我家

Live Traffic Feed