跨平台前端框架学习——bootstrap,jquery,angular

按照我的理解前端开发的框架可以分为三种类型:

UI框架:这部分如bootstrap,定义了一套css样式风格,帮助布局,提供了若干可以直接使用的组件,我们可以只使用它提供的组件而不用自己设计 UI

工具类框架:如jquery(pc端)/jquery mobile(移动端),虽然准确来说它们更是类库,但它们集成了有关 DOM操作,ajax交互,事件和动画的工具,能够帮助解决浏览器兼容,这里姑且当做框架

组织代码的框架:如angular,它不提供jquery一样(类似插件)的功能,它帮我们更好地组织代码,定义模块,填充具体的业务逻辑。

下面分别简单总结一下三种框架。

一  bootstrap几大特性:

1.响应式设计(栅格系统)这是bootstrap最大的特点,将页面宽度分成12列,分列的宽度不固定,根据可视页面进行12等分,大大简化div的布局操作,并且使用css媒体查询技术实现响应式样式设计。

我觉得这个技术是bootstrap最动人之处,降低了开发者对于PC,移动开发响应式布局的难度,浏览器兼容性也做得相当不错,不过从bootstrap3开始就彻底放弃了IE7及以下版本,不过我觉得未来的各类网站目标用户,使用IE7只会越来越少。

2. bootstrap提供了一套自定义css样式表,同时是基于最流行的 CSS 预处理脚本 - Less 和 Sass 开发的,可以定制自己的样式。

个人看法:提供css组件这个无需多说,bootstrap扁平化设计风格极简,但是略显臃肿,如果只是为了使用其中一两个组件而选择bootstrap就没必要,关于css 预处理技术,好处在于可以在 CSS 中使用变量、简单的逻辑程序、函数,这样可以避免重复同类型变量定义,以及减少因为处理兼容性而造成的冗余代码

举个简单的例子,在我们使用CSSSprite技术,把多个图片合在一张图片上,然后通过background-image,background-position来定位现实不同效果,这样来达到减少HTTP请求,但是HTTP请求是少了,开发人员工作量就大了,要定位图片不是一件很方便的事情,非常麻烦,要一个一个地计算,使用预编译就会简便许多

@for $i from 0 to 17{ .d-icon-#{$i}{ background-position: -0 -#{+ $i*30}px; } }

可以代替:

.d-icon-0 { background-position: 0 -0px; } .d-icon-1 { background-position: 0 -30px; } /* .....*/ .d-icon-17 { background-position: 0 -510px; }

大量同样方式定义的代码。
但它也有缺点,就在于预编译CSS步骤的加入,提高了学习门槛。

二 jquery/jquery mobile

jquery/jquery mobile这两者的关系简单来讲就是jquery更适用于传统web,而jquery mobile是以jquery为基础,在移动端的拓展,使网页开发看上去更像手机应用。使用jquery mobile+html5开发webapp是现在前端开发一个比较热门的趋势。

jquery/jquery mobile作为一个轻量级js库功能不可谓不强大,封装了dom操作,支持了大量事件,与css3完美兼容,可以为元素添加动画,简化了AJAX操作,后台只需返回一个JSON格式的字符串就能完成与前台的通信,有丰富第三方插件,可扩展性强,JQuery提供了扩展接口:JQuery.extend(object),可以在JQuery的命名空间上增加新函数。

jquery/jquery mobile的核心就是令我们写最少的js代码,实现最完整的前端功能,说起来还是像一个插件( ╯□╰ )

三 angular

angular有几大特性:

1.双向绑定  这几乎是angular最吸引人的特性了吧,无论什么时候数据模型发生了改变(比如用户在下拉菜单中选了不同的顺序),AngularJS的数据绑定会让视图自动更新。没有任何笨拙的DOM操作,也不再需要事件侦听器!

2.代码模块化

3.依赖注入

4.directives(指令)

时间: 2024-07-30 20:27:45

跨平台前端框架学习——bootstrap,jquery,angular的相关文章

Web前端框架学习成本比较及学习方法

就项目中自己用过的前端框架的学习成本比较与学习心得分享 刚工作时间不长只用过这几个框架下面是难易程度比较: 不论哪个web前端框架, 究其本质都是把页面的数据传递给后台服务器语言(如java)进行处理, 后台取出的数据把它显示在页面上不就这么简单么; 弄清楚这其中的提交方式(特别点就ajax方式), 参数传递, 事件机制然后在看懂API; 那么不管用什么web框架开发都是很顺心的, API在手通吃所有;  前提是一定要看懂API , 总是去问别人不会有多大进步的, 自己多看API文档; 学习成本

淘宝自己的前端框架KISSY(类似jquery) - 简易指南

KISSY 是由阿里集团前端工程师们发起创建的一个开源 JS 框架. 具备模块化.高扩展性.组件齐全,接口一致.自主开发.适合多种应用场景等特性. 在以下方面具有一定优势: A.拥有大量的中文文档: B.在国内具备一定的社区规模: C.开发便捷: D.综合借鉴国际先进的框架类库设计: E.应用场景广泛. 下载引入 KISSY 1.3.0 KISSY seed 1.3.0 引入方式有两种: 1.核心全部加载引入完整的 KISSY 2.按需加载模块引入 seed 引入完整的 KISSY 引入完整的

1.VUE前端框架学习记录一

VUE前端框架学习记录一文字信息没办法描述清楚,主要看编码实战里面,有附带有一个完整可用的Html页面,有需要的同学到脑图里面自取.脑图地址http://naotu.baidu.com/file/f0a6c2f23b97d0371032c408e7659917?token=2fd9d925d380fc1d 原文地址:https://www.cnblogs.com/jtfr/p/11185262.html

bootstrap 前端框架学习笔记

1.认识一下 bootstrap 带来的优雅效果: 代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 模板</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> &

[前端框架搭建]requirejs+jquery+bootstarp+Angular的前端组合框架搭建详解(1)-----框架的引入与选择

在园子里晃了两年多,已经从小白变成了小白白. 这个框架的背景是这样的,公司本身有一套自己的框架,但是由其他部门维护,部门想自己弄一套框架,由自己的人来搞. 刚刚调到架构的我,成功的中枪. 废话少说,我们开始 -----------------------------------------------我是华丽的分割线--------------------------------------------------------------------- 各框架的使用与原因,每一个部分都有他必要存

Python 前端框架【Bootstrap】

Bootstrap Bootstrap是美国Twitter公司的设计师Mark Otto和Jacob Thornton合作基于HTML.CSS.JavaScript 开发的简洁.直观.强悍的前端开发框架,使得 Web 开发更加快捷. 使用bootstrap组件构建页面元素 获取css源 在官网中选择版本后进入如下界面 选择下载源码进行本地导入,或者在联网状态下导入网络位置的css 在html中导入bootstrap.css 在网络上选择需要选用的组件,这里以按钮为例 复制代码粘贴至html中,并

前端框架学习资源

刚刚入职,项目用到三个框架,需要快速了解学习上手,找到几篇文章记录于此. ractive.js 官网辅导    中文简要版 require.js 慕课网视频一节 stylus stylus入门使用方法

吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版:标题

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 标题</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css&quo

吴裕雄 Bootstrap 前端框架开发——Bootstrap 排版:内联子标题

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Bootstrap 实例 - 内联子标题</title> <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css&