【Java Web前端开发】前端框架 bootstrap+jquery+angularjs探索

李响Superb 2021-07-20 04:14:14
Java web Jquery 前端框架


 

1 Bootstrap

在Bootstrap的官网介绍中,Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web. 大致意思就是:Bootstrap是最受欢迎的HTML、CSS和JS框架,用于开发响应式布局、移动设备优先的Web项目,用于开发响应式布局,是一套用于 HTML、CSS 和 JS 开发的开源工具集。

Bootstrap的设计以移动设备优先,在网页的 head 之中添加 viewport meta 标签

<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

Bootstrap使用一个容器元素来包裹网站的内容,使用类.container(固定宽度并支持响应式布局的容器)和.container-fluid(用于 100% 宽度,占据全部视口(viewport)的容器),具体的就看教程吧(https://www.runoob.com/bootstrap4/bootstrap4-tutorial.html,自带部分jQuery插件,3教程之后)

通常说 Bootstrap是一种前端框架,个人感觉其实这种说法不是很准确,Bootstrap的框架和Angular等说的框架,此框架非彼框架,Bootstrap更多感觉是一种页面UI的布局,通过一系列定义好的CSS class和一些预定义好的jquery插件实现比如过渡、下拉、折叠、轮播的初步效果

或者,Bootstrap是一种UI,用于前端布局的框架,属于css框架,而不是javascript框架,但是它本身也使用javascript来完善Bootstrap框架的视觉效果

2 jQuery

jQuery 是一个 JavaScript函数库,极大地简化了 JavaScript 编程。jQuery 是目前最流行的 JS 框架,而且提供了大量的扩展。

官网:https://jquery.com,中文手册:http://www.xgllseo.com/jq3/index-2.html,jQueryUI:http://jqueryui.com(用户界面交互、特效、小部件及主题)

基础语法:$(select).action(),jQuery的选择器和CSS一样,类选择器 .class,id的选择器 #id,sass写法 >

$(document).ready(function(){
//jQuery 入口函数
});
$("button").click(function(){
//jQuery 点击事件
});

Query感觉是封装了一部分的函数,简化了原生js的写法,在实际使用时,jQuery对DOM树进行操控,即:首先有一个写好的html页面,再对其修改操作

如写按钮事件函数,点击隐藏,切换,页面跳转等

3 AngularJS

AngularJS 是一个 JavaScript 框架。它可通过

优点:

1.AngularJS模板功能强大丰富,自带了极其丰富的angular指令。

2.AngularJS是完全可扩展的,与其他库的兼容效果很好,每一个功能可以修改或更换,以满足开发者独特的开发流程和功能的需求。

3.AngularJS是一个比较完善的前端MVC框架,包含服务,模板,数据双向绑定,模块化,路由,过滤器,依赖注入等所有功能;

4.AngularJS是互联网巨人谷歌开发,这也意味着他有一个坚实的基础和社区支持。

缺点:

1、AngularJS强约束导致学习成本较高,对前端不友好。但遵守 AngularJS 的约定时,生产力会很高,对 Java 程序员友好。

2、AngularJS不利于SEO,因为所有内容都是动态获取并渲染生成的,搜索引擎没法爬取。

性能问题:AngularJS作为 MVVM 框架,因为实现了数据的双向绑定,对于大数组、复杂对象会存在性能问题。

 

版权声明
本文为[李响Superb]所创,转载请带上原文链接,感谢
https://blog.51cto.com/u_14013325/2893708

  1. 报错:java.lang.RuntimeException: Failed construction of Regionserver: class org.apache.hadoop.hbase.re
  2. Java的序列化与反序列化实操
  3. Java后端模板引擎对比
  4. Java API 操作Docker示例
  5. 报错:java.sql.SQLNonTransientConnectionException: Could not create connection to database server
  6. JavaScript正则表达式轻松入门
  7. 大数据成神之路-Java高级特性增强(HashSet)
  8. Java模拟定时生成日志到文件
  9. 大数据成神之路-Java高级特性增强(CopyOnWriteArrayList)
  10. 大数据成神之路-Java高级特性增强(CopyOnWriteArrayList)
  11. Java身份证号码识别系统
  12. 浅谈Java SPI原理与其在JDBC/Flink中的应用
  13. Spark将Dataframe数据写入Hive分区表的方案
  14. 不要再重复造轮子了!如果你底层知识薄弱,一定要耐着性子好好读一读这份JDK源码(并发原理)笔记!
  15. Kafka+Spark Streaming管理offset的几种方法
  16. Kafka+Spark Streaming管理offset的几种方法
  17. 基于HBase和Spark构建企业级数据处理平台
  18. 基于HBase和Spark构建企业级数据处理平台
  19. JDK8升级JDK11过程记录
  20. Hadoop面试题(一)
  21. Hadoop面试题(一)
  22. Hadoop面试题总结-HDFS
  23. Hadoop面试题总结-HDFS
  24. Hadoop面试题总结(三)- MapReduce
  25. Hadoop面试题总结(三)- MapReduce
  26. Hadoop面试题(四)- YARN
  27. Hadoop面试题(四)- YARN
  28. Hadoop面试题总结(五)- 优化
  29. Hadoop面试题总结(五)- 优化
  30. 大数据面试题之Hadoop系列(深入部分)
  31. 大数据面试题之Hadoop系列(深入部分)
  32. Java NIO之拥抱Path和Files
  33. 【Java Web开发指南】云服务器部署项目供外网访问(Tomcat)
  34. 2020 年九大顶级 Java 框架!别再用一些落后的技术了!
  35. 【大数据哔哔集20210108】Spark Shuffle 和 Hadoop Shuffle有什么异同?
  36. 【大数据哔哔集20210108】Spark Shuffle 和 Hadoop Shuffle有什么异同?
  37. 不建议Java程序员用阿里巴巴规范,而使用GoogleGuava编程的原因
  38. 【大数据面试之对线面试官】MapReduce/HDFS/YARN面试题70连击
  39. 【大数据面试之对线面试官】MapReduce/HDFS/YARN面试题70连击
  40. Netty源码解析-概述篇
  41. Netty源码解析-概述篇
  42. Netty源码解析1-Buffer
  43. Netty源码解析1-Buffer
  44. Netty源码解析2-Reactor
  45. Netty源码解析2-Reactor
  46. Netty源码解析3-Pipeline
  47. Netty源码解析3-Pipeline
  48. Netty源码解析4-Handler综述
  49. Netty源码解析4-Handler综述
  50. Netty源码解析5-ChannelHandler
  51. Netty源码解析5-ChannelHandler
  52. Netty源码解析6-ChannelHandler实例之LoggingHandler
  53. Netty源码解析6-ChannelHandler实例之LoggingHandler
  54. Netty源码解析7-ChannelHandler实例之TimeoutHandler
  55. Netty源码解析7-ChannelHandler实例之TimeoutHandler
  56. Netty源码解析8-ChannelHandler实例之CodecHandler
  57. Netty源码解析8-ChannelHandler实例之CodecHandler
  58. Netty源码解析9-ChannelHandler实例之MessageToByteEncoder
  59. Netty源码解析9-ChannelHandler实例之MessageToByteEncoder
  60. The spring boot process executes a function (four solutions)