Leaflet Open source Map Library Source reading notes (c)-Browser & mobile device Judgment (Browser.js) (by Vczero)

First, the source code structure

Following the previous blog about the structure of the entire leaflet, here to re-paste a picture (SRC-and core), the straight point of view, such as. This blog mainly study the core folder source code brower.js. Because afraid of space is larger, so class.js,events.js,handler.js,util.js follow-up open bo. They are the backbone (backbone) of the entire framework and the most basic part.

Second, Browser.js: browser-compatible infrastructure builders

Cited Leaflet:l.browser handles different Browser and feature detections for internal leaflet use.

On the source code, the source is too long, here folded up, specific as follows:

1(function () {2 3     varUA =navigator.userAgent.toLowerCase (),4Doc =Document.documentelement,5 6ie = ' ActiveXObject 'inchwindow,7 8WebKit = Ua.indexof (' WebKit ')!==-1,9PHANTOMJS = Ua.indexof (' phantom ')!==-1,TenAndroid23 = Ua.search (' Android [23] ')!==-1, OneChrome = Ua.indexof (' Chrome ')!==-1, A  -Mobile =typeofOrientation!== ' undefined ', -Mspointer = navigator.mspointerenabled && navigator.msmaxtouchpoints &&!window. Pointerevent, thepointer = (window. Pointerevent && navigator.pointerenabled && navigator.maxtouchpoints) | |Mspointer, -  -Ie3d = ie && (' transition 'inchDoc.style), -Webkit3d = (' Webkitcssmatrix 'inchwindow) && (' M11 'inch NewWindow. Webkitcssmatrix ()) &&!Android23, +gecko3d = ' mozperspective 'inchDoc.style, -Opera3d = ' otransition 'inchDoc.style; +  A  at     varRetina = ' Devicepixelratio 'inchWindow && window.devicepixelratio > 1; -  -     if(!retina && ' Matchmedia 'inchwindow) { -         varmatches = Window.matchmedia (' (min-resolution:144dpi) '); -Retina = Matches &&matches.matches; -     } in  -     varTouch =!window. L_no_touch &&!phantomjs && (pointer | | ' Ontouchstart 'inchwindow | | to(Window. Documenttouch && Documentinstanceofwindow. Documenttouch)); +  -L.browser = { the Ie:ie, *Ielt9:ie &&!Document.addeventlistener, $ Webkit:webkit,Panax NotoginsengGecko: (Ua.indexof (' Gecko ')!==-1) &&!webkit &&!window.opera &&!ie, -Android:ua.indexOf (' Android ')!==-1, the Android23:android23, + Chrome:chrome, ASafari:!chrome && ua.indexof (' Safari ')!==-1, the  + Ie3d:ie3d, - Webkit3d:webkit3d, $ Gecko3d:gecko3d, $ Opera3d:opera3d, -Any3d:!window. L_disable_3d && (Ie3d | | webkit3d | | gecko3d | | opera3d) &&!Phantomjs, -  the Mobile:mobile, -Mobilewebkit:mobile &&WebKit,WuyiMobilewebkit3d:mobile &&Webkit3d, theMobileopera:mobile &&Window.opera, -  WuTouch:!!Touch, -Mspointer:!!Mspointer, AboutPointer:!!Pointer, $  -Retina:!!Retina -     }; -  A}());

View Code

Browser.js do one thing is to identify the user's browser type, here in fact there is a lot of narration, because is to study the source of leaflet, therefore, from the source of Browser.js said. Generally do the browser base judgment method for UA judgment (however, a lot of browsers do not make up for the disguise, like Chrome,like WebKit ... ), attribute characterization, rendering engine judgment.

var ua = Navigator.userAgent.toLowerCase (); Window.navigator.userAgent, using the browser's UA judgment, all of this is converted to lowercase. For example, the judgment in Chrome.

　　

var ie = ' activexobject ' in window;//equivalent!! window[' ActiveXObject '), determines whether the global Window object has ActiveXObject, and if so, is the IE type of browser. If you judge under Chrome.

　　

