从Java的角度理解前端框架,nodejs,reactjs,angularjs,requirejs,seajs

2023-10-27

http://www.cnblogs.com/siwy/p/5045556.html


从Java的角度理解前端框架,nodejs,reactjs,angularjs,requirejs,seajs

【前端神秘的面纱】

对后端开发来说,前端是神秘的,

眼花缭乱的技术,繁多的框架,

如果你还停留在前端等于只用jquery做开发,那么你out了,

本文从Java的角度简述下目前前端流行的一些框架。

水平有限,欢迎指正。

 

【nodejs】

官网:

https://nodejs.org/

简介:

对前端来说极其重要的一个“框架”,简直可以说是开天辟地

类比Java中:JVM

详述:

就前端来说nodejs具有划时代的意义,

做前端的没用过nodejs都不好意思说自己是前端,

做后端的没听过nodejs,

或者说不出nodejs和java的优缺点,也不是一个合格的后端。

 

nodejs不是一个js框架,千万不要认为是类似jquery的框架,

nodejs是js运行时,运行环境,类比java中jvm,

java的开端是什么,无疑是jvm,自从有了jvm,java才能吹牛说自己是“一次编写处处运行”,

不管你是windows还是linux,只要安装了对应版本的jvm都可以运行.class文件。

 

同样nodejs的作用和jvm的一样一样的,也是js的运行环境,不管是你是什么操作系统,

只要安装对应版本的nodejs,那你就可以用js来开发后台程序。

 

这具有划时代的意义,意味着一直以来只能在浏览器上玩来玩去的js,可以做后端开发了,

从有了nodejs后就催生出一大批用js做后台开发的前端人员,这部分人员就是偏前端的“全栈程序员”。

 

记住,nodejs是和jvm同等地位的js运行环境,打开了前端人员走向后端的道路。

 

【js mvc框架】

相关框架:

框架太多,详见下面两篇文章

私人定制,十款最佳Node.js MVC框架

基于NodeJS的14款Web框架

类比Java中的:

ssh1(struts1+spring+hibernate),ssh2(struts2+spring+hibernate),ssm(springmvc+spring+mybatis)

详述:

上面说到nodejs打开了前端开发人员开发后端的大门,而且nodejs类比jvm,

那么学习java的人都知道,学习完jvm(基础)后该学什么了?

对,框架,

java中有哪些框架,正如上面所说,ssh1,ssh2,ssm等等,

这些框架都mvc框架。

 

既然nodej都有了,jvm出现了,那接下来就是js大神开始封装mvc框架,正如java大神开始封装mvc框架一样,

相对java流行了几种框架,nodejs对应的mvc框架就多的多了,

详见上面两篇文章,足够让你看的眼花缭乱。

 

其中比较有名的是expressjs。

 

记住,当你看到这些js框架的时候,微微一笑,原来就是写mvc框架,基于nodejs:

Sails. js,Total.js,Partial.js,Koa. js,Locomotive. js,Express. js,Flatiron. js

【js模块化】

相关概念:

commonjs,amd,cmd,umd

相关框架:

commonjs,seajs,requirejs,coolie

类比Java中的:

import,对就是import。。

详述:

如上所说,当有了nodejs(jvm),有了mvcjs(ssh)之后,

可想而知,每个mvcjs中会有多少js文件,这个时候js模块化就派上用处了,

 

当有人和你说js模块化如何如何,感觉自己很吊的时候,甩他一句,不就是java中的import吗?

对,虽然在前端看来js模块化如何牛x,如何吊,但是就java来说就是import。

看看下面两张图片就明白了,对比requirejs(amd)和java导包:

 

但是js中的模块化,还有很多规范,比如commonjs,amd,cmd,umd,感觉头大了吧,

其实简单的来说,就是commonjs是运行在nodejs端,amd,cmd,umd是运行在浏览器,

其作用就是import各种js文件,把js模块化管理,可以理解为java中的包管理,

详见这篇文章:http://coolie.ydr.me/introduction/commonjs-amd-cmd-umd.html 

 

同样,一个mvc,js能做出来10+种框架,可想而知模块化,js也对应很多框架,

例如commonjs,requirejs,seajs等等。

 

记住,commonjs,requirejs,seajs等js模块化框架,遵循各种规范(amd,cmd,umd,commonjs),

类比java中的import

 

 

【reactjs】

官网:

http://facebook.github.io/react/

简介:

facebook前不久出的一款框架,众前端膜拜之。

类比Java中的:freemarker的宏。

详述:

facebook前不久出了一款js框架,reactjs,

