如何在 JS 中最好地设计（代码方面）高度交互的网页
首先让我介绍一下我的背景，以便您了解我的状况，我是一名经验丰富的 Web 开发人员，了解设计模式，并且具有性能和优化背景。 然而，我的大部分背景都是服务器端的服务器操作系统及其配置。我主要使用 PHP 和 Python 编写代码。我确实在一定程度上了解 HTML、JS 和 CSS - 远不能称自己为前端开发人员。
我的问题是这样的；我目前正在开发一个小型个人项目，其中我有一个网页（无论如何是它的主要部分），它基本上有一个地图（谷歌地图）、一个侧边栏（在地图上显示相关数据）和一个顶部带控件的栏（以影响地图+侧栏上的可见内容）。 该页面具有高度“交互性”，每个操作，无论是在地图、侧边栏还是控件上，都会影响许多其他元素。例如，单击地图上的某处，可能会突出显示侧边栏项目，反之亦然。 （可能每个动作都有一个相反的动作，或者没有……1 向动作/2 向动作）
构建 JS 库来支持这些交互的“最佳实践”或最佳设计模式是什么？我试图避免在代码中重复自己，并使其在将来易于维护和添加“操作/交互”。
我正在考虑构建一个包含所有这些“事件”的 PageManager 对象（某种），然后使用 JQuery 添加这些自定义事件，从而实现两种方式操作的关联...
我想知道您将如何设计主要的 JS 和客户端大师可能有的任何其他提示:)
美好的一天，感谢所有的鱼..我的意思是提示..
肯。
Let me start by giving a bit of background on me so you know what my status is, I'm a experienced web developer, have knowledge of design patterns, and come from a background of performance and optimizations.
However, most of my background is server-side down to the server OS and it's config. I code mainly in PHP and Python. I do know HTML, JS and CSS to a certain level - far from calling myself a front-end developer.
My question is this; I'm currently working on a small personal project in which i have a single web page (the main part of it anyway) which has basically a map (Google map), a side bar (show relevant data on the map) and a top bar with controls (to effect what's visible on the map+side bar).
This page is highly "interactive" and every action, whether on the map, the sidebar or the controls effects any number of other elements. for example, clicking somewhere on a map, might highlight a sidebar item, and vise versa. (it could be that for every action there is a opposite action, or not... 1 way actions/2 way actions)
What are the "best practices" or best design patterns to build the JS library to power these interactions? I'm trying to avoid repeating myself in the code and also making it easy to maintain and add "actions/interaction" in the future.
I was thinking of building a PageManager object (of sorts) which has all these "events" then use JQuery to add these custom events thus enabling the correlation of 2 way actions...
I would like to know how you would go about designing the main JS and any other tips you client-side guru's might have :)
Good day and thanks for all the fish .. i mean tips..
Ken.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
微软最近创建了一个模式&实践项目名为Project Silk：现代浏览器的客户端 Web 开发。它针对的是 javascript 和 jQuery 开发人员。
Microsoft recently created a patterns & practices project called Project Silk: Client-Side Web Development for Modern Browsers. Its targeted at javascript and jQuery developers.