Medium网友开发了一款应用程序 让学习算法和数据结构变得更有趣

Medium网友Peter Weinberg开发了一款名叫CS-Playground-React的应用程序，可以使大家更有意思、也更加轻松地学习算法和数据结构。

CS-Playground-React接口

• CS-Playground-React地址：http://cs-playground-react.surge.sh/

Peter Weinberg的自述：我是一名自学成才的程序员。我觉得自己做得不够好，并且在掌握复杂的计算机科学概念方面处于劣势。

我对数学不是十分擅长。我总是把强大的数学技巧和天生擅长编程的能力联系在了一起。我觉得我必须比其他人(他们有天生的数学能力)更努力地学习相同的概念。这个想法深深扎根在我的大脑中，我很确定我永远无法学习像“二叉搜索树”这样的东西，以及如何在精神上分析像“归并排序”这样的递归噩梦。

所以我想和大家分享一下我的努力是怎样的，以及我所付出的努力的结果。

进入CS-Playground-React，它是一个浏览器内的JavaScript沙盒（sandbox），用于学习和练习算法和数据结构。这款无需注册的应用程序可以自动保存你的进度，当你困住的时候为你提供解决方案，还会提供一些有用的文章、教程和其他资源的链接，让你的学习过程变得更加轻松！

我承认，这款应用并不是什么开创性的东西。市面上有大量的应用程序，它们教授类似的技能，让你能够在浏览器中编写和运行代码。

为什么我做了这个 我开发这款应用的动机很简单:我想让学习变得更简单、更有趣。更重要的是，我为什么要学习这些特殊技能。在过去的18个月左右，我可以自信地说我已经学会了如何编码。尽管我仍然不愿自称为程序员。通过学习CS的基本原理，我希望不仅能对自己作为一名程序员更有信心，而且还能帮助其他人。自学成才的程序员是科技行业近年来更容易接受的一种人才。特别是在像硅谷这样的地方，在每个街角都有编程训练营。然而，对于希望进入这个行业而没有接受正规计算机科学教育的大多数程序员来说，仍然有很多障碍需要克服。

对我来说，学习某些东西的最好方法(尤其是枯燥的东西)，就是把它和你喜欢的东西联系起来。所以当我在开发这款应用的时候，我也在为它开发内容。现在，学习算法和数据结构是我的最新项目的一个必要部分。每隔几天，我就在学习一种新的算法或数据结构。一旦我把它写下来，我就会编译学习资源并把它添加到应用程序中。现在，我可以在一个我自己构建的超级简单的工作空间中反复练习。这不是很酷吗! ?

我发现了一个非常棒的网站，它能让我们看到如何对算法和数据结构进行排序。这是快速排序在100个项目数组中执行的操作。你可以在下面的地址中找到完整的可视化列表。

• 地址：https://www.cs.usfca.edu/~galles/visualization/Algorithms.html

技术堆栈和黑客 如果你感兴趣的话，我用React & React-Redux(尽管第一个版本是vanilla JS，CSS和HTML)构建了这个应用程序。它还使用了CodeMirror和React-Codemirror2来将一个编辑器嵌入到浏览器中(注意:原始版本的React-CodeMirror已经不再被维护，而且在新版本的反应中也没有很好地发挥作用)。

• React & React-Redux第一个版本：https://github.com/no-stack-dub-sack/algos-and-data-structures
• CodeMirror：https://codemirror.net/
• React-Codemirror2：https://github.com/scniro/react-codemirror2

模拟控制台 每次用户在它们的代码中调用console.log时，一次小的hack就可以触发一次redux操作。通过这种方式，我可以捕获已登录的消息，然后在浏览器中模拟一个控制台以显示代码的输出。你可以在任何需要清除模拟控制台消息的时候运行clearConsole()。

import { store }from './index';

export const hijackConsole= ()=> {
  const OG_LOG= console.log;
    console.log= function(...args) {
    // map over argumentsand convert
    // objectsin to readable strings
    const messages= [...args].map(msg=> {
      return typeof msg !== 'string'
        ? JSON.stringify(msg)
        : msg;
    }).join(' ');
    store.dispatch({
      type: CONSOLE_LOG,
      messages
    });
    // retain original functionality
    OG_LOG.apply(console, [...args]);
  };
};

重新定义console.log捕捉和存储已记录的代码

持久化代码

我想让这个应用程序超级容易使用。因此，我选择了一种更简单的方法来保存进度，而不是实现数据库并请求用户登录。Redux在每个会话期间管理应用程序的状态，我使用localStorage来在会话中持久化代码。该应用程序将在下一次访问时检索这个保存的状态，并将Redux存储与它解除冻结。这样你就可以在你离开的地方找到你的位置。

如果出于某种原因你想要删除所有的进程，你可以在编辑器中的任何时候运行runresetState()。如果你不想将代码提交给本地存储，那么在操作之前，不要保存注释。这将防止保存任何代码，而不仅仅是为该文件保存。

import { store }from './fileWhereStoreLives';

// add this codein your app's entry pointfile to
// set localStorage when navigating awayfrom app
window.onbeforeunload= function(e) {
  const state= store.getState();
  localStorage.setItem(
    'local-storage-key',
    JSON.stringify(state.stateYouWantToPersist)
  );
};
import { importedState }from './fileWhereStateLives';

// define your reducer's initial state:
const initialState= {
  ...importedState;
};

// define default statefor each subsequent visit.
// if localStorage with this key exists, assign it
// to this variable, otherwise, use initialState.
const defaultState= JSON.parse(
  localStorage.getItem('local-storage-key')
) || initialState;

// set defaultState of reducer to result of above operation
const reducer= (state= defaultState, action)=> {
  switch (action.type) {
    case'DO_SOMETHING_COOL':
      return {
        ...state,
        ...action.newState
      };
    default:
      return state;
  }
}

export default reducer;

另一方面，事实证明有一个叫做Redux-Persist的安装包可以为你做这个。但是对于一个简单的用例来说，你是否可以用几行代码做一些事情，或者安装一个NPM包来做同样的事情? 就我来说，我每次都选择前者。你很有可能节省了数百行代码和一组全新的依赖关系。它总是相互迁就，你必须决定什么时候高度优化(但更重的)解决方案比简单的解决方案要好。