JavaScript 编码原则之组件封装 | 青训营笔记这是我参与「第五届青训营」笔记创作活动的第4天一、本堂课重点

这是我参与「第五届青训营」笔记创作活动的第4天

一、本堂课重点内容：

组件的定义解析及特征
组件封装基本方法

二、详细知识点介绍：**

以下知识点将会以“轮播图”为例来进行讲解

1、组件的定义解析及特征

组件是指Web页面上抽出来一个个包含模版(HTML)、功能〈JS)和样式(CSs)的单元。好的组件具备封装性、正确性、扩展性、复用性。

2、组件封装基本方法

以轮播图为例

第一步：结构设计

第二步：展现效果

第三部：行为设计

1.API(功能)
2.Event(控制流)
3.重构（插件化）

也就是解耦，解耦可以通过将控制元素抽取成插件，然后将插件与组件之间通过依赖注入方式建立联系

依照“轮播图”这个实例，具体实现方法就是：

首先：抽取插件，轮播图可以抽取为三个插件，中间图片可以是一个插件，图片下方的那一排小圆点也可以是一个插件，然后在图片左右两边的箭头也可以抽取成一个插件，这个三个插件独立存在，之后如果要对轮播图的样式进行改变的话，比如不要下面的小圆点了，这样直接不引入插件，然后再到html中将对应文本删除即可。

4.重构（模板化）

5.抽象化

三、课后个人总结：**

组件封装总结

组件设计的原则：封装性、正确性、扩展性、复用性
实现组件的步骤：结构设计、展现效果、行为设计
三次重构插件化
模板化
抽象化

题外话
“轮播图”的实现目前只做到第一版，后面老师说的优化还做不大成。
html

        <div class="images" id="images">
            <div class="current"><img src="img/index3.jpeg" alt=""></div>
            <div class="pic"><img src="img/index4.jpeg" alt=""></div>
            <div class="pic"><img src="img/index10.jpeg" alt=""></div>
        </div>

        <ul class="point" id="point">
            <li class="cur"></li>
            <li></li>
            <li></li>
        </ul>

.box
{
    position: relative;
    /* z-index: 100; */
    width: 852px;
    height: 400px;
    margin-top: 20px;
    margin-left: 300px;
   
}
.images img
{
    width: 852px;
    height: 400px;
    margin: 5px auto;
    border: 5px solid rgba(127, 255, 195, 0.445);

}
.images .current
{
    display: block;
}
.images .pic
{
    display: none;
}
.point
{
    margin-left: 380px;
    position: absolute;
    top: 380px;
}
.point li
{ 
    width: 10px;
    height: 10px;
    border-radius: 50%;
    list-style: none;
    background-color: white;
    margin-left: 20px;
    float: left;
}
.point .cur 
{
    background-color: rgba(0, 128, 0, 0.908);
}

window.onload=function()
{
    var images_div=document.getElementById("images").getElementsByTagName("div");
    var point_li=document.getElementById("point").getElementsByTagName("li");

    var timer=setInterval(autoChange,3000);
    var index=0;

//手动轮播
    for( i=0;i<point_li.length;i++)
    {
        point_li[i].onmouseover=function()
        {
            // index=i;
            clearInterval(timer);
            for( j=0;j<images_div.length;j++)
            {
                if(this==point_li[j])
                {
                    images_div[j].className="current";
                    point_li[j].className="cur";
                }

                else
                {
                    images_div[j].className="pic";
                    point_li[j].className="";
                }
            }
        }
        
        point_li[i].onmouseout=function()
        {
            timer=window.setInterval(autoChange,3000);
        }


    }

//自动轮播
function autoChange()
{
    index++;
    if(index==point_li.length)
    index=0;

    for( i=0;i<point_li.length;i++)
    {
        if(index==i)
        {
            images_div[i].className="current";
            point_li[i].className="cur";
        }
        else
        {
            images_div[i].className="pic";
            point_li[i].className="";
        }
    }
}







    var images1_div=document.getElementById("left_images").getElementsByTagName("div");
    var point1_li=document.getElementById("left_point").getElementsByTagName("li");

    var timer1=setInterval(autoChange1,3000);
    var index1=0;

//手动轮播
    for( i=0;i<point1_li.length;i++)
    {
        point1_li[i].onmouseover=function()
        {
            // index=i;
            clearInterval(timer1);
            for( j=0;j<images1_div.length;j++)
            {
                if(this==point1_li[j])
                {
                    images1_div[j].className="current1";
                    point1_li[j].className="cur1";
                }

                else
                {
                    images1_div[j].className="pic1";
                    point1_li[j].className="";
                }
            }
        }
        
        point1_li[i].onmouseout=function()
        {
            timer1=window.setInterval(autoChange1,3000);
        }


    }

//自动轮播
function autoChange1()
{
    index1++;
    if(index1==point1_li.length)
    index1=0;

    for( i=0;i<point1_li.length;i++)
    {
        if(index1==i)
        {
            images1_div[i].className="current1";
            point1_li[i].className="cur1";
        }
        else
        {
            images1_div[i].className="pic1";
            point1_li[i].className="";
        }
    }
}


}

JavaScript 编码原则之组件封装 | 青训营笔记

这是我参与「第五届青训营 」笔记创作活动的第4天