JS将所有对象s的属性复制给对象r

原生写法:

/**
		 * 将所有 s 的属性复制给 r
		 * @param r {Object}
		 * @param s {Object}
		 * @param is_overwrite {Boolean} 如指定为 false ,则不覆盖已有的值,其它值
		 *	  包括 undefined ,都表示 s 中的同名属性将覆盖 r 中的值
		 */
		mix: function (r, s, is_overwrite) { //TODO:
			if (!s || !r) return r;

			for (var p in s) {
				if (is_overwrite !== false || !(p in r)) {
					r[p] = s[p];
				}
			}
			return r;
		}

jQuery写的话就太方便了

var a={
        aa:1,
        ab:2
    };
    var b={
        ba:1,
        bb:2
    };
    $.extend(a,b);
    console.info(a);

鼠标滚轮控制页面滚动(模仿苹果官网iPhone5s的滚屏动画实例)

最近发现这种效果很流行,自己也写一个,以后应该能用上。
技术重点应该就是鼠标滚轮的兼容性写法那里,因为jquery没有封装鼠标滚轮事件,用原生JS写的话每个浏览器的标准都不一样,很麻烦。
右侧边栏按钮点击滚动页面的效果就是普通的图片滚动展示效果而已,没什么难度。
下面是代码,我都放在一个页面里面,为了可以直接运行看效果。
Read More

点击页面空白隐藏层

最近发现我之前做这个效果的时候思路是错误的,今天修改了一下方法,因为之前的方法会在按钮上阻止事件冒泡,从而导致一个页面同时存在多个此功能的按钮出现点其他按钮不能隐藏层的bug。
下面的方法才是正确的:
HTML

<span class="search">我是按钮1</span><span><a class="clickme" href="#">我是按钮2</a></span>
<div class="div_d" style="display: none;">我是1那个弹出层</div>
<div class="div_e" style="display: none;">我是那个222222的2弹出层</div>

JS

  	/**
	 * 点击按钮显示层,点击其他地方隐藏层
	 * @param {str} btnName
	 * @param {str} divName
	 */
	var tarClickTip = function(btnName, divName) {
		$('.' + btnName).click(function(e) {
			$('.' + divName).show();
		});
		$(document).on('click', function(e) {
			var e = e ? e : window.event;
			var tar = e.srcElement || e.target;
			var tarClassName = $(tar).attr("class");
			if (tarClassName != btnName && tarClassName != divName) {
				$('.' + divName).hide();
			}
		});
	};
	$('.clickme').click(tarClickTip('clickme', 'div_e'));
	tarClickTip('search', 'div_d');

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);

Netbeans统一UTF-8编码的方法

Netbeans打开文件的默认编码并不是UTF-8,所以需要设置一下,不然总是中文乱码什么的。

1.找到你的Netbeans安装目录下的etc文件夹,如C:\Program Files\NetBeans 6.0 M9\etc
2.用记事本打开netbeans.conf
3.找到netbeans_default_options这一句(没带#号的,带#号的是注释)
4.在最后面加上一个空格,再加入-J-Dfile.encoding=UTF-8
如我现在的设置:

netbeans_default_options="-J-DAM_CONFIG_FILE=\"C:\Sun\AppServer\domains\domain1\config\AMConfig.properties\" -J-Dcom.sun.aas.installRoot=\"C:\Sun\AppServer\" -J-Xms128m -J-Xmx512m -J-XX:PermSize=32m -J-XX:MaxPermSize=160m -J-Dapple.laf.useScreenMenuBar=true -J-XX:+UseConcMarkSweepGC -J-XX:+CMSClassUnloadingEnabled -J-XX:+CMSPermGenSweepingEnabled -J-Dfile.encoding=UTF-8"

js 取地址栏参数

//取地址栏参数
var urlSearch=location.search.slice(1),//取得?后面的数据
searchArr=urlSearch.split('&amp;');
_.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。
实例代码:

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

sublime text 3 安装插件package control

sublime text 3已经支持命令行方式安装package control了~~~

复制代码:

import urllib.request,os; pf = 'Package Control.sublime-package'; ipp = sublime.installed_packages_path(); urllib.request.install_opener( urllib.request.build_opener( urllib.request.ProxyHandler()) ); open(os.path.join(ipp, pf), 'wb').write(urllib.request.urlopen( 'http://sublime.wbond.net/' + pf.replace(' ','%20')).read())

打开sublime text 3,按ctrl+`打开命令窗口,粘贴以上代码并回车即可。

参考地址:https://sublime.wbond.net/installation#st3

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

var isJqueryObj = function(obj) {
    return obj instanceof jQuery;
};
/**
 * 构造函数
 * @param {object} opts
 */
var WebDisk = function(opts) {
    opts = $.extend({
        &quot;element&quot;: 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() {
        
    }
});

Fiddler4使用教程

1. 配置域名

找到Filters菜单在Use filters下面的输入框输入域名,注意没有http://和后面的/然后以;号结束。
例如:
192.168.0.3;www.liuxiaofan.com;

2.运行

点击右上角的Actions按钮然后选择Run Filtersset Now

3.刷新页面

在浏览器里面刷新页面 注意不要使用火狐,因为要单独装插件,建议使用chorme或者ie。

4.查看结果

刷新页面之后会看到发出的请求然后选择需要的接口在右边选择Inspectors大类然后在子类Webforms下查看参数和返回结果,注意非json格式查看不了。