极力推荐10个短小实用的JavaScript代码段


Posted in Javascript onAugust 03, 2016

JavaScript正变得越来越流行,它已经成为前端开发的第一选择,并且利用基于JavaScript语言的NodeJS,我们也可以开发出高性能的后端服务,甚至我还看到在硬件编程领域也出现了JavaScript的身影。JavaScript正在逐渐进化为一门全能的开发语言。 

但用好JavaScript并不容易,你除了需要掌握它的语法并知道如何写出高质量的代码之外,还需要了解如何解决那些几乎在每个项目中都会遇到的需求场景,比如:判断日期,高亮文本,限制字符数等等,有很多第三方库可以解决这些问题,但这些库可能并非只是为解决这一个问题而创建的,这意味着你需要引入了很多无关的代码,这将使你的整个系统变得臃肿,而且也会影响到系统的性能。我的做法是,收集和使用那些常见的JavaScript代码段,并在需要时,尽可能首先使用它们。下面便是我收集的10段实用JavaScript代码,基于它们你还可以创造出更强大的JS插件或功能函数。

1. 判断日期是否有效
 
JavaScript中自带的日期函数还是太过简单,很难满足真实项目中对不同日期格式进行解析和判断的需要。JQuery也有一些第三方库来使日期相关的处理变得简单,但有时你可能只需要一个非常简单的函数,而不想引入一个庞大的第三方库。这时,你可以使用下面这段日期校验代码,它允许你自定义日期格式并进行日期有效性的校验。

function isValidDate(value, userFormat) {

 // Set default format if format is not provided
 userFormat = userFormat || 'mm/dd/yyyy';

 // Find custom delimiter by excluding
 // month, day and year characters
 var delimiter = /[^mdy]/.exec(userFormat)[0];

 // Create an array with month, day and year
 // so we know the format order by index
 var theFormat = userFormat.split(delimiter);

 // Create array from user date
 var theDate = value.split(delimiter);

 function isDate(date, format) {
 var m, d, y, i = 0, len = format.length, f;
 for (i; i < len; i++) {
 f = format[i];
 if (/m/.test(f)) m = date[i];
 if (/d/.test(f)) d = date[i];
 if (/y/.test(f)) y = date[i];
 }
 return (
 m > 0 && m < 13 &&
 y && y.length === 4 &&
 d > 0 &&
 // Check if it's a valid day of the month
 d <= (new Date(y, m, 0)).getDate()
 );
 }

 return isDate(theDate, theFormat);
}

使用方法:
 下面这个调用返回false,因为11月份没有31天
 isValidDate('dd-mm-yyyy', '31/11/2012')

2. 获取一组元素的最大宽度或高度
 下面这个函数,对于需要进行动态排版的开发人员非常有用。

var getMaxHeight = function ($elms) {
 var maxHeight = 0;
 $elms.each(function () {
 // In some cases you may want to use outerHeight() instead
 var height = $(this).height();
 if (height > maxHeight) {
  maxHeight = height;
 }
 });
 return maxHeight;
};

使用方法:
 $(elements).height( getMaxHeight($(elements)) );

3. 高亮文本
 有很多JQuery的第三方库可以实现高亮文本的功能,但我更喜欢用下面这一小段JavaScript代码来实现这个功能,它非常短小,而且可以根据我的需要去进行灵活的修改,而且可以自己定义高亮的样式。下面这两个函数可以帮助你创建自己的文本高亮插件。

function highlight(text, words, tag) {

 // Default tag if no tag is provided
 tag = tag || 'span';

 var i, len = words.length, re;
 for (i = 0; i < len; i++) {
 // Global regex to highlight all matches
 re = new RegExp(words[i], 'g');
 if (re.test(text)) {
  text = text.replace(re, '<'+ tag +' class="highlight">$&</'+ tag +'>');
 }
 }

 return text;
}

你同样会需要取消高亮的函数:

function unhighlight(text, tag) {
 // Default tag if no tag is provided
 tag = tag || 'span';
 var re = new RegExp('(<'+ tag +'.+?>|<\/'+ tag +'>)', 'g');
 return text.replace(re, '');
}

使用方法:

$('p').html( highlight(
 $('p').html(), // the text
 ['foo', 'bar', 'baz', 'hello world'], // list of words or phrases to highlight
 'strong' // custom tag
));

4. 文字动效
 有时你会希望给你的一段文字增加动效,让其中的每个字都动起来。你可以使用下面这段jQuery插件代码来达到这个效果。当然你需要结合一个CSS3 transition样式来达到更好的效果。

