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

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

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

加速

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

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

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

添加项目

默认情况下一次只能打开一个项目,如果需要打开多个就按照下面的方法
File -> settings -> Directories -> Add Content Root 中添加你需要的工程目录。

界面

  • 修改主题:Appearance,选择主题Theme-Darocula
  • 修改字体:Editor-colors & Fonts-Font,选择个方案然后另存就可以设置字体和字号了。字号我这里 17px 英文相对清晰,你可以根据预览来微调,IDEA12 开始自带了 Source Code Pro, Adobe 家的开源等宽字体,也很舒服滴。
  • 自动换行:Editor,勾选Use soft wraps in editor
  • 显示行号:Editor-Appearance,勾选Show line numbers
  • 显示代码提示速度:Editor-Code Completion,Autopopup in(ms):设置为0
  • 有木有 ST2 那种同时选中多个区域? 答:木有,我们一般用Refactor 重构(Shift + F6),列编辑(Alt + 拖动,可以选中多行),批量替换(Ctrl + r) 来实现.
  • 右边那条线是啥? 传送中的代码对齐线,给那些不喜欢自动换行的人准备的。Settings>Appearance>Show right margin ; 这玩意儿格式化的时候控制换行区域,不用的话可以禁用
  • 关闭任意位置编辑(也称虚拟空格)? Settings>Editor>Allow placement of caret after end of line
  • 注释在行首而不是紧接着代码? Code Style > Javascript > Wrapping and Braces > comment at first column 取消勾选

代码拼写检查设置:

  • 重复的变量声明:General-Duplicate JavaScript declaration
  • 未声明的变量(重要!不然会出现N个全局变量):General- Implicitly declared global JavaScript variable

常用快捷键

Ctrl+/ 或 Ctrl+Shift+/ 注释(// 或者/*…*/ )
Shift+F6 重构-重命名(快速修改html标签)
Ctrl+X 删除行
Ctrl+D 复制行
Ctrl+G 查找行
Ctrl+Shift+Up/Down 代码向上/下移动。
F2 或Shift+F2 高亮错误或警告快速定位
写代码,按Tab 生成代码
选中文本,按Ctrl+Shift+F7、ALT+F3 高亮显示所有该文本,按Esc高亮消失。(因为这个功能我就可以发放心的放弃sublime了)
Ctrl+B或Ctrl+鼠标左键单击 快速打开光标处的类或方法,(NB的功能)
Ctrl + Alt + B Go to implementation(s) 跳转方法实现处
Ctrl + Shift + I Open quick definition lookup 打开定义快速查找
Alt + Up/Down Go to previous/next method 跳转到上一个/下一个方法
Ctrl+E 最近打开的文件
Alt+F1 查找代码所在位置
Ctrl+Alt+L我一般都会手动改为F4 格式化代码
Ctrl+R 替换文本
Ctrl+F 查找文本
Ctrl+P 方法参数提示
F3 查找下一个
Shift+F3 查找上一个
alt+Shift+F 将当前文件加入收藏夹
ctrl+alt+S 打开配置窗口
ctrl+Shift+N 通过文件名快速查找工程内的文件(必记)
ctrl+Shift+alt+N 通过一个字符快速查找位置(必记)
Shift+enter 重新开始一行(无论光标在哪个位置)
Ctrl + Alt + T with…(if, else, try, catch, for, etc)用 * 来围绕选中的代码行,( * 包括 if 、 while 、 try catch 等)
Ctrl + Shift + U Toggle case for word at caret or selected block 光标所在位置大小写
Ctrl + Delete Delete to word end 删除文字结束
Ctrl + Backspace Delete to word start 删除文字开始
F11 Toggle bookmark 切换标记,我觉得叫书签更好,就是sublime text 的F2
Ctrl + Shift + F12 Toggle maximizing editor 切换最大化编辑器

未完待续……

最后别忘了导出设置,免得每次都要配置半天。

webstorm 7.0.* 注册码,已测试可用。

WebStorm注册码

User Name:
EMBRACE

License Key:
===== LICENSE BEGIN =====
24718-12042010
00001h6wzKLpfo3gmjJ8xoTPw5mQvY
YA8vwka9tH!vibaUKS4FIDIkUfy!!f
3C"rQCIRbShpSlDcFT1xmJi5h0yQS6
===== LICENSE END =====

PhpStorm注册码

User Name:
EMBRACE
License Key:
===== LICENSE BEGIN =====
43136-12042010
00002UsvSON704l"dILe1PVx3y4"B3
49AU6oSDJrsjE8nMOQh"8HTDJHIUUh
gd1BebYc5U"6OxDbVsALB4Eb10PW8"
===== LICENSE END =====

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] == "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
	});

})