位置: 编程技术 - 正文

基于NodeJS的前后端分离的思考与实践(二)模版探索(基于nodejs的项目)

编辑:rootadmin

推荐整理分享基于NodeJS的前后端分离的思考与实践(二)模版探索(基于nodejs的项目),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:nodejs怎么写后端,node.js前后端交互,基于nodejs的前后端分离,nodejs怎么写后端,基于nodejs的前后端框架,nodejs前后端数据交互,nodejs前后端数据交互,基于nodejs的前后端框架,内容如对您有帮助,希望把文章链接给更多的朋友!

前言

在做前后端分离时,第一个关注到的问题就是 渲染,也就是 View 这个层面的工作。

在传统的开发模式中,浏览器端与服务器端是由不同的前后端两个团队开发,但是模版却又在这两者中间的模糊地带。因此模版上面总不可避免的越来越多复杂逻辑,最终难以维护。

而我们选择了NodeJS,作为一个前后端的中间层。试图藉由NodeJS,来疏理 View 层面的工作。

使得前后端分工更明确,让专案更好维护,达成更好的用户体验。

本文

渲染这块工作,对于前端开发者的日常工作来说,?琢朔浅4蟮谋壤??彩亲钊菀子牒蠖丝?⒕澜岵磺宓牡胤健?/p>

回首过去前端技术发展的这几年, View 这个层面的工作,经过了许多次的变革,像是:

Form Submit 全页刷新 => AJAX局部刷新服务端续染 + MVC => 客户端渲染 + MVC传统换页跳转 => 单页面应用可以观察到在这几年,大家都倾向将 渲染 这件事,从服务器端端移向了浏览器端。

而服务器端则专注于 服务化 ,提供数据接口。

浏览器端渲染的好处

浏览器端渲染的好处,我们都很清楚,像是

1.摆脱业务逻辑与呈现逻辑在Java模版引擎中的耦合与混乱。2.针对多终端应用,更容易以接口化的形式。在浏览器端搭配不同的模版,呈现不同的应用。3.页面呈现本来就不仅是html,在前端的渲染可以更轻易的以组件化形式 (html + js + css)提供功能,使得前端组件不需依赖于服务端产生的html结构。4.脱离对于后端开发、发?蚜鞒痰囊览怠?br />5.方便联调。

浏览器端渲染造成的坏处

但是在享受好处的同时,我们同样的也面临了 浏览器端渲染 所带来的坏处,像是:

1.模版分离在不同的库。有的模版放在服务端 (JAVA),而有的放在浏览器端 (JS)。前后端模版语言不相通。2.需要等待所有模版与组件在浏览器端载入完成后才能开始渲染,无法即开即看。3.首次进入会有白屏等待渲染的时间,不利于用户体验4.开发单页面应用时,前端Route与服务器端Route不匹配,处理起来很麻烦。5.重要内容都在前端组装,不利于SEO

反思前后端的定义

其实回头想想,在我们把渲染的工作从 服务端(Java) 抽出来到 浏览器端(JS) 的时候,我们的目的只是 明确的前后端职责划分,并不是非浏览器渲染不可 。

只是因为在传统的开发模式中,出了服务器就到了浏览器,所以前端的工作内容只能被限制在浏览器端。

也因此很多人认定了 后端 = 服务端 前端 = 浏览器端 ,就像下面这张图。

而在淘宝UED目前进行的 中途岛Midway 项目中,藉由在 JAVA ? Browser中间搭建一个NodeJS中间层,试图把这个前后端的分割线,重新针对 工作职责 去区分,而非针对硬体环境去区分(服务器 & 浏览器)。

因此我们有机会做到模版与路由的共享,也是一个前后端分工中最理想的状态。

淘宝中途岛 Midway

在中途岛项目中,我们把前后端分界的那条线,从浏览器端移回到了服务器端。

藉由一个由前端 轻松掌控 且 与浏览器共通 的Nodejs层,可以更清晰的完成了前后端分离。

也可以让前端开发针对不同的情况,自行决定 最适当的解决方案 。而不是所有事情 都在浏览器端来处理 。

职责划分

基于NodeJS的前后端分离的思考与实践(二)模版探索(基于nodejs的项目)

中途岛并不是前端试图抢后端饭碗的项目,目的只是把 模版 这个模糊地带切割清楚,取得更明确的职责划分。

