Skip to content

Commit 7fc585a

Browse files
06wj06wj
committed
feat: add utils/browser
1 parent 38f3b6d commit 7fc585a

File tree

4 files changed

+178
-8
lines changed

4 files changed

+178
-8
lines changed

‎src/util/Ticker.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -10,15 +10,15 @@
1010
* @param {Number} fps The fps of ticker.
1111
* @module hilo/util/Ticker
1212
* @requires hilo/core/Class
13-
* @requires hilo/core/Hilo
13+
* @requires hilo/util/browser
1414
*/
1515
/**
1616
* @language=zh
1717
* @class Ticker是一个定时器类。它可以按指定帧率重复运行，从而按计划执行代码。
1818
* @param {Number} fps 指定定时器的运行帧率。
1919
* @module hilo/util/Ticker
2020
* @requires hilo/core/Class
21-
* @requires hilo/core/Hilo
21+
* @requires hilo/util/browser
2222
*/
2323
var Ticker = Class.create(/** @lends Ticker.prototype */{
2424
constructor: function(fps){
@@ -53,7 +53,7 @@ var Ticker = Class.create(/** @lends Ticker.prototype */{
5353

5454
var self = this, interval = this._interval,
5555
raf = window.requestAnimationFrame ||
56-
window[Hilo.browser.jsVendor + 'RequestAnimationFrame'];
56+
window[browser.jsVendor + 'RequestAnimationFrame'];
5757

5858
var runLoop;
5959
if(useRAF && raf && interval < 17){
@@ -84,7 +84,7 @@ var Ticker = Class.create(/** @lends Ticker.prototype */{
8484
stop: function(){
8585
if(this._useRAF){
8686
var cancelRAF = window.cancelAnimationFrame ||
87-
window[Hilo.browser.jsVendor + 'CancelAnimationFrame'];
87+
window[browser.jsVendor + 'CancelAnimationFrame'];
8888
cancelRAF(this._intervalId);
8989
}
9090
else{

‎src/util/browser.js

+168
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,168 @@
1+
/**
2+
* Hilo
3+
* Copyright 2015 alibaba.com
4+
* Licensed under the MIT License
5+
*/
6+
7+
/**
8+
* @language=en
9+
* @class Browser feature set
10+
* @static
11+
* @module hilo/util/browser
12+
*/
13+
/**
14+
* @language=zh
15+
* @class 浏览器特性集合
16+
* @static
17+
* @module hilo/util/browser
18+
*/
19+
var browser = (function(){
20+
var ua = navigator.userAgent;
21+
var doc = document;
22+
var win = window;
23+
var docElem = doc.documentElement;
24+
25+
var data = /** @lends browser */ {
26+
/**
27+
* 是否是iphone
28+
* @type {Boolean}
29+
*/
30+
iphone: /iphone/i.test(ua),
31+
32+
/**
33+
* 是否是ipad
34+
* @type {Boolean}
35+
*/
36+
ipad: /ipad/i.test(ua),
37+
38+
/**
39+
* 是否是ipod
40+
* @type {Boolean}
41+
*/
42+
ipod: /ipod/i.test(ua),
43+
44+
/**
45+
* 是否是ios
46+
* @type {Boolean}
47+
*/
48+
ios: /iphone|ipad|ipod/i.test(ua),
49+
50+
/**
51+
* 是否是android
52+
* @type {Boolean}
53+
*/
54+
android: /android/i.test(ua),
55+
56+
/**
57+
* 是否是webkit
58+
* @type {Boolean}
59+
*/
60+
webkit: /webkit/i.test(ua),
61+
62+
/**
63+
* 是否是chrome
64+
* @type {Boolean}
65+
*/
66+
chrome: /chrome/i.test(ua),
67+
68+
/**
69+
* 是否是safari
70+
* @type {Boolean}
71+
*/
72+
safari: /safari/i.test(ua),
73+
74+
/**
75+
* 是否是firefox
76+
* @type {Boolean}
77+
*/
78+
firefox: /firefox/i.test(ua),
79+
80+
/**
81+
* 是否是ie
82+
* @type {Boolean}
83+
*/
84+
ie: /msie/i.test(ua),
85+
86+
/**
87+
* 是否是opera
88+
* @type {Boolean}
89+
*/
90+
opera: /opera/i.test(ua),
91+
/**
92+
* 是否支持触碰事件。
93+
* @type {String}
94+
*/
95+
supportTouch: 'ontouchstart' in win,
96+
97+
/**
98+
* 是否支持canvas元素。
99+
* @type {Boolean}
100+
*/
101+
supportCanvas: doc.createElement('canvas').getContext != null,
102+
/**
103+
* 是否支持本地存储localStorage。
104+
* @type {Boolean}
105+
*/
106+
supportStorage: false,
107+
108+
/**
109+
* 是否支持检测设备方向orientation。
110+
* @type {Boolean}
111+
*/
112+
supportOrientation: 'orientation' in win,
113+
114+
/**
115+
* 是否支持检测加速度devicemotion。
116+
* @type {Boolean}
117+
*/
118+
supportDeviceMotion: 'ondevicemotion' in win
119+
};
120+
121+
//`localStorage` is null or `localStorage.setItem` throws error in some cases (e.g. localStorage is disabled)
122+
try{
123+
var value = 'hilo';
124+
localStorage.setItem(value, value);
125+
localStorage.removeItem(value);
126+
data.supportStorage = true;
127+
}catch(e){}
128+
129+
/**
130+
* 浏览器厂商CSS前缀的js值。比如：webkit。
131+
* @type {String}
132+
*/
133+
var jsVendor = data.jsVendor = data.webkit ? 'webkit' : data.firefox ? 'webkit' : data.opera ? 'o' : data.ie ? 'ms' : '';
134+
/**
135+
* 浏览器厂商CSS前缀的css值。比如：-webkit-。
136+
* @type {String}
137+
*/
138+
var cssVendor = data.cssVendor = '-' + jsVendor + '-';
139+
140+
//css transform/3d feature dectection
141+
var testElem = doc.createElement('div'), style = testElem.style;
142+
/**
143+
* 是否支持CSS Transform变换。
144+
* @type {Boolean}
145+
*/
146+
var supportTransform = style[jsVendor + 'Transform'] != undefined;
147+
148+
/**
149+
* 是否支持CSS Transform 3D变换。
150+
* @type {Boolean}
151+
*/
152+
var supportTransform3D = style[jsVendor + 'Perspective'] != undefined;
153+
if(supportTransform3D){
154+
testElem.id = 'test3d';
155+
style = doc.createElement('style');
156+
style.textContent = '@media ('+ cssVendor +'transform-3d){#test3d{height:3px}}';
157+
doc.head.appendChild(style);
158+
159+
docElem.appendChild(testElem);
160+
supportTransform3D = testElem.offsetHeight == 3;
161+
doc.head.removeChild(style);
162+
docElem.removeChild(testElem);
163+
}
164+
data.supportTransform = supportTransform;
165+
data.supportTransform3D = supportTransform3D;
166+
167+
return data;
168+
})();

‎src/view/CacheMixin.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -11,17 +11,17 @@ var _cacheCanvas, _cacheContext;
1111
* @static
1212
* @mixin
1313
* @module hilo/view/CacheMixin
14-
* @requires hilo/core/Hilo
1514
* @requires hilo/view/Drawable
15+
* @requires hilo/util/browser
1616
*/
1717
/**
1818
* @language=zh
1919
* @class CacheMixin是一个包含cache功能的mixin。可以通过 Class.mix(target, CacheMixin) 来为target增加cache功能。
2020
* @static
2121
* @mixin
2222
* @module hilo/view/CacheMixin
23-
* @requires hilo/core/Hilo
2423
* @requires hilo/view/Drawable
24+
* @requires hilo/util/browser
2525
*/
2626
var CacheMixin = /** @lends CacheMixin# */ {
2727
_cacheDirty:true,
@@ -49,7 +49,7 @@ var CacheMixin = /** @lends CacheMixin# */ {
4949
* 更新缓存
5050
*/
5151
updateCache:function(){
52-
if(Hilo.browser.supportCanvas){
52+
if(browser.supportCanvas){
5353
if(!_cacheCanvas){
5454
_cacheCanvas = document.createElement('canvas');
5555
_cacheContext = _cacheCanvas.getContext('2d');

‎src/view/Stage.js

+3-1
Original file line numberDiff line numberDiff line change
@@ -33,6 +33,7 @@
3333
* @requires hilo/renderer/CanvasRenderer
3434
* @requires hilo/renderer/DOMRenderer
3535
* @requires hilo/renderer/WebGLRenderer
36+
* @requires hilo/util/browser
3637
* @property {HTMLCanvasElement|HTMLElement} canvas The canvas the Stage is related to. It can be a canvas or a div element, readonly!
3738
* @property {Renderer} renderer Stage renderer, readonly!
3839
* @property {Boolean} paused Paused Stage rendering.
@@ -67,6 +68,7 @@
6768
* @requires hilo/renderer/CanvasRenderer
6869
* @requires hilo/renderer/DOMRenderer
6970
* @requires hilo/renderer/WebGLRenderer
71+
* @requires hilo/util/browser
7072
* @property {HTMLCanvasElement|HTMLElement} canvas 舞台所对应的画布。它可以是一个canvas或一个普通的div。只读属性。
7173
* @property {Renderer} renderer 舞台渲染器。只读属性。
7274
* @property {Boolean} paused 指示舞台是否暂停刷新渲染。
@@ -281,7 +283,7 @@ var Stage = Class.create(/** @lends Stage.prototype */{
281283
}
282284

283285
//fix android: `touchmove` fires only once
284-
if(Hilo.browser.android && type === 'touchmove'){
286+
if(browser.android && type === 'touchmove'){
285287
e.preventDefault();
286288
}
287289
},

0 commit comments

Comments
 (0)