本文的目的是介绍想封装一个JS库，不知怎么样封装出来的效率好一些。的详细情况，特别关注如何封装js的相关信息。我们将通过专业的研究、有关数据的分析等多种方式，为您呈现一个全面的了解想封装一个JS库，不

本文的目的是介绍想封装一个 JS 库，不知怎么样封装出来的效率好一些。的详细情况，特别关注如何封装js的相关信息。我们将通过专业的研究、有关数据的分析等多种方式，为您呈现一个全面的了解想封装一个 JS 库，不知怎么样封装出来的效率好一些。的机会，同时也不会遗漏关于js 封装一个均速动画函数、js中封装一个自己的简单数学对象、js中用oop思想封装轮播、js回调函数思想封装函数的知识。

• 想封装一个 JS 库，不知怎么样封装出来的效率好一些。（如何封装js）
• js 封装一个均速动画函数
• js中封装一个自己的简单数学对象
• js中用oop思想封装轮播
• js回调函数思想封装函数

想封装一个 JS 库，不知怎么样封装出来的效率好一些。（如何封装js）

abc.a2();

像这样的好吗？？主要是使用 prototype 增加方法与属性。

会不会系统一加载时就很费资源呀。

js 封装一个均速动画函数

//动画函数---任意一个元素移动到指定的目标位置
    //element为元素 target为位置
    function carToon(element, target) {
        //设置一个定时器让他循环去增加
         element.timeid = setInterval(function () {
            //拿到当前的位置（纯数字）
            var current = element.offsetLeft;
            //每次要移动的像素current
            var step = 10;
            //注意 这里是判断到底往那边走 如果当前的位置大于目标位置那么就往回走（往左边走 就是负的像素）
            //否则 当前位置小于目标地址 就继续往右走（正数的像素）
             step = current > target ? -step : step;
            //这里是移动之后的位置
             current += step;
            //判断目标位置-当前的位置是否大于每次走的像素
            if (Math.abs(target - current) > Math.abs(step)) {
                //继续移动
                element.style.left = current + ''px'';
            } else {
                //目标位置-当前的位置小于每次走的像素.清理定时器 然后让它直接移动到目标的位置
                clearInterval(element.timeid);
                element.style.left = target + ''px'';
            }
        }, 10)
    }

js中封装一个自己的简单数学对象

封装一个数学对象求最大值最小值

<script>
    var myMath={
        PI:3.1415926,
        max:function(){
            var max=arguments[0];//注意arguments的使用
            for(var i=0;i<arguments.length;i++){
                if(arguments[i]>max){
                    max=arguments[i];
                }
            }
            return max;
        },
        min:function(){
            var min=arguments[0];
            for(var i=0;i<arguments.length;i++){
                if(arguments[i]<min){
                    min=arguments[i];
                }
            }
            return min;
        }
    };
    console.log(myMath.PI);
    console.log(myMath.max(1.3,5,7));
    console.log(myMath.min(1,3,5,7));
</script>

重点注意arguments的使用

arguments 是一个对应于传递给函数的参数的类数组对象。可用于不确定参数个数的函数来接受输入的参数。

js中用oop思想封装轮播

用户可以自己设置：1、速度speed：fast,normal,slow

2、是否自动轮播：true，false

3、选择器（当然可以根据需求，增加，目前先封的这三个）仅供参考

觉得oop面向对象的思想比较有意思，前端中JS也可借鉴思想，想让代码变得更好看，变得更酷一些， 在逻辑没问题的基础上，可以用oop思想进行优化哟。我个人还在不断地摸索学习中，希望能够和大家一起进步！

HTML格式

     <div id="slider">
        <figure>
            <img src="./images/1.jpg" alt="img"/>
            <figcaption></figcaption>
        </figure>

        <figure>
            <img src="./images/2.jpg" alt="img"/>
            <figcaption></figcaption>
        </figure>

        <figure>
            <img src="./images/3.jpg" alt="img"/>
            <figcaption></figcaption>
        </figure>
    </div>

css

/*重置*/
   *{ 
        margin:0; 
        padding:0;
    }
    #slider{
        width:500px;
        height:360px;
        margin:100px auto;
        position:relative;
    }

/* 图片*/
   figure{
        width:500px;
        height:360px;
        position:absolute;
        top:0;
        left:0;
        overflow: hidden;
        text-align: center;
        display: none;
    }
    .active{
        display: block;
    }
    img{
        width: auto;
        height: 360px;
    }

/* 圆点 */
    #tab{
        width:105px;
        height:10px;
        position:absolute;
        bottom:10px;
        left:50%;
        margin-left:-50px;
    }

/* 清除浮动 */
    #tab ul{
        overflow: hidden;
    }
    #tab ul li{
        width:10px;
        height:10px;
        margin:0 5px;
        background:rgba(255,255,254,.5);
        border-radius:100%;
        cursor:pointer;
        list-style:none;
        float:left;
    }

    .on{ 
        transform: scale(1.5);
        background: skyblue;
    }

/*箭头*/
    #btn div{
    width:40px;
    height:40px;
    position:absolute;
    top:50%;
    margin-top:-20px;
    color:#fff;
    background:#999;
    background:rgba(0,0,0,.5);
    font-size:20px;
    font-weight:bold;
    font-family:''Microsoft yahei'';
    line-height:40px;
    text-align:center;
    cursor:pointer;
    }
    #btn div#left{ 
        left:0;
    }
    #btn div#right{ 
        right:0;
    }

重点来了

js封装部分

先是自执行格式(function(){})()==>然后在里面先把轮播基本的逻辑写好==>在对初始化进行封装，传参等

具体代码如下:

