工具，为盲人用户谁也没有语言

Question

我正在建立一个(开放源码)的在线工具，为没有讲话的用户，谁也是盲人。该程序通过一个女性“思考”声音中的话语列表，当其中一个被选中时，用一个男性“说话”的声音(为女性目标用户切换性别)。

我已经用javascript编写了“display”一半代码的演示，我准备用python编写编辑代码(它将解析规范并创建JSON)。

我从未正式学习过javascript，我觉得自己对“良好”实践一无所知。我想要一些关于一般编码风格的反馈( GUI和其他方面有很多需要修改的地方，我对样式和安全性感兴趣)。

这里有一个演示这里，github是这里。主要代码如下。欢迎任何反馈意见。我特别感兴趣的是那些能提高重用性的东西--我是根据预期的模式来命名的吗？

window.comscan = window.comscan || {};

var speech_voices;
if ('speechSynthesis' in window) {
    speech_voices = window.speechSynthesis.getVoices();
    window.speechSynthesis.onvoiceschanged = function() {
        speech_voices = window.speechSynthesis.getVoices();
    };
}

function think(message) {
    voiceOutput(message, "Fiona")
}

function say(message) {
    voiceOutput(message, "Daniel")
}

function voiceOutput(message, inVoice) {
    var utterance = new SpeechSynthesisUtterance(message);
    if (utterance.voice == null) {
        utterance.voice = speech_voices.filter(function(voice) {
            return voice.name == inVoice;
        })[0];
    }
    window.speechSynthesis.speak(utterance);
}

function MenuItem(inid, inlabel, inlink, inUtterance) {
    //Holds the information for a single unit that can be activated. 
    this.id = inid
    this.label = inlabel
    this.link = inlink
    this.utterance = inUtterance || inlabel
} //end MenuItem class

function PagesIterator(targetGraph) {
    this.rootNodeID = 0
    this.childIndex = 0; //initialisation
    this.graph = targetGraph; //currently a dictionary of node IDs to MenuItem objects
    this.currentNode = this.graph[this.rootNodeID]
    this.backStack = []; //stores breadcrumbs to work a multi-level 'back' button. 

    this.getHighlightedItem = function() {
        return this.currentNode[this.childIndex]; //returns a MenuItem
    }
    this.getHighlightedItemLabel = function() {
        return this.getHighlightedItem().label;
    };

    this.getHighlightedItemID = function() {
        return this.getHighlightedItem().id;
    };


    this.refreshHTML = function() {
        var listtable = document.getElementById('listtable');
        listtable.innerHTML = ""
        for (child = 0; child < this.currentNode.length; child++) {
            html = "<td>"
            if (child == this.childIndex) {
                html = "<td style= \"color:red\">";
            }
            listtable.innerHTML += "<tr>" + html + this.currentNode[child].label + "</tr></td>";
        }
    }

    this.next = function() {
        this.childIndex++;
        if (this.childIndex == this.currentNode.length) {
            this.childIndex = 0;
        }
        think(this.currentNode[this.childIndex].utterance);
        this.refreshHTML()
    }

    this.jump = function(dest) {
        this.currentNode = this.graph[dest]
        this.childIndex = 0; //start the new page at the begining
        this.refreshHTML() //new page
    }

    this.processOVF = function(dest) {
        if (dest.indexOf("back") != -1) {
            this.backStack.pop() //this will be the current page we pop off
            dest = this.backStack[this.backStack.length - 1] //this the the page below that we peek at:
            if (dest == undefined) {
                dest = this.rootNodeID
            }
            this.jump(dest)
            return
        } //a different OVF command
        alert("stub!");
    }


    this.activate = function() {
        var dest = this.getHighlightedItem().link
        if (dest == "") { //then it's a speech activatation
            say(this.getHighlightedItem().utterance)
            return
        }
        if (dest in this.graph) {
            this.jump(dest)
            this.backStack.push(dest)
        } else if (dest.indexOf("ovf(") != -1) {
            this.processOVF(dest)
        } else { //some failed linkk
            alert("Stub!");
        }

    }

} //end Board class

Answer 1

乔，这是一些基于粗略检查的快速评论。注意，你的问题可能会让你的自行车掉落。)我的评论实际上是个人的意见。

这是使用带有良好支撑的语音合成API的浏览器代码。您正在进行功能测试，这是很好的，但是如果缺少功能，您是否愿意考虑回退。

您已经选择了一个经典的基于类的样式，在JavaScript中使用了ES5样式，而且代码很小。不过，你没有给出一个使用的例子。

考虑到我会说代码很好而且很容易理解。您使用了很好的命名和格式设置。您已经混合使用分号和无分号(可能是因为您习惯于python)要么是安全的，但坚持一个或另一个，因为有危险，如果你混合。使用像ESLint这样的lint工具来检查这一点，并强制执行其他样式。您不需要使用疯狂的工作流或构建使用这些工具的设置--如果您使用节点进行开发，只需使用命令行或npm脚本即可。选择一种编码风格并坚持下去。

你也没有例外处理。你确定不需要吗？

注意x == null和x == undefined。有龙。Null和未定义是不一样的。这本身就是一个完整的话题。加入真实值和假值以及!。如果您确定自己在做什么，那么一切都很好，但是javascript由于强制类型而变得非常混乱。许多人坚持使用===进行比较，但如果您小心的话，这并不是完全必要的。我个人从来不会使用null，只是没有定义。

我建议阅读克罗克福德的- JavaScript的好部分，为这类问题。虽然较新版本的JavaScript正在移动目标，但它很小，而且易于阅读。

您确实应该进行一些单元测试，并且在这方面有许多意见和工具。就我个人而言，我保持它的简单和使用磁带。摩卡和他们的同类增加了相当多的复杂性。请参阅埃里克·埃利奥特，他还有许多其他有意见但很优秀的文章。

最后，随着代码变得越来越大，您可能希望探索其他模式，这些模式将逻辑与状态管理和副作用分离开来，比如事件和DOM更新。实际上，您正在混合将影响可测试性的关注点。有很多，选项，不只是反应+ Redux，这是非常流行的这些天。增加了可预测性和可测试性，但是这些框架带来了复杂性，更不用说学习曲线了。这在很大程度上解决了大型代码库和团队的问题。

我个人喜欢循环，但这是向反应性编程和功能编码风格(而不是类)的一大飞跃。

我希望这能帮助你编写非常棒的AT软件！:)