phpstudy集成环境

 首页 > 原生js怎么编写插件组件？

原生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();

但只是知道这种写法，却还是不知道怎么实际来写一个函数并调用运行？谢谢解答

<<Javascript高级程序设计>>里面有具体讲解，基本原理如下，
// 定义一个构造函数
function Foo(para){

this.para = para;

}
// 原型链上添加方法
Foo.prototype.doSomething = function(){

console.log(this.name);

}
// para就是初始化时设置的各种参数
var foo = new Foo(para);
foo.doSomething()

//{

name:"liming",
age:"24",
size:{
    width:200px,
    min-height: 300px
},
.....

}
这一块主要用于初始化插件时 设置一些默认参数

参数是一个object类型


function Foo(param){
    this.param=param
}

一般写插件的时候我们可能会设置默认值

var default_param={
    name:'default name'
}

// 可以自行了解一下jquery extend的用法，或者自己写一个
function Foo(param){
    this.param=$.extend({},default_param,param)
}

来来来可以看看这个，这个思路简单适合初学看啊弹出层

既然对面向对象比较懵……那么为什么不去看JS的基础书籍？
一开始就看这些成熟的插件，当然会觉得摸不着头脑……

new foo({
    name:"liming",
    age:"24",
    size:{
        width:200px,
        min-height: 300px
    },
    .....
});

对于你这个，首先，函数括号里面是个对象直接量，这句话其实就是它

var a = {
    name:"liming",
    age:"24",
    size:{
        width:200px,
        min-height: 300px
    },
    .....
};
new foo(a);

这和普通的函数调用没啥区别。
至于这种情况的类要怎么写……这得看你的需求啊，你需求是怎么样的，那就怎么写。

从基础看起吧！
其实那些：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()

希望对你的学习有所启发。。。

其实就是个函数，js里的函数也可以是定义对象

【热门文章】
【热门文章】