中文字幕理论片,69视频免费在线观看,亚洲成人app,国产1级毛片,刘涛最大尺度戏视频,欧美亚洲美女视频,2021韩国美女仙女屋vip视频

一、前言

在上一篇《原理結(jié)構(gòu)篇》中，主要針對(duì)移動(dòng)端網(wǎng)頁(yè)進(jìn)行了分類(lèi)描述，并介紹了H5編輯器的需求、原理以及框架結(jié)構(gòu)，本文將延續(xù)開(kāi)發(fā)實(shí)戰(zhàn)這一主題，針對(duì)策略和開(kāi)發(fā)技巧做進(jìn)一步的介紹。

二、策略篇

2.1 適應(yīng)策略

在上一篇文章中，簡(jiǎn)單對(duì)兼容方式做了區(qū)分，即固定尺寸兼容及百分比兼容，下面我具體介紹下為什么沒(méi)有使用這兩種方式以及目前所用的適應(yīng)策略。

1）固定尺寸兼容

這種做法，一般是通過(guò)js自動(dòng)生成viewport及scale數(shù)值，我們來(lái)看一段代碼： 

var ua = navigator.userAgent;var phoneScale = parseInt(window.screen.width) / 640;if (/Android (\d+\.\d+)/.test(ua)) {    var version = parseFloat(RegExp.$1);    var qqv = ua.match(/MQQBrowser\/(\d+)/) ? ua.match(/MQQBrowser\/(\d+)/)[1] : 0;    if (version > 2.3 && qqv < 6) {        document.write('<meta name="viewport" content="width=640, minimum-scale = ' + phoneScale + ", maximum-scale = " + phoneScale + ', target-densitydpi=device-dpi,user-scalable=no">')    } else {        document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi,user-scalable=no">')    }} else {    document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">')}

首先，我們將設(shè)計(jì)稿尺寸定為640。 其次，iphone以及安卓2.3版本以下都可以通過(guò)直接指定viewport的width來(lái)實(shí)現(xiàn)固定尺寸兼容。 再次，針對(duì)安卓2.3以上的非qq瀏覽器及安卓2.3以上的qq瀏覽器v6以下，然后經(jīng)過(guò)計(jì)算得出縮放比例后，寫(xiě)入scale。 
這種做法非常適合微信傳播的短平快的項(xiàng)目，開(kāi)發(fā)速度快，兼容性好是他的主要特點(diǎn)。 缺點(diǎn)也比較明顯，在極少數(shù)老型號(hào)的手機(jī)系統(tǒng)里，可能出偶發(fā)放大再縮小至適應(yīng)尺寸的問(wèn)題，而在手機(jī)橫屏?xí)r，此方式會(huì)偶發(fā)導(dǎo)致頁(yè)面放大后，重新回到豎屏無(wú)法回到原適應(yīng)尺寸。代碼中針對(duì)qq瀏覽器做的兼容，也是為了避免在qq瀏覽器中出現(xiàn)類(lèi)似問(wèn)題。

2）百分比兼容

這種方式，是使用百分比代替原px的做法，一般包括以下步驟： 首先，設(shè)置viewport如以下代碼：

<meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

其次，將頁(yè)面中的css尺寸都改為百分比單位：

.section .sec_bg{width:100%;height:100%;position:absolute;top:0;left:0;}.section .sec_bg_r{width:100%;height:100%;}.section .sec_bg_l{width:44.72%;height:100%;position:absolute;left:0;top:0;}.section .sec_slogn{width:62.23%;position:absolute;top:1.65%;left:0;}.section .sec_question{width:66.02%;margin:0 0 0 22.887%;position:relative;}.section .sec_question_num{width:100%;height:100%;}

這種做法兼容性好，橫豎屏兼容完美，非常適合hybird應(yīng)用，但開(kāi)發(fā)速度慢是它的主要缺點(diǎn)，同時(shí)圖片做為背景的時(shí)候，高度無(wú)法進(jìn)行百分比計(jì)算也是一個(gè)比較麻煩的問(wèn)題。

3）相對(duì)長(zhǎng)度兼容

這種做法是rem代替掉px，在兼容性上和百分比的形式是一樣的，計(jì)算起來(lái)也是一樣的麻煩，不過(guò)目前有些現(xiàn)成的框架可以使用，同時(shí)也有插件支持自動(dòng)轉(zhuǎn)換單位，使用起來(lái)還是挺方便的。在這里就不詳細(xì)描述rem的計(jì)算方式了，推薦下flexible框架，有興趣的童鞋可以去看看。

4）自定義兼容

考慮到固定尺寸做法的兼容性不是很好，而且用途也局限在微信里，所以本項(xiàng)目中沒(méi)有采用這種形式。而百分比兼容方式不適用于有非全屏背景圖的項(xiàng)目，所以這種形式也只能對(duì)它說(shuō)哈哈了。 
本項(xiàng)目采用的方式，如下圖： 

2.2 打包策略

這里所指的打包策略，并不是指前端或后端的文件打包，而是指靜態(tài)頁(yè)面生成后，整個(gè)項(xiàng)目自動(dòng)生成壓縮包，便于部署及發(fā)布。 
本項(xiàng)目中，采用的方式是在保存H5后，在website_html目錄下，會(huì)自動(dòng)生成資源包，而生成的規(guī)則如下：

• 依照賬號(hào)及發(fā)布時(shí)間生成
• 自動(dòng)復(fù)制用戶(hù)上傳的文件到目錄內(nèi)的相應(yīng)子目錄下
• 根據(jù)編輯時(shí)的標(biāo)志位，拉取模板目錄下的相應(yīng)模板資源到相應(yīng)子目錄下
• 拉取相應(yīng)的音頻文件至相應(yīng)子目錄下
• 構(gòu)建php文件，支持分享

該包需要放置在支持php的目錄下，通過(guò)域名直接訪問(wèn)，目前已經(jīng)默認(rèn)支持微信公眾號(hào)的自定義分享，分享的標(biāo)題、描述、圖片即為h5的標(biāo)題、描述、縮略圖。該資源包同時(shí)也兼顧項(xiàng)目列表中的預(yù)覽功能，也就是說(shuō)在項(xiàng)目列表中，點(diǎn)擊預(yù)覽時(shí)，看到的預(yù)覽效果，即是用iframe嵌套的本資源包地址。 
這里沒(méi)考慮多項(xiàng)目資源共享的問(wèn)題，也是為了滿(mǎn)足各個(gè)不同大部門(mén)需要自行部署項(xiàng)目的需求，具體實(shí)現(xiàn)方式是否需要進(jìn)行集中式管理，這個(gè)作為后期問(wèn)題再行討論。

2.3 優(yōu)化策略

優(yōu)化策略中，我們不討論靜態(tài)資源壓縮方面的優(yōu)化方式，而是說(shuō)說(shuō)本項(xiàng)目中，關(guān)于性能優(yōu)化、交互優(yōu)化所采用的方式方法。

1）客戶(hù)端渲染及預(yù)加載

由于H5的構(gòu)成元素以及樣式、動(dòng)畫(huà)等都是以JSON形式存儲(chǔ)在數(shù)據(jù)庫(kù)，解析成dom元素需要一定的時(shí)間，為了避免圖片抖動(dòng)，我們目前采用的方案如下： 

2）初始化配置文件

在畫(huà)布上創(chuàng)建各種元素時(shí)，會(huì)使用到一套初始化的配置，例如文本的內(nèi)容、圖片及svg的尺寸、背景顏色等等。為了便于管理，所用的初始化配置以及編輯模板均采用獨(dú)立的js文件進(jìn)行管理，與Java的xml配置項(xiàng)類(lèi)似。

3）核心json優(yōu)化策略

核心json如何組織，是一個(gè)非常重要的話題，這里我將它的格式單獨(dú)作為一個(gè)策略，著重說(shuō)明。 格式如下：

     {         "total": 4,         "music": "/music/3.mp3",         "value": {             "page1": [                 {                     "type": "text",                     "html": "MEIZU",                     "color": "#000",                     "font-size": "48px",                     "line-height": "1",                     "opacity": "1",                     "rotate": "0",                     "text-align": "center",                     "width": "400px",                     "left": "280px",                     "top": "50px",                     "animation-name": "fadeIn",                     "animation-duration": "0.6s",                     "animation-delay": "0s",                     "z-index": 1,                     "num":1                  }, {                     "type": "bg",                     "opacity": "1",                     "background-color": "rgb(43, 144, 237)",                     "img-src": "/images/bg.jpg",                     "img-width": "800px",                     "img-margin-top": "-20px",                     "img-margin-left": "-55px"                  }              ],          ...         }     }

我將這種按頁(yè)及元素拆分，把CSS屬性、類(lèi)型甚至包括序號(hào)等均放置在同一段json內(nèi)的格式稱(chēng)為對(duì)等json格式。這種格式的優(yōu)點(diǎn)非常明顯，解析起來(lái)可以直接或略微調(diào)整的key作為css名，value即作為css的值，相對(duì)其他格式來(lái)說(shuō)，使用起來(lái)簡(jiǎn)易很多。 
前面我提到過(guò)，每個(gè)元素創(chuàng)建時(shí)，均有默認(rèn)配置項(xiàng)可供使用，而對(duì)于json中已經(jīng)有的元素，會(huì)將它的json與配置項(xiàng)合并后，進(jìn)行解析，這樣可以對(duì)json的條目有一定的優(yōu)化，減少json體積。

4）json解析優(yōu)化策略

對(duì)于編輯器來(lái)說(shuō)，如何把數(shù)據(jù)庫(kù)里存儲(chǔ)的數(shù)據(jù)信息轉(zhuǎn)換成DOM，這個(gè)轉(zhuǎn)換機(jī)制無(wú)疑是其核心內(nèi)容。對(duì)于這塊內(nèi)容，優(yōu)化有以下兩個(gè)方面：

• 經(jīng)度：限制解析范圍

由于json記錄的是所有頁(yè)面的全部元素信息，如果每次修改元素后都要全部重新解析一遍，那消耗內(nèi)存及時(shí)間會(huì)非?？植馈?/dd>

在當(dāng)前需求中，縮略圖與編輯區(qū)的內(nèi)容采用的是聯(lián)動(dòng)機(jī)制，編輯元素時(shí)，縮略圖處也會(huì)同步刷新，而這種機(jī)制是比較費(fèi)資源的，解決辦法是：在尚未改版，去除同步刷新功能前，使用id配合編號(hào)來(lái)對(duì)刷新區(qū)域做出限制，限制越接近底層，對(duì)體驗(yàn)越好。

在第一版中，我們將渲染范圍限制在了頁(yè)的層級(jí)上，接下去的第二版中，將會(huì)將范圍限制在元素層級(jí)上。

• 經(jīng)度：限制總的頁(yè)面數(shù)量

在最初階段，編輯器是沒(méi)有對(duì)頁(yè)面數(shù)量及元素?cái)?shù)量做出任何限制的，但在發(fā)現(xiàn)json已經(jīng)超出2M之后，我們決定對(duì)頁(yè)面數(shù)量做出限制。

