开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

我应该把我的前端代码分成通用的和特定于页面的部分吗？

是的，将前端代码分成通用的和特定于页面的部分是一种良好的开发实践。这种分离可以提高代码的可维护性和重用性，同时也有助于提高开发效率。

通用的前端代码是指可以在多个页面或应用中共享的代码，例如公共的样式表、JavaScript库、工具函数等。这些代码具有普遍性，不依赖于特定的页面结构或功能，可以被多个页面或应用共同使用。

特定于页面的前端代码是指与特定页面或应用相关的代码，例如页面的布局、交互逻辑、数据展示等。这些代码是根据具体需求编写的，与特定的页面或应用紧密相关。

将前端代码分成通用的和特定于页面的部分有以下优势：

可维护性：通过将通用的代码抽离出来，可以减少代码的冗余，降低维护成本。当需要修改或更新通用代码时，只需在一个地方进行修改，就可以影响到所有使用该代码的页面或应用。
重用性：通用的代码可以在多个页面或应用中进行重用，避免了重复编写相同的代码。这不仅提高了开发效率，还可以确保代码的一致性和稳定性。
可扩展性：通过将通用的代码与特定页面的代码分离，可以更方便地进行功能扩展和修改。通用的代码可以保持相对稳定，而特定页面的代码可以根据需求进行灵活调整。
可测试性：将通用的代码和特定页面的代码分开后，可以更容易地进行单元测试和集成测试。通用的代码可以独立测试，而特定页面的代码可以通过模拟数据和交互进行测试。

对于应用场景，将前端代码分成通用的和特定于页面的部分适用于大多数Web应用程序和网站开发。特别是在开发大型复杂的应用程序时，这种分离可以提高开发效率和代码质量。

腾讯云相关产品和产品介绍链接地址：

腾讯云前端部署服务：https://cloud.tencent.com/product/scf
腾讯云云原生应用引擎：https://cloud.tencent.com/product/tke
腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
腾讯云数据库服务：https://cloud.tencent.com/product/cdb
腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
腾讯云区块链服务：https://cloud.tencent.com/product/bcs
腾讯云人工智能服务：https://cloud.tencent.com/product/ai

相关搜索:我应该把我的状态机代码放在它自己的微服务中吗？我应该把dotnet-tools的.config目录签入到源代码管理中吗？我可以只显示反汇编代码和来自.bss部分的符号吗？我不能像下面的代码中提到的那样使用和调用函数吗？我应该把链接应用到Twitch OAuth和频道聊天的代码放在哪里？Ruby on Rails:我应该把这段代码移到模型中吗？如果是这样，最好的方法是什么？gradle文件中声明的minifyEnabled是什么。我可以知道下面的积木代码的含义和用途吗？我的代码应该同时查找关键字和颜色，但什么也没有发生。知道为什么吗？开启隐私保护快照创建失败

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

「软件架构」InfoQ 软件架构和设计趋势报告2020年4月

InfoQ负责软件架构和设计（A&D）的编辑定期讨论主题图的状态，确定我们应该涵盖的任何新趋势，并注意到在采用图中已有项目方面的任何重大变化。...当我们有几十个开发人员在一个大的业务领域中一起工作的项目时，微前端会发光，我们希望通过划分成多个子域来降低复杂性，独立部署应用程序的不同部分，而不会造成跨团队的通信和协调开销。...布莱恩特把政策看作是KubeCon和云供应商谈论的代码。早期采用者无服务器一个总能引发健康讨论的话题是无服务器。InfoQ的编辑们觉得无服务器还没有跨过鸿沟，也有一些人反对这个想法。...我们认为我们应该追踪/谈论巨石的回归吗？布莱恩特：我最初确实想知道“无服务器”是否已经跨越了鸿沟，但我不认为它已经跨越了鸿沟。...Humble提到了几年来QCon和InfoQ是如何讨论道德的： Humble：我认为我们倾向于把道德作为一个文化话题，但这是一个跨越队列的话题。我们绝对应该继续追踪并报告此事。

1.1K3 0

如何优雅解决页面和逻辑的糅合？

