常用组件-前端

前端

  • 前端即网站前台部分，运行在PC端，移动端等浏览器上展现给用户浏览的网页。随着互联网技术的发展，HTML5，CSS3，前端框架的应用，
    跨平台响应式网页设计能够适应各种屏幕分辨率，完美的动效设计，给用户带来极高的用户体验。

组件

  • Component，中文称为组件，或者构件。使用非常比较广泛，它的核心意义在于复用，相对模块，对于依赖性有更高的要求。

其前端常用的组件

  • 表单处理

    • 表单验证（Form Validator）
      1. Nice validator
        Nice validator是一个简单智能的Web表单验证插件，可以验证现有的所有格式，比如邮箱地址、电话号码等，您还可以自定义规则验证，
        插件基于jQuery库，支持多种语言配置。
        优点：简单，易扩展 缺点：暂不清楚怎么修改，让验证消息弹出，而不是出现在页面上，占页面位置。
      2. jQuery Validate
        jQuery Validate 插件为表单提供了强大的验证功能，让客户端表单验证变得更简单，同时提供了大量的定制选项，满足应用程序各种需求。
        该插件捆绑了一套有用的验证方法，包括 URL 和电子邮件验证，同时提供了一个用来编写用户自定义方法的 API。所有的捆绑方法默认使用英语作为错误信息，
        且已翻译成其他 37 种语言。

      总结：百度许久，貌似这两块较多为这两个，都是有自带的验证，且可自定义，但是第一个相对于第二个，他的规则更多的是集中在一个属性上，而不是分开。

    • 下拉组件（Select）
      1. Select2
        Select2 ，是一款下拉框，可多选，可图文的下拉框选择组件
    • 单选/多选（Radio/CheckBox）
      1. ICheck
        它针对大量浏览器、设备和使用者提供了同样的表现方式。回调事件和方法可以被用来很容易的处理自定义的输入框的状态的变化。
    • 日期选择(Date Choose)
      1. bootstrap-datetimepicker
      2. My97DatePicker

      总结： 第一种样子比第二种好看，第二种功能比第一种多

    • 上传组件（Upload）
      1. 百度 Web Uploader
        WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主，FLASH为辅的现代文件上传组件。在现代的浏览器里面能充分发挥HTML5的优势，
        同时又不摒弃主流IE浏览器，沿用原来的FLASH运行时，兼容IE6+，iOS 6+, android 4+。两套运行时，同样的调用方式，可供用户任意选用。
        采用大文件分片并发上传，极大的提高了文件上传效率。
        强调：WebUploader只包含文件上传的底层实现，不包括UI部分。
        2. bootstrap-fileinput
        Bootstrap 3.x和4.x的增强型HTML 5文件输入，包含各种文件的文件预览，提供多种选择等。该插件允许您以简单的方式设置高级文件选择器/上传控件，
        该控件专为Bootstrap CSS3样式而设计。它通过提供支持来预览各种文件，即图像，文本，html，视频，音频，flash和对象，进一步增强了文件输入功能。
        此外，它还包括基于AJAX的上传，拖放文件，查看上传进度以及有选择地预览，添加或删除文件。

      总结： 第一种支持H5与Fkash的上传方式，第二种为H5，但是第一种没有UI，只有底层

    • 标签（Tag）
      1. taggingJS
        taggingJS是一个jQuery插件，用于创建高度可定制的前端标签系统。支持所有主流浏览器在全球（IE 6+，Mozilla Firefox 1+， Google Chrome 1+，Safari 5.1+）。
      2. jQuery-tagEditor
        jQuery的TagEditor中
        一个功能强大且轻量级的jQuery标签编辑器插件。兼容Firefox，Safari，Chrome，Opera，Internet Explorer 8+中的jQuery 1.7.0+。IE7在技术上有效，但没有关注CSS /布局错误。
    • 自动完成（AutoCompleter）
      • jQuery Autocomplete
        在自动完成的组件，大部分都是一样的，都可以从本地源或者ajax远程数据源，其中这一块说是可以缓存到本地，暂未尝试是缓存数据到本地文件，还是html
        的cache
    • 样式修正
      • autosize textarea高度自动调整的组件

  • 图表绘制

  • 日期格式化

    1. Moment.js
      js对日期，时间的格式化
    2. Smart Time Ago(显示相对时间)
      js对当前日期的相对时间

  • 页面交互

    • 滑动，旋转（Slider）
      • swiper
        切换页面，滚动，轮播页面
    • 懒加载/加载监听
      1. jquery_lazyload
      2. ECho.js
    • 图片剪裁/处理
      1. jQuery.eraser 对图片进行幕布处理
      2. croppic 可对图片放大，缩小 旋转然后裁剪。
    • 滚动监听
      • Waypoints 用于捕获各种滚动事件的插件&&还支持固定元素和无限滚动的功能，功力十分强大。
    • 滚动加载
    • 拖拽组件
    • 隐藏或展示页面元素
      1. Headroom
      2. Readmore

  • UI Icon 组件

  • 通知组件/弹框组件 | 提示控件(Tooltips) | 对话框/弹出层(lightbox)

  • 目录树插件

  • 模板引擎

    • Handlebars 挺好用的模板引擎，采用json格式赋值，append（string）ToHtml

  • 其他

参考地址：https://www.cnblogs.com/liuzhibin/p/5944821.html 谢谢！

posted @ 2018-10-24 22:11  HANS许  阅读(2111)  评论(0)  编辑  收藏  举报