后端 (JAVA),专注于1.服务层2.数据格式、数据稳定3.业务逻辑 前端,专注于1.UI层2.控制逻辑、渲染逻辑3.交互、用户体验 而不再拘泥于服务端或浏览器端的差异。

模版共享

在传统的开发模式中,浏览器端与服务器端是由不同的前后端两个团队开发,但是模版却又在这两者中间的模糊地带。因此模版上面总不可避免的越来越多复杂逻辑,最终难以维护。

有了NodeJS,后端同学可以在JAVA层专注于业务逻辑与数据的开发。而前端同学则专注于控制逻辑与渲染的开发。并且自行选择这些模版是要在 服务端 (NodeJS) 或是 浏览器端 做渲染。

用著一样的模版语言 XTemplate ,一样的渲染引擎 JavaScript

在 不同的渲染环境 (Server-side、PC Browser、Mobile Browser、Web View、etc.) 渲染出 一样的结果 。

路由共享

也因为有了NodeJS这一层,可以更细致的控制路由。

假如需要在前端做浏览器端路由时,可以同时配置服务器端的路由,使其在 浏览器端换页 或是 服务端换页 ,都可以得到一致的渲染效果。

同时也处理了SEO的问题。

模版共享的实践

通常我们在浏览器端渲染一份模版时,流程不外乎是

在浏览器端?入模版引擎 (xtmpleate, juicer, handlerbar, etc.)在浏览器端载入模版档案,方法可能有使用 <script type="js/tpl"> ... </script> 印在页面上使用模块载入工具,载入模版档案 (KISSY, requireJS, etc.)其他取得数据,使用模版引擎产生html将html插入到指定位置。?囊陨系牧鞒炭梢杂^察到,要想要做到模版的跨端共享,重点其实在 一致的模块选型 这件事。

市面上流行很多种模块标准,例如 KMD、AMD、CommonJS,只要能将NodeJS的模版档案透过一致模块规范输出到NodeJS端,就可以做基本的模版共享了。

而后续的系列文章会针对Model的proxy与共享,做进一步的探讨。

案例探讨

因为有了中途岛这中间层,针对过往的一些问题都有了更好的解答,例如说

案例一 复杂交互应用 (如购物车、下单页面)

状况:全部的HTML都是在前端渲染完成,服务端仅提供接口。问题:进入页面时,会有短暂白屏。解答:首次进入页面,在NodeJS端进行 全页渲染 ,并在背景下载相关的模版。后续交互操作,在浏览器端完成 局部刷新用的是 同一份模版 , 产生 一样的结果

案例二 单页面应用

状况:使用Client Side MVC框架,在浏览器换页。问题:渲染与换页都在浏览器端完成,直接输入网址进入或f5刷新时,无法直接呈现同样的内容。解答:在浏览器端与NodeJS端共享 同样的Route 设定浏览器端换页时,在浏览器端进行Route变更与 页面内容渲染直接输入同样的网址时,在NodeJS端进行 页面框架 + 页面内容渲染不管是浏览器端换页,或直接输入同样的网址,看到的内容都是 一样的 。除了增加体验、减少逻辑?杂度外。更解决了 SEO 的问题

案例三 纯浏览型页面

状况:页面仅提供资讯,较少或没有交互问题:html在服务端产生,css与js放在另外一个位置,彼此间有依赖。解答:透过NodeJS,统一管理html + css + js日后若需要扩展成复杂应用或是单页面应用,也可以轻易转移。

案例四 跨终端页面

状况:同样的应用要在不同端点呈现不同的介面与交互问题:html管理不易,常常会在服务端产生不一样的html,浏览器端又要做不一样的处理解答:跨终端的页面是渲染的问题,统一由前端来处理。透过NodeJS层与后端服务化,可以针对这类型复杂应用,设计最佳的解决方案。

总结

过去的AJAX、Client-side MVC、SPA、Two-way Data Binding 等技术的出现,都是试图要解决当时的前端开发遇到的瓶颈。

而NodeJS中间层的出现,也是在试图解决现今前端被?I限在浏览器端的一个限制。

这边文章专注于前后端模版共享,也希望能抛砖引玉,与大家一起讨论如何在NodeJS中间层这个架构下,我们可以怎样的改善我们的工作流程,怎样的跟 后端配合,来把 前端 这个工作做得更好。

基于NodeJS的前后端分离的思考与实践(三)轻量级的接口配置建模框架 前言使用Node做前后端分离的开发模式带来了一些性能及开发流程上的优势,但同时也面临不少挑战。在淘宝复杂的业务及技术架构下,后端必须依赖Java