可能按照产品的体验，我们对于这个需求的解决有2种思路： 1，第一个路由打到去生成签名页，发现这事没法干(onShow写逻辑判断有没有登陆，没有有实名)，需要实名，接着把实名页面压到页面栈里面，然后有发现做实名需要先登陆...你应该见过不少app或者小程序或者小程序嵌套h5做过类似体验吧，尤其是一些活动页，切几次，特懵逼。...问题是我怎么知道这个意图一来就要去登陆页，我们可以通过状态，对吗？你可能联想到了有限状态机。...那下面我就给出了一个有限状态机的实现，来轻松完成页面与逻辑的解耦，实现这种跨多页面的交互。假设我们的项目结构组织如下： components/：通用的组件，可以跨多个模块使用。...pages/：不同页面的代码，按模块划分子文件夹。 utils/：工具函数、API 封装等。 store/：全局状态管理，使用 Vuex 等。 styles/：全局样式。

2710 0

架构分层—高并发场景微服务实战（四）

第二点是我没有把任务分层解耦，所有的事情都揉在一起来思考，提升了任务的复杂度。总结一下就是自己过于贪大求全了。我不是一个全才，现在不是，未来也不会是。...这个时候逻辑层的边界就开始变得模糊了，因为表现层也承担了一部分的业务逻辑（查询用户和创建用户编排起来）。这个时候我们可以怎么处理?...以上面的例子来说，Manager 层提供创建用户和获取用户信息的接口，而 Service 层负责将这两个接口组装起来。...这是显而易见的，明明我们可以在接收到请求后直接查询和操作数据库，却偏偏在中间插入了多个层次，并且每个层次可能只是简单的做数据传递，有时候增加一个小小的需求也可能要修改一整个链路上的代码，这个时候如果还增加了同事的负担那一定是会引来不少吐槽的...另外，如果我们把每个层级独立部署，那么层级之间通过网络来交互，在性能上就会有损耗。留些问题你知道什么是单一职责原则吗？你知道什么是迪米特法则吗？你知道开闭原则吗？

4392 0

按功能（特性）分包

更改代码时，我们仅需牢记当前功能。代码本身将变得更加简单易懂，因为它不是通用的，并且不必在两个用例中都可以使用。上面的功能包很棒，但实际上，我们将始终需要一个通用的包。 ? ?...不过，一开始我总是尽可能多地将代码转移到功能包中，并依赖于定制的特定于用例的实体和投影。 ---- 大图景最终，我们的大图看起来像这样： ? ?...请参阅我的帖子，了解我们的编码智慧墙。 ---- 按功能包装的方法我们的团队记录了其遵循的编码准则和原则。关于按功能分包的部分如下所示：我们基于功能分包。...有关详细信息，请参阅他的文章“使用Spring Boot和ArchUnit清理架构边界”。我最终会一次又一次写相同的代码吗？...在开始将代码提取到通用重用方法之前，我喜欢应用三定律)。最后，我想强调指出，仍然允许集中使用可重用的代码，有时甚至是合理的，但是这些情况不再那么常见了。 Kotlin可以支持这种方法吗？

1K2 1

剥开比原看代码13：比原是如何通过list-balances显示帐户余额的？

我们还是和以前一样，把它分成两个部分：前端是如何向后端发送请求的后端接收到请求数据后，是如何去查询出帐户余额的前端是如何向后端发送请求的对应这个功能的前端代码远比想像中复杂，我花了很多功夫才把逻辑理清楚...首先需要提醒的是，这里涉及到Redux和Redux-router的很多知识，如果不熟悉的话，最好能先去找点文档和例子看看，把里面的一些基本概念弄清楚。...，我们一般不能直接调用reducer，而是调用dispatch，把action传给它，它会帮我们拿到当前的store，并且把它（或者一部分）和action一起传给reducer去做转换 redux-router...，并且分成了3块：第1处的if分支处理的是第2页的情况。...而且，我还发现，GO语言通过它独特的语法、错误处理和类型系统，让一些看起来应该很简单的事情（比如抽出来一些可复用的处理数据结构的函数）都变得很麻烦，我试着重构，居然发现无从下手。

1.7K1 0

前端福音：我见过的最强 Mock 工具，没有之一！

