前端(三大框架、Bootstrap,jQuery,自整理)
前端,HTML(超文本标记语言),CSS(层叠样式表)和JavaScript(脚本语言)
HTML,通常说的h5,其实按标准来说,HTML4的后续版本不带编号了,并保证向前的兼容性
CSS的版本3,增加了translate(),能完成以前一定需要js才能做到的动画,同时增加了flex弹性盒子(响应式设计,提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间,以往使用float)
前端框架
一、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框架的视觉效果
二、AmazeUI、LayUI
个人知道还不错的两款国产前端布局UI,部分功能需要使用js才能实现,采用自身模块规范编写,模块化的组件(lay官网还能直接拖动看效果和代码),感觉很棒
https://www.layui.com
http://amazeui.org
三、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 点击事件
});
jQuery感觉是封装了一部分的函数,简化了原生js的写法,在实际使用时,jQuery对DOM树进行操控,即:首先有一个写好的html页面,再对其修改操作
如写按钮事件函数,点击隐藏,切换,页面跳转等
四、三大框架
之前使用jQuery,目前处于初学框架阶段,处于选择一个框架学习的阶段,个人拙见,错望指正
通常说的三大框架,即:Angular Vue React
Angular (注:2,1的版本和2的版本简直是两种语言)是基于 TypeScript(Javascript超集)的 Javascript 框架。React 被描述为 用于构建用户界面的 JavaScript 库,Vue 为一款用于构建直观,快速和组件化交互式界面的 MVVM 框架
Angular 是一个框架而不是一个库,是一个完整的解决方案。React 和 Vue 更灵活的。Angular 必须用 TypeScript,文档均是TS的
因为数据双向绑定和写法的问题,个人暂时不考虑学React。抱着对Google大大深深的爱,自己看了Angular 6的官方文档,然后,我发现我一句都看不懂,好吧,我承认我很菜,但是好歹给我个希望啊,但是相比之下,Vue官方的教程学习曲线简直不要太友好
不知道自己的理解是不是对的,Angular的使用导致了不论之后进行什么修改,都需要使用Angular的写法,而Vue因为其模块化,故可以在项目的部分使用Vue,进行修改时,即使是其他框架的项目也可以使用Vue.js进行修改。
以前一个学长告诉我的:说轻量级的展示页面使用jQuery,管理后台使用框架。jQuery的编程思想是首先编写HTML和CSS的页面展示再操作DOM树,而框架是首先考虑页面的功能,再进行前端的展示,编程思想正好相反。(个人学习中,待之后回来验证该说法)
选择哪种框架,参考说法:https://juejin.im/post/5a0d5df1f265da43062a542f
如果你在Google工作:Angular
如果你喜欢 TypeScript:Angular(或React)
如果你喜欢面向对象编程(OOP): Angular
如果你需要指导手册,架构和帮助:Angular
如果你在Facebook工作:React
如果你喜欢灵活性:React
如果你喜欢大型的技术生态系统:React
如果你喜欢在几十个软件包中进行选择:React
如果你喜欢JS和“一切都是 Javascript 的方法”:React
如果你喜欢真正干净的代码:Vue
如果你想要最平缓的学习曲线:Vue
如果你想要最轻量级的框架:Vue
如果你想在一个文件中分离关注点:Vue
如果你一个人工作,或者有一个小团队:Vue(或 React)
如果你的应用程序往往变得非常大:Angular(或 React)
如果你想用 react-native 构建一个应用程序:React
如果你想在圈子中有很多的开发者:Angular 或 React
如果你与设计师合作,并需要干净的 HTML 文件:Angular or Vue
如果你喜欢 Vue 但是害怕有限的技术生态系统:React
如果你不能决定,先学习 React,然后 Vue,然后 Angular
前端(三大框架、Bootstrap,jQuery,自整理)的更多相关文章
- 前端三大框架Angular & React & Vue
前端三大框架: Angular[Google]:一套框架,多种平台移动端 & 桌面端.学会用Angular构建应用,然后把这些代码和能力复用在多种多种不同平台的应用上 —— Web.移动 We ...
- 前端三大框架之一React入门教程
相信大家对框架这个词都很熟悉吧,我一直喜欢js原生来开发,但是目前都要求工作效率,所有使用框架或者是库会使我们开发更加方便和快速,甚至一个人干十个人的活.. 框架优点: 1.方便开发.快速写功能 2. ...
- Web前端三大框架_angular.js 6.0(二)
Web前端三大框架_angular.js 6.0(一) 需要视频教程,看头像昵称处 一.Angular 6.0 1.1样式 html中引入样式:内嵌式,外链式,行内式. ng6中组件引入样式的方式也 ...
- 如何使用前端分页框架bootstrap paginator
前端分页框架bootstrap paginator用于web前端页面快速实现美观大方的翻页功能.在实现交互良好的页面翻页功能时,往往还需要配合使用后端分页框架pagehelper.pagehelper ...
- 前端三大框架(Angular Vue React)
前端,HTML(超文本标记语言),CSS(层叠样式表)和JavaScript(脚本语言) HTML,通常说的h5,其实按标准来说,HTML4的后续版本不带编号了,并保证向前的兼容性 CSS的版本3,增 ...
- Web前端三大框架_vue源码笔记
一.VUE 1.1 MVVM VUE也是基于MVVM模式实现的.特点就是数据双向绑定 在MVVM模式中,分成三个部分: M 模型 model V 视图 view VM 视图-模型 view-model ...
- 浅谈前端三大框架Angular、react、vue
每个框架都不可避免会有自己的一些特点,从而会对使用者有一定的要求,这些要求就是主张,主张有强有弱,它的强势程度会影响在业务开发中的使用方式. 一.Angular,它两个版本都是强主张的,如果你用它,必 ...
- 前端三大框架 Vue.js、AngularJS、React 的区别
Vue.js Vue.js 是一种构建数据驱动的Web界面的渐进式框架,Vue.js 采用自底向上增量开发的设计. Vue.js 轻量高效,数据双向绑定(响应式数据绑定), 它会自动响应数据的变化情况 ...
- vue、react、angular三大框架对比 && 与jQuery的对比
前端当前最火的三大框架当属vue.react以及angular了. 但是在做项目的时候,我们怎么去选择呢? 这里做一个比较,希望大家可以有一个比较清晰的认识. vue与react vue和react ...
- Web前端MVC框架的意义分析
前言: Web前端开发是Web技术发展中的一个重要组成部分,在传统的前端开发中由于外界因素的影响导致其开发形式呈现出简单化的特点,即以页面为主体来展示界面中的信息.然而随着科学技术的不断进步,Web前 ...
随机推荐
- pg_basebackup命令解析
pg_basebackup命令首先解析输入的参数,再调用BaseBackup()函数进行备份处理. 在BaseBackup()函数内部,会首先传送WAL日志(如果指定了-x选项的话).随后依次遍历所有 ...
- SDUT OJ 顺序表应用5:有序顺序表归并
顺序表应用5:有序顺序表归并 Time Limit: 100 ms Memory Limit: 880 KiB Submit Statistic Discuss Problem Description ...
- 在FC中如何获取fcdot文件
在FlexiCapture中一些客户在问如何获取.fcdot文件(在测试序列号下或者没有测试模板的情况下) 第一步: 1.查看License Manager查看是否找到序列号 首先我们在开始菜单里面打 ...
- 2、Numpy常用函数
创建单位矩阵和读写文件使用eye()创建单位矩阵 # -*- coding: utf-8 -*- import numpy as np i = np.eye(3) print(i) 结果: [[ 1. ...
- C语言学习总结(1)——结构体
一,什么是结构体 我们知道数组(Array),它是一组具有相同类型的数据的集合.但在实际的编程过程中,我们往往还需要一组类型不同的数据,例如对于学生信息登记表,姓名为字符串,学号为整数,年龄 ...
- java基础_02
一.this和super 作用: this:区分成员变量和局部变量 super:区分父类的成员变量和局部变量 用法: this.成员变量名://访问本类的成员变量 this.成员方法名()://访问本 ...
- C++_异常9-异常的注意事项
一.先讨论异常被引发后,可能导致的问题 意外异常: 如果它是在带异常规范的函数中引发的,则必须与规范列表中的某种异常匹配,否则为意外异常.在默认情况下,这将导致程序异常终止(虽然C++11摒弃了异常规 ...
- UVA - 10589 构造最优化函数 DP好题
题意:给定一个图,节点可以放灯,要求用最少的灯覆盖所有的边(每盏灯能覆盖该节点邻接的边),满足条件的同时求该前提下尽量多的被两盏灯照亮的边数 条件二转化为求尽量少的被一盏灯照亮的边数,两个条件都是求m ...
- Apache Shiro(三)-登录认证和权限管理MD5加密
md5 加密 在前面的例子里,用户密码是明文的,这样是有巨大风险的,一旦泄露,就不好了.所以,通常都会采用非对称加密,什么是非对称呢?就是不可逆的,而 md5 就是这样一个算法.如代码所示 123 用 ...
- web 导出数据到 exls 中
// 文件下载:导出excel表 @RequestMapping(value = "/exportExcel", method = {RequestMethod.GET}) @Re ...