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

最新推荐文章于 2021-07-28 10:08:43 发布

转载最新推荐文章于 2021-07-28 10:08:43 发布 · 177 阅读

本文介绍了一个名为GhostWu.js的字符串工具库，该库利用JavaScript面向对象特性封装了一系列常用的字符串处理方法。文章详细解释了其内部工作原理，并通过实例展示了如何将字符串的首字母转换为大写。

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

看下ghostwu.js的整体架构：

 1 ; (function (window, undefined) {
 2     function init(obj, s) {
 3         if (s !== null && s !== undefined) {
 4             if (typeof s === 'string') {
 5                 obj.s = s;
 6             } else {
 7                 obj.s = s.toString();
 8             }
 9         } else {
10             obj.s = s;
11         }
12     }
13 
14     function G(s) {
15         init(this, s);
16     }
17 
18     function GhostWu(s) {
19         return new G(s);
20     }
21 
22     G.prototype = {
23         constructor: G,
24         capitalize: function () {
25             return new this.constructor(this.s.slice(0, 1).toUpperCase() + this.s.substring(1).toLowerCase());
26         }
27     };
28 
29     window.G = GhostWu;
30 })(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