我曾经以为，定接口什么的你们后端定就行了，跟我前端有什么关系。定好了吐数据给我就行了。我曾经以为，写接口文档什么的完全是浪费时间，边写代码边改接口不好嘛。...其实我们遇到的大部分 API 返回数据都是通用的，用户名、手机号、地址、邮箱、时间戳，等等等等。但是你要去写 Mock 规则就很麻烦。你要怎么生成一个看起来合理的中国人名？...以上示例的返回结果它生成了一个 JSON 格式的数组！总共有 20 组 id 和名字，比如你在前端要生成一个填满数据的二维表格，一次就能 Mock 一整套！只需要短短几行代码！...到下面的 page 字段，出现问题了：我请求的明明请求的是第 6 页的数据，你给我返回 page 是第 10 页算什么意思。...赶紧去下载吧 Apifox Mock 功能的七层天梯，打完收功。如果你是个前端，并且读到了这里，我觉得你应该鼓一下掌。其他的 API 和 Mock 工具你全都可以扔掉了。

2.2K3 1

用上这个 Mock 神器，让你的开发爽上天！

其实我们遇到的大部分 API 返回数据都是通用的，用户名、手机号、地址、邮箱、时间戳，等等等等。但是你要去写 Mock 规则就很麻烦。你要怎么生成一个看起来合理的中国人名？...以上示例的返回结果它生成了一个 JSON 格式的数组！总共有 20 组 id 和名字，比如你在前端要生成一个填满数据的二维表格，一次就能 Mock 一整套！只需要短短几行代码！...我有一个“查询宠物列表”的 GET 接口，它的请求参数是 page 和 pageSize，取值是 6 和 10，含义就是我要查宠物列表的第 6 页，每页限定 10 条记录。...这是个很常见的翻页场景。我想要的返回数据首先是一个数组，每一条是我查出来的这一页的一个宠物。下面还有一个 page 和 total，也就是当前页码和总计多少条记录。...请求一下，返回的 Mock 数据就是一系列的宠物信息。到下面的 page 字段，出现问题了：我请求的明明请求的是第 6 页的数据，你给我返回 page 是第 10 页算什么意思。

8162 0

如何写好一份简历

这种“账单式”列表很可能在后面的面试中坑到自己......你能保证面试官按照“精通”的标准把上面的知识点完整考完后自己可以全身而退吗？不要“挖坑”！...页面控制在3页，最优是2页之内页数越少，才能强迫你总结归纳，去糟粕留精华。为什么2页最好，这和写作文的结构一样。...第一页做系统性归纳，“我是什么样的技术人才”；第二页做解释，“为什么我是这样的人才？”；简历末尾可以来一句话总结（比如座右铭之类），也可以不要，因为第二部分只要案例说的好，基本上可以替代总结了。...这种尴尬会侧面反映出你的诚信......诚信应该是每个公司的基本价值观吧。 4. 突出个人亮点比如在项目中如何找到 Bug，如何解决 Bug 的过程 -展示你的问题处理能力和逻辑思考能力。...毕业院校位置放妥当如果你是985，211毕业的，请大胆的放在第一页上部，奖学金和优秀XXX都放出来。如果你是个二流大学毕业的，就默默的把教育经历移到简历最后吧，尽量把第一页的黄金位置让出来。

4632 0

前端开发 Mock 利器，效率提升 100%！

我曾经以为，定接口什么的你们后端定就行了，跟我前端有什么关系。定好了吐数据给我就行了。我曾经以为，写接口文档什么的完全是浪费时间，边写代码边改接口不好嘛。...其实我们遇到的大部分 API 返回数据都是通用的，用户名、手机号、地址、邮箱、时间戳，等等等等。但是你要去写 Mock 规则就很麻烦。你要怎么生成一个看起来合理的中国人名？...它生成了一个 JSON 格式的数组！总共有 20 组 id 和名字，比如你在前端要生成一个填满数据的二维表格，一次就能 Mock 一整套！只需要短短几行代码！...我有一个“查询宠物列表”的 GET 接口，它的请求参数是 page 和 pageSize，取值是 6 和 10，含义就是我要查宠物列表的第 6 页，每页限定 10 条记录。这是个很常见的翻页场景。...到下面的 page 字段，出现问题了：我请求的明明请求的是第 6 页的数据，你给我返回 page 是第 10 页算什么意思。

