經常使用組件-前端

前端

• 前端即網站前臺部分，運行在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高度自動調整的組件
• 圖表繪製
  • 百度ECharts
• 日期格式化
  1. Moment.js
     js對日期，時間的格式化
  2. Smart Time Ago(顯示相對時間)
     js對當前日期的相對時間
• 頁面交互
  • 滑動，旋轉（Slider）
    • swiper
      切換頁面，滾動，輪播頁面
  • 懶加載/加載監聽
    1. jquery_lazyload
       
    2. ECho.js
  • 圖片剪裁/處理
    1. jQuery.eraser 對圖片進行幕布處理
    2. croppic 可對圖片放大，縮小 旋轉而後裁剪。
  • 滾動監聽
    • Waypoints 用於捕獲各類滾動事件的插件&&還支持固定元素和無限滾動的功能，功力十分強大。
  • 滾動加載
    • jscroll
  • 拖拽組件
    • Draggabilly
  • 隱藏或展現頁面元素
    1. Headroom
    2. Readmore
• UI Icon 組件
  • font awesome
• 通知組件/彈框組件 | 提示控件(Tooltips) | 對話框/彈出層(lightbox)
  • layer
  • artDialog
• 目錄樹插件
  • zTree_v3
    
  • jstree
• 模板引擎
  • Handlebars 挺好用的模板引擎，採用json格式賦值，append（string）ToHtml
• 其餘
  • jquery-cookie cookie操做
  • screenfull全屏切換
  • async能夠作些js的異步操做
  • jquery-qrcode二維碼
  • PDF在線瀏覽pdf

參考地址：http://www.javashuo.com/article/p-hqxrcaea-v.html 謝謝！