rockonyu / rockonyu.github.io Goto Github PK
View Code? Open in Web Editor NEW放些有的沒的平凡瑣事
Home Page: https://rockonyu.github.io
放些有的沒的平凡瑣事
Home Page: https://rockonyu.github.io
最近專案寫樣式遇到一個很有趣的情境,
我在 inline-block 元素設定 overflow:hidden 結果竟然使旁邊的元素下移!
怎麼想都想不通,上網查詢才發現跟元素的 baseline 有關係,
若使用這種方式需要一併設定 vertical:middle
。
最近收到了一些建議:不要直接使用 array 的 forEach
或 map
的 API,理由是效能不佳與相容舊版瀏覽器,建議調整的做法是透過 underscore 或是 lodash 等第三方套件的 each
或 map
遍歷陣列。
在網路上搜尋了一些文章,真的發現有類似的說法,該篇文章指出使用 forEach
甚至比單純的 for
迴圈慢上了 95% 😱。
這讓我覺得有些好奇瀏覽器原生實作的 API 為什麼會比第三方套件慢上許多,理論上應該各間廠商都會盡量優化這類處理資料的 API 才是。
在閱讀 underscore 原始碼後發現了一些蹊蹺,其實作方式就是改用 for
迴圈來遍歷陣列,因此問題逐漸明朗,並非第三方實作的比較快,而是普遍認為操作陣列透過 for
會相對 array.prototype.forEach
快上許多。
因此我透過 https://jsben.ch 測試了兩者的差異,在 mac 電腦的 chrome 跑出以下成績:
畢竟 for 迴圈也是瀏覽器原生的 API,兩者相較起來速度提升約 50%,其中最快的 for (cache length) 會在執行前將陣列的長度一併存到區域變數,實作方式大約如下:
for(let i = 0, len = array.length; i < len; i++) { ... }
將將!以後大家請愛用 for
迴圈......嗎!?
在回家的路上順手用 iPhone 的 safari 重新跑了測試,卻發現完全不同的結果:
在 iPhone 的
array.prototype.forEach
將近比for
快上 75% 啊!
真的應該用 for 迴圈取代所有 array 的輪詢操作嗎?以下是我個人的看法:
forEach
或 map
:理由是這兩者效能的差異是偽議題,我認為除非超巨量資料處理,兩者間的差距可以忽略,反過來說全部使用 for
也不會讓你的應用程式效能提升一個檔次,使用 array 的 API 能夠讓邏輯處理的意圖更加明顯。angular-translate 是一套 angularJS 處理多語系的套件,功能大致上是頁面上不直接寫文字,改透過 KEY 去換取當前語系的字樣。
最近有個需求是要取得當前頁面用到哪些 KEY,原本在查要如何監測 translateChangeSuccess
事件,查到後來發現套件本身就提供了一個很方便的功能,叫做 postProcess (後處理)。
使用方式也很簡單,在 angular-translate 的設定檔同時設定:
$translateProvider.postProcess(
(
translationId,
translation,
interpolatedTranslation,
params,
lang
) => {
console.log(translation);
return '<span style="color: #cccccc">' + translationId + '(' + lang + '):</span> ' +
(interpolatedTranslation ? interpolatedTranslation : translation);
}
)
簡單紀錄各參數代表的意義:
translationId
頁面使用的多語系 KEY
translation
透過 KEY 取得當前多語系的字串
interpolatedTranslation
透過 KEY 取得當前多語系的字串 (包含 params)
params
多語系字串間插入的參數
lang
這個沒特別看,字面上意思應該是當前語系 XD?
其餘部分可以參考 JSBin
這是是螞蟻金服內部團隊撰寫的前端入門指南,整理的非常用心,用力頂一下。
angularJS 本身針對在地化提供很漂亮的設定方式 (裝飾者模式?),簡單 google 後查到兩種做法。
我們公司因為希望幣別格式由後端控制,因此選擇第二種做法:
angular
.module('myApp')
.config(['$provide', ($provide) => {
$provide.decorator('$locale', ['$delegate', function ($delegate) {
$delegate.DATETIME_FORMATS.medium = "yyyy/MM/dd HH:mm";
$delegate.DATETIME_FORMATS.mediumDate = "yyyy/MM/dd";
$delegate.DATETIME_FORMATS.mediumTime = "HH:mm";
$delegate.NUMBER_FORMATS.CURRENCY_SYM = "$";
$delegate.NUMBER_FORMATS.PATTERNS[1].maxFrac = 0;
$delegate.NUMBER_FORMATS.PATTERNS[1].posPre = '\u00A4';
$delegate.NUMBER_FORMATS.PATTERNS[1].negPre = '-\u00A4';
$delegate.NUMBER_FORMATS.PATTERNS[1].negSuf = '';
return $delegate;
}]);
}]
);
這是完整的範例可以參考:
https://jsbin.com/hulaxewuli/edit?html,output
簡單的範例演示如何在 AngularJS 專案使用 ReactJS 元件
我只用了 presentational component,
因為如果 React 跟 AngularJS 各自管理 state 會有點太複雜。
網路上還有很多其他的輪子寫得更好,例如 react2angular
,
但我想用簡單的範例 (ng 官網 TodoApp) 驗證在某些情境,不需要那麼大的輪子。
React 與 AngularJS 之間會是 driectives 透過溝通:
https://jsbin.com/cezapuvaga/1/edit?html,js,output
DOM CSS、JS 的底層運作
https://docs.google.com/presentation/d/1xjhezZwFWJHQQ2dAmBx68IDUNxlt7gcSFpAj11V3Jq4/edit?usp=sharing
RxJS
https://docs.google.com/presentation/d/16QnKd535kJ2OWV6h0kkE8JPXirQ0AaMkA2YaWNHuDyg/edit?usp=sharing
HTML 最佳實踐
https://docs.google.com/presentation/d/1-Mu4Q-qxZfU-AkJ-9zRlbmuWpjzg8wQ-aKADNfwopY8/edit?usp=sharing
CSS 最佳實踐
https://docs.google.com/presentation/d/1-j8ZcYaEdQysF_KBnW9S3aP9GAvWZvjSBIOAZfrGsew/edit?usp=sharing
JS 最佳實踐
https://docs.google.com/presentation/d/1o-3otZr2q_P3CfYeeMFMSip8Mo2U0X_Foemdbs2JJ8g/edit#slide=id.p
在 JS 函数式编程指南 第一部份提到很多函數編程的好處,
並且在第六章實作了函數編程的網頁應用,內容相當有趣,將其記錄在 repl.it
參考自:https://llh911001.gitbooks.io/mostly-adequate-guide-chinese/content/ch4.html
curry 的概念:傳遞一部分的參數給函數,並返回另一個函數去處理剩下的參數
var add = x => y => x + y;
var increment = add(1);
以下是原文提供 curryify 的 函數,也可以從 lodash-fp 套件裡取得。
var curry = require('lodash').curry;
var match = curry(function(what, str) {
return str.match(what);
});
var replace = curry(function(what, replacement, str) {
return str.replace(what, replacement);
});
var filter = curry(function(f, ary) {
return ary.filter(f);
});
var map = curry(function(f, ary) {
return ary.map(f);
});
一個簡單但非常重要的模式:策略性把要操作的數據放到最後參數
用 map
包裹參數是單個元素的函數,就能把它轉換為參數為陣列的函數。
var getChildren = function(x) {
return x.childNodes;
};
var allTheChildren = map(getChildren);
// allTheChildren([..., ...])
通常也不定義操作陣列的函數,因為用 curryify 的 map
包裹即可得到結果。
Progressive Web Apps 旨在提供更好的網頁瀏覽體驗。
PWA 可以直接加入手機桌面、相對於 Native App 容量非常的小,在 android 上是直接安裝一個 apk 到手機並原生開啟 (不透過 chrome 瀏覽器 app)。
Twitter 約 80% 用戶透過 mobile 裝置瀏覽網頁,並聲稱支援 PWA 後增加了 65% 頁面 session 瀏覽量。
PWA 是跨瀏覽器的協議,並非只有 chrome 瀏覽器支援。
Manifest Generator 可以生成網站中繼檔以部分支援 PWA ,例如加入手機桌面的功能。
不同瀏覽器要 Push 通知給用戶差異很大,講者建議透過 Firebase cloud messaging in JavaScript 實踐。
http://bit.ly/pwa-media 用這個網站體驗 PWA 與媒體互動 (目前 android 限定)
瀏覽器的 navigator.share API 會喚起手機 Native 的分享對話框。
講者分享了 workboxjs 提供對離線網站的支援,可以簡單的將資源緩存在本地。
「Workbox is a set of service worker libraries that making build progressive web apps easy.」
AMP 是為了加速行動裝置的網頁載入速度,以提升使用者體驗而生的專案。
網頁需要改用 AMP-HTML 語法,以獲得 AMP 加速網頁顯示。
讀取速度低落多數原因跟 JS、CSS 與圖片有關,介紹了 AMP 的解決方案:
在世界各地都有 AMP 的 Server 以提高在世界各地的連線速度,點進 AMP 網頁會連到一個 google 預先載入的網頁 (由 google host 的站台)。
大絕招:將某些尚未有 AMP 元件的功能放入網頁,可以使用 ,例如 google map 或某些第三方的追蹤碼等等。
的限制:https only、不可用於顯示廣告
實作了 AMP 後,行動版 google 搜尋結果的名稱旁邊會出現閃電符號,代表該頁面支援 AMP 網頁。
Yahoo 拍賣宣稱實作 AMP 頁面後,跳出率降了三成,交易量上升三成。
個人感想:不能用 JavaScript 晴天霹靂,但實作 AMP 的店家比想像中還多很多,提供一些關鍵字,讓大家在「行動裝置」透過 google 搜尋試試看 AMP 的威力。
Google 關鍵字:「nintendo switch yahoo」、「戴資穎」
參考自:https://llh911001.gitbooks.io/mostly-adequate-guide-chinese/content/ch3.html
純函數代表相同的輸入,永遠會得到相同的輸出,而且沒有任何可被觀察到的副作用。
這是兩個陣列函數在 MDN 上的說明:
Array.prototype.slice()
方法會回傳一個新陣列物件,為原陣列選擇之 begin 至 end(不含 end)部分的淺拷貝(shallow copy),而原本的陣列將不會被修改。
Array.prototype.splice()
方法可以藉由刪除既有元素並/或加入新元素來改變一個陣列的內容。
函數編程討厭會異動原本變數內容的方法,比較偏好使用前者 slice
。
概觀來講,只要是跟函數外部環境發生的交互就都是副作用。
_.memoize
等方式緩存A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.