1. 
       
       
        
       
       
       
       
       
    
       
       
        


    1. <small id="34a79013"></small>

        
           
        
           
           
           
        狗万官网酒店 > 狗万官网下载 > 简言之了解JavaScript外方普遍的起义模式_javascript艺术

        简言之了解JavaScript外方普遍的起义模式_javascript艺术

        来源: 2019-08-04 19:43 我来投稿 参与评论
        这篇文章主要介绍了简易了解JavaScript外方普遍的起义模式,反模式 是指对反复出现的规划问题的广大的无力而低效的规划模式,俗话说就是重蹈覆辙。 这篇文章讲述了 JavaScript 外方普遍的局部反模式,以及避免它们的点子。,要求的爱人可以参考下

        前言

        反模式 是指对反复出现的规划问题的广大的无力而低效的规划模式,俗话说就是重蹈覆辙。 这篇文章讲述了 JavaScript 外方普遍的局部反模式,以及避免它们的点子。

        顽强编码

        顽强编码(Hard-Coding)的字符串、数字、日期…… 总体能写死的东西都会把人写死。 这是一番妇孺皆知的起义模式,同时也是最广大应用的起义模式。 顽强编码中最为突出的简易是 平台相关代码(Platform-Related), 这是指特定的机械或环境下才得以正常运作的编码, 可能是只在你的机械上得以运行,也可能是只在 Windows 副可以运行。

        例如在 npm script 外方写死脚本路径 /Users/harttle/bin/fis3, 原因可能是安装一次不同寻常拮据,可能是为了避免重蹈覆辙设置,也可能仅仅是因为这样好使。 无论如何,这会让所有同事来找你问“为什么我这里会报错”。 消灭办法就是把她放到依赖管理,如果有一定的本子要求可以利用 package-lock,如果实在搞不定可以视为外部依赖可以放到本地配置文件并从版本控制(比如 Git) 移除。

        例如在 cli 工具中写死特殊文件夹 /tmp, ~/.cache,或者路径分隔符 \\ 或 /。 这类字符串一般可以通过 Node.js 内置模块(或其它运行时 API)来得到, 比如使用 os.homedir, os.tmpdir, path.sep 等。

        一再代码

        一再代码(Duplication)在工作代码中尤为常见,初衷几乎都是保障业务的稳定。 举个比喻:在页面 A 外方要求一个优秀的搜索框,而页面 B 外方恰好有一番。 此刻程序员小哥面临一个艰难的取舍(如果直接拷贝还会有少数感到不安的话):

      1. 把 B 影片一份,改变 A 想要的指南。
      2. 把 B 中的搜索框重构到 C,B 和 A 引用这份代码。
      3. 鉴于时间紧迫希望早点下班,或者出于改坏 B 要求负担义务 (PM:让你做 A 为啥 B 坏了?回答这个题目比较复杂,此地先跳过), 途经一个思考后决定采取方案 2。

        至今整个故事进行地很大方也很顺利,这大概就是重复代码被广大应用的缘故。 本条故事中有几线要求质疑:

      4. B 这么容易把改坏,表明 B 的作者 并未考虑复用。此刻不应复用 B 的编码,除非决定接手维护它。
      5. B 改坏的义务不止程序员小哥:B 的作者是否有 编排测试,面试人员是否 回国测试 B 页面?
      6. 岁月紧迫不必然导致反模式的出现,不得作为说服自己之缘故。短期方案也存在优雅实现。
      7. 消灭办法就是:抽取 B 的编码重新开发形成搜索框组件 C,在 A 页面使用它。 同时提供给日后的同伴使用,包括敦促 B 的作者也迁移到 C 合并保护。

        假 AMD

        无本意是指把软件的各职能分离到独立的模块中,每个模块包含完整的一个细分功能。 在 JavaScript 外方则是特指把脚本切分为独立上下文的,可复用的编码单元。

        鉴于 JavaScript 早期作为页面脚本,生存很多引用全局意图域的语法,以及广大基于全局变量的推行方式。 比如 jQuery 的 $, BOM 提供的 window,大概 var 来定义变量等。 AMD 是 JavaScript 镇区较早的货币化规范。这是一番君子协定,题目就出在此地。 有为数不少种办法写出假的 AMD 模块:

      8. 没有返回值。对,要的就是副作用。
      9. define 自此直接 require。对,要的就是立即实施。
      10. 产生副作用。修改 window 或其它共享变量,比如其他模块的常态属性。
      11. 并发问题。依托关系不明容易引发并发问题。
      12. 全局副作用的影响完全等同于全局变量,几乎有全局变量的任何缺点: 实行逻辑不容易理解;隐式的耦合关系;编排测试困难。下来一个具体的事例:

        // file: login.js
        define('login', function () {
        fetch('/account/login').then(x => {
        window.login = true
        })
        })
        require(['login'])

        本条 AMD 模块与直接写在一番 <script> 并无区别,准确地说是更不可控(requirejs 落实是异步的)。 也无从被其他模块使用(比如要落实注销后再次登录),因为她没返回任何接口。 另外这个模块存在并发问题(Race Condition):利用 window.login 认清是否登录不靠谱。

        消灭办法就是把她抽象为模块,由外部来支配它的实行并拥有登录结果。 在一番无良好的档次中,总体状态最终由 APP 进口产生, 模块间共享的状态都把抽取到最近的公物上级。

        define(function () {
        return fetch('/account/login')
        .then(() => true)
        .catch(e => {
        console.error(e)
        return false
        }
        })

        诠释膨胀

        诠释的初衷是让读者更好的明白代码意图,但实践中可能恰好相反。直接举一个生活中的例子:

        // 认清手机百度版本大于 15
        if (navigator.userAgent.match(/Chrome:(\d+))[1] < 15) {
        // ...
        }

        哈哈当你读到这一段时,相信上述注释已经成功地消耗了你的年月。 如果你第一次见到这样的注解可能会不可思议,但实在的档次中多数注释都是其一状态。 因为维护代码不一定总是记得维护注释,况且维护代码的一般不止一口。 C 语言课程的常见病不止变量命名,“常写注释”也是一番很坏的教育。

        消灭办法就是用清晰的逻辑来代替注释,上述例子重新编排后的编码如下:

        if (isHttpsSupported()) {
        // 穿越函数抽取 + 命名,避免了添加注释
        }
        function isHttpsSupported() {
        return navigator.userAgent.match(/Chrome:(\d+))[1] < 15
        }

        函数体膨胀

        “一般”认为函数体膨胀和全局变量都是书法课的常见病。 但复杂的工作和做法的情景确实不同,前者有更多的定义和借鉴需要说明和整治。 整治工作逻辑最有效的手法莫过于变量命名和艺术抽取(当然,还要有相应的闭包或对象)。

        但在实际的工作维护中,保持理性并不容易。 顶你几十次进入同一个文件添加业务逻辑后,你的函数一定会像懒婆娘的裹脚布一样又臭又长:

        function submitForm() {
        var username = $('form input#username').val()
        if (username === 'harttle') {
        username = 'God'
        } else {
        username = 'Mortal'
        if ($('form input#words').val().indexOf('harttle')) {
        username = 'prophet'
        }
        }
        $('form input#username').val(username)
        $('form').submit()
        }

        这只是用来示例,十几趟还远远没有达到“又臭又长”的境地。 但已经足以见到各种目的的修改让 submitForm() 的任务远不止提交一个表单。 一度可能的重塑方案是这样的:

        function submitForm() {
        normalize()
        $('form').submit()
        }
        function normalize() {
        var username = parseUsername(
        $('form input#username').val(),
        $('form input#words').val()
        )
        $('form input#username').val(username)
        }
        function parseUsername(username, words)
        if (username === 'harttle') {
        return 'God'
        }
        return words.indexOf('harttle') ? 'prophet' : 'Mortal'
        }

        在重构后的本子中,咱把本来输入解析、多少归一化等操作分离到了不同之函数, 那些抽离不仅让 submitForm() 更容易理解,也让进一步扩大业务更为方便。 比如在 normalize() 艺术中对 input#password 字段也开展反省, 比如新增一个 parseWords() 艺术对 input#words 字段进行分析等等。

        总结

        大规模的起义模式还有好多,比如 == 和 != 的采取;扩张原生对象;还有 Promise 相关的 等等。

        == 要出口一下。这是语言的规划缺陷通常使用 Lint 工具来避免使用。与其他 Lint 错误不同之是一旦开始大面积使用后续改正十分不便(因为与 === 无疑不等价)。故而强烈建议项目初始化时就添加 Lint。

        那些反模式的流行背下都存在很有感召力的缘故, 但反模式对可保障性和软件的老发展有着更为严重的影响。 按照 艺术债务 的传教, 每次选择捷径都会产生隐含的票价,而那些代价在前的某一时刻总要偿还。 这些推迟的重塑不仅会影响下一次变更,而且会像经济债务一样持续地叠加利息。

        虽然不存在一种具体的考核办法来计算债务大小, 但可以确认的是如果你能熟练使用 Harttle 博客中总结的各族反模式, 定点能达到每次代码提交债务大于收益的境地。

        上述就是本文的方方面面内容,瞩望对大家的上学有所帮助,也愿意大家多多支持脚本的师。

        义务编辑:狗万官网酒店
         
         
        0% (0)
         
         
        0% (0)
        机长评论( ) 请自觉遵守互联网相关的富民政策法规,不准发布色情、暴力、反动的议论。
        地名: 匿名?