3753 0

前端练级攻略(第一部分)

为了使这本指南易于理解，我把它分成了两部分。第一部分介绍了如何使用 HTML 和 CSS开发接口。第2部分将介绍 Javascript、框架和设计模式。...良好的命名规范，如语义标签，传达了意义，并有助于使我们的代码可预测、可读和可维护。你可以在这篇 OOCSS、ACSS、BEM、SMACSS：它们是什么?我应该用什么? 中了解到不同的命名规范。...在重构代码时，有几件事需要问问自己。 *　你的取的类名是否有歧义?　6个月后，你还能理解你的类名是什么意思吗? *　你的 HTML 和 CSS 是语义化的吗?...你的代码在 Safari 和 Chrome 上运行得一样的吗? 你是否可以用类似于 Skeleton 的网格系统替换一些布局代码? 你经常使用 !important 标志吗?你怎么解决这个问题?...学习前端的最佳方式是建立项目和实践。请记住，每个前端开发人员都必须从某个地方开始。从今天开始比明天开始更好。本文是两部分系列中的第一部分。

1.3K0 0

前端代码复用学习笔记:整洁架构与清晰架构

，稍微大点的团队都有自己的业务组件库，但是我去过的很多团队都有落地难的问题，其中有些是技术层面的，但是更多的是出现在跨职责协作上，其中，我认为影响最大的是 UI 设计师和前端开发之间的协作关系UI 组件资产...，而在前端，按照代码改动频率依次排列，视图代码>视图逻辑>业务逻辑，相比业务逻辑，UI 代码属于高频变动的部分，尤其是是由 html+css 组成的视图代码例如电商的商品卡片，不同节日下的商品卡片很可能有不同的...… 将事物拆分成可以重新组合的事物，这就是设计。...无论框架如何的迭代，我们 JS 是永远不会太大的变化的，所有框架都是基于 JS 去写的，如何让我们通用 JS 代码被不同的框架去应用，让我们的通用代码去框架化，是我们应该思考的问题。...任何操作层面的改动都不会影响到这一层。用例（Use Cases），用例是特定于应用的业务逻辑，一般用来完成用户的某个操作。

8652 0

程序员30岁前月薪达不到30K，该何去何从

因为前端如火如荼的大势之下，其实是把大部分后端思想在前移比如经典的DI、IOC、AOP、MVVM(起源于 SilverLight)等等，这些思想什么三大框架中运用的淋淋尽致。...因为它是某种生态下的技术，并不通用，严格意义上来讲其实并不算技术。而且很多文档确实不健全，是典型的程序员坑程序员的大众技术典范。以上这几点从我自己的感觉来看确实是前景堪忧的。...你会问，既然企业都不给我机会了，我还努力啥。错！这个大错特错，你要让自己慢慢变得优秀，先让你的技术在现有的公司可以独挡一面，各方面全盘掌控，重要事情你都可以顶上。...举个小栗子：比如CSS中的变量、JavaScript的类，这些代码应该在你的项目里到处跑了。 ? ? 5、项目，一定要做，没有条件创建条件也要用。...只有把技术用到项目中去，才能让你醍醐灌顶，光学不干等于耍流氓。另外，我来说下根据群体的划分来注意前端道路上的注意事项。

6042 1

极致用户体验：论批量处理接口的性能优化之道

这些请求往往具有以下几个特点：单条数据处理耗时较长，一般来说都在200ms及以上数据批量较大，像我们系统最大一页是1000条数据，用户可选择的最大批量也就是1000 总体耗时较长，比如按200ms和...分而治之，在很多场景中都有用到，比如上一篇我们说的批量导入，它一般分成四个部分：接收请求分发请求处理请求汇总请求 ? 那么，在我们这个批量处理的过程中如何应用分而治之的思想呢？...这里的通知可以走消息模块，同时，上面的完成小请求的改造后就可以返回前端了，等到这里全部完成再异步通知。好了，我们直接来看我的架构设计图： ?...所以，我们可以做一个通用的批量接口，通过配置元数据的形式实现，元数据的格式为：{action: xx操作，targetStatus: xx处理中}，这样除了中间的处理消息的过程无法复用外，其他的部分都是可以复用的...不是每个批量场景都需要优化，见上面运用场景分析的没必要场景好了，今天的文章就到这里了，我想问，你们系统中有这样的批量处理场景吗？你们是如何进行优化的呢？

