A few aspects that a JavaScript engineer must master (turn)

As a JavaScript engineer, when writing a tool library, in general, you need to provide the following modules.

Core module: core.js

$namespace Register Namespaces:

$namespace (' Human.software.dom '); Window.human.software.dom

$package multi-module coexistence, introducing

For a module file Event.js $pack (function (TT) {     //Here the TT is the top-level namespace     //Introducing other modules     var $D = tt.type,         $S = Tt.support;      code here;     var event = {...};      Exposing the Access interface     tt.event = event;});

Of course I don't object to using AMD, or CMD, to handle dependencies.

function BIND,AOP Support:

Function.prototype.bind = function (context) {...} Function.prototype.after = function (f) {...} Function.prototype.before = function (f) {...} Function.prototype.once = function () {...}

Variable Type detection module:

$type (foo)  //returns variable type

Some of the DOM operations:

Find: $id (), $tagname (), $className (), $closest (); Dom Operation: $append (), $prepend (), $after (), $before (); Style actions: $addClass (), $removeClass (), $toggleClass, $css (getter [, setter]) feature detection: $getVendorPropertyName ()//producer prefix,  $ Issupprot3d ()//not much to say

For today's browsers, the vendor prefix detection can be used as a standalone module for ease of use:

$prefix = {             dom:dom,             lowercase:pre,             css: '-' + pre + '-',             js:pre         };

Browser type detection module:

B: (function () {var d = {}, c = navigator.useragent; D.win = c.hasstring ("Windows") | |         C.hasstring ("Win32");         D.ie6 = c.hasstring ("MSIE 6") &&!c.hasstring ("MSIE 7") &&!c.hasstring ("MSIE 8");         D.ie7 = c.hasstring ("MSIE 7");         D.IE8 = c.hasstring ("MSIE 8");         d.ie = c.hasstring ("MSIE"); D.opera = Window.opera | |         C.hasstring ("Opera");         D.safari = c.hasstring ("WebKit");         D.chrome = c.hasstring ("Chrome");         D.ipad = c.hasstring ("ipad");         D.mac = c.hasstring ("Mac");         D.firefox = c.hasstring ("Firefox"); Return d}) (),

Cookie operation:

$setCookie (...), $getCookie (...),//Some additional such as://expires, PATH, domain

Datetime,number Operation:

$date (D, "Yyyy-mm-dd hh:mm:ss"); $date = function (date, formatString) {...} $formatFloat = function (Num,type) {...}//Of course there are some more details on date or number above

Http,ajax Operation:

$ajax (opt), or the operation of the Url,params//or provide, load JS callback $loadJs: function (file, callback, CharSet) {.}//JSONP:  callback ({" Name ":" Tom "}) $asynJSON: function (file, MethodName, Callback, CharSet) {...}

Action on the event:

$on, $off, $once, $fire, $fixEvent//mobile side Of course there are $tap, $hold, $swipe $transform//2 fingers $scrollstart, $scrollend $orientatio Nchange//Event handling details are more compatible, which also involves position

Calculation of the position:

The position here includes the document-based location of the element, the screen-based location, the location based on the offsetparent, and the position getposdoc:function (EL) {...} Getposwin when the event is triggered: Function (EL) {...} getoffsetparentpos:function (EL) {...}//Of course there are some Doc,window location calculation functions//may also include various calculations of the elements themselves

Processing of animations:

The processing of the animation is relatively complex,//old-fashioned browser using JS queue animation,//Here is mainly for the increasingly modern browser//will consider the priority to use CSS3 to do animation, or the latest API  . JS Series as gaskets//I found Zepto anim-plugin source is very clear

Source: Human

Reprint Please specify: Program Ape» A JavaScript engineer must master several aspects of

A few aspects that a JavaScript engineer must master (turn)