目前流行的组件库有哪些？CSS，JS各有哪些流行的库？

修真院小课堂 - 目前流行的组件库有哪些CSS，JS各有哪些流行的库？

目录

          1.背景介绍
          2.知识剖析 
          3.常见问题
          4.解决方案
          5.编码实战 
          6.扩展思考 
          7.参考文献 
          8.更多讨论

1.背景介绍

 什么是库，什么是框架

         库：库是有用功能的有组织的集合。库的典型功能包括处理字符串，日期，HTML DOM元素，事件，Cookie，动画，网络请求等。每个函数将值返回给调用应用程序，但是你从中可以选择参数来应用。库是更多是一个封装好的特定的集合，提供给开发者使用，的英文特定而且于某一方面的集合（方法和函数），库没有控制权，控制权在使用者手中，库在查询中需要的功能在自己的应用中使用，我们可以从封装的角度理解库。

        框架：框架顾名思义就是一套架构，会基于自身的特点向用户提供一套相当于叫完整的解决方案，而且控制权的在框架本身，使用者要找框架所规定的某种规范进行开发框架。是一个应用程序的骨架，它要求你以特定的方式处理软件设计，并在某些点插入自己的逻辑。通常框架提供事件。  存储和数据绑定等功能。

2.知识剖析

   1. WeUI
          WeUI是一套  同微信原生视觉体验一致的基础样式库，微由官方信设计团队为微信内|网页微状语从句：信小程序量身设计，令用户的使用感知更加统一.https ： //weui.io / 

  2. MDUI
         相比国外框架，MDUI更多重要中文排版，提供全中文文档，中文社区。组件丰富MDUI包含了20余个组件，且每个组件都可以适应不同主题。国内开发的mdui基于material- ui开发的.MDUI是一套用于开发Material Design网页的前端框架   https://www.mdui.org/

 3. 惊奇  UI 
          惊奇UI  称为妹子UI的开源框架，据称是中国首个开源HTML5跨屏前端框架。妹子UI以移动优先为理念，从小屏逐渐到大屏，实现响应式网页.Amaze UI包含20个以上的CSS组件，20 +个JS组件，更多多个包含不同主题的Web组件。相比国外框架，妹子UI关注中文排版提供本地化支持。面向HTML5开发，使用CSS3来实现动画交互，轻量级高性能 .http：  //amazeui.org/

4.设计蚂蚁 
           一个服务于企业级产品的设计体系，基于“确定”和“自然”的设计价值观和模块化的解决方案，让设计者专注于更好的用户体验。 https://ant.design /索引-CN 
 5.易于UI
           easyui是基于jQuery的和角用户的界面组件的集合.easyui提供了构建现代互动的JavaScript的应用程序的基本功能。使用easyui你不需要编写很多的的JavaScript代码，通常通过编写一些HTML标记来定义用户界面  .http：//www.jeasyui.com/

6. Bootstrap  
           简洁，直观，强悍的前端开发框架，让web开发更迅速，简单 .http：//www.bootcss.com/ 

7. Foundation
            Foundation框架总体来看要比Bootstrap略显高大上一点，但他们俩的设计理念都是非常清楚的， Bootstrap有引导的意思，它尝试处理你项目中的一切所需注册有基础，地基及支柱的意思，给你项目中强有力的创造与支持。相对于引导丰富的组件及插件，基金会提供了仅有限的几种元素，其目标是，即使你使用预定义的UI元素，也不应该与大家的网站长得太像。而引导则致力于提供所有定义好的元素，这样使得看起来许多网站都差不多。基础默认不带图标集，它推荐使用开源字体图标。与引导一样，基金使用网格流式布局将网页划分为12列，针对不同的设备显示不同的列数，实现响应式布局。 https://foundation.zurb.om/sites.html

8. jQuery
            jQuery是最常用的JavaScript库，它革命性的在客户端开发，将CSS选择器引入到DOM节点检索加链接来应用事件处理程序，动画和Ajax调用.jQuery近年来备受青睐，对于一个很需要的的JavaScript的功能的项目来说，jQuery的的的绝对是一个可行的选择。  https://jquery.com/

9.阵营
         阵营起源于实的内部项目，因为该公司对市场上所有的JavaScript的MVC框架，都不满意，就决定写自己 一套，用来架设的Instagram的的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了.React声称的英文一个用于构建用户界面的的的JavaScript库，它专注于MVC开发的“视图”部分，并且可以轻松创建保留状态的UI组件。它是实现虚拟DOM的第一个库，内存结构计算差异，有效地更新页面  .https： //reactjs.org/

10.Angular
          AngularJS [1]诞生于2009年，由Misko Hevery等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中
 .11.Vue

           Vue.js是一个构建数据驱动的网页界面的渐进式框架。由在美的谷歌工程师尤雨溪开发.Vue.js的目标是通过尽可能简单的API实现响应的数据绑定和组合的视图组件。它不仅仅是易于上手，还便于与第三方库或既有项目整合.Vue.js自身不是一个全能框架-聚焦它只于视图层因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时，Vue.js也能完美地驱动复杂的单页应用.https：//cn.vuejs.org/ 

