search
HomeBackend DevelopmentPHP TutorialMVC 模式前端应该写模板嘛?

最近到了一家公司,团队处于发展阶段。当前公司的开发模式是先由前端根据原型图与设计图做出前端页面,由技术经理制定的规则是前端按照后端需要将页面分为 head、body、menu 和 foot 四部分,然后单独分配一个控制器给他们测试页面。前端页面测试完成后再交给我们后端开发页面。

前端只负责制作页面,许多交互效果,比如 Ajax,提交动作等都是由后端来完成,还有一些诸如弹窗的效果都是先由前端独立写出一段弹层代码再由后端整合进模板里,往往模板里写了数百行的JS代码,这让我感觉网站代码十分混乱。

其次,因为前端的页面和我们后端的模板是分开的,当前端需要做出一些改动的时候他们是先在他们的页面中先修改,然后再告诉我们该修改的部分,如果小改动还好,改动大的时候就十分混乱了,而且模板里还有大量由我们后端添加的 JS 代码,修改起来往往产生很多冲突。而且因为前端和后端通常是同步进行开发,但因为后端的模板与前端的页面之间的脱节,往往也造成了一些小麻烦。

起初我认为,模板应该完全交给前端来编写,他们只要编写简单的模板语言以及按照我们后端提供的结构写 Ajax 交互,那么可以让交互的工作完全由前端掌控而不至于太过于混乱,但是前端经理却不这么想,他认为应该让前端与后端彻底分离,前端单纯只做出页面即可,甚至希望抛弃当前的做法让前端仅仅做出一个纯静态的 HTML 而不需要根据后端规则对页面进行切割,不过当时这个提议因为会加重后端工作量和开发时间而没被采纳。

想听听大家意见,前端应该写模板吗?

回复内容:

以大部分前端业内人士(包括我)的看法,模板(准确的说是表现层)应主要由前端负责,这意味着,不仅html/css是由前端做,js、ajax也应由前端来做。虽然仍然有不少公司中,有单独的页面重构(只做html/css),但总体上这种方式遭到了越来越多前端从业者的质疑和否定。

当然小猪算是一个例外。 :) 前端与后端彻底分离, 难道不是指后端只给出接口和数据么...

我们的做法, 后端开发只与前端开发协商接口及数据格式并给出数据, 前端开发写后端模板或者前端模板, 并完成所有ajax请求, 用户交互.

制作一个纯静态的html页面,私以为不叫前端. 赶紧跳槽吧。
你们公司没前端,只有切图的和程序员。
你被当作切图的。
另外有兴趣来阿里的话,可以私信发简历。 乱点来到这里。
我觉得,如果你们的前端经理的观念是前端只负责静态demo输出,认为前端开发就只是html+css+少量js,那么,我认为你应该想办法把这个经理干掉,或撤退换一个项目。
我的观点,在任何一个对用户体验有追求的互联网项目中,前端团队都必须接管所有展示层的业务,包括客户端渲染的模板和服务端的view层,因为只有前端来接管着这些业务,才能更好地把web性能优化做到极致。
只要是前端的东西,后端不要过界,也就是说js的所有逻辑,后端不应该参与。谁过界,把他的手剁了,扔回去。

当然,纯粹的静态demo也是可以模块化的,前些天回复了个话题,你可以参考。但我不太想去写那个使用文档。没为什么,觉得太简单了,自己参悟吧。

grunt的怎么进行静态资源定位配置? - 前端工程师 团队实力太差就这样吧,典型学生时代开发感。。。。


团队缺前端攻城狮,有的只是切图的。赶快给jieyou投简历去体验纯粹的后端 感觉题主的问题不涉及前后端分离,只是一种工序。

他们的项目经理的要求是 前端写出 html文件,然后后台 copy & paste 静态的部分到他们的代码里,然后把动态的替换成 动态的代码。动态的那些标识还是 后台写的。甚至文件都是两份,一份静态的,一份动态的。

这不是前后端分离,只是psd切图后生成范例html 交给后端工程师去写页面罢了。

真正的MVC模板 是应当内嵌 后台的模板代码,就是项目的一部分才对。
比如 到正文的地方 就是 {{CONTENT}} 标题就是 {{TITLE}} 这种。或者像 @小猪 他们项目里头一样 使用一些 位置标记,运行时绑定数据。前端和后端维护的是同一个文件。

