一个javascript工程师必须掌握的几个方面

一个javascript工程师必须掌握的几个方面

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

核心模块: 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源码很清晰

 Util:

 一些常用工具函数而已

当然,到目前为止,这样的lib 工具库非常的多, 比如喜闻乐见的jquery,百度的tangram,qwrap, 淘宝的kissy, 腾讯的jx...

我想很多时候比较重要的是写出灵活的js架构,解决依赖,合理的设计业务代码和公共组件库, 开发灵活的UI插件,规范化文档,

多人合作, 提供打包,合并,压缩自动化解决方案. 以及前后端的接口的可用性,这些才是我认为比较重要的吧..

 随意YY,共勉.加油!