Vanilla-JS实现的空中交通前端测试项目

资源摘要信息:"该文件描述了一个前端测试项目，该项目是一个单页应用程序，主要功能是在用户当前位置上空飞行的所有飞机的数据展示，并且飞机按当前高度和飞行路线方向图标排序。这个项目是在48小时内使用纯JavaScript(Vanilla-JS)编写的，目的是作为申请入门级前端位置的测试。在项目中，用户可以导航到详细信息页面，查看航空公司徽标旁边的航班数据。项目中还使用了基本的CSS过渡和效果来增强用户体验，并设计了一个简单的基于哈希的路由器来实现页面间的导航。同时，为了绕过CORS问题，项目使用了JSONP技术与RESTful API进行数据交互。项目还特别注重了关注点分离，使用webpack进行模块打包，并且利用BrowserSync实现了完全响应式布局。项目的技术栈包括HTML5、SCSS、ES6，模块加载器使用了webpack，包管理器使用了Yarn。" 知识点详细说明： 1. 单页应用程序（SPA）：是指只有一张Web页面的应用，整个应用的交互都是在这一张页面上完成的。SPA可以使得应用程序加载更快，提升用户体验，并且服务器只需要返回一次数据，剩下的数据交互、页面逻辑都由浏览器在用户交互时自行处理。 2. Vanilla-JS：指的是使用原生JavaScript编写代码，不依赖任何第三方库或框架如jQuery、React等。这种方式可以减少项目体积，提高代码的可读性和可维护性。 3. JSONP（JSON with Padding）：是一种在Web应用中实现跨域请求的技术手段。由于浏览器的同源策略限制，跨域请求通常会受到限制，而JSONP通过动态创建<script>标签的方式，可以绕过这一限制。 4. RESTful API：是一种软件架构风格和设计模式，用于构建网络应用程序。RESTful API定义了一组约束条件和原则，使得网络应用更加简洁、易于理解、且具有良好的扩展性。 5. 关注点分离（Separation of Concerns）：是指将复杂的系统分解为多个部分或组件，每个部分关注一个特定的职责。在前端开发中，这通常意味着将HTML、CSS和JavaScript分离，使得代码维护和功能扩展更加方便。 6. CSS过渡和效果：指的是CSS3中提供的动画效果，可以使元素在用户界面中平滑地改变样式，增强用户体验。 7. 哈希路由器（Hash Router）：在单页应用中，经常使用URL的哈希部分（即URL中#后面的部分）来实现前端路由功能，通过监听哈希的变化来控制视图的切换，而不需要重新加载页面。 8. webpack：是一个模块打包工具，用于分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss, TypeScript等），并将其转换和打包为合适的格式供浏览器使用。 9. EJS模板：是一种嵌入式JavaScript模板，可以用来生成HTML页面或其他类型文档。它允许开发者将JavaScript代码嵌入到HTML中，从而实现动态内容的生成。 10. BrowserSync：是一个帮助开发者提高网站开发效率的工具，提供实时重载、浏览器同步等功能，可以显著提升前端开发的效率和体验。 11. 响应式设计（Responsive Design）：是一种网页设计的方法，目的是使网页在不同分辨率的设备上（如台式电脑、平板电脑和手机）都有良好的显示和操作效果。 12. Yarn：是一个快速、可靠和安全的依赖管理工具，由Facebook、Google、Exponent 和 Tilde 开发。它与npm兼容，但提供了更快的包安装速度，并且支持离线模式和更可靠的依赖管理。 通过以上知识点的介绍，我们可以看出该项目充分利用了现代前端开发的多种技术，展示了开发者扎实的基础和对前端工程化的理解。