seal_li
六边形战士夏
采纳率100%
2018-02-24 09:48

js如何进行标准的组件化封装

5

css部分
图片说明
主体部分
图片说明
js部分
图片说明

这是一个ul li模拟select的,第一次做组件化,求教如何将其改造成比较规范的。

以下附js代码
(function($){
$.extend({
select:function(options){
var id=options.id;
var ulheight=options.height==null?200:options.height;
var inputBoxWidth=parseFloat($("#"+id+">input").css("padding-right"))+parseFloat($("#"+id+">input").css("padding-left"))+parseFloat($("#"+id+">input").css("width"))
$("#"+id+">ul").css("width",inputBoxWidth+"px")
$(document).click(function(event){
if($("#"+id+">ul").css("display")!="none"){
if($("#"+id+">input").is(event.target)){
}else{
$("#"+id+">ul").fadeOut("fast");
}
}
})
$("#"+id+">input").click(function(){
var thisinput=$(this);
var thisul=$(this).parent().find("ul");
if(thisul.css("display")=="none"){
if(thisul.height()>parseFloat(ulheight)){thisul.css({
height:ulheight+"px"
,"overflow-y":"scroll"
})
};
thisul.fadeIn("100");
thisul.find("li").click(function(){
thisinput.val($(this).text());
thisul.fadeOut("100");
})
}
else{
thisul.fadeOut("fast");
}
})
}
})
})(jQuery)

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

6条回答

  • showbo GoCityPass新加坡曼谷通票 3年前

    一般是下面这样写插件,保持jquery的链式写法

     $.fn.select=function(options){
    return this.each(function(){
    //组件代码
    })
    }
    
    点赞 2 评论 复制链接分享
  • qq_42618566 全易 2月前
  • toouoo toouoo 3年前

    用vue吧,组件化比较方便点。原生的比较难。

    点赞 评论 复制链接分享
  • Leap_icy Leap_icy 3年前

    1.组件化首先要明确目的,你的组件期望依赖什么环境(jquery,vue,react,angular或者不依赖任何库)
    2.明确了解浏览器的生命周期,来确定你的组建在浏览器生命周期的何时进行加载执行
    3.明确你的组件的生命周期(何时创建,何时加载,何时更新,何时销毁)
    4.明确你的组件的模式(单例,工厂)
    5.你的组件内部运转机制要抽象合理(这里可以巧用设计模式和数据结构的模型进行抽象)

    比如你期望把你的组件写成一个jQuery插件,就要知道jQuery是基于原型链的库,所有jquery的api都是这样挂载的

    //jQuery选择器,其实就是jQuery构造函数
    function $(){
    
    }
    //jQuery构造函数原型
     $.fn=jQuery.prototype={
        style:function(){}
        css:function(){}
        append:(){}
    }
    

    因此你只需要扩展jquery的原型链即可

     $.extend($.fn,{
        select:function(settings){
            return new Select(settings,$(this));
        }
    })
    

    最后你只要实现Select构造函数,就可以完成这个jquery插件了
    //组件默认配置

     var default = {
        url:''
    }
    function Select(settings,dom){
      this.options = $.extend({},_default,settings);//合并组件配置项
        this.dom=dom
        this.init();
    }
    
    Select.prototype={
        init:function(){//组件生命周期初始化
    
        }
        onSelectChange:function(){//选择时触发
    
        },
        destroy:function(){//组件生命周期销毁
    
        }
    }
    

    由于涉及的知识点过于多且杂,不能一一列举,还需要楼主平时注意积累,扎实基础,组件封装这种事情,随着积累会迎刃而解

    点赞 3 评论 复制链接分享
  • u010220886 u010220886 3年前

    react 组件化 也不错

    点赞 1 评论 复制链接分享
  • wubinghengajw NigelWu95 3年前

    使用 vue 就能很快学会组件化使用。

    点赞 评论 复制链接分享

为你推荐