[js高手之路] 跟GhostWu一起封装一个字符串工具库-架构篇(1)
所谓字符串工具库就是利用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 ); //Ghostwuconsole.log( G( ['ghostwu'] ).capitalize().s ); //Ghostwu
相关文章
- JS+CSS3 360度全景图插件 - Watch3D.js
- JS框架_(JQuery.js)圆形多选菜单选项
- JS框架_(JQuery.js)网页文字评论弹幕
- JS框架_(Popup.js)3D对话框窗口插件
- JS框架_(Progress.js)圆形动画进度条
- JS框架_(JQuery.js)带阴影贴纸标签按钮
- JS框架_(Bootstrap.js)实现简单的轮播图
- ThinkPHP模板中JS等带花括号处会被解析错误的解决办法
- destoon开发笔记-JQ+JS实现倒计时功能
- A2D JS框架 - DES加密解密 与 Cookie的封装(C#与js互相加密解密)
- JS插件之——bootstrap-suggest.js
- Node.js进程管理之进程集群
- Node.js模块封装及使用
- js 数组的length(javascript教程四)
- vue.config.js
- [Node.js] Set the Node.js Project to ECMAScript Modules (ESM)
- 如何用js给老婆每天发情话?
- 原生js实现随机验证码HTMl-JS
- three.js(JS 三维模型库)介绍和入门
- js 浏览器兼容css中webkit、Moz、O、ms...写法封装(es6语法)
- js - 封装文本域自适应高度
- node.js:setTimeout实现同步delay延时函数
- 深入Node.js的模块加载机制,手写require函数
- 【JS高级】js面向对象三大特性之多态_07
- JS必看面试题
- js工具代码封装(超长)3/3