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

最新推荐文章于 2022-09-13 17:19:11 发布

转载最新推荐文章于 2022-09-13 17:19:11 发布 · 844 阅读

前端web技术专栏收录该内容

23 篇文章

订阅专栏

本文介绍了一个JavaScript工具库的核心模块设计，包括命名空间管理、依赖处理、类型检测、DOM操作等功能，并探讨了不同浏览器的兼容性解决方案。

转自 http://www.xprogrammer.com/1238.html

作为一个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源码很清晰