一个JavaScript工程师必须掌握的几个方面(转)

作为一个JavaScript工程师，在写一个工具库时，一般来说，需要提供如下的模块。

核心模块：core.js

$namespace 注册命名空间：

$namespace(‘human.software.dom‘); // window.human.software.dom

$package 多模块共存，引入

//对于一个模块文件 Event.js $pack(function(TT){     //这里传入的TT是顶级命名空间     //引入其他模块     var $D = TT.type,         $S = TT.support;      // code here;     // var event = { ... };      //暴露访问接口     TT.event = event; });

当然我也不反对使用AMD，或者CMD来处理依赖。

函数bind，AOP支持：

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

 变量类型检测模块：

$type(foo)  // returns variable type

DOM的一些操作：

查找: $id(), $tagname(),$className(), $closest(); dom操作: $append(), $prepend(), $after(), $before(); 样式操作: $addClass(), $removeClass(), $toggleClass, $css(getter [,setter]) 特性检测: $getVendorPropertyName() //出产商前缀,  $isSupprot3d() //不多说

对于现在的浏览器来说，出产商前缀检测可以独立成模块，方便使用：

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

浏览器类型检测模块：

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操作：

$setCookie(...),$getCookie(...), //一些附加的如: // expires, path, domain

 datetime，Number操作：

//$date(d, "YYYY-MM-DD hh:mm:ss"); $date = function(date, formatString){...} $formatFloat = function(num,type){...} //当然还有一些Date或者Number上面比较细节的处理

http，ajax操作：

$ajax(opt),或者对URL,params的操作 //或者提供,加载js回调 $loadJs: function (file, callback, charset) {..} //jsonp:  callback({"name":"tom"}) $asynJSON: function (file, methodName, callback, charset) {...}

对事件的操作：

$on, $off, $once, $fire,$fixEvent //mobile端当然还有 $tap, $hold, $swipe $transform //2个指头 $scrollstart,$scrollend $orientationchange //事件的处理细节兼容性比较多,这里面也涉及到position

对位置的计算：

//这里的位置包括:元素的基于document的位置,基于screen的位置,基于offsetParent的位置,和事件触发时候的位置 getPosDoc: function (el) {...} getPosWin: function (el) {...} getOffsetParentPos:function(el){...} //当然还有一些doc,window的位置计算函数 //还可能包括元素自身的各种计算

动画的处理：

//动画的处理就相对复杂了, //老式的浏览器采用js队列动画的方式, //这里主要是对于日趋的modern Browser来说 //会考虑到优先使用css3来做动画,或是最新的api..  js系列作为垫片 //我发现zepto的anim-plugin源码很清晰

来源：human

转载请注明：程序猿 » 一个JavaScript工程师必须掌握的几个方面