精品欧美一区二区三区在线观看 _久久久久国色av免费观看性色_国产精品久久在线观看_亚洲第一综合网站_91精品又粗又猛又爽_小泽玛利亚一区二区免费_91亚洲精品国偷拍自产在线观看 _久久精品视频在线播放_美女精品久久久_欧美日韩国产成人在线

我是如何開發了一個前端庫 or 框架？

作者：Vam的金豆之路
開發 前端
那么框架與庫有什么區別呢？庫更多是一個封裝好的特定的集合，提供給開發者使用，而且是特定于某一方面的集合（方法和函數），庫沒有控制權，控制權在使用者手中，在庫中查詢需要的功能在自己的應用中使用，我們可以從封裝的角度理解庫；框架顧名思義就是一套架構，會基于自身的特點向用戶提供一套相當于叫完整的解決方案，而且控制權的在框架本身，使用者要找框架所規定的某種規范進行開發。

前言

前端發展速度已經遠遠超出了我們的預計范圍，前端基于 JS 的框架/庫更是層出不窮。

那么框架與庫有什么區別呢？庫更多是一個封裝好的特定的集合，提供給開發者使用，而且是特定于某一方面的集合（方法和函數），庫沒有控制權，控制權在使用者手中，在庫中查詢需要的功能在自己的應用中使用，我們可以從封裝的角度理解庫；框架顧名思義就是一套架構，會基于自身的特點向用戶提供一套相當于叫完整的解決方案，而且控制權的在框架本身，使用者要找框架所規定的某種規范進行開發。

我們嘗試舉個例子：你想烹飪一條魚，這時你需要一些原料，比如油、鹽、醋、蔥、香料以及烹飪工具等，同時魚也是你需要的主要材料，當你聚齊所有材料時，再經過烹飪就得到成品；現在我們進行對比，其中油、鹽、醋、蔥、香料以及烹飪工具和魚其實就是庫，組合到一起就成了框架，成品就是最終開發好的應用，或者這樣能是你更好里的理解框架與庫之間的區別。

我們熟知的 React，它就是一個庫，官網稱是一個用于構建用戶界面的 JavaScript 庫。剛接觸 React 的時候，在 JS 文件 中寫 HTML 語法 覺得很奇妙，后來就覺得自己可不可以也搞一個庫來鍛煉下自己的能力呢！于是在業余時間自己通過各種摸索搞了一個迷你版 JSX，但是在數據驅動層面上遇到了一些問題，幾天的輾轉反側，自己終于想明白了。我為什么先要做一個仿 React 的庫呢？我能不能換一種方式來實現這種類 JSX 語法呢！我們知道 ES6 語法中有模板字符串，你可以在里面寫 HTML 標簽，并且在字符串中可以嵌入變量。找到了開發方向，我就開始搜索各種資料，正式進入開發庫的過程。這個過程是非常痛苦的，但慶幸的是庫的開發都是我一個人參與的，我可以按照我的想法去做，去完善它。

我將這個庫命名為 Strve.js，為什么會這樣命名呢？它其實是字符串（String）與 視圖（View）的名稱縮寫拼接而成。它實現了在 JS 字符串中寫 HTML 標簽，并且可以嵌入變量，達到了數據驅動視圖的效果。并且你可以靈活地分離代碼塊，提高工作效率。到這里你會覺得這有什么難的，使用 innerHTML 也可以實現類似的效果。效果是一樣的，但是在一定場景下 DOM 性能是不同的。Strve.js 另一個定位就是一個輕量級的 MVVM 框架，你只需要關心數據操作，其他事情由 Strve.js 內部的 Virtual DOM 來處理，這也是目前優化 DOM 性能的一種常用手段。

最終，功夫不負有心人。在 2021 年 11 月 3 日發布了第一個版本 1.0.4，然后接下來就是不斷地更新迭代，讓它的生態更加完善，更加符合一個庫或者框架的要求。中途也遇到過架構重新搭建等等情況，到目前為止，Strve.js 最新版本是 5.1.1，發布時間為 2023 年 1 月 1 日。