根據(jù)經(jīng)驗(yàn)，一般情況下，H5很少能超過(guò)30p，因此暫定頁(yè)面數(shù)量上限為30。

未來(lái)是否會(huì)對(duì)單頁(yè)的元素?cái)?shù)量做出限制，還需要實(shí)際數(shù)據(jù)支撐。

三、技巧篇

3.1 一些“坑”

俗話說(shuō)的好，一個(gè)功能一個(gè)坑，我們開(kāi)發(fā)軟件的過(guò)程，就是不斷挖坑和不斷填坑，這里我將幾個(gè)較為典型的列舉下，希望其他童鞋能夠少踩一點(diǎn)吧。

• transform的空格

當(dāng)我們需要拿到元素的transform值的時(shí)候，例如transform:rotate(1deg)，我們可以通過(guò)正則匹配這個(gè)鍵值對(duì)，并獲取其中的數(shù)字。

問(wèn)題來(lái)了，當(dāng)我們通過(guò)jquery的css方法，動(dòng)態(tài)寫(xiě)入rotate的值時(shí)，他的實(shí)際style顯示為transform: rotate(1deg)，注意到?jīng)]有，在冒號(hào)后面有個(gè)空格！

而通過(guò)拼接html字符串，輸出的DOM上，是沒(méi)有這個(gè)空格的！

