返回顶部
首页 > 资讯 > 前端开发 > VUE >如何理解全Javascript 的Web开发架构MEAN
  • 691
分享到

如何理解全Javascript 的Web开发架构MEAN

2024-04-02 19:04:59 691人浏览 薄情痞子
摘要

如何理解全javascript 的web开发架构MEAN,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。引言最近在angular

如何理解全javascriptweb开发架构MEAN,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。

引言

最近在angular社区的原型开发者间,一种全Javascript的开发架构MEAN正突然流行起来。其首字母分别代表的是:(M)onGoDB——NoSQL的文档数据库,使用JSON风格来存储数据,甚至也是使用js来进行sql查询;(E)xpress——基于nodeWEB开发框架;(A)agular——JS的前端开发框架,提供了声明式的双向数据绑定;(N)ode——基于V8的运行时环境(JS语言开发),可以构建快速响应、可扩展的网络应用。

如何理解全Javascript 的Web开发架构MEAN

MEAN架构的示意图

MEAN的支持者宣称,如果整个开发栈均能使用JS,必然会大大地提高效率,这一点毋庸置疑是一个很大的卖点。这样一来,开发人员(无论是前端还是后端)不仅能使用一致的数据模型,在其它方面也同样可以获得一致的编程体验。

例如,拿Mongo来说,你可以使用类JSON格式(BSON,二进制的JSON)来存储数据,然后在Express/Node中调用JSON查询语句,再将结果以JSON格式传给前端的Angular显示,这样,也自然使调试程序容易了很多。

注意: 事实上,在MEAN架构中,前端的Angular并不是必须的,你可以将它替换成其他的前端框架,如Backbone、Ember或者Polymer。

为何选择mongoDB

如上所提,这个架构最重要的优势在于能使用单一语言,这也是其选择了Mongo的首要原因。 这里就不讨论noSQL的是与非了。一些人对MEAN架构的指责在于,MongoDB可以很好地胜任中小型的应用,但是对于大规模应用(***用户)来说可能就捉襟见肘。我想说的是,这完全取决于你如何使用它。

SQL数据库本身是强类型的,因此可以在很大程度上保证某种层次的一致,从而确保许多类型的脏数据一开始就没办法进入数据库。而NoSQL则是弱类型的数据库,这使得它在数据验证方面力不从心,而只能交给开发人员来实现,基于这样的特性,它尤其适合存储那些不规范的数据,特别是在原型开发阶段,此时数据模型正在经历快速变化。

SQL和noSQL间的技术差别,归根结底是要在性能和稳定性间作出平衡。有些情况下,对数据的事务处理一旦设定后就不会轻易变化,那么此时使用Mongo就非常合适;然而有时候也会涉及更为复杂的事务处理,会牵扯到许多独立的业务逻辑,由于Mongo并没有提供一个简单的数据模型来支持一定级别的原子操作,因此SQL在这个时候可以派上用场。

但无论如何,不论你是否选择MEAN中的M,你最终都需要根据自身的需求选择出合适的工具来做正确的事情,

为何是Express?

可以简单地把Express看成是一个在Node平台下搭建Web应用的工具集。在Node的基础上,它提供了许多简洁的接口来创建请求节点、处理cookie等,此外还提供了许多功能来帮助你搭建自己的服务器。总的来说,Express在以下几个方面有优势:

  • 设置REST路由简单***:

    app.get(/account/:id,function(req, res){});

  • 支持Jade或Mustache等模板引擎

  • 自动Http头处理:

    app.get('/',function(req,res){ res.json({object:'foo'}); });

  • 支持Connect中间件,可以插入额外请求或响应处理,如用户验证

  • 提供辅助函数解析POST请求

  • 防范XSS

  • 优雅的错误处理

如何快速上手MEAN

如果想要很快上手MEAN,那么mean.io是一个很不错的选择。该项目旨在解决MEAN架构中一些常见的集成问题, 目前维护得很好,文档也很清楚,而且可以很方便地自行添加第三方库,还能和Yeoman配合使用(通过 generator-mean by James Cryer)。

在进一步阅读前,先假定我们同意以下观点:(a)Mongo至少非常适合于全Javascript堆栈的原型设计;(b) 承认即使像Angular般如日中天,终有一天也会被其他的一些JS框架给取代,只要它们能帮助我们快速方便地将这个架构快速搭建起来。

接下来就要介绍Yeoman 了,它由3个你所熟知的工具构成:

  • Grunt:用于生成,预览和自动化测试你的项目,这要特别感谢由Yeoman和grin t-contrib团队创建的许多grunt tasks。

  • Bower:前端的依赖管理工具,有了它你再也不需要手动下载和管理第三方JS库了。

  • YO:快速生成一个新的应用,包括配置好你的Grunt任务以及你极有可能会用到的Bower依赖。

笔者在一年以前,曾和其他一些人创建过一个叫ExpressStack的项目,其想法很简单,就是要提供一些工具能够快速生成构建全JS的Web应用所需要的一切。但是,这个项目夭折了,尽管如此,许多类似的项目却如雨后春笋般涌现出来。

