《JavaScript设计模式》张容铭第一章函数声明的NNNNNNN种方式

最新推荐文章于 2021-04-01 18:59:32 发布

晓秒四下

最新推荐文章于 2021-04-01 18:59:32 发布

阅读量200

点赞数 1

文章标签： javascript js

本文链接：https://blog.csdn.net/MENGCHIXIANZI/article/details/107595613

版权

《JavaScript设计模式》张容铭专栏收录该内容

1 篇文章 0 订阅

订阅专栏

灵活的语言

1.0最普通的写法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function checkName(){
            
        }
        function checkEmail(){

        }
        function checkPassword(){

        }
    </script>
</body>
</html>

1.1函数的另一种形式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var checkName = function(){
            
        }
        var checkEmail = function(){

        }
        var checkPassword = function(){

        }
    </script>
</body>
</html>

1.2 用对象收编函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var checkobject = {

            checkName : function(){
                
            },
            checkEmail : function(){

            },
            checkPassword : function(){

            }
        }
    </script>
</body>
</html>

1.3对象的另一种形式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var checkobject = function(){};

        checkobject.checkName = function(){
                
        };
        checkobject.checkEmail = function(){

        };
        checkobject.checkPassword = function(){

        }
    </script>
</body>
</html>

1.4真假对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var checkobject = function(){

            return{

                checkName : function(){
                    
                },
                checkEmail : function(){

                },
                checkPassword : function(){

                }
            }

        }

        var a = checkobject();
        a.checkEmail();
    </script>
</body>
</html>

1.5 类也可以

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var checkobject = function(){

            this.checkName = function(){
                    
            };
            this.checkEmail = function(){

            };
            this.checkPassword = function(){

            }
        };

    </script>
</body>
</html>

1.6 一个检测类

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var checkobject = function(){};

        checkobject.prototype.checkName = function(){
                
        };
        checkobject.prototype.checkEmail = function(){

        };
        checkobject.prototype.checkPassword = function(){

        }
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var checkobject = function(){};

        // 减少prototype出现的次数
        checkobject.prototype = {

            checkName : function(){
                
            },
            checkEmail : function(){

            },
            checkPassword : function(){

            }
        }
    </script>
</body>
</html>

1.7 可以链式调用的声明

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var checkobject = {

            checkName : function(){
                return this;
            },
            checkEmail : function(){
                return this;
            },
            checkPassword : function(){
                return this;
            }
        }

        // 可以链型调用
    </script>
</body>
</html>

1.8 函数的祖先

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>

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

            this[name] = fn;
        }

        //var methods = function(){};
        var methods = new Function();
        methods.addMethods('checkName',function(){});
        methods.addMethods('checkEmail',function(){});
        methods.addMethods('checkPassword',function(){});

    </script>
</body>
</html>

1.9 链式添加

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>

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

            this[name] = fn;
            return this;
        }

        //var methods = function(){};
        var methods = new Function();
        methods.addMethods('checkName',function(){})
        .addMethods('checkEmail',function(){})
        .addMethods('checkPassword',function(){});

    </script>
</body>
</html>

晓秒四下

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
《JavaScript设计模式》张容铭第一章函数声明的NNNNNNN种方式

灵活的语言1.0最普通的写法<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body&gt
复制链接

扫一扫