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

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)

5个回答

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

 $.fn.select=function(options){
return this.each(function(){
//组件代码
})
}

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(){//组件生命周期销毁

    }
}

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

react 组件化 也不错

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

qq_36326485
787873842 人家问的是怎么封装,使用谁不会。
9 个月之前 回复

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

Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!