在開(kāi)發(fā)中，由于不知道有這個(gè)坑，所以很是花了點(diǎn)時(shí)間來(lái)調(diào)試bug，最終發(fā)現(xiàn)問(wèn)題是在正則匹配上，由于多了一個(gè)空格，匹配不到正確的數(shù)值。

• border系列的值

提到border，大家一定很熟悉了，當(dāng)需要獲取元素的border樣式時(shí)，大家一定會(huì)說(shuō)通過(guò)obj.css('border') 來(lái)獲取。我最初也是這樣以為，但測(cè)試下來(lái)，chrome輸出的是正確的，而且有初始值，然而firefox輸出為空！

firefox最終的解決辦法是分開(kāi)獲取border-radius、border-width、border-color、border-style 這四項(xiàng)，同時(shí)需要獲取其中一邊或者一角的值，如 border-top-left-radius，直接獲取是獲取不到的。

• select的type

select 元素的type屬性是區(qū)分單選和多選的，這個(gè)想必很多的童鞋還是不知道的。這里說(shuō)明下，單選select 輸出為 select-one，多選輸出的是 select-multiple，做這塊功能的時(shí)候要小心。

• font-weight

大家不妨試試看font-weight:bold 在不同的瀏覽器里輸出什么東西，很明確的告訴大家，firefox中輸出的是700...

