- 項目框架
- React.js + webpack + ES6 + Jquery
- 需求描述
- 使用客戶端的用戶常常喜歡發emoji表情，而在瀏覽器打開網頁版的時候，emoji表情不能正常顯示。在chrome下，emoji表情顯示的是黑白的線框表情。
- 因此需要通過前端來實現所有瀏覽器的emoji表情顯示支持。
- github上關於emoji的開源方案的嘗試
| twemoji | Twitter的開源項目 http://twitter.github.io/twemoji ，是目前應用最廣泛的，很多其它的開源方案都是基於它來實現的。 項目主頁 https://twemoji.maxcdn.com/ 通過script標簽加一個js文件就可以使用twemoji了。 twemoji.parse函數既可以處理文本（將文本中的emoji的code轉變為相應的img標簽）， 也可以處理DOM（通過document.createDocumentFragment()將現有的DOM中的emoji code轉變為img標簽，再通過appenchild加載到頁面上）。 問題：twemoji對DOM的操作不適合React框架，而且只能在window.onload之后執行； 服務器是在國外，表情的圖片加載的比較慢，js有放到cdn上的版本就會好一些。 最后我選用了twemoji的處理文本的方案。之后會考慮將js做些修改，把js和表情圖片放到網站服務器上提高請求速度。 附加一篇簡易的使用教程 https://blog.farrant.me/adding-emoji-support-to-any-website/ |
| emojify | MIT的開源項目 http://hassankhan.github.io/emojify.js/ 同樣是js模塊，但是表情包使用的是一整張大的sheet，而不是分別請求單個表情。一整張真的很大啊！ 有多個不同版本表情包可以切換 具體使用我沒有多做了解 |
| react-emoji | https://github.com/banyan/react-emoji https://www.npmjs.com/package/react-emoji 用於React框架的npm moudle 有兩個版本的表情包 我在嘗試使用的時候發現了以下問題： 需要通過Class的mixins屬性來使用這個模塊，而在ES6的class寫法中是不支持mixins，因此放棄了這個方案
|
| react-emojify | https://github.com/pladaria/react-emojione https://www.npmjs.com/package/react-emojify MIT出品 這是一個支持React ES6的npm moudle 感覺這個還不錯，以后可以更深入的了解和試用一下 |
| 更多類型的emoji開源項目 | https://github.com/showcases/emoji 還有一個程序員哥哥自己把twemoji應用到react的方案 https://blog.datawallet.io/emojis-in-react-d733d3ae120b#.mxsnegimp react-easy-emoji https://github.com/appfigures/react-easy-emoji#readme 感覺也不錯 |