varUA = Navigator.userAgent.toLowerCase (),//User Agent LowercaseWebKit= Ua.indexof (' WebKit ')!==-1,//whether it is the kernel of WebKitPHANTOMJS = Ua.indexof (' phantom ')!==-1,//is the Phantomjs rendered engine core, similar to node. JS's service-side JS, can be used to grab packets, pre-render, page snapshots, etc.Android23 = Ua.search (' Android [23] ')!==-1,//2.3 or more versions of mobile AndroidChrome = Ua.indexof (' Chrome ')!==-1;//whether it is the chrome kernelMobile=typeofOrientation!== ' undefined ',//Whether you can rotate the screen horizontally to determine whether it is a mobile device

Mspointer = navigator.mspointerenabled && navigator.msmaxtouchpoints &&!window. Pointerevent;

navigator.mspointerenabled determine if the browser supports Mspointer events, Navigator.msmaxtouchpoin TS determines the user's device supports multi-touch; window. Pointerevent determines whether trigger pointer events are supported. About window. Pointerevent, which has a write: Note that the pointer event function detection cannot be used as an indicator to determine whether the device itself supports touch or pen input.   the pointerevent   Property checks only if the platform triggers pointer events, regardless of the hardware present in the system. To test touch and multi-touch support, use   maxtouchpoints   properties. because the  pointerenabled   Property have been deprecated in the Pointer Events specification, the recommended-to-detect event support IS-to-check for the  pointerevent  interface:

if (window. pointerevent) {    O.addeventlistener ("Pointerdown"Elseif(window). mspointerevent) {    O.addeventlistener ("Mspointerdown")

So there is: pointer = (window. Pointerevent && navigator.pointerenabled && navigator.maxtouchpoints) | | Mspointer; Gets the type of the pointer.

Doc =in innew window. Webkitcssmatrix ()) &&!   inDoc.style; Opera 3d

Here, let's look at, Document.documentElement.style, the properties that support CSS.

var retina = ' devicepixelratio ' in Window && window.devicepixelratio > 1;//device pixel ratio, if you need to know, take a look at this article: c1> device pixels are simpler than devicepixelratio.

See the following code for the media query for Windows, if you need to know about the extension, you can visit this: Mozilla wiki.

if (!retina && ' matchmedia ' in window) {
var matches = Window.matchmedia (' (min-resolution:144dpi) ');
Retina = matches && matches.matches;
}

Verification of touch Devices:

var  in Window | | instanceof window .              Documenttouch));

Third, the browser comprehensive judgment

Paste the source code, a look at the cicada.

L.browser ={ie:ie, Ielt9:ie&&!Document.addeventlistener, Webkit:webkit, Gecko: (Ua.indexof (' Gecko ')!==-1) &&!webkit &&!window.opera &&!ie, android:ua.indexOf (' Android ')!==-1, Android23:android23, Chrome:chrome, Safari:!chrome && ua.indexof (' Safari ')!==-1, Ie3d:ie3d, Webkit3d:webkit3d, Gecko3d:gecko3d, Opera3d:opera3d, Any3d:!window. L_disable_3d && (Ie3d | | webkit3d | | gecko3d | | opera3d) &&!Phantomjs, Mobile:mobile, Mobilewebkit:mobile&&WebKit, Mobilewebkit3d:mobile&&Webkit3d, Mobileopera:mobile&&Window.opera, Touch:!!Touch, Mspointer:!!mspointer, pointer:!!pointer, retina:!!Retina};

Iv. Summary

(1) The front-end API needs to be compatible with many versions of the browser, then the browser's judgment is always unavoidable, no judgment can be perfect, we generally start from the demand.

(2) Prepare this blog to study the whole core of the source code, but afraid of space is too long, decided to more than a few.

(3) Read the source code to expand their knowledge, reading system, read the source extension of the boundary system.

(4) later: About object-oriented class reading, events mechanism, event processing, tool class, geographic object model, map projection, basic Map object construction ....

Leaflet Open source Map Library Source reading notes (iii)-Browser & mobile device Judgment (Browser.js) (by Vczero)