12.Backbone

            支持jquery，自带路由，对象化视图，强大的同步机制减少页面大小从而加快页面显示   .http ：//backbonejs.org/ 

13.Ember

         一个用于创建web应用的JavaScript MVC框架，采用基于字符串的句柄条模板，支持双向绑定，观察者模式，计算属性（依赖其他属性动态变化），自动更新模板，路由控制，状态机等  。 Ember公司使用自身扩展的类来创建灰烬对象，数组，字符串，函数，提供大量方法与属性用于操作 .https：//www.emberjs.com/

3.常见问题

库和框架区别？

4.解决方案

         从网页开发人员的角度：库可以很容易地被另一个库替换但框架不能 。如果您不喜欢的jQuery的的日期选择器库，则可以使用其他日期选择器替换，例如引导日期选择器或pickadate  如果您不喜欢构建产品的AngularJS，则不能只替换任何其他框架您必须重写整个代码库。与框架相比，大多数库的学习曲线要少得多例如：underscore.js是一个库，Ember.js是一个框架。库是您从代码中调用的模块，框架是调用代码的模块。这仅仅是一个集合的例程（函数式编程）或类定义（面向对象编程）。背后的原因只是代码重用，即获取已由其他开发人员编写的代码。类或例程通常在特定于域的区域中定义特定操作。例如，有一些数学库可以让开发人员只需调用函数而无需重做算法如何工作的实现。在框架中，所有的控制流都已存在，并且我们应该用我们的代码填写回复时回复主时一堆预 义的白。框架通常更复杂。它定义了一个框架，应用程序定义了自己的特征以填充框架。通过这种方式，适当时框架将调用您的代码。好处是开发人员不需要担心设计是否良好， 而只需要实现特定于域的功能

5.编码实战

6.拓展思考

 1.js框架之间学起来有关联吗？

        框架基本都基于对象或面向对象进行开发，使用框架，我们至少得知道什么是对象，如何面向对象，才能在框架基础上解决问题，毕竟框架不是万能的，实际开发中需要我们能够有基于框架的扩展开发能力，这也是区别于他人的核心竞争力具体至少包括以下几个知识点：
           对象;       
           面向对象;
           组件等;

 2.哪个框架比较受欢迎？

        在全球大范围看，阵营和角依然遥遥领先，Vue.js这位后起之秀还需努力做到全球化！

        在2013至2014年年间，阵营和角度的热度略微有些许差别之后，它们之间的差距逐渐拉大从2016年中期开始，阵营开始增长，逐渐接近角的热度.Vue.js框架一直处于垫底。状态，不是很流行。不过呢，也有逐渐转热的趋势，相信它会越来越热门。

 3.哪个框架对新手比较友好？

    国内神人尤雨溪的大作：vue.js，相比较而言，它的语法结构更容易上手。

7.参考资料

       参考资料：HTTPS：//blog.csdn.net/bluesky1215/article/details/68922920

   参考资料：HTTPS：//stackoverflow.com/questions/148747/what-is-the-difference-between-a-framework-and -a-UR？noredirect = 1＆LQ = 1

    参考资料：https ：//zhuanlan.zhihu.com/p/28183008

            

8.更多讨论

1.我们该学哪些框架？

    IBM发表的2017年年最值得学习编程语言名单中，JS在网站中惊人地达到94.4％的使用率。有最好的的JavaScript框架这一说么？想要一个简单的答案？没有。这跟公司目标，需求，以及最终的功能都有关系。举例来说，Angular 2更像是一个百宝箱，特别适合大型项目。它非常复杂，并且需要花很多时间来全面的学习和掌握（但比AngularJS要简单一些）。但使用以JavaScript的的为核心的反应，开发者就能快速高效得拼凑出一些有用的东西。框架每个都在以不同的方式以实现适合用于不同场景的网络应用开发，包括MVP，创业公司和商业场景。

2.框架的学习有推荐顺序吗？

   其实任何框架，都是用来解决开发中的某些实际问题的，比如jQuery是对原生JavaScript进行的封装，提供了一些方便使用的方法和特性，以及一些兼容性问题的处理。但如果不了解原生JavaScript的流程控制，内置方法，运行机制等核心基础，而直接去学习构建在这套体系之上的框架，那么无异于架构空中楼阁，越看越迷糊，越学越迷茫，越走越艰难......想要只学一个一劳永逸，那是不可能的。好好打基础，然后多尝试不同风格的框架，因为只有过后尝试才能理解比如@徐飞提到的各种权衡，也只有尝试过后才能知道哪个能真正提升自己的开发效率。说没精力，那是借口。

       如果你不是专业前端，那就用Vue吧！哈哈哈

3.Angular框架该学习哪个？

       AngularJS2是AngularJS1.x的升华版，它继承了1.x的基本概念和特性，如“模块，组件，依赖注入”，同时又加入了一些新的功能特性，如“装饰器，组件强化”等。最新版本的AngualarJS底层代码基本全部重构了，并提供基于JavaScript，Dart，TypeScript的不同版本。当然，如果我们希望充分使用AngularJS的功能特性，推荐的是TypeScript的。