switch的替代品

曾经有人说过,真正好的程序是没有if..else的,当然switch还不如if..else。JS规范里面是禁止使用switch的。

命令对象(command object)就完美的解决了这个问题。

引用一篇国外的博客提到的:

JavaScript 有着良好的控制流程语句,这些语句往往用花括号包裹着。不过有个例外:switch … case 语句。switch … case 的奇怪之处在于你必须在每个 case 末尾加上关键字 break,以防止流程控制权穿越进入下一个 case 语句中。穿越是指让多条 case 执行的手法,当未遇见预期的 break 时,控制权就自动交到下一句 case 手中。然而,就如同分号与花括号一样,你很有可能会在不经意之间忘了写 break,当这发生时,后期的错误排查就比较痛苦,因为语句本身是没错的。因此,配对地写 case … break 是个好习惯。

我们通常讲,JavaScript 有着优雅的对象字面量与顶级函数,这些都使得特定的方法查询变的非常简单。为方法查询所创建的对象,我们称之为 活动对象(action object) 或 命令对象(command object),它被运用在许多软件设计模式中,包括强大的而有用的命令模式。

实例:

// switch 方法
    function testSwitch(name) {
        switch (name) {
            case '1':
                return 'hack';
                break;
            case '2':
                return 'slash';
                break;
            case '3':
                return 'run';
                break;
            default:
                return false;
                break;
        }
    }
    // 使用命令对象
    function testFn(name) {
        var names = {
            '1': function() {
                return 'hack';
            },
            '2': function() {
                return 'slash';
            },
            '3': function() {
                return 'run';
            }
        };
        if (typeof names[name] !== 'function') {
            return false;
        }
        return names[name]();
    }
    // 测试结果
    var result1 = testSwitch('1');
    var result2 = testFn('2');
    console.info(result1, result2);

js 取地址栏参数

//取地址栏参数
var urlSearch=location.search.slice(1),//取得?后面的数据
searchArr=urlSearch.split('&');
_.each(searchArr, function(searchPart) {
var partArr = searchPart.split('='),
partKey = partArr[0],
partValue = partArr[1];
if (partKey == "enterprise") { //企业号
$('.enterprise', successBoxEl).text('公司帐号:' + partValue + '');
enterpriseVal=partValue;
} else if (partKey == "account") {
$('.account', successBoxEl).text('个人帐号:' + partValue + '');
accountVal=partValue;
} else if (partKey == "pwd") {
$('.pwd', successBoxEl).text('登录密码:' + partValue + '');
}
});

js arguments.callee & caller的用法及区别

在函数内部,arguments.callee该属性是一个指针,指向拥有这个arguments对象的函数;
而函数对象的另一个属性:caller,这个属性保存着调用当前函数的函数的引用,如果是在全局作用域中调用当前函数,它的值为null。
实例代码:

<script type="text/javascript">
function inner(){
	alert(arguments.callee);//指向拥有这个arguments对象的函数,即inner()
	alert(arguments.callee.caller);//这个属性保存着调用当前函数的函数的引用,即outer()
}
function outer(){
	inner();
}
outer();
</script>

算是个简单的js模板吧,记录下来以后会常用

var isJqueryObj = function(obj) {
    return obj instanceof jQuery;
};
/**
 * 构造函数
 * @param {object} opts
 */
var WebDisk = function(opts) {
    opts = $.extend({
        "element": null //容器可以是JQ对象或样式名
    }, opts || {});
    this.opts = opts;
    if (isJqueryObj(opts.element)) {
        this.element = opts.element;
    } else {
        this.element = $(opts.element);
    }
    this.init(); //初始化
};
$.extend(WebDisk.prototype, {
    init: function() {
        var elEl = this.element;
        var opts = this.opts;
        this.bindEvents(); //事件绑定
    },
    bindEvents: function() {
        var elEl = this.element;
        elEl.on('click', '.xxx', function() {
            $(this).show();
        });
    },
    destroy: function() {
        
    }
});

input文字获取焦点消失离开显示

<input type="text" value="请输入数据APPID" data-empty="请输入数据APPID" class="form-input-text">
      /**
         * input文字获取焦点消失离开显示
         */
        var inputTextVal = '';
        $('body').on('focusin', '[data-empty]', function() {
            var fieldEl = $(this);
            var val = $.trim(fieldEl.val()),
                    emptyTip = fieldEl.data('empty');
            if (val == emptyTip) {
                fieldEl.val('');
            }
        }).on('focusout', '[data-empty]', function() {
            var fieldEl = $(this);
            var val = $.trim(fieldEl.val()),
                    emptyTip = fieldEl.data('empty');
            if (val.length == 0) {
                fieldEl.val(emptyTip);
            }
        });