下面我來詳細介紹下 Strve.js。

文檔

Strve.js 文檔是基于 VitePress 搭建，分別部署到 Github 和 Gitee 上。

Github 中文網址：https://maomincoding.github.io/strve-doc/zh

Gitee 中文網址：https://maomincoding.gitee.io/strve-doc/zh

圖片

下面，將根據文檔內容分成幾大模塊，分享我設計這個庫時的心得體會。

開始

首先，我們進入開始頁。嘗試學習一樣新的技術，最簡單的就是做一個小的案例。通過這些簡單的案例來進一步學習它的用法，因為往往這些最簡單之處最能體現出它的核心用途。

你可以通過兩種方式去使用它，一種是 ES Modules，另一種是UMD。我們先分別列舉兩種方式，然后統一講一下代碼結構。

現代瀏覽器大多都已原生支持 ES 模塊。因此我們可以像這樣通過 CDN 以及原生 ES 模塊使用 Strve.js:

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <title>Strve.js</title>
 </head>

 <body>
  <script type="module">
   import {
    h,
    setData,
    createApp,
   } from 'https://cdn.jsdelivr.net/npm/strve-js@5.1.1/dist/strve.full-esm.js';

   const state = {
    count: 0,
   };

   function add() {
    setData(() => {
     state.count++;
    });
   }

   function App() {
    return h`
      <h1 $key>${state.count}</h1>
      <button notallow=${add}>Add</button> 
    `;
   }

   const app = createApp(App);
   app.mount('#app');
  </script>
 </body>
</html>

UMD 叫做通用模塊定義規范（Universal Module Definition）。也是隨著大前端的趨勢所誕生，它可以通過運行時或者編譯時讓同一個代碼模塊在使用 CommonJs、CMD 甚至是 AMD 的項目中運行。未來同一個 JavaScript 包運行在瀏覽器端、服務區端甚至是 APP 端都只需要遵守同一個寫法就行了。

你也可以選擇使用 <script> 標簽直接引入，這樣就可以直接在瀏覽器中打開了。

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <title>Strve.js</title>
 </head>

 <body>
  <script src="https://cdn.jsdelivr.net/npm/strve-js@5.1.1/dist/strve.full.prod.js"></script>
  <script>
   const { h, setData, createApp } = Strve;
   const state = {
    count: 0,
   };

   function add() {
    setData(() => {
     state.count++;
    });
   }

   function App() {
    return h`
       <h1 $key>${state.count}</h1>
       <button notallow=${add}>Add</button> 
    `;
   }

   const app = createApp(App);
   app.mount('#app');
  </script>
 </body>
</html>

兩種不同的方式其中相同的代碼無非是這幾行，通過數據與視圖頁面的綁定，操作業務邏輯，你會發現Strve.js更加關注結果，至于如何實現這個結果的，我們并不關心。換句話說，Strve.js幫我們封裝了過程。

const state = {
 count: 0,
};

function add() {
 setData(() => {
  state.count++;
 });
}

function App() {
 return h`
     <h1 $key>${state.count}</h1>
     <button notallow=${add}>Add</button> 
 `;
}

const app = createApp(App);
app.mount('#app');

通過上面的案例你會發現一切代碼邏輯都是在JS中，可以說離 All in JS 更近了一步。

安裝

我們簡單快速地了解 Strve.js 的使用，那么我們在這一篇詳細說明下 Strve.js 有哪些安裝方法。

CDN

使用CDN在上面也提到了，一種是ES Modules，另一種是UMD。因為篇幅的原因，這里就不再復述了。

包管理器

當你構建大型應用時，推薦使用 包管理器 安裝。

> npm install strve-js
> yarn add strve-js

命令行工具

當你構建大型應用時，推薦使用 Strve.js 提供的官方項目腳手架來搭建項目。為單頁面應用 (SPA) 快速搭建繁雜的腳手架。它為現代前端工作流提供了開箱即用的構建設置。

目前有兩款工具：

  • CreateStrveApp
  • CreateStrve

下面會再詳細介紹。