而真正的前后端分离是,后端只提供接口,不涉及 html的渲染的。比如使用angular js 就是其中一种典型应用。

如果说前段开发 懂一些 脚本的概念,是可以做到改动不需要过多的后台参与的,提高开发效率的。但不是解放前端生产力,而是减少后端的工作量 :P 来来来,告诉你们的前端经理,我完全认同他的观点,前端就应该只写HTML就行了,但是,但是,但是,这需要合适的技术来支持,市面上你们能看到的技术框架,都不是为前端设计的,都是该死的后端工程师为了他们一己之便利写出来忽悠前端的。

所以,我们打着解放前端生产力的旗号就窜出来了,是的,用窜的,不服的来跟我一起窜,1,2,3。。。

前端开发 与后台开发 如何协作? - 小猪的回答

如何评价Knot.js? - 小猪的回答

顺便摘抄一段我在上边那个回答下面回复的评论

小猪(作者) 回复 贺师俊

你猜测我们的设计是外包的,这是错误的,我们的设计是独立的团队不假,但是它是我们内部的团队,只所以让他们独立, 是因为我们认为engineer和designer是有区别的,一个好的engineer,几乎不可能同时是一个好的designer,反之亦然,所以,不能够也不应该让他们混合工作。

======纯吐槽=======
很多公司,包括facebook,试图用全栈工程师来解决模板与数据逻辑的关联工作,让工程师来完成页面部分的工作,我不得不说,当我们的设计师mm在观摩山水,悲秋伤月的培养美学灵感的时候,我们正在寝室里面挥汗如雨的打游戏好不好,怎么能指望我们这些抠脚大汉写出一个让人觉得漂亮的页面来。。。
==================

所以,我们是特意构建了这样的团队结构,然后开始寻找技术解决方案,当然,从这个意义上讲,你说的团队架构反过来影响技术架构也是没错的。


贺师俊 回复 小猪(作者)
所以你虽然不是外包团队,但是按你说的独立团队的情况,跟外包的做法也差不多了。其实我个人对这种配置是非常质疑的,因为我看过很多这样配置得到糟糕结果的例子(不管是外包还是准外包性质的内部独立团队),不过没看到你们实际的工作情况我也没资格做评价就是。

猪(作者) 回复 贺师俊嗯,你看到的糟糕的情况是理所当然的,除了我们手上的这两个框架,没有其他任何框架能够适合这种团队结构,不然我们为啥自己做框架。至于说我们成不成功,我自我评价是amazing。 现有的技术栈都是engineer导向的,强行剥离设计部分一定是撕破皮流血的结果。但换个角度说,你能够看到很多失败的案例,就说明这种结构是有需求的,所以大家才会去尝试,我想,我们算是走对了路的一小撮。进一步的,由于现有的engnieer导向的技术栈无法良好的支持剥离设计,所以有经验的技术主管都会避开这种团队结构,从这一点说,分离设计的现实需求应该比我们看到的仅仅是失败的案例要多得多。
看着都复杂,我司只有切图的 和 其他的 职位是JAVA初级软件开发工程师,做的就是JavaWeb工作,
编写好各种代码,提供Controller。
然后又要跑去做页面的AJAX获取数据,事件绑定,等等操作。

ui团队只提供一个静态页面,还有一些简单的操作事件(全选,单选,弹框),最终还是让后端的人去弄各种的JavaScript...
干了一年了,写JS比Java多,而发展是往后端去的, 你们还有设计师怕啥,我们直接照着原型图写页面,然后给开发,最后全部工序完了,然后才是定页面风格,排版,神马的,伤筋动骨一周,上线
Statement
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Scrapy基于Ajax异步加载实现方法Scrapy基于Ajax异步加载实现方法Jun 22, 2023 pm 11:09 PM

Scrapy是一个开源的Python爬虫框架,它可以快速高效地从网站上获取数据。然而,很多网站采用了Ajax异步加载技术,使得Scrapy无法直接获取数据。本文将介绍基于Ajax异步加载的Scrapy实现方法。一、Ajax异步加载原理Ajax异步加载:在传统的页面加载方式中,浏览器发送请求到服务器后,必须等待服务器返回响应并将页面全部加载完毕才能进行下一步操

Nginx中404页面怎么配置及AJAX请求返回404页面Nginx中404页面怎么配置及AJAX请求返回404页面May 26, 2023 pm 09:47 PM

