[js高手之路] 跟GhostWu一起封装一个字符串工具库-扩展camelize与dasherize方法(3)
在此之前,我们已经完成了4个方法:
trimLeft, trimRight, trim, capitalize
本文,我们扩展驼峰式与下划线转化这两个对称的方法
camelize: 把空格,下划线,中横线后面的首字母大写.
dasherize: 把空格后面的大写字母,大写字母,下划线后面的大写字母,变成 中横线 + 对应的小写字母:
如: MozBorderRadius 变成 -moz-border-radius
; (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);
}
var sProto = String.prototype;
G.prototype = {
constructor: G,
capitalize: function () {
return new this.constructor(this.s.slice(0, 1).toUpperCase() + this.s.substring(1).toLowerCase());
},
trimLeft: function () {
var s;
if (sProto.trimLeft === 'undefined')
s = this.s.trimLeft();
else
s = this.s.replace(/^\s+/g, '');
return new this.constructor(s);
},
trimRight: function () {
var s;
if (sProto.trimRight === 'undefined')
s = this.s.trimRight();
else
s = this.s.replace(/\s+$/g, '');
return new this.constructor(s);
},
trim: function () {
var s;
if (typeof sProto.trim === 'undefined') {
s = this.s.replace(/^\s+|\s+$/g, '');
} else {
s = this.s.trim();
}
return new this.constructor(s);
},
camelize : function () {
var s = this.trim().s.replace(/(\-|_|\s)+(.)?/g, function ( s0, s1, s2 ) {
return ( s2 ? s2.toUpperCase() : '' );
});
return new this.constructor(s);
},
dasherize : function(){
var s = this.trim().s.replace(/[_\s]+/g, '-').replace(/([A-Z])/g, '-$1').replace(/-+/g, '-').toLowerCase();
return new this.constructor(s);
}
};
window.G = GhostWu;
})(window, undefined);
console.log( G( 'ghost wu tell you how to learn js').camelize().s );//ghostWuTellYouHowToLearnJsconsole.log( G( 'ghost-wu-tell you how to learn js').camelize().s );//ghostWuTellYouHowToLearnJsconsole.log( G( 'ghost_wu_tell you how to learn js').camelize().s );//ghostWuTellYouHowToLearnJsconsole.log( G( '-moz-border-radius' ).camelize().s );//MozBorderRadiusconsole.log( G( 'MozBorderRadius' ).dasherize().s ); //-moz-border-radiusconsole.log( G( 'backgroundColor' ).dasherize().s ); //background-colorconsole.log( G( 'background color' ).dasherize().s ); //background-color
[js高手之路] 跟GhostWu一起封装一个字符串工具库-扩展camelize与dasherize方法(3)的更多相关文章
- [js高手之路] 跟GhostWu一起封装一个字符串工具库-扩展trim,trimLeft,trimRight方法(2)
我们接着上一篇的继续,在上一篇我们完成了工具库的架构,本文扩展字符串去空格的方法, 一共有3个 1,trimLeft: 去除字符串左边的空格 2,trimRight: 去除字符串右边的空格 3,tri ...
- [js高手之路] 跟GhostWu一起封装一个字符串工具库-扩展字符串位置方法(4)
本文,我们接着之前的框架继续扩展,这次扩展了一共有5个与字符串位置相关的方法 between( left, right ) 返回两个字符串之间的内容, 如果第二个参数没有传递,返回的是找到的第一个参数 ...
- [js高手之路] 跟GhostWu一起封装一个字符串工具库-架构篇(1)
所谓字符串工具库就是利用javascript面向对象的知识封装一个常用的字符串处理方法库,首先给这个库起个名字,好吧就叫ghostwu.js. 看下ghostwu.js的整体架构: ; (functi ...
- [js高手之路]设计模式系列课程-设计一个模块化扩展功能(define)和使用(use)库
模块化的诞生标志着javascript开发进入工业时代,近几年随着es6, require js( sea js ), node js崛起,特别是es6和node js自带模块加载功能,给大型程序开发 ...
- [js高手之路] html5 canvas教程 - 制作一个数码倒计时效果
效果图: 这个实例主要注意: 1,剩余时间的计算 2,每个时间数字的绘制 时间主要有0-9和一个冒号组成,用数组来表示( 0: 就是不画圆,1:就是画一个蓝色的圆 ) num.js文件: var di ...
- [js高手之路]封装运动框架实战左右与上下滑动的焦点轮播图
在这篇文章[js高手之路]打造通用的匀速运动框架中,封装了一个匀速运动框架,我们在这个框架的基础之上,加上缓冲运动效果,然后用运动框架来做幻灯片(上下,左右),效果如下: 1 2 3 4 5 // 0 ...
- [js高手之路]原型对象(prototype)与原型链相关属性与方法详解
一,instanceof: instanceof检测左侧的__proto__原型链上,是否存在右侧的prototype原型. 我在之前的两篇文章 [js高手之路]构造函数的基本特性与优缺点 [js高手 ...
- [js高手之路]设计模式系列课程-组合模式+寄生组合继承实战新闻列表
所谓组合模式,就是把一堆结构分解出来,组成在一起,现实中很多这样的例子,如: 1.肯德基套餐就是一种组合模式, 比如鸡腿堡套餐,一般是是由一个鸡腿堡,一包薯条,一杯可乐等组成的 2.组装的台式机同理, ...
- [js高手之路]Node.js实现简易的爬虫-抓取博客文章列表信息
抓取目标:就是我自己的博客:http://www.cnblogs.com/ghostwu/ 需要实现的功能: 抓取文章标题,超链接,文章摘要,发布时间 需要用到的库: node.js自带的http库 ...
随机推荐
- MySQL缓存之Qcache与buffer pool对比
Q:innodb buffer pool和Qcache的缓存区别? A: 1.Qcacche缓存的是SQL语句及对应的结果集,缓存在内存,最简单的情况是SQL一直不重复,那Qcache的命令率肯定是0 ...
- HelloGitHub.com 网站开源了
简介 随着 HelloGitHub 月刊持续更新了一年多,内容变的越来越多.因为内容数据没有结构化,如果还是使用之前的编辑文本的方式编辑月刊内容,会对后面的继续发刊和维护带来了很多问题和多余的工作,例 ...
- java Script 用if else 实现从大到小指定输出,升序排列
我只是一个小白 各位大神看到不要介意 var a = Number(prompt("请输入你需要排列的第一个数字")) var b = Number(prompt("请输 ...
- 移动端布局最佳实践(viewport+rem)
通过前几天写的两篇博客(浅谈移动端三大viewport和移动端em和rem区别),我们现在来总结一下如何实现一个最佳方案. 之前在第二篇博客中提到过我们可以使用媒体查询来针对不同设备及做适配,如下图 ...
- linux shell变量$#,$@,$0,$1,$2的含义解释
变量说明: $$ Shell本身的PID(ProcessID) $! Shell最后运行的后台Process的PID $? 最后运行的命令的结束代码(返回值) $- 使用Set命令设定的Flag一览 ...
- 个人作业2--英语学习APP案例分析
1.下载APP并使用,上手体验 个人很喜欢这种风格,画面简洁,排版精细,尤其是联想词的界面,很惊喜.但是很多链接比如精选文章点进去之后的UI设计并不理想,感觉只是一个网页而已.并且我不能够保存或者收藏 ...
- MyBatis+mysql 简单分页
注意:limit不能跟动态内容 <select id="fenYe" parameterType="int" resultType="com.x ...
- 【javascript】ajax的参数
1. 常用参数 url type: contentType: dataType: data: success: error 2. 特殊参数 context: 这个对象用于设置Ajax相关回调函数的上下 ...
- Linux学习-->linux系统在移动硬盘的安装
由于自己看了一些文章和linux的好奇,想来一窥Linux的奥秘,因此自己准备学习使用Linux系统,这里记录下自己的安装过程,方便以后自己重装系统时进行查阅. 参考的书籍是鸟哥的<Linux私 ...
- PPK提供的浏览器类型及版本检测方法
PPK提供的浏览器类型及版本检测方法 一个常用但是被高估的Javascript函数就是浏览器检测.有些时候,你想给出一个说明或者加载一个页面来提示用户,以免使用Safari等浏览器. 使用方法: ...