Jquery插件（常用的插件库）
作者：一生的风景
转发链接：https://www.cnblogs.com/2979100039-qq-con/p/12775777.html
随着Jquery知识点的结束，我也开始接触到框架来了。
开始的时候，总是听到插件和框架等词，我疑惑框架和插件是啥有啥区别？？
插件可以说有无数种，在网页中任何一种功能都可以被叫做插件，单独提取出来，可以供别人使用，而框架是一个超大好的的插件，它将各种方法融合成一体，使用者可以使用它来构造不同的功能。插件则专注于一种，往往只有一种功能 。
打个比方比如前面学习的jquery，jquery就是一个框架，在jquery插件库里http://www.jq22.com/有数不胜数的插件，这些插件绝大部分基于jq框架来编写。
理解完插件和框架的区别，下面来写一写这几天初步学习的插件库
1.jquery 对于我而言肯定是一个熟悉的框架了
官网网址：https://jquery.com/
插件库：http://www.jq22.com/
这里简单的介绍一下jquery ：jQuery是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。
2.Select2 官网网址：https://select2.org/
3.Fullpage 官网网址：https://alvarotrigo.com/fullPage/#page1
4.lazyload 官网网址：https://appelsiini.net/projects/lazyload/
5.Swiper 官网网址：https://www.swiper.com.cn/
6.nice-validator 官网网址 ：https://validator.niceue.com/docs/getting-started.html
以上提及的都是插件库，每一个有着不同的功能，jquery在这里我就不在赘述了。我就从Select2开始写
select2是一款基于jquery的功能丰富的下拉列表插件。这就说明了使用select2必须要有jquery依赖，就是要先导入jquery库，然后在导入select2插件库，然后这是一款关于下拉列表的插件。
使用方法：首先去下载压缩包文件 下载地址：https://codeload.github.com/select2/select2/zip/develop下载完成解压后在文件中我们需要找到相关的js文件和css文件，我们所需要的的就是这两个文件：在dist文件夹下有css和js，js有.js文件和min.js文件，css也是一样的。如下图所示
min.js是压缩版，没有逗号空格等等，体积小传输效率快，但可读性较差可以自行想象一下js代码就一行的场景 .js是没压缩的俗称开发版，可读性较好，易于debug调试和更改；但是体积相比较而言大一些，效率低。我采用压缩版的我不改bugQAQ 这段话或许就解决了心中的疑问
我们将css和js文件复制到我们的项目中就可以开始使用这个插件了。
这个是一个案例效果图接下来就根据这个案例来编写。
首先一点也是重中之重，导入css和js文件，jquery插件库优先导入，js cs就是我们上面复制到项目的文件，如下
在body里面写上一个普通的下拉列表：
我把js注释一下看看效果如何：
这个与和我们的效果图有着很大的区别，如何使用这个插件呢，我们不妨看看文档（虽然全是英文）
在基本语法上有着这样的语句（我们把他定义到我们的案例中去）：.js-example-basic-multiple是一个选择器
在案例中我们如下编写 （效果如右）：
这就是select2的威力，我们就使用了一行js代码就将一个普通的下拉列表变成了这样的的一个视觉效果不错的下拉列表（宽度可以修改，select2内置了很多的属性可以查看文档）。
例如给下拉列表设置宽度只需要如下写（使用大括号编写属性，用逗号分隔每个属性）
在select2文档的第三项中的Options里面有一张配置表里面涵盖了select2所有的属性（英文差的我看的有点吃力）
案例中简单的写了两个属性
插件的出现就是为了简单化代码，让我们少些了很多代码。使用起来方便简洁，就是这样select2的简单案列完成了，select2专注于选框，很多属性，可以去文档一一查阅我这里的介绍就结束了。
翻译过来就是 全屏的意思，我想已经猜出来了，这是一款全屏的插件，整个页面简洁大方，整个屏幕就是一张页面，它的官网就是一个很好的实 例 https://alvarotrigo.com/fullPage/#page1。这样的页面展示很受人喜欢，我相信大部分人都曾见过。
使用方法 同样下载压缩提取js 、css文件 下载地址 https://codeload.github.com/alvarotrigo/fullPage.js/zip/master
这个官网有一点优势emmmmmm他有中文模式 左上角可以选择
将css js复制进自己的项目里面引入js css 同样注意的依赖jquery优先导入jquery库如下：
我们可以查看文档编写（文档中有这样的一句话也就是在html文件中必须有着个声明，所以复制代码是要仔细不要复制掉了）
将这段代码复制到body里开始编写页面 在div的class值，section 以及后面的slide是不能更改的，我们必须按照fillpage的规则来 但最外层div的id可以直接设置，用于js代码中的选择
在js中如下编写（首先我们就用上了sectionsColor属性 定义背景颜色，一一对应）
当想定义横向切换时，这时候slide就登场了 ，将下面代码嵌套到<div class = \”section\”></div>中
它将会产生一个横向轮播图 注意 slide section 不可以更改 如下图所写:
效果如下：
当然插件也并不是万能的，fullpage无法设置字体大小所以需要自己定义大小 下面是自定义样式
在fullpage文档上有着很多属性（往下翻的话有对这些属性一 一的解释）
在我的案列中写了几个案例js代码如下：
文档的属性还算写的清晰，所以可以一点点编写 这一节的效果图不好截我把代码结构写上
这样子fullpage的案列就完结了，跟官网页面相似可以试着运行一下子。
lazyload 译为延迟加载， 又叫懒加载 在这个流量的时代，懒加载的出现是非常nice的，它为用户节省流量的消耗，提高性能，当一个高清图片网站一张页面几十张甚至上百张图片时，没有懒加载，它将会将所有的图片都加载出来，这就导致流量的浪费，降低性能，影响了用户的体验，而懒加载的作用是当用户看到这张图片时，它才开始加载出来，这样子就节省了大量的流量，而且优化了性能，提高了用户体验。
使用方法和上面一样下载lazyload插件包：https://codeload.github.com/tuupola/lazyload/zip/2.x
使用方法很简单，因为它只有一个功能就是延迟加载，所以我就直接上代码了 (注意在下载文件中找到对应的css，js文件复制到自己的项目中) lazyload没有css文件
我使用了12张图片然后js就一句，就可以实现懒加载功能
要为每一张图片添加class = “lazyload” ，且不能使用src 必须使用data-src 下面就来写一写怎么看两者的区别
普通加载：
懒加载：
懒加载的用法简单，但它存在的意义不凡，有些框架也会内置懒加载功能 列如上面介绍的fullpage插件
所以，懒加载的使用结束，或许现在感觉不它的作用，但是以后的编程日子里我想我百分百会和它再次的碰面。
Swiper 译为猛击者，确实在视觉上它的确很吸引我，首先它是一款触摸滑动插件 它与fullpage相似又有着各自的特点。
用swiper来做轮播 ，导航我想是很好的选择 swiper不依赖jq所以当项目中不需要jq时可以不用到jquery库
同样先下载swiper的包：https://www.swiper.com.cn/download/swiper-5.3.7.zip 在文件中找到对应的js css文件，复制到自己的项目然后导入如下：
先上一张效果图：
如图所示一款很炫酷的轮播图可以说swiper的中文文档非常的nice，思路清晰。就是emmmm属性有点多一时半会看完我现在想着，根据以上的插件库案列
这个插件的使用就应该不用我来再做赘述了，我就直接粘贴代码代码如下：
不管是什么插件或者框架，它的使用方法都万变不离其宗。相似是 他们的共同点，更何况swiper的文档看着这么的舒服
nice-validator 插件是一款比关于验证表单的插件，当用户注册时，来判断注册手机号码是否合法，是否为空，密码与确认密码是否相等，邮箱是否合法等等等等。
同样先下载:https://codeload.github.com/niceue/nice-validator/zip/master 复制对应的css js文件 到项目并导入，如下：
以案列为准，由于没有css我直接手写了有个简单的css样式。
当然html的表单也是手写对于样式，id class的名称这些，这款插件与其他的不同，可以自己定义：
js写法：无论那样的写法他实现的功能是一样的
这些属性可以看看文档里面的介绍（我简单的截取两张，更多属性一步官网 https://validator.niceue.com/docs/getting-started.html）
自定义规则
内置规则
这款插件的属性还是蛮多的 在常用规则整理中有着常用的规则。
对了这里有一个绕的地方（我单独截出来反正我看着的时候看半天）
就这样，这款插件有没有过多的介绍了。有很多坑和细节还得自己去真正用的时候去看
以上的五款插件全部介绍完成，案列源码下载：https://files.cnblogs.com/files/2979100039-qq-con/jqy_example_10.zip
我想各位小伙伴们看完这篇文章，也或多或少的对插件或者框架的使用有些了解了，但要明白一件事纸上得来终觉浅的道理，
有心人想要去学习一样东西，他就不止是想还要做。所以勤加练习是学好编程的不灭准则。
学习中，有地方错误还请指正。
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
《》
作者：一生的风景
转发链接：https://www.cnblogs.com/2979100039-qq-con/p/12775777.html
这10个热门的JavaScript框架，哪个适合你呢？
多年来，业界已经发布了大量JavaScript框架，怎样进行选择可能是一个挑战。如果你感到困惑，不知道应该选哪个或者究竟哪个适合你，那么这篇文章可以帮你解决问题。在本文中，我将列出用来构建 Web 应用程序的前10个JavaScript框架。
Angular 是最强大、最高效、最开源的JavaScript框架之一。在这个列表中不可能不提及 Angular。该框架由Google 运营，用于开发单页应用（SPA）。这个开发框架之所以出名，主要是因为它为开发人员提供了将JavaScript 与 HTML 和 CSS 结合起来的最佳条件。有超过五十万个网站如 google.com、youtube.com 等正在使用 Angular。
Angular 的主要特性：
MVC 架构：AngularJS 最重要的特性之一是 MVC 架构。 MVC 架构分为三个元素，即模型、视图和控制器。
Model：它是 MVC 架构的最低层级，用来存储数据。
View：负责向用户展示你的所有数据。
控制器：它基本上是用来控制模型与视图之间整个交互的代码。
双向绑定：这是一个令人惊叹的功能，它将 AngularJS 与其他JavaScript框架区分开来。 Angular Data-Binding 在模型和视图之间建立链接。在双向数据绑定过程中，视图会显示在模型中所做的更改，反过来模型反映了在视图中所做的更改。
单页应用：使用 AngularJS 框架，你可以构建完全响应式的单页应用，可以轻松完美地适应不同的屏幕尺寸。与其他网络应用相比，它还能改善用户体验。由于基于 AngularJS 的单页应用是在客户端渲染的，因此它们通过减少 Web 服务器上压力来减少网络流量。
HTML UI：AngularJS 的另一个重要特性是它使用 HTML 语言来构建用户界面。 HTML 语言是一种常见的声明性语言，标签很短，易于理解。这导致了更简单、更有条理的UI。JavaScript接口通常更难以开发和组织。如果你正在寻找一种快速，简单且易于使用的解决方案，那么应该就是它了。
React 是 Facebook 维护的另一个JavaScript库，用于构建交互式和复杂的 UI。它是最热门的框架之一，有超过 3 万个网站使用 React 实现 UI。举几个网站：Microsoft.com、yahoo.com 等。
ReactJS 的主要特性：
Virtual DOM：在React中，对于每个 DOM 对象，都有一个对应的“虚拟 DOM 对象”。虚拟 DOM 对象创建原始 DOM 的虚拟副本。这是一种单向数据绑定，由于修改时不需要实时向屏幕渲染，因此操作虚拟 DOM 比更新原始 DOM 快很多。
JSX：React 使用了 JSX，这是一个使用 HTML 引用的简单 JavaScript，而不是用于模板的 JavaScript。你也可以使用 HTML 语法来渲染子组件，或使用老式的JavaScript编写，这意味着无论采用哪种方式，你都可以灵活地进行编码。
单向数据流：React.js 的设计方式使其只支持在一个流程中向下游传递的数据。如果数据必须向另一个方向流动，则需要其他功能支持。
组件：在React中，所有内容都被视为组件，因此你可以轻松导入 React 支持的组件，而不是编码或构建整个功能，你可以方便的导入并使用它。
Vue是一个用于构建 UI 的开源JavaScript框架。由于它的设计具有适应性，Vue 简化了与其他JavaScript库的项目集成。目前超过 36,000 个网站正在使用 Vue。像 stackoverflow、playstation 等公司依赖 Vue 开发他们的网站界面。
VueJS的主要特性：
模板：Vue.js 提供基于 HTML 的模板，将 DOM 与 Vue.js 实例数据绑定。 Vue.js 将模板编译为虚拟 DOM 渲染函数。 Web 开发人员可以使用渲染函数的模板，并可以使用渲染函数替换模板。
体积小：JavaScript 框架的成功取决于它的大小。个头越小用的人越多。 Vue.js 最大的优势之一是体积小。该框架的大小为 18-21 KB。
适应性：Vue 允许用户用虚拟节点把模版写在 HTML 文件、JavaScript 文件和纯JavaScript文件中。这种灵活性还容易让使用 React.js，Angular.js 和任何其他新JavaScript框架的开发人员理解。它基于JavaScript框架，可以集成到基于JavaScript构建的其他程序中。
详细的文档：开发人员总是喜欢使用带有详细文档的框架，因为他们总是很容易编写自己的第一个应用程序。Vue.js 的文档非常全面，任何对JavaScript和 HTML 有所了解的用户都可以用它开发自己的应用或网页。
Jquery 是最古老的 JS 框架之一。这个框架已经存在了 13 年之久，而且它仍然很强大。那么什么是 jQuery？
jQuery 是一个快速而简洁的JavaScript库，由 John Resig 在2006年创建，它有一个很好宗旨：写得少，做得多。它是一个跨浏览器的JavaScript库，旨在简化 HTML 的客户端脚本。目前有超过 1900 万个网站正在使用jQuery！WordPress、Facebook、Google、IBM 和其他许多公司都依赖 jQuery 提供独一无二的网络浏览体验。
jQuery的主要特性：
DOM操作：它使对 DOM 的操作变得非常容易，使开发人员可以通过易于学习的API（基于顶层 JavaScript）充分利用他们的创造力来创建令人惊叹的东西。
大型社区：其贡献者的社区比任何其他JavaScript库更加庞大和多样化。它有广泛而全面的文档支持，不要忘记，它会不断得到维护，并且会越来越强大。
AJAX支持：简而言之，AJAX（异步JavaScript和 XML）是关于在后台加载数据并将其显示在网页上，而无需重新加载整个页面的技术。 jQuery 为 AJAX 功能提供了好几种方法。通过 jQuery AJAX，你可以用 HTTP Get 和 HTTP Post 从远程服务器请求文本、HTML、XML或JSON。
跨浏览器支持：jQuery 具有跨浏览器支持特性，适用于 IE 6.0 +，FF 2.0 +，Safari 3.0 +，Chrome 和 Opera 9.0+等。
BackboneJS 是一个轻量级JavaScript库，用来开发和构建在 Web 浏览器中运行的客户端应用。与其他框架不同，Backbone 让开发人员负责选择最适合当前项目的工具。目前，超过50万个网站正在使用 Backbone，其中包括tumblr.com、espn.com、soundcloud.com等等。
Backbone 的主要特性：
分离的业务和UI逻辑：Backbone 可以帮助你把自己的业务逻辑与用户界面分开，这是非常重要的一点。当两者纠缠在一起时，修改将会变得很难。当逻辑不依赖于 UI 时，你的界面会变得更加易用。
事件驱动的通信：当项目不断增长时，jQuery 声明和回调将变得更加复杂，代码变得更加混乱。 Backbone.js 通过在视图和模型之间提供事件驱动的通信来克服这个问题。
更少的代码：约定是引入通用编码风格的好方法，而无需提供大量的编码标准。你遵守的 backbone 约定越多，编写代码的次数就越少，反过来代码也会变得更加标准化，并具有可读性。
与后端同步：由于其对 RESTful API 的出色支持，BackboneJS 中的模型可以轻松地与后端绑定。如果 API 设计正确，则 backbone 可以直接通过访问这些操作来进行读取、写入和删除操作。
Node.js 是一个基于 Google Chrome 的JavaScript引擎构建的开源服务器端平台。使用 NodeJS 的网站数量已超过 84,000 个。它是下载量最大的用于执行JavaScript代码的跨平台运行时环境之一。
Node.js 的主要特性：
非阻塞：Node.js 库的所有API都是异步的，即非阻塞的。这意味着基于 Node.js 的服务器永远不会等待 API 返回数据。服务器在调用它之后移动到下一个 API，并且事件的通知机制帮助服务器从先前的 API 调用获得响应。
单线程：Node.js 使用带有事件循环的单线程模型。事件机制可帮助服务器以非阻塞方式响应，从而使服务器具有高度可伸缩性，而传统服务器则创建有限的线程来处理请求。与 Apache HTTP Server 等传统服务器相比，Node.js 使用的单线程程序可以为更多的请求提供服务。
快速：NodeJS 建立在Google Chrome 的 V8 引擎之上。 Google 的 V8 引擎确保 Node.js 库以极快的速度执行其代码。
数据流：NodeJS 程序从不缓冲任何数据，它们只是以数据块的形式输出数据。这样 NodeJS 可以提供更快的服务。
Ember是一个开源的JavaScriptWeb 框架，它允许开发人员通过将最佳实践合并到框架中来构建可伸缩的单页面 Web 应用。 Ember 被评为最佳的JavaScript客户端框架，其主要竞争对手是 React 和 AngularJS。目前超过 6000 个网站正在使用 ember。仅举几例：nasa.gov、tutorialspoint.com 等。
Ember 的一些主要特性：
Web开发的未来：在 BabelJavaScript转换器的帮助下，Ember 允许开发人员使用未来的JavaScript标准并将其进行转换为目前浏览器支持的代码。不知道 Babel 是什么？ Babel 是一个JavaScript转换器，允许开发人员现在使用下一代JavaScript代码。另外 Babel 受益于众多插件，并且与 Ember、Rails、Sails 和 Meteor 等框架兼容。
Ember cli：Ember 和 Ember-CLI 完全是两个不同的东西，但如果没有另一个则两者都不完整。 Ember-CLI 是一个命令行实用程序，它与 Ember 框架的软件栈一起提供。 Ember-CLI 是一种强大的生产力工具，支持CoffeeScript、Handlebars、LESS 和 Sass 等。
Ember 模板：Ember 的模板内置于 Ember 的 UI 中，这些模板使用 Handlebars 模板语言编写。 Handlebars 以其使用双花括号命名，它可以使开发人员写更少的代码。模板在 Ember 中提供了许多功能，例如组件、插口和表达式等。
CoC：它的唯一目的是速度和“把事情搞定”的理念，这对于那些总是努力超越竞争对手的初创公司来说是一个巨大的推动力。Ember 有关于其结构的最佳实践，这意味着开发人员可以更专注于实现业务，而不是通过繁琐的代码重新发明轮子。有更多的成果，而不是蓝图。
Meteor 是一个用 NodeJS 编写的免费开源JavaScript框架。它允许进行快速原型设计并生成跨平台代码。它在市场上越来越受欢迎，超过 13,000 个网站使用了 Meteor。像mtv.com、meteofrance.com等网站利用 Meteor 来构建他们的用户界面。
Meteor 的主要特性：
全栈：Meteor 为开发和部署 Web 应用提供了全栈解决方案。 Meteor 捆绑了几个内置功能，如反应式模板、自动 CSS 等。
智能包：为你的应用开发登录系统可能会很麻烦。但 Meteor 不会。 Meteor 软件包可以轻松添加用户帐户，还有 React 之类的JavaScript库等。最好方便的是，添加这些类型的智能包很容易，只需在终端中敲几下键盘就可以了。
实时网络应用：Meteor 是构建实时程序的完美解决方案。从数据库到模板所有的层都会自动更新。这意味着无需刷新页面即可查看更新。对文档的任何修改都会立即保存。这使得 Meteor 成为实时协作的完美解决方案。
单一语言开发：Meteor 允许在前端和后端使用相同的代码，可用于移动和 Web 应用。它可以杜绝安装和配置不同的库、模块管理器、API、驱动程序等。这大大的节省了开发人员的时间，因为他们不需要在服务器语言和JavaScript之间执行上下文切换。
Polymer 是一个由 Google 维护的开源JavaScript库，用于使用 Web 组件构建 Web 应用。目前，有超过3000个网站正在使用聚合物，比如virustotal.com、rogers.com、zeplin.io等。
与其他JavaScript框架不同，Polymer 让开发人员构建组件时去利用 Web 中存在的功能。它是第一个利用 Web 组件来对应用进行交互式构建的库。
Polymer 的关键特性：
Web 组件：Polymer 构建在 Web 组件的思想之上。 Web 组件是一组 w3c 标准，由几种不同的 Web 技术组成，其中包括自定义元素。这些组件是浏览器的一部分，所以你不需要任何第三方工具和库，比如 jQuery。
单向和双向数据绑定：它提供单向和双向数据绑定。Polymer 旨在支持在单向和双向流动的数据。
本机浏览器：Polymer 使用本机浏览器技术，而不是依赖于自定义JavaScript库。Polymer 的 DOM 层最接近本机JavaScript层。
自定义元素：它允许使用 HTML、CSS 和JavaScript轻松创建自定义元素，以便向元素添加交互。 Polymer.js 提供了创建自定义 HTML 元素的最简单方法，因为它的库是基于 Web 标准 API 构建的。
Aurelia 是一个开源的现代JavaScript模块工具箱，其有助于 Web 和移动应用程序的发展。它也被称为“下一代框架”。该框架自推出以来一直受到广泛认可。 Fileee、Freska、Ordami 和 BTEK Software 等公司以及800多个网站都使用了 Aurelia。
不要忘记，Aurelia 是唯一允许开发人员使用原生 TypeScript 或JavaScript构建组件的框架。
下面列出了 Aurelia 的一些主要功能：
多语言支持：Aurelia 的 API 经过精心设计，可以用于当今和未来最实用的 Web 编程语言。 Aurelia 支持 ES5、ES2015、ES2016 和 Typescript，它非常有用，并能够为你提供高度的灵活性。
模块框架：Aurelia 不是采用单一框架的方式，而是由较小的、专注的模块组成。把它们放在一起可以组成功能齐全的框架，也可以通过自定义构建可选择的方案。
整洁的文档：Aurelia 提供了一个非常详细并有用的文档集，可以帮助所有的开发人员。它以良好的文档维护而闻名。
可扩展的 HTML：Aurelia 的可扩展 HTML 编译器允许你创建自定义 HTML 元素，可以向现有元素中添加自定义属性并控制模板生成，所有这些都完全支持动态加载、数据绑定和高性能批量渲染。
以上介绍了10个最受欢迎的JavaScript框架，以及它们的主要特征和功能，希望对大家学习Web前端有所帮助。想了解更多的Web前端知识，可以关注我，会定期为大家分享最新Web前端面试题、发展趋势、学习资料，助力大家学好Web前端。
————————————————
版权声明：本文为CSDN博主「戏精程序媛」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/xiaoxijing/java/article/details/106665572
本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com
文章为作者独立观点不代本网立场，未经允许不得转载。
投诉举报&联系我们：