$.fn.animateText = function(delay, klass) {

 var text = this.text();
 var letters = text.split('');

 return this.each(function(){
 var $this = $(this);
 $this.html(text.replace(/./g, '<span class="letter">$&</span>'));
 $this.find('span.letter').each(function(i, el){
  setTimeout(function(){ $(el).addClass(klass); }, delay * i);
 });
 });

};

使用方法:
 $('p').animateText(15, 'foo');

5. 逐个隐藏元素
 下面这个jQuery插件可以根据你设置的步长(间隔时间)来逐个隐藏一组元素。在列表元素的重新加载中使用,可以达到很好的效果。

$.fn.fadeAll = function (ops) {
 var o = $.extend({
 delay: 500, // delay between elements
 speed: 500, // animation speed
 ease: 'swing' // other require easing plugin
 }, ops);
 var $el = this;
 for (var i=0, d=0, l=$el.length; i<l; i++, d+=o.delay) {
 $el.eq(i).delay(d).fadeIn(o.speed, o.ease);
 }
 return $el;
}

使用方法:
 $(elements).fadeAll({ delay: 300, speed: 300 });

6. 限制文本字数
 下面这端脚本允许你根据给定的字符长度截取文本,如果文本被截取,那么它的后面会自动带上省略号。

function excerpt(str, nwords) {
 var words = str.split(' ');
 words.splice(nwords, words.length-1);
 return words.join(' ') +
 (words.length !== str.split(' ').length ? '…' : '');
}

7. 判断相应式布局中当前适配度
 目前很多设计已经采用了响应式布局来适配网站或应用在不同设备上的显示。你经常需要在代码中判断当前处于哪一个屏幕适配度下。

function isBreakPoint(bp) {
 // The breakpoints that you set in your css
 var bps = [320, 480, 768, 1024];
 var w = $(window).width();
 var min, max;
 for (var i = 0, l = bps.length; i < l; i++) {
 if (bps[i] === bp) {
  min = bps[i-1] || 0;
  max = bps[i];
  break;
 }
 }
 return w > min && w <= max;
}

使用方法:

if ( isBreakPoint(320) ) {
 // breakpoint at 320 or less
}
if ( isBreakPoint(480) ) {
 // breakpoint between 320 and 480
}
…

8. 全局计数
 在一些游戏或广告场景中,你需要记录用户在当前页面上点击某一个按钮的次数,这时你可以使用jQuery的.data()函数来处理:

$(element)
 .data('counter', 0) // begin counter at zero
 .click(function() {
  var counter = $(this).data('counter'); // get
  $(this).data('counter', counter + 1); // set
  // do something else...
 });

9. 嵌入优酷视频

function embedYouku(link, ops) {

 var o = $.extend({
 width: 480,
 height: 320,
 params: ''
 }, ops);

 var id = /\?v\=(\w+)/.exec(link)[1];

 return '<embed allowFullScreen="true" id="embedid" quality="high" width="'+o.width+'" height="'+o.height+'" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash" src="'+id+'?'+o.ops'"';
}

使用方法:

embedYouku(
 'http://static.youku.com/v/swf/qplayer.swf', 
 {'winType=adshow&VideoIDS=XMTE3NzQ0NTky&isAutoPlay=false&isShowRelatedVideo=false'}
);

10. 创建动态菜单或下拉列表
 在很多场景中,我们都需要动态地创建菜单、下拉列表或列表项。下面是一段最基础的代码实现上面的功能,你可以根据实际需要进行相应的扩展。

function makeMenu(items, tags) {

 tags = tags || ['ul', 'li']; // default tags
 var parent = tags[0];
 var child = tags[1];

 var item, value = '';
 for (var i = 0, l = items.length; i < l; i++) {
 item = items[i];
 // Separate item and value if value is present
 if (/:/.test(item)) {
  item = items[i].split(':')[0];
  value = items[i].split(':')[1];
 }
 // Wrap the item in tag
 items[i] = '<'+ child +' '+
  (value && 'value="'+value+'"') +'>'+ // add value if present
  item +'</'+ child +'>';
 }

 return '<'+ parent +'>'+ items.join('') +'</'+ parent +'>';
}

使用方法:

// Dropdown select month
makeMenu(
 ['January:JAN', 'February:FEB', 'March:MAR'], // item:value
 ['select', 'option']
);

