javascript - 客户端 JavaScript 代码分析

Question

有没有可以在客户端用来分析代码模式的JavaScript代码分析器？我发现了以下内容，但似乎这仅适用于常规文本并为您提供 = 符号等。我需要一些可以在客户端运行的代码分析(JS 代码)，是否存在有什么可以用的吗？

function parseData() {
  var rawData = document.getElementById('data').value.trim(),  
      result,
      output = $('#output'),
      table = $('table').remove(),
      header,
      row,
      cell,
      ul,
      slice,
      wpm = [],        
      wpmAvg = [];

  output.empty();
  table.find('thead, tbody').empty();

  if ($('[name="format"]:checked').val() === 'text') {
    // Simple text        
    result = analyzeText(rawData);
    output.append('Word count: ' + result.count + '<br><br>Frequent words:<br>');
    ul = $('<ul>');
    _.forEach(result.frequentWords, function(value, key) {
      ul.append('<li>' + value.word + ': ' + value.count + '</li>');
    });
    output.append(ul);       
  }
  else {
    // JSON
    try {
      data = JSON.parse(rawData);
    }
    catch(e) {
      console.log('Error parsing JSON', e);
    }
    header = table.find('thead');
    body = table.find('tbody');
    row = $('<tr>');
    body.append(row);
    // Loop over slices
    _.forEach(data, function(value, key) {
      slice = '';
      // Loop over statements
      _.forEach(value, function(value, key) {
        slice += value.words + ' ';
      });

      result = analyzeText(slice);

      addCell(slice, key);

    });
    $.plot('#wpm', [wpm], {
      xaxes: [{
        axisLabel: 'Time index (1-minute increments)',
      }],
      yaxes: [{
        position: 'left',
        axisLabel: 'Words per minute',
      }]
    });
    output.append(table);
  }

  function addCell(data, index) {
    var cell1, cell2, ul1, ul2, result;
    cell1 = $('<td>');
    cell2 = $('<td>');
    ul1 = $('<ul>');
    ul2 = $('<ul>');
    cell1.append(ul1);
    cell2.append(ul2);
    row.append(cell1, cell2);
    result = analyzeText(data);
    header.append('<th>' + index + '</th><th class="subText">(' + result.count + ')</th>');
    wpm.push([index, result.count]);
    _.forEach(result.frequentWords, function(value, key) {
      ul1.append('<li>' + value.word + '</li>');
      ul2.append('<li>' + value.count + '</li>');
    });
  }
}

function analyzeText(rawData) {
  var result = {
    count: 0,
    frequentWords: []
  },
      data = rawData.split(/[\s.,]+/g)
  counts = {},
    countsArray = [],
    commonWords = [ 
    0,1,2,3,4,5,6,7,8,9,            
    '-',
    'a',
    'about',
    'function',
    'object'
  ];

  if (!data[data.length]) {
    data.splice(-1, 1);
  }

  // Word count
  result.count = data.length;

  // Word frequency (filtered for common words, sorted descending by count)
  for (var i = 0; i < data.length; i++) {
    if (!counts.hasOwnProperty(data[i].toLowerCase())) {
      counts[data[i].toLowerCase()] = 1;
    }
    else {
      counts[data[i].toLowerCase()] += 1;
    }
  }    
  _.forEach(counts, function(value, key) {
    if (commonWords.indexOf(key.toLowerCase()) === -1) {
      countsArray.push({
        word: key.toLowerCase(),
        count: value
      });
    }
  });
  countsArray = _.sortBy(countsArray, 'count').reverse();    
  _.forEach(countsArray, function(value, index) {
    if (value.count > 1) {
      result.frequentWords.push(value);            
    }
  });

  return result;
}

body {
  font-family: arial;
}
table, tr, td, th {
  border-collapse: collapse;
  border: solid 1px #ddd;
}
th, td {
  padding: 4px 8px;    
}
.subText {
  color:#999;
  font-style: italic;
}
#wpm {
  width:600px;
  height: 400px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/flot/0.8.3/jquery.flot.js"></script>

<textarea id="data" cols="80" rows="20" placeholder="Paste text or JSON here"></textarea><br />
<label for="text"><input type="radio" name="format" checked value="text" id="text"> Simple text</label>
<button type="button" onclick="parseData()">Analyze text</button>
<br><br>
<div id="output"></div><br><br>
<div id="wpm"></div>
<table>
  <thead>
  </thead>
  <tbody>
  </tbody>
</table>

https://jsfiddle.net/fxn5q8y0/6/

Answer 1

简单地遍历作用域中的每个元素并检测其类型。

这里有一个简单的例子:

var analyse = function(obj){
  var results = {}
  
  for(var b in obj) { // for each element
    if(obj.hasOwnProperty(b)){
      var detectedType = ( typeof obj[b] ) // detect the type
      if (!(detectedType in results)){ results[detectedType] = 0; } // if the type was detected for the first time, add its name to the results
      
      results[detectedType]++; // increase the counter for the detected type
    }
  }
  
  return results;
}



/**
  example for a testObject
**/

testObject = {
  a: undefined, // type undefined
  b: { xx: "xx", yy: 123 }, // type object
  c: false, // type boolean
  d: 987, // type number
  e: "abc", // type string
  f: Symbol("foo"), // type symbol 
  g: function(){}, // type function
  h: "jkl", // type number
  i: 654 // type number
};

console.log( analyse(testObject) );