-
設(shè)計模式：人們解決一類問題的總結(jié)。
當你封裝一個函數(shù)時，你是在復用代碼；當你使用一個設(shè)計模式時，你是在復用他人的經(jīng)驗。查看全部 -
事件委托，子節(jié)點委托到父節(jié)點上去。
$rating.on('click','.rating-item',function(){????//…………
});
查看全部 -
(function({
})();
自我執(zhí)行的匿名函數(shù)
查看全部 -
星級評分查看全部
-
if(typeof self.opts.select==='function'){
self.opts.select.call(target,num,itemLength)
}
(typeof self.opts.select === 'function') && self.opts.select(num,itemLength)
查看全部 -
trigger() 方法觸發(fā)被選元素的指定事件類型。
查看全部 -
高大上的設(shè)計模式--什么是模板方法模式
查看全部 -
高大上的設(shè)計模塊2
查看全部 -
高大上的設(shè)計模式
查看全部 -
事件委托，子元素的事件委托給父元素處理
查看全部 -
這里事件綁定的寫法其實是為每個星星都綁定一次事件，導致浪費，特別是星星非常多的時候，會很明顯，解決辦法：給父容器上 綁定一次事件，利用事件冒泡
查看全部 -
全局變量的弊端：和他人合作或者程序非常強大時，這么多的全局變量會造成非常大的隱患，當其他人修改你的代碼或添加新功能的時候，很有可能和你的變量重名，造成沖突，導致bug產(chǎn)生。所以要注意全局變量的問題，特別是多人合作的時候。即時只有你一個人維護代碼，但是當你幾個月回來之后添加新功能的時候，也會出現(xiàn)這樣的問題
解決辦法：1.模擬匿名空間，比如只暴露一個全局變量，加上獨有的標記,一切為了防止沖突（eg:? ?var LXY_rating），所有的變量都可以變成它的屬性，函數(shù)看做是他的方法? ?2.利用閉包的特性，js中有函數(shù)作用域，函數(shù)中的變量和函數(shù)都是局部的（自執(zhí)行函數(shù)），把所有的變量和函數(shù)都扔到自執(zhí)行函數(shù)里，就會變成自執(zhí)行函數(shù)?
查看全部 -
使用百度jquery cdn的好處：為了性能考慮，和其他的網(wǎng)站共享緩存，也許訪問了某個網(wǎng)站也使用了cdn,那么當時就會把jquery cdn下載下載并緩存 ，那么之后就可以直接在緩存中讀取，不需要每一次都要發(fā)送http請求了
查看全部 -
使用css 雪碧圖的好處：有效的減少http的請求，比如這里從兩次請求減少到一次，有效的提升頁面的性能
查看全部 -
ul包li? 便于整體的維護，比如整體居中。。。
id? 為了在js中能更好的獲取到元素
class 設(shè)置樣式
ul+li寫法（更語義化）? ?div+a寫法......
查看全部 -
script放哪
放到head 里，當js沒有加載完成之前，后面的dom結(jié)點就無法加載，就會阻塞頁面的渲染，導致頁面出現(xiàn)長時間的空白，造成很糟糕的用戶體驗
而把他放到body的結(jié)尾處的話就沒有這樣的問題
css 一般都放在css內(nèi)，這是因為我們不希望看到裸奔的頁面，在看到他穿衣服的樣子，而是希望他直接穿著衣服出現(xiàn)在我們的面前
查看全部 -
首選項 -》插件設(shè)置-》emmet->Settings-User
html:Xhtml? ? 意思使用Xhtml語法
查看全部 -
新建代碼片段文件
tools(工具)--》新建代碼片段
將指定代碼片段 替換“Hello, ${1:this} is a ${2:snippet}.”
${1} ：建好文件后光標自動出現(xiàn)在${1}位置上
${2}:? ? 按tab鍵光標從${1}自動到${2}位置上(不好是再按tab鍵時,光標會從${2}跳到文件末尾處)
${0}：指光標出現(xiàn)的最后位置，代碼正常出現(xiàn)，解決了${2}的缺點
${1:Document} 指定該光標處顯示什么內(nèi)容
<tabTrigger>html5</tabTrigger>? ?自定義指定出現(xiàn)該代碼片段的命令?
<scope>text.html</scope>? ?指定能使用該代碼片段的文件
查看全部 -
保存新建代碼片段文件名---》命名（.sublime-snippet）
查看全部 -
純純粹粹吃查看全部
-
第一種實現(xiàn)方式原理
查看全部 -
第一種實現(xiàn)方式兩種寫法
查看全部 -
高大上的設(shè)計模式概念查看全部 -
設(shè)計模式三種模式查看全部 -
<!DOCTYPE?html> <html?lang="en"> <head> ????<meta?charset="UTF-8"> ????<title>星級評分-第一種實現(xiàn)方式</title> ????<style?type="text/css"> ?*{/*清除內(nèi)外邊距*/ ?padding:0; ?margin:0; ?} ?ul?li{/*清除列表樣式*/ ?list-style-type:?none; ?} ?.rating{ ?width:?350px; ?height:70px; ?margin:100px?auto; ?overflow:hidden; ?} ?.rating-item{ ?/*position:?fixed;*/ ?width:70px; ?height:70px; ?background:url("images/star.png")no-repeat; ?cursor:?pointer; ?/*!**!??background-position:?0?-65px;*/ ?float:left; ?/*overflow:?hidden;*/ ?} ????</style> </head> <body> <!--ctrl+/??單行注釋--> <!--塊注釋?ctrl+shift+/--> <!--ctrl+shift+up?代碼拖動--> <ul?class="rating"?id="rating"> ????<li?class="rating-item"?title="很不好"></li> ????<li?class="rating-item"?title="不好"></li> ????<li?class="rating-item"?title="一般"></li> ????<li?class="rating-item"?title="好"></li> ????<li?class="rating-item"?title="很好"></li> </ul> <ul?class="rating"?id="rating2"> ????<li?class="rating-item"?title="很不好"></li> ????<li?class="rating-item"?title="不好"></li> ????<li?class="rating-item"?title="一般"></li> ????<li?class="rating-item"?title="好"></li> ????<li?class="rating-item"?title="很好"></li> </ul> <ul?class="rating"?id="rating3"> ????<li?class="rating-item"?title="很不好"></li> ????<li?class="rating-item"?title="不好"></li> ????<li?class="rating-item"?title="一般"></li> ????<li?class="rating-item"?title="好"></li> ????<li?class="rating-item"?title="很好"></li> </ul> <ul?class="rating"?id="rating4"> ????<li?class="rating-item"?title="很不好"></li> ????<li?class="rating-item"?title="不好"></li> ????<li?class="rating-item"?title="一般"></li> ????<li?class="rating-item"?title="好"></li> ????<li?class="rating-item"?title="很好"></li> </ul> <ul?class="rating"?id="rating5"> ????<li?class="rating-item"?title="很不好"></li> ????<li?class="rating-item"?title="不好"></li> ????<li?class="rating-item"?title="一般"></li> ????<li?class="rating-item"?title="好"></li> ????<li?class="rating-item"?title="很好"></li> </ul> <!--js文件放最后為防止找不到節(jié)點，同時不會阻塞頁面--> <script?src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script> <script?type="text/javascript"> ?var?rating?=?(function?()?{ ?//點亮星星 ?var?lightOn?=?function($item,num)?{ ?//num是要點亮的星星數(shù) ?$item.each(function(index)?{ ?if(index?<?num)?{ ?$(this).css("background-position",?"0?-65px"); ?}?else?{ ?$(this).css("background-position",?"0?0"); ?} ????????????}); ?}; ????????var?init?=?function?(el,num)?{ ?var?$rating?=?$(el),?$item?=?$rating.find(".rating-item"); ?lightOn($item,num); ?//事件綁定 ?$rating.on('mouseover','.rating-item',function(){ ?//鼠標移上去所指星星亮起 ?lightOn($item,$(this).index()+1); ?}).on('click','.rating-item',function(){ ?num=$(this).index()+1; ?//此時num改變?yōu)楫斍包c擊的星星數(shù) ?}).on('mouseout',function(){ ?lightOn($item,num); ?}); ?}; ?//插件 ?$.fn.extend({ ?rating:function?(num)?{ ?return?this.each(function(){ ?init(this,num); ?}); ?} ????????}); ????????return{ ?init:init ?}; ?//初始化 ?})(); ?//???rating.init('#rating',2); //????rating.init('#rating2',3); ?$('#rating').rating(1); ?$('#rating2').rating(2); ?$('#rating3').rating(3); ?$('#rating4').rating(4); ?$('#rating5').rating(5); </script> </body> </html>查看全部
舉報