Html5与css3实现动态页面,最新某某《 HTML5与CSS3实现动态网页》

1.常规写法

1 function fnName(){

2     console.log("常规写法");

3 }

2.匿名函数，函数保存到变量里

1 var myfn = function(){

2     console.log("匿名函数，函数保存到变量里");

3 }

3.如果有多个变量，可以用对象收编变量

3.1 用json对象

1 var fnobject1={

2     fn1:function(){

3           console.log("第一个函数");

4     },

5     fn2:function(){

6           console.log("第二个函数");

7     },

8     fn3:function(){

9           console.log("第三个函数");

10     }

11 }

3.2 声明一个对象，然后给它添加方法

1 var fnobject2 = function(){};

2 fnobject2.fn1 = function(){

3     console.log("第一个函数");

4 }

5 fnobject2.fn2 = function(){

6     console.log("第二个函数");

7 }

8 fnobject2.fn3 = function(){

9     console.log("第三个函数");

10 }

3.3 可以把方法放在一个对象函数里

1 var fnobject3 = function(){

2     return {

3         fn1:function(){

4             console.log("第一个函数");

5             },

6         fn2:function(){

7              console.log("第二个函数");

8          },

9           fn3:function(){

10             console.log("第三个函数");

11          }

12     }

13 };

4.可用类来实现,注意类的第二种和第三种写法不能混用，否则一旦混用，如在后面为对象的原型对象赋值新对象时，那么他将会覆盖掉之前对prototype对象赋值的方法

4.1 第一种写法

1 var fnobject4 = function(){

2     this.fn1 = function(){

3         console.log("第一个函数");

4     }

5     this.fn2 = function(){

6         console.log("第二个函数");

7     }

8     this.fn3 = function(){

9         console.log("第三个函数");

10     }

11 };

4.2 第二种写法

1 var fnobject5 = function(){};

2 fnobject5.prototype.fn1 = function(){

3     console.log("第一个函数");

4 }

5 fnobject5.prototype.fn2 = function(){

6     console.log("第二个函数");

7 }

8 fnobject5.prototype.fn3 = function(){

9     console.log("第三个函数");

10 }

4.3 第三种写法

1 var fnobject6 = function(){};

2 fnobject6.prototype={

3     fn1:function(){

4         console.log("第一个函数");

5     },

6     fn2:function(){

7         console.log("第二个函数");

8     },

9     fn3:function(){

10         console.log("第三个函数");

11     }

12 }

4.4 第四种写法

var fnobject7 = function(){};

fnobject7.prototype={

fn1:function(){

console.log("第一个函数");

return this;

},

fn2:function(){

console.log("第二个函数");

return this;

},

fn3:function(){

console.log("第三个函数");

return this;

}

}

5.对Function对象类的扩展(下面三种只能用一种)

5.1 第一种写法(对象)

1 Function.prototype.addMethod = function(name,fn){

2     this[name] = fn;

3  }

4 var methods=function(){};//var methods=new Function();

5 methods.addMethod('fn1',function(){

6     console.log("第一个函数");

7 });

8 methods.addMethod('fn2',function(){

9     console.log("第二个函数");

10 });

11 methods.addMethod('fn3',function(){

12     console.log("第三个函数");

13 });

5.2 链式添加(对象)

1 Function.prototype.addMethod = function(name,fn){

2     this[name] = fn;

3     return this;

4  }

5 var methods=function(){};//var methods=new Function();

6 methods.addMethod('fn1',function(){

7     console.log("第一个函数");

8 }).addMethod('fn2',function(){

9     console.log("第二个函数");

10 }).addMethod('fn3',function(){

11     console.log("第三个函数");

12 });

5.3 链式添加(类)

Function.prototype.addMethod = function(name,fn){

this.prototype[name] = fn;

return this;

}

var Methods=function(){};//var methods=new Function();

methods.addMethod('fn1',function(){

console.log("第一个函数");

}).addMethod('fn2',function(){

console.log("第二个函数");

}).addMethod('fn3',function(){

console.log("第三个函数");

});

---------------------

作者：最爱松露巧克力

来源：CSDN

原文：https://blog.csdn.net/weixin_36617251/article/details/88655572

版权声明：本文为博主原创文章，转载请附上博文链接！