半颗星的分析

设计模式--分离共同点

1. 咖啡和茶不同，抽象出‘饮料’

2. 把水煮沸

3. 泡的方式不同，抽象成‘泡’

4. 加的调料不同，抽想成‘调料’

Pattern.js

var Coffee=function(){};

Coffee.prototype.boilWater=function(){
console.log("把水煮沸")
};
Coffee.prototype.brewCoffee=function(){
console.log("用沸水冲泡咖啡")
};
Coffee.prototype.pourInCup=function(){
console.log("把咖啡倒进杯子")
};
Coffee.prototype.addSugarAndMilk=function(){
console.log("加糖和牛奶")
};
Coffee.prototype.init=function(){
this.boilWater()
this.brewCoffee()
this.pourInCup()
this.addSugarAndMilk()
};
var Tea=function(){};
Tea.prototype.boilWater=function(){
console.log("把水煮沸")
};
Tea.prototype.steepTea=function(){
console.log("用沸水浸泡茶叶")
};
Tea.prototype.pourInCup=function(){
console.log("把茶水倒进杯子")
};
Tea.prototype.addLemon=function(){
console.log("加柠檬")
};
Tea.prototype.init=function(){
this.boilWater();
this.steepTea();
this.pourInCup();
this.addLemon();
};
var coffee=new Coffee();
coffee.init();
var tea=new Tea();
tea.init();

关于全局变量问题：

1、模拟命名空间（声明一个对象，全局变量就是对象的属性；函数就是对象的方法）；

2、闭包 ----(function(){})();该函数自执行，里面定义的变量都是局部变量。

关于事件绑定浪费问题：

$item.on 为每个星星绑定都绑定了相同的事件，导致浪费；

如何解决？事件委托（冒泡），意思就是将事件绑定到父元素中，再执行事件时只要判断事件触发的元素是目标元素即可；

关于如何生成片段？

1. sublime 中 Tools (new snippet)

2. 将片段内容放置到<content></content>

3. 注意：如果想要生成的片段有默认光标定位，用${1:document}，后面的document 是默认内容；再按tab光标会到${2};${0}代表tab键后光标最后停留的位置。

4. 触发该片段的命令为<tabTrigger>html5</tabTrigger>

5. 该命令使用的文档类型：<scope>text.html</scope>

6. 按Ctrl + S 进行保存，后缀名必须为sublime-snippet

根据老师的思路指导，用原生写出来的，没有学jq，终于实现了

function getByClassname(obj,sclass){

obj=obj||document;

var arrname=[];

var arrname2=[];

if(obj.getElementsByClassName){

return obj.getElementsByClassName(sclass);

}else{

arrname=obj.getElementsByTagName('*'); 

for(var i=0;i<arrname.length;i++){

var a=arrname[i].className.split(' ');

for(var j=0;i<a.length;j++){

if(a[i]==sclass){

return arrname2.push(arrname[i]);

}

}

}

}

}

var rating= (function(){

//点亮方法

var init=function (obj,sclass,num){//构造函数

var oUl=document.getElementById(obj);

var aLi=getByClassname(oUl,sclass);

//初始化

show(num);

//事件绑定

oUl.onmousemove=function(ev){

var Ev=ev||window.event;

var target=Ev.target||Ev.srcElement;// target是ev带的属性，srcElement是IE兼容写法

if(target.nodeName.toLowerCase()=="li")//判断发生事件target的属性名称是什么，target的返回值是大写的，所以要转换成效小写

show(target.index+1);

}

oUl.onmouseout=function(ev){

show(num);

}

oUl.onclick=function(ev){

var Ev=ev||window.event;

var target=Ev.target||Ev.srcElement;// target是ev带的属性，srcElement是IE兼容写法

if(target.nodeName.toLowerCase()=="li")//判断发生事件target的属性名称是什么，target的返回值是大写的，所以要转换成效小写

num=target.index+1;

}

function show(num){

for(var i=0;i<aLi.length;i++){

aLi[i].index=i;

if(aLi[i].index<num){

aLi[i].style.backgroundPosition='0 -25px';

}else{

aLi[i].style.backgroundPosition='0 0';

}

}

    }

}

return {

init:init

}

})();

rating.init('ul1','raing-item',3);

rating.init('ul2','raing-item',1);

什么是snippets，

(尤指讲话或文字的）小片，片段，零星的话( snippet的名词复数 )

点亮半颗星的原理分析

ctrl+D统一修改

<script>放body前面虽然可以用window.onload解决，但是体验不好

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.addSomething = function() {

    throw new Error("子类必须重写该方法");

};

Beverage.prototype.ifWantSometihng=function(){

retuen true;

}

//init是模板方法

Beverage.prototype.init = function() {

this.boilWater();

this.brew();

this.pourInCup();

if(this.ifWantSometihng()){

this.addSomething();

}

};

//--------子类1

var Coffee = function() {};

Coffee.prototype.brew = function() {

console.log("冲咖啡");

};

Coffee.prototype.pourInCup = function() {

console.log("装杯");

};

Coffee.prototype.addSomething = function() {

console.log("加糖");

};

//重写ifWantSometihng方法

Coffee.prototype.ifWantSometihng=function(){

return window.confirm("加不加？");

};

//--------子类2

var Tea = function() {};

Tea.prototype.brew = function() {

console.log("泡茶");

};

Tea.prototype.pourInCup = function() {

console.log("装杯");

};

Tea.prototype.addSomething = function() {

console.log("加柠檬");

};

//继承父类

Coffee.prototype= new Beverage();

Tea.prototype= new Beverage();

var coffee = new Coffee(); 

coffee.init();

var tea = new Tea(); 

tea.init();

原理点亮半颗星

课程介绍