基于NodeJS的前后端分离的思考与实践(四)安全问题解决方案 前言在前后端分离的开发模式中,从开发的角色和职能上来讲,一个最明显的变化就是:以往传统中,只负责浏览器环境中开发的前端同学,需要涉猎

基于NodeJS的前后端分离的思考与实践(五)多终端适配 前言近年来各站点基于Web的多终端适配进行得如火如荼,行业间也发展出依赖各种技术的解决方案。有如基于浏览器原生CSS3MediaQuery的响应式设计、基

标签: 基于nodejs的项目

本文链接地址:https://www.jiuchutong.com/biancheng/374297.html 转载请保留说明!

上一篇:基于NodeJS的前后端分离的思考与实践(一)全栈式开发(nodejs前后端数据交互)

下一篇:基于NodeJS的前后端分离的思考与实践(三)轻量级的接口配置建模框架(nodejs cgi)

  • 印花税的实质
  • 个税由公司承担的账务处理
  • 增值税进项税额加计抵减会计处理
  • 发票可不可以盖财务专用章
  • 不动产租赁服务属于现代服务吗
  • 收到红字发票如何申报增值税?
  • 小微企业城建税优惠政策2023
  • 纳税总额和实际上缴税费总额
  • 外籍个人工资薪金汇出境
  • 企业所得税研发费用加计扣除政策的文件
  • 所得税汇算清缴退税会计分录怎么做
  • 职工工资保险费账务处理怎么做?
  • 工程发票是不是都要异地预缴
  • 广告制作费有哪些项目
  • 用友t3怎么删除损益结转凭证
  • 新注册的个体户怎么开发票
  • 销售不动产增值税税率变化
  • 汇总转账凭证可以是一借多贷
  • 要求做前两年的核酸检测
  • 企业发生的哪些业务可以使用简易计税法
  • 电脑重启后分辨率没有1920x1080
  • 开具的电子发票需要打印出来做账吗
  • 鸿蒙怎么开启个性化桌面
  • 广告费和业务宣传费税前扣除基数
  • 以前年度损益调整属于哪类科目
  • 购入办公楼按多少折算
  • cpu性能天梯图2023年3月
  • 关于已开发票收到部分款项风险温馨提示
  • PHP:pg_send_query_params()的用法_PostgreSQL函数
  • 贴现息等于什么
  • 发生错误的原始凭证包括
  • Vite + Vue3 +Vant4构建项目时,按需引入使用Toast组件,引用 showToast 时出现编译报错的解决方案
  • PHP/HTML混写的四种方式总结
  • 减值准备对方科目不能是固定资产
  • 营业外支出准则
  • php自动提交表单
  • 图像的生成原理
  • 损失函数是什么
  • 小规模纳税人每月申报什么税
  • web实训报告怎么写
  • 选择相邻兄弟需要使用下列哪个符号
  • 物流企业会计核算的具体内容包括
  • 物流货运发票要交税吗
  • 如何用织梦在本地搭建网站
  • 准则规定的内容是
  • 工伤住院期间用人单位如何补偿
  • 购买图书的会计账务处理
  • 退货开具红字发票说明
  • 一般计税预缴增值税2%怎么算
  • 将string类型数组转化成int
  • 管理费用包含研发费用需要减吗?
  • 办公费税前扣除标准2023年
  • 年底存货反映了什么
  • 研发费用的核算方法
  • 固定资产净值如何处理
  • 长期借款涉及哪些账户
  • 高速公路通行费抵扣税率
  • 认缴制下实收资本可以一直为零吗
  • 财务费用的内容包括哪些
  • 补贴算报酬吗
  • mysql源码编译
  • Sqlserver聚集索引和非聚集索引的区别
  • mysql的分页语句
  • mac怎么使用自动切换输入法
  • windowsxp查ip地址
  • win8 设置
  • 天气8.2.0.308版本
  • win10无法安装无线显示器
  • 简述opengl的编程步骤
  • vue $route $router
  • Node.js中的包管理工具是什么
  • js设置延时执行
  • JavaScript+html5 canvas制作的百花齐放效果完整实例
  • JavaScript中的NaN代表什么
  • jquery 使用
  • python中os模块有什么作用
  • 自定义view的基本流程
  • 环保税要求标注什么
  • 江苏省个人社保参保证明打印
  • 小规模纳纳税人
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设