對不同構建版本的解釋

在 NPM 包的 dist/ 目錄你將會找到很多不同的 Strve.js 構建版本。這里列出了它們之間的差別：


ES Module (基于構建工具使用)

ES Module (直接用于瀏覽器)

UMD

完整版

-

strve.full-esm.js

strve.full.js

完整版(生產環境)

-

strve.full-esm.prod.js

strve.full.prod.js

運行時版

strve.runtime-esm.js

-

-

運行時版(生產環境)

strve.runtime-esm.prod.js

-

-

不同的版本：

  • 完整版本：包括編譯器(用于將模板字符串編譯為 JavaScript 呈現函數的代碼)和運行時版本；
  • 運行時版：用于創建實例、渲染和處理虛擬 DOM 的代碼?；旧?，它是從編譯器中刪除所有其他內容；

在Strve.js@5.1.1發布之前，用戶可以提供 HTML 字符串，我們將其編譯為數據對象后再交給運行時處理。準確地說，上面的代碼其實是運行時編譯，意思是代碼運行的時候才開始編譯，而這會產生一定的性能開銷，因此我們也可以在構建的時候就執行編譯程序將用戶提供的內容編譯好，等到運行時就無須編譯了，這對性能是非常友好的。 這也是為什么我們發布了不同的構建版本，以適用于不同場景。

API

API目前總共有10個。

createApp、h、setData這三個為基本API，主要用于渲染頁面；onMounted、onUnmounted這兩個API為生命周期鉤子函數；nextTick、domInfo這兩個API則為與DOM相關的API；version則為輔助API，用于獲取Strve.js版本號；propsData、defineCustomElement則為特性API，為適配一些特性而設計。

其中，值得一提的是defineCustomElement。這個API用于支持 Web Components 的引入，它可以傳兩個參數。

第一個參數是對象類型，對象屬性如下：

屬性

類型

必選

含義

id

??String??

是

原生自定義組件ID，應保持其唯一性

template

??Function??

是

返回一個模版字符串函數

styles

??Array<string>??

否

原生自定義組件樣式集合

attributeChanged

??Array<string>??

否

原生自定義組件監聽屬性集合

immediateProps

??Boolean??

否

原生自定義組件是否開啟立即監聽屬性變化

lifetimes

??Object??

否

原生自定義組件生命周期，與Web Components生命周期一致

第二個參數是字符串類型，原生自定義組件的名稱，名稱中必須含有-字段。

示例1：

const data = {
 count1: 1
}

const myCom1 = {
 id: "myCom1",
 template: () => {
  return h`
      <p class="msg" $key>${data.count1}</p>
  `
 },
 styles: [`.msg { color: red; }`],
}

defineCustomElement(myCom1, 'my-com1')

function App() {
 return h`
   <my-com1></my-com1>
 `
}

示例2：

const myCom1 = {
 id: "myCom1",
 template: (props) => {
  return h`
    <p class="msg" $key>${props.value}</p>
    <p class="msg" $key>${props.msg}</p>
  `
 },
 styles: [`.msg { color: red; }`],
 attributeChanged: ['value', 'msg'],
 immediateProps: true,
 lifetimes: {
  attributeChangedCallback(v) {
   console.log(v);
  }
 }
}

defineCustomElement(myCom1, 'my-com1');

const data = {
 count1: 1,
 count2: '1',
}

function add() {
 setData(() => {
  data.count1++;
 })
}

function App() {
 return h`
   <button @click="${add}">btn</button>
   <my-com1 value=${data.count1} msg="${data.count2}" $key></my-com1>
 `
}

下面，我發布了一個Web Components的案例。

預覽鏈接：https://codepen.io/maomincoding/pen/RwBBZpr

用法

目前共有11種用法，有些用法是對一些API的補充。

其中數據綁定、屬性綁定、條件渲染、列表渲染、事件處理 這五種用法為基本用法。詳細用法可以去文檔中查閱，這里就不做贅述。