(function(){
   if(isAuto){//如果自动播放为真，才进入自动播放
    autoplay();
    }
   var isAuto=false;//默认自动播放为false
   var ele="#slider";//操作的选择器
   var index = 0;//当前图片默认为第一张
   var speed=1500;//图片切换速度
   var lunbo={
     init:function(obj){
        isAuto=obj.auto||isAuto;//默认自动播放为false
        ele=obj.ele||ele;//操作的选择器
        if(typeof obj.speed=="string"){
            if(obj.speed=="fast"){
                obj.speed=1000;
            }else if(obj.speed=="normal"){
                obj.speed=1500;
            }else if(obj.speed=="slow"){
                 obj.speed=2500;
            }
        }
         speed=obj.speed||speed;
       //这里用this报错，就改了
        lunbo.showCicrl();
        lunbo.arrows();
        lunbo.right();
        lunbo.left();
        lunbo.clickCircl();
        lunbo.autoplay();
        lunbo.mouseOver();
        lunbo.mouseOut();
   },

   //生成圆点
   showCicrl:function(){
    var str='''';
    str+= "<lion''></li>";//默认第一个小圆点有样式
    for(var i=1;i<$(ele).find('' figure'').length;i++){
        str+= "<li></li>"
    }
        $(ele).append(
            " <div id=''tab''>"+
                    "<ul>"+
                      str
                    +"</ul>"+
            "</div>")
   },
   //动态生成箭头
   arrows:function(){
         $(ele).append(
            "<div id=''btn''>"+
                "<div id=''left''>&lt;</div>"+
                "<div id=''right''>&gt;</div>"+
            "</div>")
   },

   //图片增减"active"
   figureClassChange:function (){
       //给每一个图片先移除class
        $(ele).find(''figure'').each(function(index,item){
            $(item).removeClass(''active'');   
        });
        //给当前的图片添加class
        var arr = $(ele).find('' figure'');
        $(arr[index]).addClass(''active'');
   },
   //圆点增减class "on"
   dotsClassChange:function (){
        $(''#tab'').find(''li'').each(function(index,item){
            $(item).removeClass(''on'');   
        });
        var arr = $(''#tab'').find(''li'');
        $(arr[index]).addClass(''on'');
   },
     /* //封装图片和小圆点增减class样式
    function classChange(ele,classStyle){
        $(ele).find('' figure'').each(function(index,item){
            $(item).removeClass(classStyle);   
        });
        var arr = $(ele);
        $(arr[index]).addClass(classStyle);
   } */
    //左箭头点击
    left:function(){
       $("#left").click(function(){
            index--
            if(index<0){
                index=$(ele).find(''figure'').length-1;
            }
           /*  classChange(''#slider'',''active'');
            classChange(''#tab'',''on''); */
            lunbo.figureClassChange();//先移除图片的所有样式，给当前的添加样式
            lunbo.dotsClassChange();

       })
   },
    //右箭头点击
    right:function(){
            $("#right").on("click",function(){
                index++
                if(index>=$(ele).find(''figure'').length){
                    index=0;
                }

                lunbo. figureClassChange();
                lunbo.dotsClassChange();
        })
    },
    //点击圆点
    clickCircl:function(){
        $("#tab li").each(function(index,item){
            $(item).click(function(){ //小圆点点击的时候，先移出所有小圆点样式，再给当前的小圆点添加样式
                $(''#tab'').find(''li'').each(function(index,item){//先移出所有小圆点的样式
                    $(item).removeClass(''on'');   
                });

                $(this).addClass(''on'');
                //实现图片和小圆点的一一对应
                //这里的代码没办法用封装好的figureClassChange（），原因还在找
                $(ele).find(''figure'').each(function(index,item){
                    $(item).removeClass(''active'');   
                });
                var arr = $(ele).find(''figure'');
                $(arr[index]).addClass(''active'');

               /* classChange(''#slider'',''active''); */
            })
        })

    },
    //自动播放
    autoplay:function(){
        timer= setInterval(function(){
            $("#right").click(); //JQuery 自动触发事件
        },1500)
    },

    //鼠标移入
    mouseOver:function(){
        $(ele).find(''figure'').on("mouseover",function(){
            clearInterval(timer);
        })
    },
    //鼠标移出
    mouseOut:function(){
        $(ele).find(''figure'').on("mouseout",function(){
            lunbo.autoplay();
        })
    }
 }
     window.lunbo={init:lunbo.init};     
})()

js回调函数思想封装函数

几个方法中有几段 代码是冗余的,可以封装一下

eg:redis方法的封装

定义接口:T 是返回值类型

               E是传入的参数类型

@Service

public class RedisService {

    @Autowired

    private ShardedJedisPool shardedJedisPool;

    private <T> T execute(Function<T, ShardedJedis> fun) {

        ShardedJedis shardedJedis = null;

        try {

            // 从连接池中获取到jedis分片对象

            shardedJedis = shardedJedisPool.getResource();

            return fun.callback(shardedJedis);

        } finally {

            if (null != shardedJedis) {

                // 关闭，检测连接是否有效，有效则放回到连接池中，无效则重置状态

                shardedJedis.close();

            }

        }

    }

/**

     * 执行set操作

     *

     * @param key

     * @param value

     * @return

     */

    public String set(final String key, final String value) {

        return this.execute(new Function<String, ShardedJedis>() {

            @Override

            public String callback(ShardedJedis e) {

                return e.set(key, value);

            }

        });

    }

关于想封装一个 JS 库，不知怎么样封装出来的效率好一些。和如何封装js的介绍现已完结，谢谢您的耐心阅读，如果想了解更多关于js 封装一个均速动画函数、js中封装一个自己的简单数学对象、js中用oop思想封装轮播、js回调函数思想封装函数的相关知识，请在本站寻找。