下面对这些项目作些介绍:

注意: 你可能需要装好Yeomam(npm install -g yo)和以下一些生成器(npm install -g <generator-name>)。

1. generator-angular-fullstack

这是一个AngularJS的生成器,集成了Express,可选MongoDB。主要功能如下:

  • 支持客户端和服务端的Livereload。

  • Express server集成了grunt tasks。

  • 内建了方便的部署流程。

  • 支持Jade。

可参考: http://tylerhenkel.com/creating-apps-with-angular-and-node-using-yeoman/

2. generator-meanstack

另一个MEAN架构的生成器,集成了grunt-express,功能如下:

  • 在generator-angular的基础上,用express取代了Connect。

  • 支持客户端和服务端的Livereload。

  • 使用app_grunt.js文件来启动应用,而在app.js中定义路由。

  • 目录结构基本沿袭了generator-angular的风格,只作了少许的改动。

可参考:https://GitHub.com/Grievoushead/generator-express-angular

3. generator-mean-seed

集成了Mongo,Express,Angular,Yeoman,Karma和Protractor(作自动测试)。

4. generator-klei

和其他的很类似,不过使用的是Mongoose和Stylus,其他的一些功能包括:

  • 其目录结构非常容易扩张(包含了一个TODO List的应用例子)

  • 一个配置完整的Gruntfile,集合了livereload, linting, concatenation, minification等.

  • 使用exctrl来自动挂载api

  • 使用了grunt-injector,从而无需手动修改html的layout文件,就可以自动装载新添加的js和CSS

  • 使用Karma, Mocha和Chai来进行前端的单元测试。

5. ultimate-seed-generator

该生成器非常全面,添加了许多第三方的库,包括Passport用于用户登录,Browserify加载js。

  • 集成了AngularUI, Barbeque(用于任务队列管理)和BootStrap

  • 集成了Bower, Browserify,Express和Font Awesome

  • 集成了Grunt, Handlebars, Jquery, JSHint和Karma/Mocha

  • 支持LESS/LEsshat, Livereload和Lodash/Underscore

  • 集成了Modernizr, MongoDB/Mongoose和Passport

该如何做出选择?

看了这么多的生成器,自然要问,我该选择哪一个呢?事实上,以上列表是有顺序的,依据的是其与***版的Yeoman的兼容性以及维护的活跃度。

全Javascript的架构是否适合于产品级的应用呢?

不得不承认,如果开发堆栈的每一层都能使用JavaScript将会是一件很棒的事情(至少对于原型开发来说是这样),然而千万要注意,不要为了追求这一目标,而把自己而束缚住了。尽管的确有越来越多的大规模应用都在采用类似的架构,如Walmart、LinkedIn,但并不意味着模仿他们就一定能成功。

另一个需要注意的是,相对于其他的语言(如Ruby,python或Java),在Node上搭建后端要困难得多。你可能要自己处理内存泄漏,避免在事件循环中进行耗时运算,还要非常小心异常处理,如果这些处理不当就很有可能会导致整个应用服务器崩溃,但是这些问题在其他平台上却已经处理得很好了。然而,这并不是说,Node不能运用在生产环境下,当然可以,但要格外用心。

实话实说,想要“一揽子”为Web应用提供一个大而全的解决方案将非常困难,MEAN架构也肯定有其局限性。在前端与后端的设计模式、原则和风格中有大量的演化,如果你觉得PHP或Rails是更明智的选择,那就继续使用下去,否则的话,不妨试试MEAN,至少在当下值得一试。

看完上述内容是否对您有帮助呢?如果还想对相关知识有进一步的了解或阅读更多相关文章,请关注编程网VUE频道,感谢您对编程网的支持。

--结束END--

本文标题: 如何理解全Javascript 的Web开发架构MEAN

