-
var rating = (function() { var lightOn = function(item, num) { item.each(function(index) { if(index < num) { $(this).css("background-position", "0 -36px"); } else { $(this).css("background-position", "0 0"); } }) } var init = function(el, num) { var rating = $(el); var item = rating.find(".rating-item"); //初始化 lightOn(item, num); //事件委托 子元素事件(.rating-item)委托给父元素(rating)处理 rating.on("mouseover", ".rating-item", function() { lightOn(item, $(this).index() + 1); }).on("click", ".rating-item", function() { num = $(this).index() + 1; }).on("mouseout", function() { //事件绑定 lightOn(item, num); }) } //jQuery插件 $.fn.extend({ rating: function(num) { return this.each(function() { init(this, num); }) } }) return { init: init } })() //方法 //rating.init("#rating",2); //插件 $("#rating").rating(2);查看全部
-
CSS样式放在头部，让浏览器先渲染样式 js行为放在body最后，防止找不到节点，同时不会阻塞页面 CSS和js都引入外部文件的形式，这样可以在客户端缓存。查看全部
-
var Beverage = function(){}; Beverage.prototype.boilWater=function(){ console.log("把水煮沸") }; Beverage.prototype.brew=function(){ throw new Error('子类必须重写该方法'); }; Beverage.prototype.pourInCup=function(){ throw new Error('子类必须重写该方法'); }; Beverage.prototype.addCondiments=function(){ throw new Error('子类必须重写该方法'); }; Beverage.prototype.customerWantsCondiments=function(){ return true; }; Beverage.prototype.init=function(){ this.boilWater() this.brew() this.pourInCup() if(this.customerWantsCondiments()){ this.addCondiments() } }; var Coffee= function(){}; Coffee.prototype.brew=function(){ console.log("用沸水冲泡咖啡") }; Coffee.prototype.pourInCup=function(){ console.log("把咖啡倒进杯子") }; Coffee.prototype.addCondiments=function(){ console.log("加糖和牛奶") }; var Tea=function(){}; Tea.prototype.brew=function(){ console.log("用沸水浸泡茶叶") }; Tea.prototype.pourInCup=function(){ console.log("把茶水倒进杯子") }; Tea.prototype.addCondiments=function(){ console.log("加柠檬") }; //泡一杯不加调料的茶 Tea.prototype.customerWantsCondiments=function(){ return window.confirm("请问需要加调料嘛？") //return false; }; Coffee.prototype=new Beverage; Tea.prototype=new Beverage; var coffee=new Coffee(); coffee.init(); var tea=new Tea(); tea.init();查看全部 -
23种goF模式，大致分为3种
创建型模式
结构型模式
行为型模式
查看全部 -
设计模式定义
查看全部 -
那个点亮星星的函数不是很懂
查看全部 -
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>星级评分</title> <style> body,ul,li{ padding: 0; margin: 0; } li{ list-style-type: none; } .rating{ width: 140px; height: 27px; margin:100px; } .rating-item{ float:left; width: 28px; height: 27px; background: url(images/xx.png)no-repeat; background-position:0 -27px; cursor: pointer; } </style> </head> <body> <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> <script src="../js/jquery-1.11.1.min.js"></script> <script> var num=2; var $rating=$("#rating"); var $item=$rating.find(".rating-item"); // 电亮 var lightOn=function(num){ $item.each(function(index){ if(index < num){ $(this).css("backgroundPosition","0 0"); }else{ $(this).css("backgroundPosition","0 -27px"); } }) }; // 初始化 lightOn(num); // 绑定事件 $item.on('mouseover', function(){ lightOn($(this).index()+1); }).on("click",function(){ num=$(this).index()+1; }); $rating.on('mouseout',function(){ lightOn(num); }); </script> </body> </html>查看全部 -
有哪些设计模式查看全部
-
var num = 2,
$rating = $("#rating"),
$item = $rating.find(".rating-item");
//点亮
var lightOn = function(num) {
//num是要点亮的星星数
$item.each(function(index) {
//
if(index < num) {
$(this).css("background-position", "0 -40px");
//".rating-item"==this
} else {
$(this).css("background-position", "0 0");
}
});
}
//初始化
lightOn(num);
//事件绑定
$item.on('mouseover',function(){
//鼠标移上去所指星星亮起
lightOn($(this).index()+1);
}).on('click',function(){
num=$(this).index()+1;
//此时num改变为当前点击的星星数
});
//给父元素添加moseout事件。移出的时候 点亮当前的num数
$rating.on('mouseout',function(){
lightOn(num);
});
查看全部 -
学习设计模式不同阶段查看全部
-
整理下js的思路： 写好主功能函数，就是点亮这个函数-->为元素一一绑定事件 为元素绑定事件有个小细节：mouseout事件绑定在ul这个父容器上，而不是li单个项目上。 完善： 全局变量重名或者冲突，解决方法：自我匿名函数，就是用一个闭包 不用为每个li都绑定事件，只需要为他们父容器绑定即可，利用事件的冒泡处理 $rating.on('mouseover','.rating-item',function(){}，子元素事件委托给父元素处理 为了实现功能复用，我们可以把它写成一个模块，可以用函数来实现，利用函数带参实现不同需求； 命名为init函数，怎么使用呢？就可以用return返回来使用，而return返回对象的话就可以这样使用：rating.init("#el",num) 这里有个小细节：功能函数例如lightOn因为只需要申明一次就可以把它放到init函数外面。查看全部
-
关于constructor指向问题： 无论什么时候，只要创建了一个新函数，就会根据一组特定的规则为该函数创建一个prototype属性，默认情况下prototype属性会默认获得一个constructor(构造函数)属性，这个属性是一个指向prototype属性所在函数的指针，说的有些绕了，上代码： var superClass = function(){ this.num = 2; } superClass.prototype.show = function(){ console.log(this.name); } var F1 = function(){}; console.log(F1.prototype.constructor);//function (){} F1.prototype = new superClass(); console.log(F1.prototype.constructor);//function (){this.num = 2;}查看全部
-
F.prototype = superClass.prototype 和 F.prototype = new superClass();的区别： 前者F仅仅继承superClass的方法，而构造函数里的属性不会继承，后者则是把属性和prototype的方法也一并继承了， 代码验证： var superClass = function(){ this.num = 2; } superClass.prototype.show = function(){ console.log(this.name); } var F1 = function(){}; var F2 = function(){}; F1.prototype = new superClass(); F2.prototype = superClass.prototype; var f = new F1(); var f2 = new F2(); f.show();//2 f2.show();//undefined查看全部
-
整理下js的思路： 写好主功能函数，就是点亮这个函数-->为元素一一绑定事件 为元素绑定事件有个小细节：mouseout事件绑定在ul这个父容器上，而不是li单个项目上。 完善： 全局变量重名或者冲突，解决方法：自我匿名函数，就是用一个闭包 不用为每个li都绑定事件，只需要为他们父容器绑定即可，利用事件的冒泡处理 $rating.on('mouseover','.rating-item',function(){}，子元素事件委托给父元素处理 为了实现功能复用，我们可以把它写成一个模块，可以用函数来实现，利用函数带参实现不同需求； 命名为init函数，怎么使用呢？就可以用return返回来使用，而return返回对象的话就可以这样使用：rating.init("#el",num) 这里有个小细节：功能函数例如lightOn因为只需要申明一次就可以把它放到init函数外面。查看全部
-
设计模式即经验查看全部
举报
0/150
提交
取消