[js高手之路] 跟GhostWu一起封装一个字符串工具库-架构篇(1)

所谓字符串工具库就是利用javascript面向对象的知识封装一个常用的字符串处理方法库，首先给这个库起个名字，好吧就叫ghostwu.js。

看下ghostwu.js的整体架构：

; (function (window, undefined) {
    function init(obj, s) {
        if (s !== null && s !== undefined) {
            if (typeof s === 'string') {
                obj.s = s;
            } else {
                obj.s = s.toString();
            }
        } else {
            obj.s = s;
        }
    }

    function G(s) {
        init(this, s);
    }

    function GhostWu(s) {
        return new G(s);
    }

    G.prototype = {
        constructor: G,
        capitalize: function () {
            return new this.constructor(this.s.slice(0, 1).toUpperCase() + this.s.substring(1).toLowerCase());
        }
    };

    window.G = GhostWu;
})(window, undefined);

1，最外层采用jquery的立即表达式

2，紧接着在第29行暴露一个接口函数GhostWu

3，Ghostwu这个函数返回一个new G()对象， 目的是把 new G()这个对象 传递给init中的this, GhostWu中的参数s 自然就是 等待被处理的字符串

4，init函数的作用，就是给obj对象，也就是new G()对象添加一个属性s用来存储字符串

5，init函数中对s进行了类型和值是否为空的判断

• 如果为空,就把s直接赋值给obj( 第 10 行 )
• 如果不为空，分两种情况处理， 如果是字符串直接赋值给obj( 第5行 ). 如果是数组，把数组用toString函数转成字符串赋值给obj( 第7行 )

 6，所以整体运行流程

　　先执行第29行，在全局对象window上挂载一个公共属性G, 而G就是我们的GhostWu函数， 假设我们在外面调用G( 'ghostwu' )，程序接着就会执行Ghostwu这个函数

　　把字符串 'ghostwu' 当做参数传递给new G, 那么new G中的this指向的就是new G(), s 就是 'ghostwu' ,然后通过init传参，经过第三行的条件判断和第四行的条件判断

　　为new G()对象上添加了一个属性s, 值为'ghostwu' , 结果类似:   { s : 'ghostwu' }

7，第22行，之后的所有工具函数都是扩展在G的原型对象上，即G.prototype

8，第23行，设定constructor构造属性的值为G，因为原型对象采用的是字面量方式，重写了默认的G函数原型对象， constructor指向为Object, 所以在这里我们要用

constructor强行让构造属性指向构造函数G

9，第24行，我们为ghostwu.js这个工具库扩展了第一个方法: capitalize，作用是把字符串首字母变成大写，后面的字母变成小写

console.log( G( 'ghostwu' ).capitalize().s ); //Ghostwu

console.log( G( ['ghostwu'] ).capitalize().s ); //Ghostwu