本文链接: https://lsjlt.com/news/86244.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 如何理解全Javascript 的Web开发架构MEAN
    如何理解全Javascript 的Web开发架构MEAN,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。引言最近在Angular...
    99+
    2024-04-02
  • JavaScript MVVM 架构:Web 开发的未来?
    MVVM 架构概述 MVVM(Model-View-ViewModel)架构是一种设计模式,在 Web 应用程序开发中非常流行。它将应用程序的三个主要组件分离: 模型:表示应用程序的状态和业务逻辑。 视图:负责呈现用户界面。 视图模型...
    99+
    2024-03-03
    MVVM、JavaScript、Web 开发、Vue.js、Knockout
  • 如何理解ASP.NET Web开发框架项目
    本篇文章为大家展示了如何理解ASP.NET Web开发框架项目,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。项目名称:Enterprise Solution技术参数1 C# ASP.NET Web ...
    99+
    2023-06-17
  • JavaScript MVVM 架构:塑造 Web 开发未来的关键
    MVVM 架构概述 MVVM(Model-View-ViewModel)是一种软件架构模式,它将应用程序分为三个主要组件: 模型 (Model): 表示应用程序中的数据状态。它包含业务逻辑、数据获取和操作。 视图 (View): 用户...
    99+
    2024-03-03
    MVVM、JavaScript、AngularJS、Vue.js、Knockout.js、双向数据绑定、可观察性
  • JavaScript MVVM 架构:现代 Web 开发的秘密武器
    模型 (Model): 表示应用程序的数据和业务逻辑。 模型用于存储应用程序状态并处理用户操作。 视图 (View): 表示应用程序的用户界面。 视图负责将模型数据呈现给用户并允许用户与应用程序交互。 视图模型 (ViewMode...
    99+
    2024-03-15
    MVVM架构
  • 如何理解Web开发的IDE
    这篇文章将为大家详细讲解有关如何理解Web开发的IDE,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。Windows 下的IDE◆Visual Web Dev...
    99+
    2024-04-02
  • 如何进行基于Python+Django+Jquery架构的Web开发
    这期内容当中小编将会给大家带来有关如何进行基于Python+Django+Jquery架构的Web开发,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。    近来,公司要开发一个自动化运...
    99+
    2023-06-02
  • 前端开发:构建 Web 应用程序的前10个 JavaScript 框架
    多年来,业界已经发布了大量 JavaScript 框架,怎样进行选择可能是一个挑战。如果你感到困惑,不知道应该选哪个或者究竟哪个适合你,那么我已经帮你解决了问题。在本文中,web前端小编将列出用来构建 Web 应用程序的前10个 JavaS...
    99+
    2023-06-03
  • 如何开发自己的javascript框架
    在当今的互联网时代中,JavaScript已经成为了开发前端应用程序的必备技能。而在开发Web应用的过程中,JavaScript框架则是无法避免的话题。因为它可以帮助我们更加高效地开发,更好地组织代码,提高代码的可重用性和可维护性。使用Ja...
    99+
    2023-05-17
  • 如何理解Tornado web框架
    这篇文章主要讲解了“如何理解Tornado web框架”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“如何理解Tornado web框架”吧!tornado简...
    99+
    2024-04-02
  • 如何理解WEB开发中的图片分析
    本篇文章给大家分享的是有关如何理解WEB开发中的图片分析,小编觉得挺实用的,因此分享给大家学习,希望大家阅读完这篇文章后可以有所收获,话不多说,跟着小编一起来看看吧。一、缩小图片大小当图片很多的时候,减少图...
    99+
    2024-04-02
  • 如何理解WEB开发中的Python WSGI协议
    今天就跟大家聊聊有关如何理解WEB开发中的Python WSGI协议,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。Web应用程序开发Web应用程序的本质是什么简单描述Web应用程序的...
    99+
    2023-06-02
  • 如何理解java架构
    首先说一下java开发架构的形式: 一般我们在学习或者实际开发中,所了解的开发架构都是基于两种形式:C/S架构(客户端/服务器)和B/S架构(浏览器/服务器)。而在JavaEE的开发中,几乎全部都是基于B/S架构开发的。而在B/S架构中,系...
    99+
    2014-05-30
    理解 java 架构
  • 如何理解SAP Kyma的架构
    如何理解SAP Kyma的架构,很多新手对此不是很清楚,为了帮助大家解决这个难题,下面小编将为大家详细讲解,有这方面需求的人可以来学习下,希望你能有所收获。SAP kyma主要分三大块组成:(1) 应用程序连接器简化并安全地将外部系统连接到...
    99+
    2023-06-04
  • JavaScript MVVM 架构的秘诀:揭开前端开发的秘密
    ...
    99+
    2024-04-02
  • 如何使用HTML5框架加速Web开发
    本篇内容介绍了“如何使用HTML5框架加速Web开发”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!   ...
    99+
    2024-04-02
  • JavaScript Custom Elements:解开Web开发的无限可能
    自定义元素的优势 封装性:自定义元素将功能和样式封装到一个单一的组件中,使得代码更易于维护和理解。 可重用性:自定义元素可在应用程序的不同部分重复使用,消除冗余并提高开发效率。 可扩展性:开发人员可以轻松地创建新元素或扩展现有元素,以满...
    99+
    2024-04-02
  • 理想的Java Web开发框架是怎样的
    今天就跟大家聊聊有关理想的Java Web开发框架是怎样的,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。理想的Java Web开发框架,应该有一个好的IDE开发工具,架构设计清晰简单...
    99+
    2023-06-17
  • 如何进行ASP.NET Web开发框架中的查询
    本篇文章为大家展示了如何进行ASP.NET Web开发框架中的查询,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。Enterprise Solution 支持用户自定义查询(query and loo...
    99+
    2023-06-17
  • 前端开发中构建Web应用程序的前10个JavaScript框架是怎样的
    今天就跟大家聊聊有关前端开发中构建Web应用程序的前10个JavaScript框架是怎样的,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。多年来,业界...
    99+
    2024-04-02
软考高级职称资格查询
推荐阅读
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作