星级评分原理和实现（上）_技术笔记

游览车 2021-11-08

设计模式：人们解决一类问题的总结。
当你封装一个函数时，你是在复用代码；当你使用一个设计模式时，你是在复用他人的经验。

0赞 · 0采集
游览车 2021-11-08

事件委托，子节点委托到父节点上去。
$rating.on('click','.rating-item',function(){
//…………
});

0赞 · 0采集
游览车 2021-11-08

(function({
})();

自我执行的匿名函数

0赞 · 0采集
慕婉清7429984 2020-12-08

星级评分

截图
0赞 · 0采集
RelaxLearning 2020-07-22

if(typeof self.opts.select==='function'){
self.opts.select.call(target,num,itemLength)
}
(typeof self.opts.select === 'function') && self.opts.select(num,itemLength)

0赞 · 0采集
RelaxLearning 2020-07-22

trigger() 方法触发被选元素的指定事件类型。

0赞 · 0采集
RelaxLearning 2020-07-22

高大上的设计模式--什么是模板方法模式

截图
0赞 · 0采集
RelaxLearning 2020-07-21

高大上的设计模块2

截图
0赞 · 0采集
RelaxLearning 2020-07-21

高大上的设计模式

截图
0赞 · 0采集
RelaxLearning 2020-07-21

事件委托，子元素的事件委托给父元素处理

截图
0赞 · 1采集
RelaxLearning 2020-07-21

这里事件绑定的写法其实是为每个星星都绑定一次事件，导致浪费，特别是星星非常多的时候，会很明显，解决办法：给父容器上绑定一次事件，利用事件冒泡

截图
0赞 · 0采集
RelaxLearning 2020-07-21
1. 全局变量的弊端：和他人合作或者程序非常强大时，这么多的全局变量会造成非常大的隐患，当其他人修改你的代码或添加新功能的时候，很有可能和你的变量重名，造成冲突，导致bug产生。所以要注意全局变量的问题，特别是多人合作的时候。即时只有你一个人维护代码，但是当你几个月回来之后添加新功能的时候，也会出现这样的问题
2. 解决办法：1.模拟匿名空间，比如只暴露一个全局变量，加上独有的标记,一切为了防止冲突（eg: var LXY_rating），所有的变量都可以变成它的属性，函数看做是他的方法 2.利用闭包的特性，js中有函数作用域，函数中的变量和函数都是局部的（自执行函数），把所有的变量和函数都扔到自执行函数里，就会变成自执行函数
截图
0赞 · 0采集
RelaxLearning 2020-07-21

使用百度jquery cdn的好处：为了性能考虑，和其他的网站共享缓存，也许访问了某个网站也使用了cdn,那么当时就会把jquery cdn下载下载并缓存，那么之后就可以直接在缓存中读取，不需要每一次都要发送http请求了

截图
0赞 · 0采集
RelaxLearning 2020-07-21

使用css 雪碧图的好处：有效的减少http的请求，比如这里从两次请求减少到一次，有效的提升页面的性能

截图
0赞 · 0采集
RelaxLearning 2020-07-21

ul包li 便于整体的维护，比如整体居中。。。
id 为了在js中能更好的获取到元素
class 设置样式
ul+li写法（更语义化） div+a写法......

截图
0赞 · 0采集
RelaxLearning 2020-07-21
script放哪
1. 放到head 里，当js没有加载完成之前，后面的dom结点就无法加载，就会阻塞页面的渲染，导致页面出现长时间的空白，造成很糟糕的用户体验
2. 而把他放到body的结尾处的话就没有这样的问题
3. css 一般都放在css内，这是因为我们不希望看到裸奔的页面，在看到他穿衣服的样子，而是希望他直接穿着衣服出现在我们的面前
0赞 · 0采集
RelaxLearning 2020-07-16

首选项 -》插件设置-》emmet->Settings-User
html:Xhtml 意思使用Xhtml语法

截图
0赞 · 0采集
RelaxLearning 2020-07-16

新建代码片段文件
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> 指定能使用该代码片段的文件

截图
0赞 · 0采集
RelaxLearning 2020-07-16

保存新建代码片段文件名---》命名（.sublime-snippet）

截图
0赞 · 0采集
慕仙4295802 2019-11-27

纯纯粹粹吃

截图
0赞 · 0采集
love童 2019-10-25

第一种实现方式原理

截图
0赞 · 0采集
love童 2019-10-25

第一种实现方式两种写法

截图
0赞 · 0采集
菜鸟00001 2019-10-18

高大上的设计模式概念

0赞 · 0采集
慕粉2466386 2019-08-09

设计模式三种模式

截图
0赞 · 0采集

慕粉2466386 2019-08-09

<!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>

0赞 · 0采集

慕UI1177701 2019-04-17

为了尽可能少的暴露出全局变量，需要引入局部作用域，就是自我执行的匿名函数
（function（）{
}）（）

0赞 · 0采集
笑傲江湖3955759 2019-03-15

创建型模式：对创建对象的过程进行封装
单例模式、建造者模式、抽象工厂模式、工厂模式、原型模式
结构型模式：解决类、对象、模块之间的耦合关系
适配器模式、桥接模式、装饰模式、组合模式、外观模式、享元模式、代理模式
行为型模式：解决对象之间的相互通信与协作，进一步明确对象的职责
模板方法模式、命令模式、迭代器模式、观察者模式、中介者模式、备忘录模式、解释器模式、状态模式、策略模式、职责链模式、访问者模式

0赞 · 0采集
笑傲江湖3955759 2019-03-13

在sublime中新建一个html文件
输入HTML:5，按tab键，会自动完成html文件代码的基本结构

0赞 · 0采集
qq_斌_40 2018-11-15

1、prototype原型
2、self的this指向LightEntire

0赞 · 1采集

林念志祥 2018-11-13

<!DOCTYPE html>
<html leng="zh-CN">
<head>
    <meta charset="UTF-8"/>
    <title>星级评分--第二种方式</title>
    <style>
        body,ul,li{
            padding: 0;
            margin: 0;
        }
        li{
            list-style-type: none;
        }
        .rating{
            width:150px;
            height: 27px;
            margin:100px auto;
        }
        .rating-item{
            float:left;
            width:30px;
            height: 27px;
            background:url(img/start1.PNG) no-repeat;
            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>
<ul class="rating" id="rating2" style="margin-top: 30px;">
    <li class="rating-item" title="很不好2"></li>
    <li class="rating-item" title="不好2"></li>
    <li class="rating-item" title="一般2"></li>
    <li class="rating-item" title="好2"></li>
    <li class="rating-item" title="很好2"></li>
</ul>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<script>
    var rating=(function(){
//点亮整颗
        var LightEntire=function(el,options){
            this.$el = $(el);
            this.$item = this.$el.find('.rating-item');
            this.opts = options
        }
        LightEntire.prototype.init=function(){
            this.lightOn(this.opts.num);
            if(!this.opts.readOnly){
                this.bindEvent();
            }

        }
        LightEntire.prototype.lightOn=function(num){
            num=parseInt(num)
            this.$item.each(function (index) {
                if (index < num) {
                    $(this).css('background-position', '0 -45px');
                } else {
                    $(this).css('background-position', '0 -15px');
                }
            })
        }
            LightEntire.prototype.bindEvent=function(){
                var self=this;
                itemLength=self.$item.length;
                self.$el.on('mouseover', '.rating-item', function () {
                    var num=$(this).index() + 1
                    self.lightOn(num);
                    (typeof self.opts.select==='function') &&self.opts.select.call(this,num,itemLength);
                    //触发select事件
                    self.$el.trigger('select',[num,itemLength])
                }).on('click', '.rating-item', function () {
                    self.opts.num = $(this).index() + 1;
                    (typeof self.opts.chosen==='function') &&self.opts.chosen.call(this,self.opts.num,itemLength);
                    self.$el.trigger('chosen',[self.opts.num,itemLength])
                }).on('mouseout',function(){
                    self.lightOn(self.opts.num)
                })
            };
//默认参数
            var defaults={
                num:0,
                readOnly:false,
                selsect:function(){},
                chosen:function(){}
            };
//初始化
            var init = function(el,options){
                options=$.extend({},defaults,options);
                new LightEntire(el,options).init()
            }
        return {
            //返回一个对象(对象是一个方法)
            init:init
        }

    })()

        rating.init('#rating',{
        num:2,
       /* select:function(num,total){
            console.log(this)
          console.log(num+'/'+total)
         }*/
    });
    $('#rating').on('select',function(e,num,total){
        console.log(num+'/'+total);
    }).on('chosen',function(e,num,total){
        console.log(num+'/'+total);
    })

</script>
</head>
</body>
</html>

0赞 · 0采集

数据加载中...