JavaScript的漂亮的代码片段_javascript技巧

 动态构建正则表达式

复制代码 代码如下:

 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

时间: 2024-10-22 04:28:49

JavaScript的漂亮的代码片段_javascript技巧的相关文章

javascript伸缩菜单栏实现代码分享_javascript技巧

本文实现了点击标题时判断该标题下的菜单是否显示,如果是显示的则将其隐藏,如果是隐藏的则将其显示出来.具体代码如下 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> *{margin:0; pad

javascript里使用php代码实例_javascript技巧

本文实例讲述了javascript里使用php代码的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <script type="text/javascript" > <?php if (!empty($searchResult)):?> $.searchModule.init({display:<?php echo MAX_KEYWORDS_DISPLAY_COUNT; ?>, mode:<?php echo $searc

JavaScript图片轮播代码分享_javascript技巧

为大家分享的JavaScript图片轮播代码如下 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta

手机开发必备技巧:javascript及CSS功能代码分享_javascript技巧

1. viewport: 也就是可视区域.对于桌面浏览器,我们都很清楚viewport是什么,就是出去了所有工具栏.状态栏.滚动条等等之后用于看网页的区域, 这是真正有效的区域.由于移动设备屏幕宽度不同于传统web,因此我们需要改变viewport; 实际上我们可以操作的属性有4 个: 复制代码 代码如下: width -             //  viewport 的宽度 (范围从200 到10,000,默认为980 像素) height -            //  viewpor

javascript 获取网页标题代码实例_javascript技巧

复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="

动态加载外部javascript文件的函数代码分享_javascript技巧

复制代码 代码如下: (function (clover) { clover.loadScript = function loadScript(url, callback) { var heads = document.getElementsByTagName('head'); if (heads.length == 0) { alert("page must have one head element"); } var head = heads[0]; var script = do

有趣的JavaScript数组长度问题代码说明_javascript技巧

第一点: 复制代码 代码如下: var lennon=Array(); lennon["name"]="windy"; lennon["year"]="1989"; lennon["living"]=true; alert(lennon.length); 结果:lennon.length 为 0   原因: 用以下方式增加数组元素,将不改变数组的长度 arr["a"]=3;第二点: 复制

分享9个最好用的JavaScript开发工具和代码编辑器_javascript技巧

Web设计和开发是现今越来越流行的职业方向之一.工欲善其事,必先利其器,如果你想在这个领域出类拔萃,那么你就必须具备一些优秀的技能,例如能操作不同的平台.IDE和其他各种各样的工具. 谈到平台和IDE,现在已经不是以前那个掌握一个IDE就能"一招鲜吃遍天"的时代了.激烈的竞争以及蔓延到现在的集成开发环境.基于IDE是用于创建和部署应用程序的强大客户端应用程序,下面我们要分享的就是对于很多网页设计师和开发人员而言,最好的JavaScript 开发工具. 若有不同见解,敬请不吝赐教. 1)

javascript实现标签切换代码示例_javascript技巧

两则代码都很简单,这里就不多废话了,直接上代码 代码1, function ntabs(thisObj,Num) {if(thisObj.className == "active")return; var tabObj = thisObj.parentNode.id; var tabList = document.getElementById(tabObj).getElementsByTagName("li"); for(i=0; i <tabList.len