javascript - 原生js怎么编写插件组件?
本文介绍了javascript - 原生js怎么编写插件组件?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
小白一直想学习js面向对象,看了这么久还是蒙的,
经常在用大牛插件或框架的时候会这么调用,如:
new foo({
name:"liming",
age:"24",
size:{
width:200px,
min-height: 300px
},
.....
});
没写出来得直接采用默认值
小白请问如果是这种形式的调用,那插件的结构一般都是怎么写的??才可以以这种形式调用??
因为我一般只会写这种最基础的function foo(a,b,b){...}
调用就直接foo("aa","bb","cc")
,如果另一个地方改动有点大就很不好复用
面向对象大概知道这种
function foo(a,b,b){
this.a=a;
this.b=b;
this.c=c;
}
foo.prototype={
method:function(){},
...
}
var nfoo=new foo();
但只是知道这种写法,却还是不知道怎么实际来写一个函数并调用运行?谢谢解答
解决方案
从基础看起吧!
其实那些:new foo({a:'a',b:'b'})
,还有采用默认值的,也没什么神奇的,就是只传一个参数进去,这个参数是一个json:
function Foo(json){
/*如果json.a不存在,那就将0赋值给this.a,这样就达到了采用默认值的结果*/
this.a=json.a||0,
this.b=json.b||0
}
再啰嗦一点,面向对象的一个优点在于:专注。
比如开发一个弹窗插件,把这个弹窗当成对象,那么这个弹窗具有:
-
属性:
弹窗内容
弹窗窗口长度
弹窗窗口高度
-
方法:
打开弹窗
关闭弹窗
一切对象之所以是对象,就是因为它存在自己的属性和方法,不然即使成为的对象也是白搭。
所以:
function _Alert(json){
/*假设下面这个是弹窗的窗口*/
this.win=document.getElementById('#demoWin');
this.w=json.w||200;
this.h=json.h||150;
this.content=json.content||'';
this.win.style.height=this.h+'px';
this.win.style.width=this.w+'px'
}
_Alert.prototype.open=function(){
//open code
}
_Alert.prototype.close=function(){
//close code
}
new _Alert({
h:100,
w:50,
content:'this is content'
}).open()
希望对你的学习有所启发。。。
这篇关于javascript - 原生js怎么编写插件组件?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文