• line-height

這個(gè)屬性比之font-weight，有過(guò)之而無(wú)不及，無(wú)論是chrome還是firefox，也無(wú)論你設(shè)置的是倍數(shù)還是像素，輸出的都是像素...

如何把像素轉(zhuǎn)換成倍數(shù)，就是這個(gè)屬性引發(fā)的新問(wèn)題了。

本項(xiàng)目中，最終是采用了另一個(gè)值來(lái)記錄這個(gè)line-height，否則各種折算總是有不盡如人意的地方。

3.2 經(jīng)驗(yàn)技巧

• 編輯svg

本項(xiàng)目允許插入指定形狀的svg，允許修改透明度、填充顏色、旋轉(zhuǎn)角度、位置大小等。

一般來(lái)說(shuō)，遇到這個(gè)需求，我們首先想到的是將SVG的代碼直接插入DOM，這也是一種解決方案。其實(shí)還有另一種解決方案，那就是mask。

CSS3里面新增了遮罩圖片層mask，支持使用圖片或SVG作為遮罩，background-color對(duì)其有效，但目前僅支持webkit核心瀏覽器。

這種方式簡(jiǎn)單有效，瀏覽器支持反而不是那么重要，畢竟手機(jī)端上沒(méi)幾個(gè)瀏覽器是用的非webkit內(nèi)核，這個(gè)大家斟酌著使用，起碼我用起來(lái)比插入svg代碼還是簡(jiǎn)單的多了。

• animation 與 transform

想必很多老司機(jī)應(yīng)該知道transform變形與animation動(dòng)畫(huà)是無(wú)法在同一個(gè)元素上共存的吧，但本項(xiàng)目中是需要這兩者共存的，因此我們就需要在animation所屬層內(nèi)新增一個(gè)transform層，專(zhuān)門(mén)用來(lái)承載變形。

• scale 與 zoom

zoom是很久以前在ie瀏覽器上用來(lái)做縮放的一個(gè)屬性，但會(huì)引起頁(yè)面重排，比較費(fèi)資源，然而在某些情況下使用會(huì)有出奇好的效果。

scale是CSS3中的一個(gè)變形屬性，支持CSS3動(dòng)畫(huà)，但是有一個(gè)致命的缺點(diǎn)，縮放的東西會(huì)變的模糊！雖然可以通過(guò)二次修改scale值來(lái)避免模糊問(wèn)題，始終沒(méi)有zoom來(lái)的簡(jiǎn)單。

所以結(jié)合二者的優(yōu)缺點(diǎn)，區(qū)分開(kāi)二者的使用范圍。

如果是涉及到縮放動(dòng)畫(huà)，那無(wú)疑是使用scale比較節(jié)省資源，如果是固定縮放，那zoom還是能夠發(fā)揮一些余熱的。

四、結(jié)束語(yǔ)

策略技巧篇寫(xiě)到這里就結(jié)束了，在接下去的時(shí)間里，可能還會(huì)不定時(shí)對(duì)經(jīng)驗(yàn)技巧做一些更新，對(duì)本編輯器有興趣的童鞋，歡迎留言評(píng)論。