在前端开发中，经常需要处理各种数据和行为。对于比较复杂的应用来说，我们通常会将这些数据和行为抽象成一个个独立的模型（Model），以便更好地管理和维护。那么，在前端中，我们应该如何放置这些模型呢？
放置位置
一般来说，我们可以将前端模型分为两类：视图模型（ViewModel）和业务模型（Business Model）。前者主要负责处理页面显示逻辑，后者则负责处理业务流程。
视图模型
视图模型通常放置在组件内部或者与组件相似的单独模块中。例如，我们有一个文章列表页面，我们可能会创建一个 ArticleList 组件，并将其包含的数据和行为全部封装到 ArticleListViewModel 中：
-- -------------------- ---- -------
--------- ------- -
--- -------
------ -------
-------- -------
-
----- -------------------- -
--------- --------- - ---
----- --------------- -
----- --- - ----- -----------------------
------------- - ----- -----------
-
----- ----------------- ------- -
----- ---------------------------- - ------- -------- ---
------------- - ---------------------------- -- ---------- --- ----
-
-
----- ----------- ------- --------------- -
-- - --- -----------------------
------------------- -
------------------------
-
-------- -
------ -
-----
----------------------------- -- -
---- -----------------
------------------------
------------------------
------- ----------- -- --------------------------------------------------
------
---
------
--
-
-业务模型
与视图模型不同，业务模型通常比较独立，可以单独放置在某个模块中。例如，我们有一个用户管理系统，我们可能会创建一个 User 模块，并将其包含的数据和行为全部封装到 UserModel 中：
-- -------------------- ---- -------
--------- ---- -
--- -------
----- -------
---- -------
-
----- --------- -
----- ------------- --------------- -
----- --- - ----- --------------------
------ ----- -----------
-
----- -------------- -------- ------------- -
----- ------------------------- - ------- -------- ---
-
-
------ ------- --- ------------这样，在需要使用用户相关数据或者进行用户相关操作时，我们只需要导入 UserModel 并调用相应的方法即可。
深度和学习
合理的前端模型放置方式，能够大幅提升代码的可维护性和可读性。通过对各种数据和行为进行分类、封装，不仅便于我们快速定位和修改代码，还可以避免不必要的重复工作。但是，在实际应用中，我们还需要注意以下几个问题：
模型之间的依赖关系
在大型应用中，不同模块之间可能会存在相互依赖的情况。例如，用户管理系统和文章列表页面可能都需要使用 UserModel，如果我们将 UserModel 放置于某个组件内部，那么其他组件就无法直接使用它了。因此，我们需要将公共的模型放置在全局可访问的位置（例如：在 Redux Store 或者 VueX Store 中），以方便其他组件使用。
视图模型和业务模型的分层
视图模型和业务模型应该有清晰的分层，避免两者之间出现耦合。视图模型只负责处理与页面显示相关的逻辑，而业务模
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/8428