JavaScript的漂亮的代码片段


Posted in Javascript onJune 05, 2013

 动态构建正则表达式

 new RegExp( Expr.match[ type ].source + (/(?![^\[]*\])(?![^\(]*\))/.source) )

来自sizzle,动态构建正则时,这样做避免了字符转义。

更灵活和巧妙的数字补零

function prefixInteger(num, length) {
    return (num / Math.pow(10, length)).toFixed(length).substr(2);
}

 取数组的最大和最小值

Math.max.apply(Math, [1,2,3]) //3
Math.min.apply(Math, [1,2,3]) //1

产生漂亮的随机字符串

Math.random().toString(16).substring(2); //8位
Math.random().toString(36).substring(2); //16位

 获取时间戳

相对于
var timeStamp = (new Date).getTime();
如下方式更方便:

var timeStamp = Number(new Date);

 转换为数值并取整

var result = '3.1415926' | 0; // 3

字符串格式化

function format(format) {
    if (!FB.String.format._formatRE) {
      FB.String.format._formatRE = /(\{[^\}^\{]+\})/g;
    }
    var values = arguments;
    return format.replace(
      FB.String.format._formatRE,
      function(str, m) {
        var
          index = parseInt(m.substr(1), 10),
          value = values[index + 1];
        if (value === null || value === undefined) {
          return '';
        }
        return value.toString();
      }
    );
  }

  使用:
format('{0}.facebook.com/{1}', 'www', 'login.php'); 
//-> www.facebook.com/login.php

交换两个变量的值

var foo = 1;
var bar = 2;
foo = [bar, bar=foo][0];

RegExp Looping

String.prototype.format = function ( /* args */ ) {
  var args = arguments;
  return this.replace( 
     /\{(\d+)\}/g, 
     function (full, idx) {
         return args[idx];
     } )
}
'Hello {0}, How{1}'.format( 'Bob', ' you doin');
// => Hello Bob, How you doinhttp://mazesoul.github.com/Readability_idioms_and_compression_tolerance/#31.0

定义即运行函数

( function() {
// do something
} )();

这确实是最简单的技巧,但也是最实用的技巧。 奠定了JavaScript封装的基础。

三元运算

var some = con1 ? val1 :
           con2 ? val2 :
           con3 ? val3 :
           defaultVal;

一种函数注册-调用机制

来自CKEditor,我做了提取。

( function() {
var fns = [];
// 将可用下标访问属性的对象转换成数组
// 注意,IE下DOMNodeList会失败
function toArray( arrayLike, index ) {
 return Array.prototype.slice.call( arrayLike, index || 0 ); 
}
window.Util = {
 'addFunction' : function( fn, scope ) {
  return fns.push( function(){
   return fn.apply( scope || window, arguments );
  } ) - 1;
 },
 'removeFunction' : function( index ) {
  fns[ index ] = null;
 },
 'callFunction' : function( index ) {
  var fn = fns[ index ];
  return fn && fn.apply( window, toArray( arguments, 1 ) );
 }
};
} )();
// 应用场景
var fnId;
// 在闭包中,添加一个可供全局调用的函数
( function() {
 fnId = Util.addFunction( function( msg ) {
  alert( msg );
 } );
} )();
// 调用
Util.callFunction( fnId, 'Hello, World' ); //-> 'Hello,World';

短路运算

var something = 'xxxx';
console.log( true && something ); //-> 'xxx';
console.log( false && something ); //-> false
console.log( true || something );  // -> true
console.log( false || something );  //-> something
Javascript 相关文章推荐
jQuery控制cookie过期时间的方法
Apr 07 Javascript
基于JS实现省市联动效果代码分享
Jun 06 Javascript
解决Vue中mounted钩子函数获取节点高度出错问题
May 18 Javascript
vue中使用gojs/jointjs的示例代码
Aug 24 Javascript
浅谈webpack4.x 入门(一篇足矣)
Sep 05 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
Oct 18 Javascript
element ui table 增加筛选的方法示例
Nov 02 Javascript
vue.js实现的全选与全不选功能示例【基于elementui】
Dec 03 Javascript
vue递归组件实战之简单树形控件实例代码
Aug 27 Javascript
vue 设置 input 为不可以编辑的实现方法
Sep 19 Javascript
vue用elementui写form表单时,在label里添加空格操作
Aug 13 Javascript
详解JavaScript中Arguments对象用途
Aug 30 Javascript
Javascript中的for in循环和hasOwnProperty结合使用
Jun 05 #Javascript
理解JAVASCRIPT中hasOwnProperty()的作用
Jun 05 #Javascript
jquery 面包屑导航 具体实现
Jun 05 #Javascript
JSCode all of Brower 全局屏蔽网页右键功能 具体实现
Jun 05 #Javascript
js 获取后台的字段 改变 checkbox的被选中的状态 代码
Jun 05 #Javascript
JQuery AJAX 中文乱码问题解决
Jun 05 #Javascript
Javascript自定义排序 node运行 实例
Jun 05 #Javascript
You might like
玩家交还《星际争霸》原始码光盘 暴雪报以厚礼
2017/05/05 星际争霸
php中用数组的方法设置cookies
2011/04/21 PHP
JavaScript创建命名空间的5种写法
2014/06/24 PHP
jquery+json实现的搜索加分页效果
2010/03/31 Javascript
jQuery参数列表集合
2011/04/06 Javascript
瀑布流布局并自动加载实现代码
2013/03/12 Javascript
JavaScript 函数replace深入了解
2013/03/14 Javascript
jQuery 删除或是清空某个HTML元素示例
2014/08/04 Javascript
jQuery中:only-child选择器用法实例
2015/01/03 Javascript
js实现input密码框提示信息的方法(附html5实现方法)
2016/01/14 Javascript
angularjs表格分页功能详解
2016/01/21 Javascript
js判断鼠标位置是否在某个div中的方法
2016/02/26 Javascript
基于BootStarp的Dailog
2016/04/28 Javascript
Angularjs使用directive自定义指令实现attribute继承的方法详解
2016/08/05 Javascript
利用vue.js插入dom节点的方法
2017/03/15 Javascript
jQuery Masonry瀑布流布局神器使用详解
2017/05/25 jQuery
jquery实现侧边栏左右伸缩效果的示例
2017/12/19 jQuery
swiper 自动图片无限轮播实现代码
2018/05/21 Javascript
vue调用语音播放的方法
2019/09/27 Javascript
纯 JS 实现放大缩小拖拽功能(完整代码)
2019/11/25 Javascript
[52:36]VGJ.S vs Serenity 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
[00:15]天涯墨客终极技能展示
2018/08/25 DOTA
给Python入门者的一些编程建议
2015/06/15 Python
Python实现的十进制小数与二进制小数相互转换功能
2017/10/12 Python
Python3多线程操作简单示例
2018/05/22 Python
python爬虫使用scrapy注意事项
2020/11/23 Python
C#笔试题和英文面试题
2013/02/07 面试题
大一学生假期实习的自我评价
2013/10/12 职场文书
药物学专业学生的自我评价
2013/10/27 职场文书
英语演讲稿范文
2014/01/03 职场文书
英语课前三分钟演讲稿
2014/08/19 职场文书
师范生教育见习总结
2015/06/23 职场文书
小学生运动会广播
2015/08/19 职场文书
创业计划书之餐饮
2019/09/02 职场文书
CSS 制作波浪效果的思路
2021/05/18 HTML / CSS
Mybatis是这样防止sql注入的
2021/12/06 Java/Android