我已经使用HTML5和CSS3已有很长时间了，但是由于我相信JavaScript经常在不必要地使用而又写得不好的情况下避免使用JavaScript。因此，我一直坚持下去，直到需要学习使用真正酷而有用的东西为止。卖给我的项目是WebTorrent。

我确实有编程经验（我所知道的与语法最相似的语言是PHP和Java），所以我对标准有所了解，但我最不了解JavaScript的实践。该代码当然可以正常工作，并将在以后进行完善（这比技术演示要重要得多），所以我宁愿批评语法和通用方法，也不愿批评函数，除非我做的是根本上错误的事情。

我并没有像以前那样诱人。我的介绍是MDN的JavaScript重新介绍，我发现它非常有帮助。所有这些代码都在页面的<head>中，因此，如果我应该将其移到其他位置或在某个元素上调用它，请告诉我。

<script src="https://cdn.jsdelivr.net/webtorrent/latest/webtorrent.min.js"></script>
<script>
var client = new WebTorrent();
// Torrent ID
var torrentId = 'redacted WebTorrent magnet link - contains 2 audio files, 1 video file, 1 image';

client.add(torrentId, function ontorrent(torrent){
    /*
        Gameplan:
            Load Content (done by this point)
            Case empty torrent
            Case no playable media
                warn user
                break
            Case multiple playable media
                ask which file(s) to play
            Case one playable media
                play media
                break
    */
    // Compatible Media Formats
    var MEDIA_EXT = ['mp4', 'm4v', 'm4v', 'webm', 'm4a', 'mp3', 'wav', 'aac', 'ogg', 'oga'];

    function getExt(name){
        // Not own work: http://stackoverflow.com/questions/190852/how-can-i-get-file-extensions-with-javascript
        return name.substr((~-name.lastIndexOf(".") >>> 0) + 2);
    }

    // Status logger
    var logElement = document.getElementById('status');
    function pStatus(msg){ logElement.innerHTML += "<br/>" + msg };

    var numFiles = torrent.files.length;
    // Check for empty torrent
    if(numFiles == 0){
        pStatus("No files found!  Cannot render media.")
        return;
    }

    // Find all playable media
    var playable = new Array();
    torrent.files.forEach(function(file){
        pStatus(" - Found file: " + file.name);
        if(MEDIA_EXT.indexOf(getExt(file.name.toLowerCase())) > 0){
            playable.push(file);
        }
    });
    playable.forEach(function(file){
        pStatus("File " + file.name + " is usable.");
    });

    if(playable.length === 1){
        playable[0].appendTo(document.getElementById('target'));
    }else{
        do{
            var index = window.prompt("Multiple files found.  Please choose the index you would like to play.");
        }while(playable[index] == undefined);

        var file = playable[index];
        pStatus("Choosing index " + index + ": " + file.name + "...");
        file.appendTo(document.getElementById('target'));
        pStatus("Now loading " + file.name);
        document.title = file.name;
     }
});
</script>


#1 楼

经过审查，我提出了以下观察结果：


您真的不应该执行内联脚本，请将其放在单独的.js文件中
无意义的注释，应删除//Torrent ID

变量应该在lowerCamelCase
MEDIA_EXT-> mediaExtensions甚至validFileExtensions

我喜欢归因于SO，尽管我倾向于将其放在function之前，这样它不会分散注意力。通常，只使用一次的单行函数没有任何意义，但是由于样式是如此不同，因此我将其保留为
编写函数，不要将pStatus设为单行
您只需要numFiles一次，要退出，我不会为此使用单独的变量。
我不喜欢gameplan注释，它并不真正属于该变量，也许在设计文档中更好

new Array();->从风格上讲，最好使用var playableMedia = [];

我会研究[] .filter，如果要运行功能，不妨使用正确的功能
您已经知道所有可播放的文件，如果您倾向于处理大量文件，我会避免第二次循环
您可以只执行'prompt'而不是'window.prompt'，理想情况下您永远不要使用提示符;）
理想情况下，您有1个var在顶部声明而不是在各处声明
理想情况下，使用一种形式的引号'或"，我倾向于'

处理1个文件不一致t处理多个文件，似乎是错误的
使用JsHint.com


您缺少分号
它会告诉您使用if(numFiles === 0)，尽管我会使用if(!numFiles)




我会这样重构代码：

//No script tags, I assume this in a separate js now
var client = new WebTorrent(),
    torrentId = 'redacted WebTorrent magnet link - contains 2 audio files, 1 video file, 1 image';

client.add(torrentId, function ontorrent(torrent) {
    // Compatible Media Formats
    var validFileExtensions = ["mp4", "m4v", "m4v", "webm", "m4a", "mp3", "wav", "aac", "ogg", "oga"],
        playable = [],
        usableLog = "",
        index,
        file;

    // Not own work: http://stackoverflow.com/questions/190852/how-can-i-get-file-extensions-with-javascript
    function getExt(name) {
        return name.substr((~-name.lastIndexOf(".") >>> 0) + 2);
    }

    function updateStatus(msg) {
        document.getElementById('status').innerHTML += "<br/>" + msg;
    }

    // Check for empty torrent
    if (!torrent.files.length) {
        updateStatus("No files found!  Cannot render media.");
        return;
    }

    // Find all playable media
    playable = torrent.files.filter(function(file) {
        updateStatus(" - Found file: " + file.name);
        if (validFileExtensions.indexOf(getExt(file.name.toLowerCase())) > 0) {
            usableLog += "<br/>File " + file.name + " is usable.";
            return true;
        }
        return false;
    });
    updateStatus(usableLog || "No files were usable");

    //What file should we play
    if (playable.length === 1) {
        index = 0;
    } else {
        do {
            index = prompt("Multiple files found.  Please choose the index you would like to play.");
        } while (!playable[index]);
    }
    //Inform the user and play the file
    file = playable[index];
    updateStatus("Choosing index " + index + ": " + file.name + "...");
    file.appendTo(document.getElementById('target'));
    updateStatus("Now loading " + file.name);
    document.title = file.name;
});


评论

\ $ \ begingroup \ $
那是美丽的东西。感谢您的所有帮助！修改代码时，请务必牢记所有这些。一个简单的问题，但是此代码应包含在何处？以前，我在中将它放在一个块中。它应该被包含在头部还是在体内运行？
\ $ \ endgroup \ $
–ndm13
16-2-24在17:06
\ $ \ begingroup \ $
@ ndm13类似于