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的文本框记数器
Sep 19 Javascript
window.open的页面如何刷新(父页面)上层页面
Dec 28 Javascript
javascript实现tabs选项卡切换效果(扩展版)
Mar 19 Javascript
13 款最热门的 jQuery 图像 360 度旋转插件推荐
Dec 09 Javascript
最新最热最实用的15个jQuery插件汇总
Jul 05 Javascript
解决JavaScript数字精度丢失问题的方法
Dec 03 Javascript
js重写方法的简单实现
Jul 10 Javascript
vue webpack重写cookie路径的方法
Jul 10 Javascript
layui递归实现动态左侧菜单
Jul 26 Javascript
layui禁用侧边导航栏点击事件的解决方法
Sep 25 Javascript
vue+webpack 更换主题N种方案优劣分析
Oct 28 Javascript
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
Mar 29 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
PHP中for与foreach的区别分析
2011/03/09 PHP
setcookie中Cannot modify header information-headers already sent by错误的解决方法详解
2013/05/08 PHP
php实现建立多层级目录的方法
2014/07/19 PHP
Thinkphp5.0自动生成模块及目录的方法详解
2017/04/17 PHP
JQuery 解析多维的Json数据格式
2009/11/02 Javascript
基于jQuery架构javascript基础体系
2011/01/01 Javascript
jQuery之过滤元素操作小结
2013/11/30 Javascript
完美兼容各大浏览器获取HTTP_REFERER方法总结
2014/06/24 Javascript
Javascript中封装window.open解决不兼容问题
2014/09/28 Javascript
node.js中的http.response.getHeader方法使用说明
2014/12/14 Javascript
详解AngularJS中的依赖注入机制
2015/06/17 Javascript
JS模拟的Map类实现方法
2016/06/17 Javascript
Bootstrap插件全集
2016/07/18 Javascript
jquery滚动条插件slimScroll使用方法
2017/02/09 Javascript
javascript中apply/call和bind的使用
2017/02/15 Javascript
js实现会跳动的日历效果(完整实例)
2017/10/18 Javascript
JS 实现缓存算法的示例(FIFO/LRU)
2018/03/20 Javascript
微信小程序实现图片上传功能
2018/05/28 Javascript
vuex直接赋值的三种方法总结
2018/09/16 Javascript
JQuery animate动画应用示例
2019/05/14 jQuery
vue控制多行文字展开收起的实现示例
2019/10/11 Javascript
Vuex,iView UI面包屑导航使用扩展详解
2019/11/04 Javascript
如何基于原生javaScript生成带图片的二维码
2019/11/21 Javascript
three.js 利用uv和ThreeBSP制作一个快递柜功能
2020/08/18 Javascript
原生js实现分页效果
2020/09/23 Javascript
[19:26]TNC vs EG (BO3)
2018/06/07 DOTA
pyqt4教程之messagebox使用示例分享
2014/03/07 Python
python 队列详解及实例代码
2016/10/18 Python
Windows系统下多版本pip的共存问题详解
2017/10/10 Python
html5唤起app的方法
2017/11/30 HTML / CSS
什么是会话Bean
2015/05/14 面试题
高中生打架检讨书1000字
2015/02/17 职场文书
2015年九一八事变纪念日演讲稿
2015/03/19 职场文书
2016大学生毕业实习心得体会
2016/01/23 职场文书
MySQL Router的安装部署
2021/04/24 MySQL
Python 中面向接口编程
2022/05/20 Python