鼠标滚轮控制页面滚动(模仿苹果官网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格式查看不了。

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

&lt;input type=&quot;text&quot; value=&quot;请输入数据APPID&quot; data-empty=&quot;请输入数据APPID&quot; class=&quot;form-input-text&quot;&gt;
      /**
         * 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({
        &quot;element&quot;: '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
    });
});

WebStorm常用设置和常用快捷键(持续更新……)

今天下载了最新版本的WebStorm 7。反正又要重新设置一番了,干脆写下来记录到博客里面,免得以后每次忘了还要到处搜索比较麻烦。

加速

禁用多余的插件,关掉没必要的代码检查项。
webstorm慢的原因主要是2点:

  • 插件加载太多,把什么GIT SVN GITHUB FTP。。。。禁掉,其实都没必要。
  • 代码检查,如果你不设置一下,每次检查都要很长时间,而且CPU不给力的电脑就会很卡。

不过有个插件是我必须装的,css-x-file。
Read More

IntelliJ IDEA中自动换行和标准线的设置

如何在IntelliJ IDEA中问如何在Editor中设置自动换行,和自动换行标准线(我自己起的名字,就是编辑窗口中的那条竖线)的位置,没有看到解答。而且好多人说用不着换行什么的?这充分说明好多同志对IDEA的强大功能还没有充分了解。
关于那条竖线的来历——上古时代的编辑器是没有自动折行的功能的,而且终端分辨率的问题,一行只能显示80个字符,因此很多上古时代过来的人都留下了一行写80字符的习惯,渐渐演变成一种所为的“规范”。
解决其实这个问题很简单:
Setting–>Project–>Project Code Style –> Edit Global Setting…
在Global Code Style窗口中,在General中的Right margin (column):中设置标准线的位置。
在Wrapping中设置各种语句的换行规范。

你就尽情的设置吧!

使用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] == &quot;function&quot; &amp;&amp;
				typeof _super[name] == &quot;function&quot; &amp;&amp; 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 &amp;&amp; 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({
				&quot;element&quot;: '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
	});

})