作为一个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工程师必须掌握的几个方面