其余6種則為拓展用法，比如里面提到的靜態標簽中$key，比如我們在更改數據時，Strve.js內部需要用到Diff算法進行差異對比，但是也不是所有的節點都需要進行差異對比，像一些靜態文本，前后變化都一樣，就不需要再參與對比。那么用戶在一些需要變化的動態節點上提供$key靜態標記，標識這需要動態變化。

還有我們也可以自己封裝自定義組件，我將其命名為命名功能組件，比如像下面這樣。另外，你需要父子傳值，也可以通過搭配$props實現。

const state1 = {
 count: 0,
};

function add1() {
 setData(
  () => {
   state1.count++;
  },
  {
   name: Component1,
  }
 );
}

function Component1() {
 return h`
            <h1>Component1</h1>
            <h1 $key>${state1.count}</h1>
            <button notallow=${add1}>add1</button> 
    `;
}

function App() {
 return h`
            <h2>txt1</h2>
            <div>
                <p>txt2</p>
                <component $name=${Component1.name}>
                    ${Component1()}
                </component>
            </div>
    `;
}

我們也內置了很多組件，比如fragment標簽，它創建一個文檔片段標簽。它不是真實 DOM 樹的一部分，它的變化不會觸發 DOM 樹的重新渲染，且不會對性能產生影響。

const state = {
 x: 0,
 y: 0,
};

function App() {
 return h`
            <fragment>
                <h1 $key>Mouse position is at: ${state.x}, ${state.y}</h1>
            </fragment>
    `;
}

最后，我們在上文中提到支持Web Components，這里做一下補充。

自定義元素的主要好處是，它們可以在使用任何框架，甚至是在不使用框架的場景下使用。當你面向的最終用戶可能使用了不同的前端技術棧，或是當你希望將最終的應用與它使用的組件實現細節解耦時，它們會是理想的選擇。

工具

到目前為止，Strve.js不僅僅是一個渲染頁面的庫，它可以搭配其他工具為你生成一個項目搭建框架。

現在有4款工具，分別是CreateStrveApp、CreateStrve、StrveRouter、BabelPluginStrve。

CreateStrveApp與 CreateStrve 都是快速構建 Strve.js 項目的命令行工具，與早期的腳手架 CreateStrve 相比，CreateStrveApp 更好，可以直接輸入命令快速創建 Strve 項目。CreateStrveApp 是使用 Vite 構建的，這是一個新的前端構建工具，可以顯著提升前端開發體驗。

當我們使用Strve.js構建單頁面應用時，一旦頁面加載完畢，整個頁面就不會因為用戶的操作而重新加載或者頁面跳轉，沒有頁面的跳轉，是如何實現頁面跳轉的效果呢？使用路由機制，實現內容的切換，實現不同內容的展示。

StrveRouter 是 Strve.js 的官方路由管理器。它與 Strve.js 的核心深度集成，輕松構建單頁應用程序。你可以通過下面代碼快速了解StrveRouter的使用。

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta charset="UTF-8" />
  <title>strve-router</title>
 </head>

 <body>
  <div id="app"></div>
  <script type="module">
   import {
    h,
    createApp,
    setData,
   } from 'https://cdn.jsdelivr.net/npm/strve-js@5.1.1/dist/strve.full-esm.prod.js';
   import {
    initRouter,
    linkTo,
   } from 'https://cdn.jsdelivr.net/npm/strve-router@2.3.1/dist/strve-router.esm.js';

   class Home {
    constructor() {
     this.state = {
      count: 0,
     };
    }

    useAdd = () => {
     setData(() => {
      this.state.count++;
     });
    };

    goAbout = () => {
     linkTo('/about');
    };

    render = () => {
     return h`
                            <button notallow=${this.goAbout}>goAbout</button>
                            <h1 notallow=${this.useAdd} $key>${this.state.count}</h1>
                    `;
    };
   }

   class About {
    constructor() {
     this.state = {
      msg: 'About',
     };
    }

    useChange = () => {
     setData(() => {
      this.state.msg = 'Changed';
     });
    };

    goHome = () => {
     linkTo('/');
    };

    render = () => {
     return h`
                            <button notallow=${this.goHome}>goHome</button>
                            <h1 notallow=${this.useChange} $key>${this.state.msg}</h1>
                    `;
    };
   }

   const router = initRouter(
    [
     {
      path: '/',
      template: [Home, 'render'],
     },
     {
      path: '/about',
      template: [About, 'render'],
     },
    ],
    setData
   );

   function App() {
    return h`
                   <div class="main">
                        ${router.view()}
                    </div>
    `;
   }

   const app = createApp(App);
   app.mount('#app');
  </script>
 </body>
