前端

• 前端即網站前臺部分，運行在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

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

常用組件-前端