一时间,凡是用过reactjs,或者听过reactjs的前端开发就高人一等,

 

那么,这个框架到底是干嘛的,我们来看看官网的一个例子:

好的,看不懂没关系,我来说说,

左边是一段代码,右边是这段代码在网页中的效果,

左边代码中上面一大段是定义,最后一句话是使用,

左边代码jsx是reactjs的格式,旁边有个compiled js是jsx编译后的js,原生js。

 

也就是说,你通过写jsx文件,编译后生成一段js文件,这段js文件运行后是右边的效果,

那么好处是什么?

是封装,一大段js定义,最后只需要一句话输出,也就是一行js代码对应右边一个ui组件。

对了reactjs最大的作用就是用来开发ui组件,例如这个:http://material-ui.com/#/components/dropdown-menu

很酷的效果,material ui风格的webui组件,基于reactjs开发的。

 

做java的不知道用过freemarker没,用过freemarker的不知道用过宏没,看段代码:

----------------------------------------------

-----------------------------------------------

------------------------------------

------------------------------------

第一个图片中是freemarker用宏封装了bootstrap的button组件,

第二个图片是在代码用使用封装后的bsbutton,

第三个图片是效果

 

有没有发现和reactjs很相似啊,只不过reactjs是在前端实现,

而freemarker是在后端实现,两者的共同点是封装,且可以传参。

 

记住,facebook出品的reactjs是用来开发ui库的js框架,特点是可以封装大量代码。


本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

从Java的角度理解前端框架,nodejs,reactjs,angularjs,requirejs,seajs 的相关文章

  • XMLHttpRequest、jQuery.ajax、jQuery.post、jQuery.get 之间有什么区别

    我如何找出最适合某种情况的方法 有人可以提供一些例子来了解功能和性能方面的差异吗 XMLHttpRequest是原始浏览器对象 jQuery 将其包装成更可用和简化的形式以及跨浏览器一致的功能 jQuery ajax是 jQuery 中的通
  • 在 Struts2 中使用 AJAX 根据另一个选择菜单填充一个选择菜单

    我第一次尝试在 Struts2 中使用 AJAX 因此 我对此没有确切的想法 那里有两个
  • 使用XMLHttpRequest自动网页刷新内存泄漏

    问候 我一直在为一些使用 8 位微控制器的硬件开发网络界面 该网页使用 HTML javascript JSON 和 XHR XMLHttpRequest 进行通信 我想做的是创建一个页面 使用 setInterval 使用控制器中的新值每
  • 常规请求期间 Django AJAX 请求未通过

    我有一个带有登录网页的 Django 站点 当提交页面上的登录表单时 它会执行登录视图 该视图会在其中运行一个需要很长时间处理 30秒左右 的函数 因此 为了在登录期间向客户端显示进度 一旦提交表单 登录页面上的 JS 函数就会开始向服务器
  • 命令运行时从 shell_exec 命令获取输出

    我正在编写一个 PHP 脚本网页 该网页旨在接受先前上传到服务器的 JFFS2 图像的文件名 然后 该脚本将使用映像重新刷新服务器上的分区 并输出结果 我一直在用这个 tmp shell exec update flash v filena
  • Jquery:排除元素

    我有以下代码 document ready function a rel each function this qtip content text img class middle src i icon processing gif alt
  • 如何从 jquery .load 获取 php 响应

    例如我给出另一个代码 这是我的 some3 php 代码 第一个文件
  • Woocommerce 中的 Ajaxify 标头购物车项目计数

    我正在为 WordPress 创建一个自定义 woocommerce 集成主题 我在顶部有一个 blob 显示购物车中的商品总数 我想使用 Jquery 更新此 blob 无需重新加载页面 我能够通过获取购物车中的当前数量来增加商品数量bl
  • Cakephp - CSRF 令牌不匹配

    我在 Cakephp 3 6 中有一个项目 其中 MessageController 中的 3 个操作由 Ajax 调用 但是 我有一个问题 当我向其中一个操作发送请求时 XHR 会向我返回以下内容 message CSRF token m
  • 如何使用 PHP 中的 jQuery/AJAX 调用迭代 JSON 数组? [复制]

    这个问题在这里已经有答案了 可能的重复 循环Json对象 https stackoverflow com questions 684672 loop through json object 我有一个 PHP 函数 data php 它从外部
  • ASP.NET JQuery AJAX POST 返回数据,但在 401 响应内

    我的应用程序中有一个网页 需要调用我设置的 Web 服务来返回对象列表 这个调用是这样设置的 document ready function var response ajax type POST contentType applicati
  • 使用 Ajax 在输入时提交 Textarea,然后渲染部分内容而不刷新整个页面

    目前我正在尝试通过 JS 和 Ajax 在没有提交按钮的情况下发表评论 并且它有效 问题是当帖子提交时 页面重新加载到 post id comment页面 我希望它呈现部分内容 而不是刷新整个页面或将我带到不同的页面 我对 JS 不熟悉 任
  • json_encode 创建格式错误的 JSON 数据?

    我有一个 codeigniter 应用程序将一些数据从数据库返回到视图 我正在尝试将其作为 json 数据发送回来 问题是返回的数据格式错误 它看起来像这样 2 5 Admin1 2 10 Admin2 当我在 jsonlint com 上
  • 将字符串从 Struts2 操作返回到 jQuery [重复]

    这个问题在这里已经有答案了 我使用 jQuery Ajax 调用 Struts2 操作 如下所示 ajax url callAction action type POST data data dataType string success
  • 使用 Jquery 传递隐藏字段值

    我有一个正常的hidden Input field我在哪里生成random string 我需要将其附加到我尝试将数据发布到另一个页面的 URL 中 我已经做到了这一点并且效果很好 url Upload html field1 newval
  • 将列名称与具有 AJAX 数据源的 DataTable 一起使用

    我正在尝试升级我的系统以使用 DataTables 1 10 而不是 1 9 并且我正在尝试找到一种使用 JSON 对象而不是列表传回行内容的方法 具体来说 而不是以格式传回数据 data data data data data data
  • 简单 AJAX Get 请求“待处理”

    我正在尝试实现一个简单的 AJAX GET 请求 该请求告诉服务器删除数据库中的文档 虽然我从服务器得到文档已删除的确认 但 Chrome 检查器显示该请求处于 待处理 状态 最终导致服务器错误 我做错了什么 HTML div class
  • 以一定时间间隔连续重复运行 JavaScript 函数

    这是我的第一个问题 希望您尽快回答 我想要代码连续重复一个函数 我尝试了一些代码 但没有成功 我尝试了这段代码 我想在一段时间后重复这个功能 我努力了setInterval and setTimeout 但是 我还没有收到结果 这将重复该任
  • PHP、jQuery 和 Ajax 调用乱序

    我正在使用 jQuery 进行 Ajax 调用 我有 x 数量的 Ajax 调用附加到 div 这些 Ajax 加载请求是由 PHP foreach 循环生成的 问题是它们渲染的顺序不正确 它们被设置在数组中
  • Java Web 技术中的 AJAX 自动完成文本框(JSP 和 servlet)

    我需要您的帮助 了解如何使用 Java Web 技术 JSP Servlet 和 AJAX 使 HTML 输入文本元素像 Google 的 AJAX 搜索引擎 输入文本元素一样工作 下拉列表中的数据将来自数据库表 例如分别是 MySQL 或