</html>

我們在上文中的提到的編譯器就是指的是BabelPluginStrve，BabelPluginStrve是一款babel 插件，將 HTML 模板字符串轉化為 Virtual Dom。從之前的運行時轉移到編譯時，大幅度提高渲染性能。

// input:
const state = {
 count: 0,
};

h`<h1 $key>${state.count}</h1>`;

// output:
{
    children: [0],
    props: {"$key": true},
    tag: "h1"
}

相關安裝與使用方式可以參照文檔。

其他

目前總共分為5個模塊，分別為更新日志、IDE支持、UI 框架、瀏覽器兼容性、關于。

其中值得一提的是，在使用編輯器時，如何使HTML標簽在模版字符串中高亮顯示。比如這里我們使用Visual Studio Code時，下載es6-string-html插件后，在h``中間添加 /* html */。

function App() {
 return h/* html */ `
        <div class='inner'>
            <p>${state.msg}</p>
        </div >
    `;
}

另外，UI框架除了支持Bootstrap5、Tailwindcss、還支持Quark，Quark 是一款基于 Web Components 的跨框架 UI 組件庫。它可以同時在任意框架或無框架中使用。

這是基于Quark的預覽地址：??https://codepen.io/maomincoding/pen/MWOmyLW??

圖片

然后，Strve.js也可以跟Three.js搭配使用，以下是預覽鏈接：??https://codepen.io/maomincoding/pen/GRBYzzM??

圖片

結語

至此，關于Strve.js的介紹到這里就結束了，感謝閱讀。如果大家想進一步了解Strve.js，可以到官方文檔查閱。Strve.js我也會繼續維護下去，雖然路很長，很難走，但是我也不會放棄。

Strve.js 源碼倉庫：https://github.com/maomincoding/strve

Strve.js 中文文檔：??https://maomincoding.gitee.io/strve-doc/zh/??

本文轉載自微信公眾號「前端歷劫之路」，可以通過以下二維碼關注。轉載本文請聯系前端歷劫之路公眾號。


責任編輯：武曉燕 來源： 前端歷劫之路
前端庫框架集合
相關推薦

2022-11-10 09:28:40

框架開發

2021-02-06 23:26:25

聊天室開發WebSocket

2023-07-10 09:53:59

console開發插件

2021-04-26 07:31:22

SpringMVCweb框架

2015-09-01 09:53:04

Java Web開發者

2022-03-07 05:53:41

線程CPU代碼

2016-07-25 18:09:29

2025-09-12 13:34:51

前端開發Ruby

2025-02-26 13:07:57

2014-03-12 10:00:26

移動開發跨平臺

2016-08-04 14:08:57

前端javascripthtml

2025-03-11 01:28:16

2013-05-21 09:32:11

ChromebookChrome OS

2012-06-27 10:16:12

開源項目CodePlex

2012-11-28 13:25:27

程序員

2021-11-01 11:08:28

鴻蒙HarmonyOS應用

2014-04-17 10:42:50

DevOps

2016-11-07 21:15:12

前后端分離expressJavascript

2016-08-11 17:09:14

Javascripthtml前端

2016-11-07 21:24:08

HtmlNode.jsJavascript
點贊
收藏

51CTO技術棧公眾號

