移動端常用開發插件和框架

1. 移動端常用開發插件

1.1. 什么是插件

移動端要求的是快速開發，所以我們經常會借助於一些插件來幫我完成操作，那么什么是插件呢？

JS 插件是 js 文件，它遵循一定規范編寫，方便程序展示效果，擁有特定功能且方便調用。如輪播圖和瀑布流插件。

特點：它一般是為了解決某個問題而專門存在，其功能單一，並且比較小。

我們以前寫的animate.js 也算一個最簡單的插件

fastclick 插件解決 300ms 延遲。 使用延時

GitHub官網地址： https://github.com/ftlabs/fastclick

1.2. 插件的使用

1. 引入 js 插件文件。

2. 按照規定語法使用。

3. fastclick 插件解決 300ms 延遲。 使用延時

4. GitHub官網地址： https://github.com/ftlabs/fastclick

   if ('addEventListener' in document) {
               document.addEventListener('DOMContentLoaded', function() {
                          FastClick.attach(document.body);
              }, false);
   }

1.3. Swiper 插件的使用

中文官網地址： https://www.swiper.com.cn/

1. 引入插件相關文件。

2. 按照規定語法使用

1.4. 其他移動端常見插件

lsuperslide： http://www.superslide2.com/

l iscroll： https://github.com/cubiq/iscroll

1.5. 插件的使用總結

1.確認插件實現的功能

2.去官網查看使用說明

3.下載插件

4.打開demo實例文件，查看需要引入的相關文件，並且引入

5.復制demo實例文件中的結構html，樣式css以及js代碼

1.6. 移動端視頻插件 zy.media.js

H5 給我們提供了 video 標簽，但是瀏覽器的支持情況不同。

不同的視頻格式文件，我們可以通過source解決。

但是外觀樣式，還有暫停，播放，全屏等功能我們只能自己寫代碼解決。

這個時候我們可以使用插件方式來制作。

我們可以通過 JS 修改元素的大小、顏色、位置等樣式。

 

2. 移動端常用開發框架

2.1. 移動端視頻插件 zy.media.js

框架，顧名思義就是一套架構，它會基於自身的特點向用戶提供一套較為完整的解決方案。框架的控制權在框架本身，使用者要按照框架所規定的某種規范進行開發。

插件一般是為了解決某個問題而專門存在，其功能單一，並且比較小。

前端常用的框架有 Bootstrap、Vue、Angular、React 等。既能開發PC端，也能開發移動端

前端常用的移動端插件有 swiper、superslide、iscroll等。

框架： 大而全，一整套解決方案

插件： 小而專一，某個功能的解決方案

2. 2. Bootstrap

Bootstrap 是一個簡潔、直觀、強悍的前端開發框架，它讓 web 開發更迅速、簡單。

它能開發PC端，也能開發移動端

Bootstrap JS插件使用步驟：

1.引入相關js 文件

2.復制HTML 結構

3.修改對應樣式

4.修改相應JS 參數