前端實現網絡小說閱讀器

昨天晚上在羣裏交流各類腦動大開的題目，我順手也提了一個問題： JS如何作「字符分頁「

原意是源於我4年前公司項目，我負責開發1年的樣子，後來各類緣由就沒有而後了…

http://reader.appcarrier.com/ 

   

以上圖片是手機上的截圖，Metro風格當前但是風靡一時，軟件自己是相似如今的」追書神器」

經過書名，在網絡上搜索到對應的內容，以後保存到本地數據庫。在經過JS獲取數據再處理

本身裝好測了下，貌似下載服務器已經掛了~

 

只翻到舊版的代碼，預覽效果

 

 

程序採用PhoneGap打包的，數據採集是用底層完成的，其他的都是經過前端處理

規定：採集到一本書內容，按照書的章節分數據塊，寫入到本地數據庫中，數據庫能夠用SQLite，webkit是支持的

前端層面須要處理的幾個重要問題：

• 字符分頁：一個頁面到底能夠容納多少字符（文字，符號，空格等等）
• 性能問題：如何快速生成指定頁面
• 模擬翻頁：相似ibooks翻頁效果，頁正反頁面都有文字

 

因爲時間過久了，我也沒仔細去查閱代碼了，這裏只能憑記憶描述下

 

原理：

要實現相似於圖書的效果，首先要進行的，就是分頁操做。也就是說，須要把一段長長的文字，分解成若干個頁面。

 

分頁背景知識：

表面上來看，分頁操做並不複雜，但實際上分頁是很是複雜的功能，這個想靠js去計算文字佔用的空間，難，很是難

我在問的時候，你們腦洞打開，好比：用一個不換行的寬度100%的容器，計算何時scrollwidth 大於width，那麼就能夠計算出  標點須要多少個填滿，等等之類的答案

如今站在個人理解層次簡單描述下：

純文本：

純文本是最簡單的狀況。純文本的高度是固定的，所以，只要能計算出每一行的高度，就能夠進行分頁。可是，中文排版也不是一件簡單的事情，由於中文的標點是頗有講究的：

• 某些標點不能出如今行的開頭，例如「逗號」就不該該出如今行首。有些標點不能出如今行的結尾，例如「正引號」就不該該出如今行的結尾。這個叫作標點的「避頭尾」。
• 若是出現連續的標點，例如冒號後面跟着引號，那麼這兩個標點不該該佔據2個字符的位置，而應該合併起來佔據一個字符的位置。這個叫作標點的「壓縮」。

html格式：

對於html格式，狀況就複雜不少，所以此時行距不固定了，段前、段後間距多是任意值，並且每行的文字的字體、字號都有可能不同，這樣，計算每一行的高度，就要考慮到種種細微的因素。

若是中間再有圖像，狀況就會進一步複雜。圖像的高度，圖像和文字的邊距等等。

服務器計算：

若是在服務器裏面，提早計算好分頁呢？也有問題， 由於要適合不一樣的手機分辨率，軟件自己還能夠設置字體的大小，等等

 

所以：

• 即便是純文本，高度的計算也是有一個複雜度的。固然，有些軟件可能不考慮這些中文特性，胡亂計算。
• 無論採用底層的Java語言，仍是採用客戶端的Javascript語言，要實現精緻的分頁算法都是很難的。
• 可能有人想問，若是分頁分得很差會出現什麼狀況。最多見的，是最下面以行，某些文字只能顯示「半行」。並且顯而易見，出現半行的概率，遠遠大於正好是整行的概率。

總結：經過純理論去計算分頁，和本身寫一個文字排版軟件區別已經不大了，這毫不是短時間的工做可以完成的。何況我也寫不出~

 

HTML對分頁的支持

HTML並不直接支持分頁。

Adobe正在建議一個新的CSS樣式，稱爲CSS Region（http://www.adobe.com/devnet/html5/articles/css3-regions.html）。

若是這個功能開發成功，就能實現相似於排版軟件的排版效果。聽說這個功能在新的Chrome測試版中正在開發中，但什麼時候能投入使用並穩定運行，仍是未知數。

html5新增長了一個功能，就是分欄（columns）。分欄功能能夠製做相似於Word中的分欄效果

html5的分欄效果以及CSS代碼

若是還不瞭解分欄，則請閱讀以下文章：

•  http://www.css3.info/preview/multi-column-layout/
•  http://www.w3schools.com/css3/css3_multiple_columns.asp

分欄雖然不如CSS region那樣靈活，但勉強也可以在不一樣的欄之間，實現文字的拆分。若是咱們把每一個欄設置成恰好一頁的話，就初步模擬了分頁的效果。

 

分欄功能的性能及動態結構

雖然分欄功能初步可以模擬分頁效果，但還存在着很多問題：

1. 分欄造成的頁面，是連續排列的。也就是說，能夠支持滑動操做，但並不能支持「翻頁」效果。
2. 若是欄目過多時，性能會不好。（大約20~30個欄目會有明顯性能降低）

咱們先討論第2個問題，就是如何動態切換分欄中的內容。

因爲分欄存在性能問題，所以，咱們不可能把很長的內容，所有用分欄排列（請注意，這是咱們後面進行了複雜設計的緣由。若是分欄沒有性能問題，天然也不須要那麼複雜的設計）。

因爲性能問題，咱們不能把全部須要的內容，所有放在分欄結構中，只能一段一段地顯示在欄目中。也就是說，用於構建分欄的段落，是動態變化的。

在這種狀況下，對於分頁的方式而言，最大的問題，是前面的段落，會影響後面的段落的排列。

考慮以下圖所示的狀況。

圖中兩個段落在分欄狀態下排列

圖中，藍色段落充滿了一個欄後，會擠出一些內容到下一欄。而綠色段落，會從藍色段落結束的地方繼續排列。

如今假設動態切換時，藍色段落被刪除，而在綠色段落後面，增長了紅色段落。此時，不能讓綠色段落從欄首開始排列，必須在綠色段落的開始，給出一個空白的間隔出來，

如圖所示。

圖中紅色段落的排版

也就是說，雖然藍色段落被刪除，可是其對分欄排版的影響，仍然須要計算在內。就上圖來講，第1個欄能夠徹底忽略，由於不影響後面的排版。第2欄的上半部分，也就是藍色段落的「剩餘影響」，在排版仍然要考慮在內。

如何計算每一個段落對後面的段落的「剩餘影響」呢？幸虧在分欄模式下，提供了獲取每一個段落的高度的功能，就是用zepto的height()函數就能夠獲取高度。獲取了高度以後，除以欄目高度的餘數，就是「剩餘影響」。

所以，精確地計算出每一個段落的高度，就能夠實現動態的分欄排版。

 

以上就是基於對分欄實現排版的理論，以後涉及

• 分欄功能對翻頁的支持
• 分頁的實現
• 翻頁的效果
• 性能優化

等等這些知識點，有空再寫吧！