日韩福利视频一区| 国产黄a三级三级| 乡村艳史在线观看| 国产性天天综合网| 亚洲xxx大片| 日韩片在线观看| 桃花岛tv亚洲品质| www.欧美日韩| 国产精品成人av性教育| 免费三级在线观看| 亚洲精品无吗| 午夜视频久久久久久| 92看片淫黄大片看国产片| 国产精品1000| 欧美肥老太太性生活| 亚洲精品456在线播放狼人| 欧美日韩中文不卡| 国产女主播在线直播| 国产盗摄精品一区二区三区在线| 欧美中文字幕视频在线观看| 午夜国产福利一区二区| 亚洲综合小说图片| 精品三级在线看| 国产乱子伦精品视频| 巨骚激情综合| 成人禁用看黄a在线| 国产日韩综合一区二区性色av| 日本一级淫片色费放| 91精品国产自产拍在线观看蜜| 在线免费观看日本一区| 国产一线二线三线女| 永久av在线| 国产色产综合色产在线视频| 国内精品久久国产| 超碰免费在线97| 久久99这里只有精品| 国产成人亚洲综合91精品| 五月天综合在线| 欧美激情在线| 久久人人爽亚洲精品天堂| 在线视频第一页| 少妇高潮一区二区三区| 亚洲国产成人精品电影| av影片在线播放| 久久九九精品视频| 91麻豆精品国产无毒不卡在线观看| 一级做a爰片久久| 天堂网在线中文| 99久久久精品| 国产日韩欧美综合精品| 视频二区在线观看| www.激情成人| 久久大香伊蕉在人线观看热2| 黄色片网站免费在线观看| 国产精品资源在线观看| 亚洲综合精品一区二区| 国产福利第一页| 国产欧美在线| 2021国产精品视频| 特级做a爱片免费69| 国产日韩综合| 国产成人精品视频| 天天天天天天天干| 老司机免费视频一区二区三区| 久久夜色精品国产亚洲aⅴ| av黄色免费在线观看| 香蕉综合视频| 欧美激情视频一区二区三区不卡| 精品少妇久久久| 亚洲高清毛片| 日韩视频亚洲视频| 欧美色图亚洲视频| 极品尤物久久久av免费看| 午夜精品久久久99热福利| 日韩精品一区二区三区国语自制| 国产精品乱看| 国产精品久久色| 国产美女精品视频国产| 国产不卡视频在线观看| 国产精品国语对白| 国产又粗又猛又黄又爽无遮挡| 国产中文字幕精品| 国产精品免费区二区三区观看 | 久久综合九九| 在线激情网站| 亚洲综合视频在线| 日韩在线xxx| 日本无删减在线| 五月天激情综合| 国产色视频在线播放| 国产一区二区视频在线看| 精品国产一区二区亚洲人成毛片| 李宗瑞91在线正在播放| 欧美电影《睫毛膏》| 国内外成人免费激情在线视频| 自拍偷拍18p| 国产乱子轮精品视频| 久久影视中文粉嫩av| 日韩专区在线| 精品成人久久av| 久热在线视频观看| 天堂资源在线亚洲| 美女视频久久黄| 黄色av一级片| 国产成人日日夜夜| 亚洲v欧美v另类v综合v日韩v| 五十路在线观看| 国产毛片精品视频| 久久伊人一区| 久久av色综合| 欧美猛男gaygay网站| 91黄色免费视频| 香蕉视频国产精品| 国产精品久久久av| 日韩一区免费视频| 自拍偷拍亚洲激情| 欧洲xxxxx| 人人视频精品| 亚洲国产精品久久91精品| 99成人在线观看| 老鸭窝91久久精品色噜噜导演| 97视频在线观看亚洲| 一区二区国产欧美| 国产午夜亚洲精品午夜鲁丝片| 大桥未久一区二区三区| 福利一区二区免费视频| 亚洲免费中文字幕| 日本少妇在线观看| 国产精品中文字幕一区二区三区| 日韩国产精品一区二区| 手机av在线| 亚洲国产一区自拍| 国产一级性生活| 国产精品亚洲专一区二区三区 | 亚洲aaa激情| av在线1区2区| 91久久精品一区二区| 人妻丰满熟妇av无码久久洗澡| 欧美日韩综合| 99re在线视频观看| 视频在线这里都是精品| 日韩一区二区三区高清免费看看| 东京热无码av男人的天堂| 日日摸夜夜添夜夜添精品视频 | 国产精品久久一区二区三区不卡| 无码av中文一区二区三区桃花岛| 亚洲成人福利视频| 国产一区二区三区自拍| 99久久精品免费看国产一区二区三区| 国产激情在线观看| 欧美精品 国产精品| 国精品人伦一区二区三区蜜桃| 日韩av电影一区| 日韩美女一区| 一区在线不卡| 欧美日韩999| 国模私拍视频在线| 午夜私人影院久久久久| 扒开jk护士狂揉免费| 丝袜美腿成人在线| 亚洲欧洲另类精品久久综合| aa亚洲一区一区三区| 欧美伦理91i| 日韩中文字幕综合| 欧美性生交xxxxxdddd| 在线不卡av电影| 亚洲伊人观看| 亚洲人体一区| youjizz亚洲| 欧美亚洲国产视频| 成人在线视频成人| 在线播放中文一区| 国产对白videos麻豆高潮| 97国产一区二区| 天堂av在线网站| 亚洲女同另类| 久久精品成人一区二区三区蜜臀| 欧美国产大片| 久久精品亚洲一区| 成人久久精品人妻一区二区三区| 欧美日韩亚洲91| 国产午夜精品久久久久久久久| 国产在线国偷精品产拍免费yy| 久久亚洲a v| 亚洲伦乱视频| 久久久极品av| 视频三区在线观看| 欧美剧情片在线观看| 国产精品99无码一区二区| 久久久久久免费网| 欧美污在线观看| 欧美专区18| 一二三在线视频| 伊人久久综合影院| 5566av亚洲| 亚洲www啪成人一区二区| 欧美成人一区在线| 国产视频网址在线| 精品国产a毛片| 一区二区自拍偷拍| 五月综合激情网| 国产麻豆a毛片| 久久精品一区八戒影视| 又色又爽又黄18网站| 琪琪一区二区三区| 日本丰满少妇xxxx| 66久久国产| 日本一区二区三区视频在线观看| 国产精品一区二区精品| 国产成人激情视频| 2018av在线| 亚洲国产高潮在线观看| 一二三四区在线| 欧美日韩亚洲一区二区三区| 中文字幕亚洲欧美日韩| 国产午夜精品理论片a级大结局| 久草福利在线观看| 免费在线成人网| 欧美激情国产精品日韩| 欧美日韩亚洲一区三区| 日本特级黄色大片| 成人中文视频| 欧洲在线视频一区| 曰本一区二区三区视频| 国语精品免费视频| 最新精品在线| 91久久久久久久久久久久久| 成人在线免费| 国产精品成人va在线观看| 色综合亚洲图丝熟| 992tv成人免费视频| 蜜臀av在线播放| 久久综合国产精品台湾中文娱乐网| 福利成人在线观看| 在线观看欧美www| 国产毛片在线| 在线视频日韩精品| 永久免费av在线| 色综合伊人色综合网| h视频网站在线观看| 在线观看欧美www| 色综合久久久久综合一本到桃花网| 亚洲午夜色婷婷在线| 亚洲图片在线播放| 欧美视频你懂的| 亚洲一区二区色| 欧美精品高清视频| 91国内精品久久久| 欧美精品自拍偷拍| 国产农村妇女毛片精品| 91精品国产欧美日韩| 国产人妖一区二区三区| 日韩欧美精品三级| 亚洲av无码一区二区三区性色 | 久久久久久久网| 爱爱免费小视频| 国产欧美中文在线| 国产又粗又长又黄的视频| 亚洲欧美自拍偷拍| 超碰在线国产97| 亚洲午夜免费福利视频| 可以免费看的av毛片| 日韩欧美中文免费| 伊人网av在线| 欧美一级片免费看| 黄色一级大片在线免费看国产| 日韩av在线电影网| 国产高清视频在线| 北条麻妃一区二区三区中文字幕| 国产原厂视频在线观看| 欧美激情国产日韩精品一区18| 成人性生交大片免费看网站| 日av在线播放中文不卡| 亚洲精品tv| 国产区一区二区| 日韩欧美视频专区| 日韩极品视频在线观看| 小嫩嫩精品导航| 狠狠操狠狠干视频| 成人免费高清视频在线观看| 国产亚洲无码精品| 国产精品家庭影院| 久久这里只有精品免费| 色就色 综合激情| 国产精品久久久久久久一区二区| 欧美videos中文字幕| 国产色a在线| 久久999免费视频| 欧美日韩视频网站| 亚洲伊人第一页| 国产成人一区二区三区影院| 亚洲资源在线网| 亚洲精品乱码久久久久久蜜桃麻豆| 久久网站免费视频| 国产福利一区二区三区视频| 亚洲天堂资源在线| 一区二区在线观看av| 国产精品久久久久久人| 欧美一区二区精品久久911| 青青免费在线视频| 欧美国产视频一区二区| yy6080久久伦理一区二区| 国产精品播放| 水蜜桃精品av一区二区| 日本久久久精品视频| 国产精品亚洲а∨天堂免在线| 泷泽萝拉在线播放| 亚洲v中文字幕| 国产美女自慰在线观看| 伊人久久男人天堂| 欧美少妇精品| 国产欧美日韩综合一区在线观看| 久久精品高清| 欧美伦理片在线看| 日韩在线一二三区| 亚洲av永久无码精品| 自拍偷自拍亚洲精品播放| 在线免费观看国产精品| 亚洲国产欧美一区| 人人超在线公开视频| 国产日韩在线一区| jiujiure精品视频播放| 91精品91久久久中77777老牛| 国产白丝精品91爽爽久久| 天天做夜夜爱爱爱| 欧美色综合网站| 美女毛片在线看| 538国产精品一区二区免费视频 | 日韩精品一区在线| 日本视频不卡| 国产精品视频永久免费播放| 中文字幕中文字幕精品| 国产在线观看福利| 91蜜桃婷婷狠狠久久综合9色| 国产中文字幕免费| 欧美大片日本大片免费观看| a级影片在线| 99re国产在线播放| 极品少妇一区二区三区| 国产精品手机在线观看| 亚洲一区二区高清| 日韩在线视频第一页| 久久久久中文字幕| 老汉色老汉首页av亚洲| 欧美一级免费播放| av一二三不卡影片| 91视频免费网址| 亚洲精品视频久久| 在线手机中文字幕| 任我爽在线视频精品一| 石原莉奈在线亚洲二区| 高清国产在线观看| 欧美调教femdomvk| 欧美三级理伦电影| 亚洲综合社区网| 激情偷拍久久| 超碰97在线资源站| 91久久奴性调教| 午夜激情视频在线观看| 91九色露脸| 99综合精品| 高清视频一区| 黄色在线观看www| 久久五月天婷婷| 蜜臀久久久久久久| 我家有个日本女人| 日韩av在线资源| 综合在线影院| 男女啪啪的视频| www.亚洲色图| 中文字幕av网站| 欧美大奶子在线| 天海翼亚洲一区二区三区| 亚洲77777| 亚洲在线一区二区三区| 蜜桃91麻豆精品一二三区| 91爱视频在线| 91视频综合| 亚州av综合色区无码一区| 色香蕉成人二区免费| 成人片在线看| 欧美大香线蕉线伊人久久国产精品| 青青草原综合久久大伊人精品优势| 黄色一级大片在线免费观看| 亚洲成人在线视频播放| 全球最大av网站久久| 日韩精品综合在线| 久久日韩粉嫩一区二区三区| 国产精品久久久久久久久久久久久久久久久久 | 亚洲免费999| 亚洲五月六月丁香激情| 成年在线电影| 国产日韩欧美综合精品| 狠狠狠色丁香婷婷综合激情| 日韩精品一区二区不卡| 久久久精品国产| 国产精品嫩草影院在线看| 国产ts在线观看| 欧美日韩卡一卡二| 青青草观看免费视频在线|