1.4K1 0

学生动漫网页设计模板下载海绵宝宝大学生HTML网页制作作品简单漫画网页设计成品 dreamweaver学生网站模板静态HTML网页单页制作 dreamwe

--- 一、网页效果图片图片图片图片图片 --- 二、代码展示 --- 1.HTML代码结构代码如下（示例）：以下仅展示部分代码供参考~ 《海绵宝宝》的故事情节主要围绕着主角海绵宝宝和他的好朋友派大星、邻居章鱼哥、上司蟹老板等人展开，场景设定于太平洋海底，一座被称为比奇堡的城市。...但海绵宝宝卡通的内容基本上与海洋知识无关，甚至夸大到完全不合乎科学与常识，例如海底生火、海底冲澡等，剧集内容也会时不时的嘲笑精致艺术和章鱼哥的劳工权益想法。...(具体可根据个人要求而定) 页面分为页头、菜单导航栏（最好可下拉）、中间内容板块、页脚四大部分；undefined 所有页面相互超链接，可到三级页面，有5-10个页面组成；页面样式风格统一布局显示正常...网站前端程序不仅要能够把用户要求的内容呈现出来，还要满足布局良好、界面美观、配色优雅、表现形式多样等要求。

1.9K5 0

js的动态加载、缓存、更新以及复用（三）

我觉得对于通用的js，就不需要每次用的时候都去写一行代码进行加载，太麻烦了。比如jQuery，加载（自动处理）之后我直接$就可以用了，没必要在写一行加载用的代码。...就像我们写C#代码，新建一个项目的时候，VS会把常用的dll引用进来；新建一个页面的时候，VS会把常用的命名空间using上，不需要我没再去操心了。...Top页面就是最外面的页面，top页面里用iframe加载其他页面，叫做子页。 3、子页是啥？　　在top页面里用iframe加载的页面。可以通过top.的方式来访问top页里的信息和函数。...比如my97，在top页里弹出日期选择的div，由于子页和top有位置偏差，所以日期选择也偏出去了，没想到啥好办法，只好改my97 的源码了。 5、不就是加载js吗，弄这么复杂干嘛？　　　　...我把共用的js文件都加载到了top页面里，子页想用的话，直接用好了，完全没有再次加载的过程。虽然一开始需要加载更多的js，但是一般可以忍受。

6.4K9 0

前端跨平台数据模型优化实践

这个方案在一定程度上缓解了上面的问题，开发跟维护成本都有了一定提升；而且针对投资并购这种对业务安全要求较高的业务，私有仓库在一定程度上可以提升自有NPM包的代码安全管控；但这个方案在实际跑下来后存在几个问题...仓库不好，是用的方式不太对；跨平台收拢回归需求本身，我们希望降本提效，不应该人为制造那么多的分裂；跨平台的核心问题就是视图层的差异，其他很多部分在底层上是可以复用的，架构的设计上应该更简单一点；我们把原来分散的前端仓库整合成了一个仓库... } } const response = Api.getData() const list = response.map(v => new ListItemModel(v)) 我们一般会写类似上面的代码...TypeScript虽然可以解决很多静态类型检查的问题，但很多时候我们是在跟API接口打交道。前端业务的稳定性一部分决定于API接口的数据输出格式的严谨性，一部分决定于前端工程师对这些数据的兼容处理。...数据异常上报&快照上面提到，前端项目的稳定性很多时候决定于后端API输出类型的稳定性。在不断迭代的过程中，可能会出现API的改动受到影响而没有知会前端的情况，造成前端报错用户侧使用异常。

7972 0

构建一套最佳的React 组件文件结构

