Javascript设计模式-00-说明

最新推荐文章于 2021-08-03 17:37:51 发布

mjzhang1993

最新推荐文章于 2021-08-03 17:37:51 发布

阅读量848

点赞数

分类专栏： javascript设计模式文章标签： javascript 设计模式可扩展重构设计原则

本文链接：https://blog.csdn.net/mjzhang1993/article/details/74961754

版权

javascript设计模式专栏收录该内容

20 篇文章 1 订阅

订阅专栏

JavaScript 设计模式 – 说明

说明

看完《JavaScript 设计模式与开发实践》后，对一系列文章有了较大幅度的更改。

简介

设计模式，是一套被反复利用、思想成熟、经过分类和无数实践设计经验的总结，使用设计模式是为了让系统代码可重用、可扩展、可解耦、更容易被人理解且能保证代码可靠性，设计模式使代码开发真正工程化。

代码重构

模式和重构之间有着一种与生俱来的关系。从某种角度来看，设计模式的目的就是为许多重构行为提供目标。

在实际开发中，除了使用设计模式重构之外，还有一些常见的容易忽略的细节，这些细节也是帮助我们达到重构目标的重要手段

1. 提炼函数

如果一个函数过长，并且在这段函数中有一段代码可以被独立出来，那么我们最好把这些代码放进另外一个独立的函数中

好处

避免出现超大函数
独立出的函数有助于代码复用
独立出的函数更容易被覆写
独立出的函数如果命名良好可以起到注释的作用

2. 合并重复的条件片段

如果一个函数体内有一些条件分支语句，而这些条件分支语句散布了一些重复代码，那么就有必要合并去重

3. 把条件分支语句提炼成函数

复杂的条件分支语句是导致程序难以阅读和理解的重要原因，而且容易导致一个庞大的函数

    // 原代码
    var getPrice = function( price ){ 
        var date = new Date(); 
        if (date.getMonth() >= 6 && date.getMonth() <= 9){ // 意图不够明确
            return price * 0.8; 
        } 
        return price; 
    };

    // 改造后
    var isSummer = function(){ 
        var date = new Date(); 
        return date.getMonth() >= 6 && date.getMonth() <= 9; 
    };

    var getPrice = function( price ){ 
        if (isSummer()){  // isSummer 语义明确 还可以起到注释的作用
            return price * 0.8; 
        }
        return price; 
    };

4. 合理使用循环

在函数体内，如果有些代码实际上负责的是一些重复性的工作，那么合理利用循环不仅可以完成同样的功能，还可以使代码量更少

    // 原代码
    var createXHR = function(){
        var xhr; 
        // 重复执行 try-catch
        try{
            xhr = new ActiveXObject('MSXML2.XMLHttp.6.0'); 
        } catch(e) { 
            try{ 
                xhr = new ActiveXObject('MSXML2.XMLHttp.3.0'); 
            } catch(e) { 
                xhr = new ActiveXObject('MSXML2.XMLHttp'); 
            } 
        } 
        return xhr;
    };

    // 重构后
    var createXHR = function(){
        var versions= ['MSXML2.XMLHttp.6.0ddd', 'MSXML2.XMLHttp.3.0', 'MSXML2.XMLHttp'];
        for (var i = 0; i < versions.length; i++) {
            try{ 
                return new ActiveXObject(versions[i]); 
            } catch(e) { 

            } 
        }
    }

5. 提前让函数退出代替嵌套条件分支

对于阅读代码的人来说，嵌套的 if、else 语句相比平铺的 if、else，在阅读和理解上更加困难，实际上，如果对函数的剩余部分不感兴趣，就应该立刻退出，引导阅读者不去看当前没有用的 else 片段

    var del = function( obj ){
        if (obj.isReadOnly){ 
            return; // 执行到这步后，下边代码不需要查看直接跳出
        }

        if (obj.isFolder){
            return deleteFolder( obj ); 
        }

        if (obj.isFile){
            return deleteFile( obj ); 
        }
    };

6. 传递对象参数代替过长的参数列表

参数多于三个，可以把参数都放在一个对象内，然后把对象作为参数传递

7. 尽量减少函数参数数量

在实际开发中，向函数传递参数不可避免，但我们应该尽量减少函数接收的参数数量，这样可以减少出错的概率，比如，函数实际使用的值是两个参数计算后的值，除此之外，这两个参数没有再被引用，那么我们可以在函数外计算，然后将结果作为参数传入函数中

8. 合理使用三目运算符

简单的条件分支可以使用三目运算符节省代码，但是如果条件分支逻辑复杂，载使用三目运算符，就会增加代码可读性

9. 合理使用链式调用

类似于 jQuery 中的链式调用方法，可以增加代码阅读的逻辑性，但是不利于调试

10. 分解大型类

11. 用 return 退出多重循环

会遇到这种情况，在函数体内有一个两重循环语句，我们需要在内层循环中判断，当达到某个临界条件时退出外层的循环

    // 原代码
    var func = function(){
        var flag = false;
        var idx = null;
        for ( var i = 0; i < 10; i++ ){
            for ( var j = 0; j < 10; j++ ){
                if ( i * j >30 ){ 
                    flag = true; 
                    break; 
                }
            }
            if ( flag === true ){ 
                idx = i;
                break; 
            }
        }
        return idx;
    }
    // 重构后
    var func = function(){
        for ( var i = 0; i < 10; i++ ){
            for ( var j = 0; j < 10; j++ ){
                if ( i * j >30 ){ 
                    return i;
                }
            }
        }
    }

文章列表

参考

mjzhang1993

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Javascript设计模式-00-说明

JavaScript 设计模式说明总结了一下设计模式在 JavaScript 中的应用，最近在看《JavaScript 设计模式与开发实践》，还没有看完，随时都会对这篇博客进行修改。简介设计模式，是一套被反复利用、思想成熟、经过分类和无数实践设计经验的总结，使用设计模式是为了让系统代码可重用、可扩展、可解耦、更容易被人理解且能保证代码可靠性，设计模式使代码开发真正工程化。设计原则
复制链接

扫一扫