前端里的库和框架

库和框架是什么呢?

虽然有时候在一些语境中他们是可以互相替代的,但是我们还是要了解下他们的真正含义。

库:它是一系列对象,方法的代码,我们通过引入库,来实现代码的重用,代码的精简。

框架:它是一个系统中可以重用的一部分,它可能不仅仅包括一种代码和资源,它可能包括了子程序,库,胶水语言,图片等等一系列资源。

所以,相对来说,框架的内容更加丰富,在某些情景中,它可能包括了多个库,多种脚本语言,多个子程序,图片等等。

举个栗子~现在应用十份广泛的JQuery就是一个库。JQuery里面都是Javascript代码,当我们使用它的时候就引入了它里面的对象和方法,这一部分代码我们可以直接用来操作DOM,并且可以一直复用不需要重写。

而我们熟知的Bootstrap就是来自Twitter的一款十分受欢迎的框架,它里面不仅仅是Javascript代码,还有HTML、CSS等,而且Bootstrap的Javascript部分是基于JQuery来写的,也就是说它还包含了JQuery库,所以说它是一款框架。

因为前端市场的庞大,框架和库的的数量也是很庞大的,我们很容易陷入迷茫,应该用哪种框架或者库呢?有人会这样想,越是全越是好,希望它能够尽可能解决大部分的Web开发的问题。

但是我们可能需要了解下框架或者库的作者的初衷和你现在所面对的项目的问题,JQuery的目的是为了让我们更好更方便快捷的去操作DOM,Angular则是通过数据绑定,让开发者直接修改数据模型,从而不需要关心DOM的更新......

可能现在你面对只是一些小的问题,因此你引入了整个BootStrap,不说合不合理,就说因此你就为你的程序增加大量的根本不需要的资源,如果你发现你只是需要处理一些滑动的内容,可能引入swiper会更加简洁轻松。

所以说我们在使用框架和库的时候,最好去了解下框架作者设计框架的初衷是不是和你现在所面对的问题一致,并不是越庞大越丰富越好,合适的才是最好的,也就是对症下药才是最好的。

时间: 2024-10-12 13:58:48

前端里的库和框架的相关文章

web前端相关拓展库,框架集合

一.HTML5框架 1.Bootstrap 二.CSS3框架 1.sass 2.less 三.JavaScript拓展库 1.jQuery 2.Angular 3.react.js

jQuery 为什么优秀兼谈库与框架的设计[转]

文章转自:https://github.com/lifesinger/blog/issues/114 从 @wintercn 的这篇文章说起:从 jQuery 谈库与框架的设计之优劣 先去读一读哦,不长的,winter 写得很幽默. 好了,看下文. 解决什么问题 拿 winter 的代码入手: function traversal(node, f) { f(node); if(node.children.length) { for(var i = 0; i<node.children.lengt

2016年 CSS 库、框架和工具新生榜 TOP 50

看看 CSS 在过去几年的巨大变化和快速发展,你就不会对它今年的开源工具大产量感到惊讶了.这些 CSS 库.框架和工具的建立不仅给我们提供了学习的视角,更给我们的工作与生活带来了便利. 本文精选了 50 款 2016 年发布的 CSS 库.框架和工具供大家享用,希望它们对您有所帮助. 分类快速预览:CSS 库,CSS Spinners,CSS 图像特效,CSS 实用程序,设计指南工具,响应式邮件与通讯列表框架,Flexbox 布局工具和框架,CSS 布局框架和 material design 框

jquery是库还是框架?

jQuery是库,不是框架. 库和框架区分很简单.库让你的工作更顺手:框架限制你的自由度,让你感到有些别扭,但让公司员工之间配合开发更顺手. 库只管引进来使用,除了库接口,没有其他约束,随便怎么用,free style:而框架则有着各种各样的严格约束. 例如bootstrap,约束了DOM结构. 例如AnglarJS,也对DOM结构有约束. 这些都是框架. 框架就像一门语言,有自己的世界. 用了什么框架,就得按照这个框架世界里的规则行事编码. "jQuery is a fast, small,

web前端之HTML的大框架(body元素与frameset元素)

web前端之HTML的大框架      body元素与frameset元素 对于从事html的人员来说,我们一般熟悉的框架是先声明html ,然后在<html>标签对里包着<head>标签对和<body>标签对,body元素定义文档的主体,包含文档的所有内容(比如文本.超链接.图像.表格和列表等等).而我们想要在页面中显示出来的内容全部写在<body>标签对里. 例如: <!DOCTYPE html> <html> <head&

从jQuery谈库与框架的设计之优劣

jQuery是业内知名的javascript框架,它的实现和设计可以说代表了javascript界最高的水平,本文试从四个方面来以jQuery为例总结库与框架设计的原则和优劣判断. 解决问题 首先请看一个我实现的框架,我把这个库称为四则运算. function add(a,b) { return a+b; } function mul(a,b) { return a*b; } function minus(a,b) { return a-b; } function div(a,b) { retu

库和框架的对比【翻译】

原文:http://www.programcreek.com/2011/09/what-is-the-difference-between-a-java-library-and-a-framework/ 原文和翻译都只是参考,如有不对,欢迎指正. 库和框架的区别是什么呢?这两个概念都很重要,但是有时会让Java开发者感到疑惑. 1.库和框架的区别以及各自的定义它们最主要的区别就在于"控制反转".当你从库中调用一个方法时,控制权在你手上.但是当你使用框架时,控制权就反过来了,这时就是框架

【安富莱】V6,V5开发板用户手册,重在BSP驱动包设计方法,HAL库的框架学习,授人以渔(2019-07-21)

说明: 1.本教程重在BSP驱动包设计方法和HAL库的框架学习,并将HAL库里面的各种弯弯绕捋顺,从而方便我们的程序设计. 2.本次工程延续以往的代码风格,从底层BSP驱动包到应用代码,变量命名,文件命名,程序框架,注释等都比较规范,大家阅读或者移植都会比较方便.      另外,阅读代码时,务必将编辑器的缩进参数和TAB设置为4来阅读本文件,否则显示不整齐. 3.本教程每周会继续更新1-2章,之后将开启配套的视频教程制作,加大对初学者的支持力度. 4.V5,V6,V7将通过这次升级,达到底层驱

前端常用的库和实用技术之JavaScript高级技巧

javascript高级技巧 变量作用域和闭包 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X