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)
一般是下面这样写插件，保持jquery的链式写法
$.fn.select=function(options){
return this.each(function(){
//组件代码
})
}
使用 vue 就能很快学会组件化使用。
react 组件化 也不错
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(){//组件生命周期销毁
}
}
由于涉及的知识点过于多且杂，不能一一列举，还需要楼主平时注意积累，扎实基础，组件封装这种事情，随着积累会迎刃而解
用vue吧，组件化比较方便点。原生的比较难。