JS类模拟练习

Simple JavaScript Inheritance可以给Class添加extend方法,但是他那代码目前还是不能太理解,如果不添加extend方法的话写一个类就很简单了,下面这个应该十分容易理解了:

/* 
 Created on : 2013-11-27, 11:57:35
 Author     : liuxf
 */
var Class = function() {
    var klass = function() {
        this.init.apply(this, arguments);
    };
    klass.prototype.init = function() {
    };
    return klass;
};
var Person = new Class;
Person.prototype.init = function(opts) {
    opts = $.extend({
        "element": 'box'
    }, opts || {});
    this.opts = opts;
    this.element = $(opts.element);
    this.render();
};
Person.prototype.render = function() {
    var elEl = $(this.element);
    var opts = this.opts;
    elEl.html(opts.name + ',' + opts.age);
};
/**
 * 开始执行脚本
 */
$(function() {
    var person = new Person({
        element: '.mybox2',
        name: '李四',
        age: 55
    });
});

使用Simple Inheritance来创建自己的类

最近一直再研究类的写法。因为经常做一些可复用,可扩展的方法。之前一直使用别人包装好的组件,比如玉伯开发的Alare组件,用的很舒服啊~~
但是不是什么项目都要使用那么复杂的组件吧,如果用JQ自己写一个呢,JQ好像还没有类的包装,可能以后会有吧。研究了半天发现了一个好东西,就是John Resig写的 Simple JavaScript Inheritance。
真是完美的解决了我的需求,而且代码也很少,下面就放上我使用的代码示例

(function() {
	/*
	 * Simple Inheritance
	 */
	var initializing = false;
	var fnTest = /xyz/.test(function() {
		xyz;
	}) ? /\b_super\b/ : /.*/;
	this.Class = function() {};
	Class.extend = function(prop) {
		var _super = this.prototype;
		initializing = true;
		var prototype = new this();
		initializing = false;
		for (var name in prop) {
			prototype[name] = typeof prop[name] == "function" &&
				typeof _super[name] == "function" && fnTest.test(prop[name]) ?
				(function(name, fn) {
				return function() {
					var tmp = this._super;
					this._super = _super[name];
					var ret = fn.apply(this, arguments);
					this._super = tmp;
					return ret;
				};
			})(name, prop[name]) :
				prop[name];
		}

		function Class() {
			if (!initializing && this.init)
				this.init.apply(this, arguments);
		}
		Class.prototype = prototype;
		Class.constructor = Class;
		Class.extend = arguments.callee;
		return Class;
	};
})();

$(function() { 
	
	//定义一个Box的类
	var Box = Class.extend({
		init: function(opts) {
			opts = $.extend({
				"element": 'box'
			}, opts || {});
			this.opts = opts;
			this.element = $(opts.element);
			this.render();
		},
		render: function() {
			var elEl = this.element;
			elEl.html(this.opts.name + ',' + this.opts.age);
			this.show();
		},
		show: function() {
			var elEl = this.element;
			elEl.show();
		}
	});

	//实例1 - 直接用new来实例化Box
	var mybox = new Box({
		element: '.mybox',
		name: '张三',
		age: 15
	});

	//实例2 - 先扩展,再用new来实例化Box
	var mybox2 = Box.extend({
		init: function(opts) {
			this.opts = opts;
			this.element = $(opts.element);
			this.render();
			this.event();
		},
		hide: function() {
			var elEl = this.element;
			elEl.hide();
		},
		event: function() {
			var elEl = this.element;
			var that = this;
			elEl.on('click', function() {
				that.hide();
			})
		}
	});
	new mybox2({
		element: '.mybox2',
		name: '李四',
		age: 55
	});

})

判断文本是否含有超链接的正则

提示:你可以先修改部分代码再运行。

JS判断表单里输入的全是空格和删除连续的空格

今天做回复框输入限制时的2个需求:
1、文字内容不能全都是空格,用这个正则 /^\s*$/
2、删除连续的空格,是这个正则 /\s+/g
下面是常见的需求代码

提示:你可以先修改部分代码再运行。