随机推荐

  • C语言浮点数存储规则

    1 浮点型数据类型 float double long double 目前常用的类型为float 用于存储单精度浮点数和双精度浮点数 浮点数使用IEEE 电气和电子工程协会 格式 浮点类型的32位浮点数具有 4 个字节 包括一个符号位 一个
  • 【FPGA学习】状态机实现UART通信

    文章目录 前言 一 数据帧结构 二 接收模块 2 1 状态设置 2 1 状态跳转 2 2 奇校验 2 3 数据输出 三 发送模块 3 1 状态跳转 3 2 数据输出 四 顶层模块 总结 前言 在之前的文章中 FPGA学习 实例一 Cyclo
  • 7、Java入门教程【面向对象】

    面向对象是Java编程的核心概念 如果不能充分了解面向对象的思想 那么会给你在实际的项目开发过程中 带来很多业务设计上的困扰 一 构造器 我们在设计完一个类 在使用这个类去创建对象实例的时候 有些场景是需要对实例做初始化操作的 那么Java
  • 雅思备考资料整理

    单纯想整理一下自己使用过的素材 梳理一下自己学习到的经验 万一以后还需要考呢 一 听力 何琼听力网课 王陆语料库 王陆建议听写前先过一遍单词 进行同义词整理 听写到后面几章速度很快 写下来很耽误时间也跟不上 我是边听脑子里就同时反应单词怎么
  • java自定义数组_java创建自定义类的数组

    今天在学图论的最小生成树 开始一直在想是用邻接矩阵还是关联矩阵来表示图 但是发现这样都会有好多空间浪费 于是我就自定义一个边的类 里面包含了权值 关联的端点1 端点2 和图的表示字母 发现我想创建11条边 Bian new Bian 11
  • 第6章 K8s基础篇-资源调度

    杜宽老师k8s课程学习记录 6 1 Replication Controller和ReplicaSet Replication Controller 复制控制器 RC 和ReplicaSet 复制集 RS 是两种简单部署Pod的方式 因为在
  • python全栈开发优势条件_Python全栈开发-day01-初识python

    一 Python学习的大致框架 1 linux基础 计算机以及日后我们开发的程序放置的服务器的简单操作 2 Python开发 1 Python基础 2 网络编程 断点续传 一般情况下不需要我们自己开发 3 web框架 用于写网站 4 设计模
  • 等保测评:SQLServer操作超时

    一 说明 本文说的是等级保护1 0中SQLServer数据库操作超时的内容 实际在SQLServer中有很多种超时选项 很容易将其混为一谈 本文将尽力将之说清楚 二 操作超时的意义 操作超时在sqlserver数据库中可能包含好几个意思 2
  • BeagleBone 嵌入式操作

    特点 BeagleBone Black 是一个嵌入式系统 能够运行完整的 GNU Linux 发行版 例如 Debian 或 Ubuntu BeagleBone Black 具有强大的分发功能 并配有易于扩展的嵌入式板卡 是一款允许用户构建
  • JAVA浏览器控件JxBrowser v7.3上线!最新API文档打包带走!

    JxBrowser是将基于Chromium的浏览器与Java应用程序集成 以处理和显示HTML5 CSS3 JavaScript Flash等 近日 JxBrowser v7 3发布上线 支持最新macOS Catalina 支持Java1
  • QT 信号和槽的使用笔记

    目录 信号和槽介绍 回调机制 信号槽机制 信号 槽 信号槽和直接调用效率问题 信号和槽的使用对比 QT5 写法 QT4 写法 总结 信号和槽介绍 信号与插槽机制 提供对象间的通信机制 可以取代原始的回调和消息映射机制 信号与槽是迅速的 类型
  • 计算机网络--基础篇(IP地址,端口号,协议,五元组,封装分用,客户端,服务器)

    目录 一 IP地址 1 IP地址的概念及格式 2 IP地址的编址方法阶段 3 IP地址的分类 二 端口号 1 定义 2 格式 三 协议 三要素 四 五元组 五 发送端和接收端 六 封装分用 七 客户端和服务器 1 服务端 2 客户端 一 I
  • MyBatis查询单表返回List

    本来以为把List
  • python dict 写入 json 文件 编码问题

    esports 0 subject list sign 2 name aa desc 听阿红的 sign 3 name bb desc 成绩啊啊啊 id 1
  • idea 模块名后面有个中括号别名(1)

    步骤 第一步 第二步 为什么不直接改名字 最近项目正在从Springboot改造成SpringCloud微服务架构 所以会涉及到新增模块的情况 这里我直接复制了项目中的一个 模块 并且通过修改文件夹名的方式命名该模块 之后该模块名后面出现了
  • IntelliJ IDEA 2019(Ultimate Edition)激活方法

    IntelliJ IDEA 2019 Ultimate Edition 激活方法 https blog csdn net halen001 article details 81137092
  • 常见算法题整理

    算法题 数据结构 数组 链表 字符串 树 数学 栈 hash表 图 动态规划 中心扩散 回溯算法 递归 迭代 贪心算法 从整体到细节 自顶向下 从抽象到具体的框架思维是通用的 不只是学习数据结构和算法 学习其他任何知识都是高效的 一 数组
  • 树莓派4B安装详细教程,从零开始!(2)

    树莓派4B安装详细教程 从零开始 2 前言 一 准备材料 1 硬件材料 2 软件材料 二 配置步骤 1 获取树莓派IP地址 1 通过有线网进行连接 这时候还需要 一根网线 2 通过无线网进行连接 这时候还需要一个 读卡器 2 连接电脑 3
  • 学习《R语言之书-编程与统计》

    R语言学习笔记1 1 新手入门 1 winows ctrl R 表示执行当前编辑器的代码 多个编辑窗口 编辑器外观设置 preference Edit GUI preferences 2 代码添加注释 gt This is a compen
  • 从Java的角度理解前端框架,nodejs,reactjs,angularjs,requirejs,seajs

    http www cnblogs com siwy p 5045556 html 从Java的角度理解前端框架 nodejs reactjs angularjs requirejs seajs 前端神秘的面纱 对后端开发来说 前端是神秘的