这样，以后我就可以从同一位置导入这两者。显式重新导出还有助于记录哪些是公开的（并打算由应用程序的其余部分使用）以及该组件的私有内容。...如果愿意的话，我们可以将它们分为不同的类别（钩子，服务等），但是适用相同的基本原理。我们应该确保所有utils都是特定于组件的，而不是应由应用程序其他部分重用的东西。...没有主要组件的子组件应该是不可能的。如果是这种情况，则子组件本身应成为主组件。子组件应具有自己的单元测试（需要时），样式和资源文件。大多数情况下，story仅保留给主组件。...保留在组件目录之外的内容这是一个很好的规则：如果你曾经想使用除已从组件索引中显式导出的内容以外的其他内容，则明确表明此特定代码段应放置在其他位置。让我给你举个例子：让我们回到菜单组件。...通用指南不能取代对项目细节的批判性思考并做出相应的决策。

1.1K1 0

web前端架构-新一次的尝试机会

架构，又名软件架构，是有关软件整体结构与组件的抽象描述，用于指导大型软件系统各个方面的设计。软件架构，前端算是软件吗？按过去的眼光看肯定不是软件，因为它是一个一个的网页，多个网页组成一个网站。...网站的结构设计，至少有用户，首页，各栏目，栏目内列表，栏目详情页，社区，支付等，这些基本都是产品经理和BOSS他们定，具体的需求我还没拿到，。然后就是网站的组件的设计了，其实就是前端组件的模块化。...因为复用的话，就要兼容很多种情况，要多很多兼容方面的代码，很多时候这些代码其实根本用不到。 JS模块化现在百花齐放了，AMD/CMD/ES6/LESS/SAAS/.....但在我看来其实都一样。...因为模块化从来都是一种思路，从未和任何语言模块绑定。当然那些那些模块化库都应该学，我不学只是我懒。现在搞清楚，我要写的是相对独立的前端组件。我个人认为前端组件应该是简约不简单。...然后在页面渲染的时候，是这样的， (借图一张) ? 这是一种理想的情况。我准备在这家公司，搞一下试试！ web前端架构 - 写在前面的话 WEB前端架构（一）

8109 0

马蜂窝容器化平台前端赋能实践

容器对前端开发真的有用吗？答案是肯定的。最初当我向公司的前端同学「安利」容器技术的时候，很多人都会说：「容器？这不是用在后端的技术吗？我不懂啊，而且前端开发用不上吧。」...前端需要了解的容器知识点通过上面的介绍，相信大家已经对容器技术为前端开发带来了哪些变化有了一些感受。那么为了更好地应用这项技术，前端同学也应该掌握一些容器的基础知识。...通过使用容器，我们将应用程序、配置和依赖关系等打包成一个个代码镜像，然后去告诉线上服务器怎么让它们用容器化的方式运行起来。因此版本管理包含代码镜像和运行时配置两部分内容。 1....运行时配置运行时配置分成 Nginx 配置和部署运行时的配置两个部分（1）Nginx 配置 Nginx 配置主要针对 Node 前端项目来说。...但我们认为这种报警其实更应该发送给服务的负责人，后面我们慢慢要将这部分能力释放出来，并且不断完善和优化告警规则。总结最后简单总结：容器化之后到底给前端赋能了什么？

1K3 0

如何做好一款管理后台框架

好在我本身也是开发者，在公司内部业务开发中就有实际在使用，所以开发中的痛点还是比较好找的，无非以下几点：通用业务组件少相似业务模块需要频繁拷贝代码或文件特殊场景缺少统一解决方案框架本身提供API...通用业务组件少这个痛点是相对比较容易解决的，因为市面上各种 UI 库已经能满足大部分的业务使用需求了，我只是做了一些二次封装或补充。...小到组件和单页面的模板，大到整个模块（包含列表页、详情页、新增、编辑、删除功能一应俱全），都可以通过几个指令快速生成，如下图：当然开发者也可以根据具体业务场景，自行扩展需要生成的模板。...页面缓存是一个比较常见的场景，部分框架也提供了支持，但按需缓存，也就是根据离开并访问的目标页面，判断是否需要对当前页进行缓存，举个例子：假设 A 页面的缓存规则是，如果离开并访问 B 页面则进行缓存，...因为大部分客户不在乎你用什么技术，他们只看中“外表”，像界面是否好看，操作是否合理，动效是否流畅，而前端开发大部分日常工作内容就是在和这些打交道。

6503 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