-
设计模式：人们解决一类问题的总结。
当你封装一个函数时，你是在复用代码；当你使用一个设计模式时，你是在复用他人的经验。查看全部 -
事件委托，子节点委托到父节点上去。
$rating.on('click','.rating-item',function(){//…………
});
查看全部 -
(function({
})();
自我执行的匿名函数
查看全部 -
星级评分查看全部
-
if(typeof self.opts.select==='function'){
self.opts.select.call(target,num,itemLength)
}
(typeof self.opts.select === 'function') && self.opts.select(num,itemLength)
查看全部 -
trigger() 方法触发被选元素的指定事件类型。
查看全部 -
高大上的设计模式--什么是模板方法模式
查看全部 -
高大上的设计模块2
查看全部 -
高大上的设计模式
查看全部 -
事件委托，子元素的事件委托给父元素处理
查看全部 -
这里事件绑定的写法其实是为每个星星都绑定一次事件，导致浪费，特别是星星非常多的时候，会很明显，解决办法：给父容器上 绑定一次事件，利用事件冒泡
查看全部 -
全局变量的弊端：和他人合作或者程序非常强大时，这么多的全局变量会造成非常大的隐患，当其他人修改你的代码或添加新功能的时候，很有可能和你的变量重名，造成冲突，导致bug产生。所以要注意全局变量的问题，特别是多人合作的时候。即时只有你一个人维护代码，但是当你几个月回来之后添加新功能的时候，也会出现这样的问题
解决办法：1.模拟匿名空间，比如只暴露一个全局变量，加上独有的标记,一切为了防止冲突（eg: var LXY_rating），所有的变量都可以变成它的属性，函数看做是他的方法 2.利用闭包的特性，js中有函数作用域，函数中的变量和函数都是局部的（自执行函数），把所有的变量和函数都扔到自执行函数里，就会变成自执行函数
查看全部 -
使用百度jquery cdn的好处：为了性能考虑，和其他的网站共享缓存，也许访问了某个网站也使用了cdn,那么当时就会把jquery cdn下载下载并缓存 ，那么之后就可以直接在缓存中读取，不需要每一次都要发送http请求了
查看全部 -
使用css 雪碧图的好处：有效的减少http的请求，比如这里从两次请求减少到一次，有效的提升页面的性能
查看全部 -
ul包li 便于整体的维护，比如整体居中。。。
id 为了在js中能更好的获取到元素
class 设置样式
ul+li写法（更语义化） div+a写法......
查看全部 -
script放哪
放到head 里，当js没有加载完成之前，后面的dom结点就无法加载，就会阻塞页面的渲染，导致页面出现长时间的空白，造成很糟糕的用户体验
而把他放到body的结尾处的话就没有这样的问题
css 一般都放在css内，这是因为我们不希望看到裸奔的页面，在看到他穿衣服的样子，而是希望他直接穿着衣服出现在我们的面前
查看全部 -
首选项 -》插件设置-》emmet->Settings-User
html:Xhtml 意思使用Xhtml语法
查看全部 -
新建代码片段文件
tools(工具)--》新建代码片段
将指定代码片段 替换“Hello, ${1:this} is a ${2:snippet}.”
${1} ：建好文件后光标自动出现在${1}位置上
${2}: 按tab键光标从${1}自动到${2}位置上(不好是再按tab键时,光标会从${2}跳到文件末尾处)
${0}：指光标出现的最后位置，代码正常出现，解决了${2}的缺点
${1:Document} 指定该光标处显示什么内容
<tabTrigger>html5</tabTrigger> 自定义指定出现该代码片段的命令
<scope>text.html</scope> 指定能使用该代码片段的文件
查看全部 -
保存新建代码片段文件名---》命名（.sublime-snippet）
查看全部 -
纯纯粹粹吃查看全部
-
第一种实现方式原理
查看全部 -
第一种实现方式两种写法
查看全部 -
高大上的设计模式概念查看全部 -
设计模式三种模式查看全部 -
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>星级评分-第一种实现方式</title> <style type="text/css"> *{/*清除内外边距*/ 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文件放最后为防止找不到节点，同时不会阻塞页面--> <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是要点亮的星星数 $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改变为当前点击的星星数 }).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>查看全部
举报