// List of groceries
makeMenu(
 ['Carrots', 'Lettuce', 'Tomatos', 'Milk'],
 ['ol', 'li']
);

以上只是那些实用JavaScript代码段中的一小部分,我也建议你平时注意收集或自己编写这样的基础代码段,它们能在很多项目中使用或通过一些改造提供更完善的功能,使用这些代码段将为你节省下大量的开发时间。

Javascript 相关文章推荐
JavaScript 和 Java 的区别浅析
Jul 31 Javascript
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
Jan 19 Javascript
详解Angular2 之 结构型指令
Jun 21 Javascript
Angular2关于@angular/cli默认端口号配置的问题
Jul 15 Javascript
ES7中利用Await减少回调嵌套的方法详解
Nov 01 Javascript
Vue进度条progressbar组件功能
Apr 17 Javascript
vue在index.html中引入静态文件不生效问题及解决方法
Apr 29 Javascript
layui 关闭open弹出框 刷新table表格页面的方法
Sep 16 Javascript
Vue中错误图片的处理的实现代码
Nov 07 Javascript
js实现AI五子棋人机大战
May 28 Javascript
vue路由缓存的几种实现方式小结
Feb 02 Javascript
es6函数之严格模式用法实例分析
Mar 17 Javascript
基于JS如何实现给字符加千分符(65,541,694,158)
Aug 03 #Javascript
15款最好的Bootstrap在线编辑器
Aug 03 #Javascript
基于d3.js实现实时刷新的折线图
Aug 03 #Javascript
JS判断iframe是否加载完成的方法
Aug 03 #Javascript
两行代码轻松搞定JavaScript日期验证
Aug 03 #Javascript
Highcharts学习之数据列
Aug 03 #Javascript
JavaScript中日期函数的相关操作知识
Aug 03 #Javascript
You might like
php快递单号查询接口使用示例
2014/05/05 PHP
php使用ob_flush不能每隔一秒输出原理分析
2015/06/02 PHP
详解php几行代码实现CSV格式文件输出
2017/07/01 PHP
总结PHP中初始化空数组的最佳方法
2019/02/13 PHP
Javascript实现的分页函数
2006/12/22 Javascript
用window.location.href实现刷新另个框架页面
2007/03/07 Javascript
div移动 输入框不能输入的问题
2009/11/19 Javascript
javascript中运用闭包和自执行函数解决大量的全局变量问题
2010/12/30 Javascript
javascript在子页面中函数无法调试问题解决方法
2014/01/17 Javascript
JavaScript中的原型prototype完全解析
2016/05/10 Javascript
深入理解JavaScript中的对象复制(Object Clone)
2016/05/18 Javascript
浅谈JS运算符&amp;&amp;和|| 及其优先级
2016/08/10 Javascript
快速实现JS图片懒加载(可视区域加载)示例代码
2017/01/04 Javascript
JQuery validate 验证一个单独的表单元素实例
2017/02/17 Javascript
Ajax和Comet技术总结
2017/02/19 Javascript
react-native使用react-navigation进行页面跳转导航的示例
2017/09/07 Javascript
详解React Native开源时间日期选择器组件(react-native-datetime)
2017/09/13 Javascript
使用FormData实现上传多个文件
2018/12/04 Javascript
JavaScript常用工具函数库汇总
2020/09/17 Javascript
python利用正则表达式提取字符串
2016/12/08 Python
Python编程给numpy矩阵添加一列方法示例
2017/12/04 Python
python中的二维列表实例详解
2018/06/19 Python
对python 调用类属性的方法详解
2019/07/02 Python
Python求两点之间的直线距离(2种实现方法)
2019/07/07 Python
opencv 实现特定颜色线条提取与定位操作
2020/06/02 Python
python实现PDF中表格转化为Excel的方法
2020/06/16 Python
踩坑:pytorch中eval模式下结果远差于train模式介绍
2020/06/23 Python
OpenCV Python实现图像指定区域裁剪
2021/03/12 Python
浅谈Python3中print函数的换行
2020/08/05 Python
python使用多线程查询数据库的实现示例
2020/08/17 Python
浅析HTML5中header标签的用法
2016/06/24 HTML / CSS
详解HTML5 Canvas标签及基本使用
2020/01/10 HTML / CSS
妈妈的账单教学反思
2014/02/06 职场文书
小区门卫的岗位职责
2014/09/26 职场文书
社区党员群众路线教育实践活动心得体会
2014/11/03 职场文书
导游词之徐州-云龙山
2019/09/29 职场文书