404页面基础配置404错误是www网站访问容易出现的错误。最常见的出错提示:404notfound。404错误页的设置对网站seo有很大的影响,而设置不当,比如直接转跳主页等,会被搜索引擎降权拔毛。404页面的目的应该是告诉用户:你所请求的页面是不存在的,同时引导用户浏览网站其他页面而不是关掉窗口离去。搜索引擎通过http状态码来识别网页的状态。当搜索引擎获得了一个错误链接时,网站应该返回404状态码,告诉搜索引擎放弃对该链接的索引。而如果返回200或302状态码,搜索引擎就会为该链接建立索引

ajax传递中文乱码怎么办ajax传递中文乱码怎么办Nov 15, 2023 am 10:42 AM

ajax传递中文乱码的解决办法:1、设置统一的编码方式;2、服务器端编码;3、客户端解码;4、设置HTTP响应头;5、使用JSON格式。详细介绍:1、设置统一的编码方式,确保服务器端和客户端使用相同的编码方式,通常情况下,UTF-8是一种常用的编码方式,因为它可以支持多种语言和字符集;2、服务器端编码,在服务器端,确保将中文数据以正确的编码方式进行编码,再传递给客户端等等。

如何使用CakePHP中的AJAX?如何使用CakePHP中的AJAX?Jun 04, 2023 pm 08:01 PM

作为一种基于MVC模式的PHP框架,CakePHP已成为许多Web开发人员的首选。它的结构简单,易于扩展,而其中的AJAX技术更是让开发变得更加高效。在本文中,将介绍如何使用CakePHP中的AJAX。什么是AJAX?在介绍如何在CakePHP中使用AJAX之前,我们先来了解一下什么是AJAX。AJAX是“异步JavaScript和XML”的缩写,是指一种在

什么是ajax重构什么是ajax重构Jul 01, 2022 pm 05:12 PM

ajax重构指的是在不改变软件现有功能的基础上,通过调整程序代码改善软件的质量、性能,使其程序的设计模式和架构更合理,提高软件的扩展性和维护性;Ajax的实现主要依赖于XMLHttpRequest对象,由于该对象的实例在处理事件完成后就会被销毁,所以在需要调用它的时候就要重新构建。

jquery ajax报错403怎么办jquery ajax报错403怎么办Nov 30, 2022 am 10:09 AM

jquery ajax报错403是因为前端和服务器的域名不同而触发了防盗链机制,其解决办法:1、打开相应的代码文件;2、通过“public CorsFilter corsFilter() {...}”方法设置允许的域即可。

使用HTML5文件上传与AJAX和jQuery使用HTML5文件上传与AJAX和jQuerySep 13, 2023 am 10:09 AM

当提交表单时,捕获提交过程并尝试运行以下代码片段来上传文件-//File1varmyFile=document.getElementById('fileBox').files[0];varreader=newFileReader();reader.readAsText(file,'UTF-8');reader.onload=myFunc;functionmyFunc(event){  varres

在Laravel中如何通过Ajax请求传递CSRF令牌?在Laravel中如何通过Ajax请求传递CSRF令牌?Sep 10, 2023 pm 03:09 PM

CSRF代表跨站请求伪造。CSRF是未经授权的用户冒充授权执行的恶意活动。Laravel通过为每个活动用户会话生成csrf令牌来保护此类恶意活动。令牌存储在用户的会话中。如果会话发生变化,它总是会重新生成,因此每个会话都会验证令牌,以确保授权用户正在执行任何任务。以下是访问csrf_token的示例。生成csrf令牌您可以通过两种方式获取令牌。通过使用$request→session()→token()直接使用csrf_token()方法示例<?phpnamespaceApp\Http\C

See all articles

Hot AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

AI Hentai Generator

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Best Graphic Settings
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. How to Fix Audio if You Can't Hear Anyone
2 weeks agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

EditPlus Chinese cracked version

EditPlus Chinese cracked version

Small size, syntax highlighting, does not support code prompt function

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser is a secure browser environment for taking online exams securely. This software turns any computer into a secure workstation. It controls access to any utility and prevents students from using unauthorized resources.

Dreamweaver Mac version

Dreamweaver Mac version

Visual web development tools

VSCode Windows 64-bit Download

VSCode Windows 64-bit Download

A free and powerful IDE editor launched by Microsoft