post

流行的前端工具推荐

1. node.js + npm, 这个是前端工具的一个平台,没有他们就没有以下的工具,建立开发环境,下载开发工具,运行开发工具的利器


2. bower, 库依赖管理器,类似于npm,但针对浏览器JavaScript的依赖管理,减少寻找库,下载库和升级库的烦恼
Read More

解决windows版Webstorm的svn插件不能使用的方法

如果你使用windows环境开发,并且svn工具用的是TortoiseSVN (小乌龟),那么你在安装完webstorm之后就会发现svn插件报这个错误。
can’t use subversion command line client : svn

意思就是不能使用svn的命令行工具,所以这个插件现在用不了。
原因是TortoiseSVN 默认不支持conmand line操作。

知道原因就可以找解决办法了:

1、 下载一个命令行工具 sliksvn
下载地址:https://sliksvn.com/download/

2、 一路下一步直到安装成功,如果你使用默认路径的话他应该被安装在这里 C:\Program Files\SlikSvn

3、 在with conmand line client设置成你的c:\Program Files\SlikSvn\bin\svn.exe即可使用svn了。

有的时候你可能还会遇到另外一个错误
Errors found while svn working copies detection

原因是版本不一致造成的,你选 1.8 format 或者1.7试试,对应上就可以了。

post

jQuery dataTables 的使用

jQuery 的插件 dataTables 是一个优秀的表格插件,提供了针对表格的排序、浏览器分页、服务器分页、筛选、格式化等功能。dataTables 的网站上也提供了大量的演示和详细的文档进行说明,为了方便学习使用,这里一步一步进行说明。

首先,需要到 dataTables 的网站 http://www.datatables.net/ 下载这个脚本库,

目前最新的版本是 1.8.2,下载的压缩包中使用的 jQuery 是 1.4.4 。现在 jQuery1.5.1 已经发布,所以,这里使用最新的 jQuery 1.5.1 。

然后,在网页中先加入 jQuery 的引用,然后,加入 dataTables 的引用。
Read More

post

windows 下安装nodejs及其配置环境

相信对于很多关注javascript发展的同学来说,nodejs已经不是一个陌生的词眼。有关nodejs的相关资料网上已经铺天盖地。由于它的高并发特性,造就了其特殊的应用地位。

国内目前关注最高,维护最好的一个关于nodejs网站应该是http://www.cnodejs.org/

这里不想谈太多的nodejs的相关信息。只说一下,windows系统下简单nodejs环境配置。

第一步:下载安装文件

下载地址:官网http://www.nodejs.org/download/ 

 

这里用的是 
Read More

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"

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

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格式查看不了。

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中设置各种语句的换行规范。

你就尽情的设置吧!

webstorm快捷键大全(亲自整理)

webstorm应该是目前最强的js编辑器了,结合sublime text可以很效率的开发项目。
今天整理了一些webstorm比较实用的快捷键:

Ctrl+/ 或 Ctrl+Shift+/ 注释(// 或者/*…*/ )
Shift+F6 重构-重命名
Ctrl+X 删除行
Ctrl+D 复制行
Ctrl+G 查找行
Ctrl+Shift+Up/Down 代码向上/下移动。
F2 或Shift+F2 高亮错误或警告快速定位
写代码,按Tab 生成代码
选中文本,按Ctrl+Shift+F7 高亮显示所有该文本,按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 格式化代码
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 删除文字开始
Ctrl + E Recent files popup 弹出最近打开的文件
F11 Toggle bookmark 切换标记,我觉得叫书签更好,就是sublime text 的F2
Ctrl + Shift + F12 Toggle maximizing editor 切换最大化编辑器
Alt + Shift + F Add to Favorites 添至收藏夹
   

Sublime Text 3 目前支持的插件列表

以下是截止到今天 2013年8月2日 Sublime Text 3 目前支持的插件列表:

(为了避免将来有人搜到这篇文章,看到的结果不是最新的,所以特别说明一下~)

Sublime Text2 实现快捷键在浏览器中预览功能

自从开始使用Sublime Text2这个神器之后,越来越喜欢它了。但是也有些不太方便的地方,比如预览功能,我习惯了DW的f12和eclispe的集成浏览器,当然ST也有这个功能,在编辑区右键菜单里面可以实现。不过还是要多点几下鼠标,很是不爽~
那么,接下来就是重点了!如何实现快捷键预览呢?
方法很简单,就是创建插件的形式了来实现了。

一、创建插件

点击菜单Tools -> New Plugin…,在创建好的py文件输入下列内容:

import sublime, sublime_plugin
import webbrowser
url_map = {
'/Users/jerry/Sites/test/' : 'http://test/',
}
class OpenBrowserCommand(sublime_plugin.TextCommand):
def run(self,edit):
window = sublime.active_window()
window.run_command('save')
url = self.view.file_name()
for path, domain in url_map.items():
if url.startswith(path):
url = url.replace(path, domain).replace('\', '/')
break
webbrowser.open_new(url)

然后将文件保存到Packages/User目录(Packages可通过菜单里的Browser Packages…打开),文件名随意,如open_browser.py。这样插件部分完工了。

二、为刚才的插件分配快捷键

点菜单Tools -> Command Palette…,或者shift+cmd+p,打开命令集,选择“key Bindings – User”打开个人快捷键配置,输入下列内容:

[{ "keys": ["f12"], "command": "open_browser" }]
这样就搞定了:)那么我们可以测试一下了。打开一个html文件,按f12试试,没意外的话文件会在默认浏览器打开了。

Sublime Text 2 不完全使用手册

♦ 强大的多行选择和多行编辑:

  • 鼠标选中多行,按下 Ctrl+Shift+L (Command+Shift+L) 即可同时编辑这些行;
  • 鼠标选中文本,反复按 CTRL+D (Command+D) 即可继续向下同时选中下一个相同的文本进行同时编辑;
  • 鼠标选中文本,按下 Alt+F3 (Win) 或 Ctrl+Command+G(Mac) 即可一次性选择全部的相同文本进行同时编辑;
  • Shift+鼠标右键 (Win) 或 Option+鼠标左键 (Mac) 或使用鼠标中键可以用鼠标进行竖向多行选择;
  • Ctrl+鼠标左键(Win) 或 Command+鼠标左键(Mac) 可以手动选择同时要编辑的多处文本

♦ Package Control(绝不可错过的扩展包管理器)

Sublime Text 2 除了自身拥有无数实用功能和特性之外,它还能安装使用各种扩展/皮肤/配色方案等来增强自己。现在介绍的这个 Package Control 可以看做是一个ST2的扩展管理器,使用它,你可以用非常神奇、非常简单方便的方法去下载、安装、删除 Sublime Text 2 的各种插件、皮肤等,相信我,想更好地使用 ST2 绝对不能没有它!不过 ST2 本身并没有自带这个工具,我们需要自行安装它,方法很简单:

方法1:

[js]import urllib2,os; pf=’Package Control.sublime-package’; ipp=sublime.installed_packages_path(); os.makedirs(ipp) if not os.path.exists(ipp) else None; urllib2.install_opener(urllib2.build_opener(urllib2.ProxyHandler())); open(os.path.join(ipp,pf),’wb’).write(urllib2.urlopen(‘http://sublime.wbond.net/’+pf.replace(‘ ‘,’%20’)).read()); print ‘Please restart Sublime Text to finish installation'[/js]
复制上面代码到控制台执行即可。

方法2:

  1. 在 SublimeText2 的目录里面找到 Data > Installed Packages 的文件夹 (如没有请手动新建)
  2. 下载 Package Control.sublime-package 文件(地址自己搜索文件大小62kb)
  3. 将下载到的文件放进去 Installed Packages 里面
  4. 重新启动 Sublime Text 即可

♦ 常用快捷键

  • 快速搜索文件 —— CTRL + p(例如搜索routes/user/messages.js可以写r/u/m)
  • 行内注释 —— CTRL + /
  • 块注释 —— CTRL + SHIFT + /
  • 列选择模式 —— 鼠标右键+shift
  • 合并行 —— CTRL + J
  • 删除行 —— ctrl+shift+K
  • 复制行 —— ctrl+shift+D
  • 转到行 —— ctrl+G
  • 选择行 —— ctrl+L
  • 移动行 ——ctrl+shift+↑↓
  • 选择词 —— ctrl+D
  • 选择括号内内容 —— CTRL + SHIFT + M
  • 光标移动至括号内开始或结束的位置 —— CTRL + M
  • 选择标签及内容 —— ctrl + shift + A
  • 折叠代码 —— ctrl+shift+[
  • 设置书签 —— ctrl+F2
  • 词互换 —— Ctrl+T
  • 词改为大写—— Ctrl+KU
  • 词改为小写—— Ctrl+KL

♦ Emmet快捷键

  • 删除标签 —— ctrl+shift+;
  • 标签重命名 —— ctrl+shift+’
  • 套标签—— ctrl+alt+回车

♦ 推荐的部分插件:

  • Gits:可以轻松集成 GitHub
  • SFTP:直接编辑 FTP 或 SFTP 服务器上的文件
  • EMMET:这货对于前端的同学来说不得了,可以超快速编写HTML文件 (视频演示)
  • ConvertToUTF8:ST2只支持utf8编码,该插件可以显示与编辑 GBK, BIG5, EUC-KR, EUC-JP, Shift_JIS 等编码的文件
  • Clipboard History:剪切板历史
  • WordPress:集成一些WordPress的函数,对于像我这种经常要写WP模版和插件的人特别有用!
  • HtmlTidy:清理与排版你的HTML代码
  • PHPTidy:整理与排版php代码
  • Bracket Highlighter:类似于代码匹配,可以匹配括号,引号等符号内的范围。
  • Prefixr:CSS3 私有前缀自动补全插件,显然也很有用哇
  • Sublime h3Intel:代码自动提示
  • JS Format:一个JS代码格式化插件。
  • Placeholders:故名思意,占位用,包括一些占位文字和HTML代码片段,实用。
  • YUI Compressor:压缩JS和CSS文件
  • Goto-CSS-Declaration:跳转到css文件该class的声明处,方便修改查看,如图下所示,注意对应的css文件要同时打开才行。

WordPress必备插件

All in One SEO Pack

见其名则知道这个插件是专门为博客的SEO(搜索引擎优化)服务。软矿博客也在使用这个插件,一句话,强大无比。有了All in One SEO Pack,你只要通过插件设置,即可完成博客标题、描述和关键字的设置,给每篇文章添加独立的关键词、meta标签和描述,自动生成摘要,设置存档页和首页的内容不被抓取。……一个字强大无比,即使你不知道何为SEO,只要上网搜索相关的设置教程,完成All in One SEO Pack的设置,即可不再去管博客SEO的问题。当然除此之外,你还是要做好每一篇文章的内容和每一篇文章的关键,这些不是插件能够帮你完成的。

WP Super Cache

WP Super Cache插件是将动态博客文件转换成静态HTML文件。这样别人访问你的博客时只是访问伪静态的HTML文件而不是笨重的PHP文件,这对节省空间流量有着很大的帮助作用。了解更多节省空间流量的方法,请参考节省wordpress博客空间流量法则

Google XML Sitemaps

Google XML Sitemaps插件将会生成一个特殊的XML网站地图,这将有助于谷歌,Bing,雅虎和Ask.等搜索引擎更好地收录你的博客。有了这样一个网站地图,爬虫更容易地查看您网站的完整结构和检有效地检测网站内容。此外,当你每更新你的博客时它都会通知搜索引擎,以便搜索引擎收录你的文章和更新你博客的快照。想要谷歌更好地收录你的网站和你网站的文章,Google XML Sitemaps必装无疑。
Read More

JavaScript所有的操作符

操作符分类 操作符 描述




+ (加法) 将两个数相加。
++ (自增) 将表示数值的变量加一(可以返回新值或旧值)。
(求相反数,减法) 作为求相反数操作符时返回参数的相反数。作为二进制操作符时,将两个数相减。
(自减) 将表示数值的变量减一(可以返回新值或旧值)。
* (乘法) 将两个数相乘。
/ (除法) 将两个数相除。
% (求余) 求两个数相除的余数。
字符串操作符 + (字符串加法) 连接两个字符串。
+= 连接两个字符串,并将结果赋给第一个字符串。




&& (逻辑与) 如果两个操作数都是真的话则返回真。否则返回假。
|| (逻辑或) 如果两个操作数都是假的话则返回假。否则返回真。
! (逻辑非) 如果其单一操作数为真,则返回假。否则返回真。



& (按位与) 如果两个操作数对应位都是 1 的话则在该位返回 1。
^ (按位异或) 如果两个操作数对应位只有一个 1 的话则在该位返回 1。
| (按位或) 如果两个操作数对应位都是 0 的话则在该位返回 0。
~ (求反) 反转操作数的每一位。
<< (左移) 将第一操作数的二进制形式的每一位向左移位,所移位的数目由第二操作数指定。右面的空位补零。
>> (算术右移) 将第一操作数的二进制形式的每一位向右移位,所移位的数目由第二操作数指定。忽略被移出的位。
>>> (逻辑右移) 将第一操作数的二进制形式的每一位向右移位,所移位的数目由第二操作数指定。忽略被移出的位,左面的空位补零。




= 将第二操作数的值赋给第一操作数。
+= 将两个数相加,并将和赋给第一个数。
-= 将两个数相减,并将差赋给第一个数。
*= 将两个数相乘,并将积赋给第一个数。
/= 将两个数相除,并将商赋给第一个数。
%= 计算两个数相除的余数,并将余数赋给第一个数。
&= 执行按位与,并将结果赋给第一个操作数。
^= 执行按位异或,并将结果赋给第一个操作数。
|= 执行按位或,并将结果赋给第一个操作数。
<<= 执行左移,并将结果赋给第一个操作数。
>>= 执行算术右移,并将结果赋给第一个操作数。
>>>= 执行逻辑右移,并将结果赋给第一个操作数。




== 如果操作数相等的话则返回真。
=== 绝对相等比较(null==undefined)结果将返回true
(null===undefined)结果将返回false
(1==”1”) 结果将返回true,(1===”1”) 结果将返回false。
!= 如果操作数不相等的话则返回真。
> 如果左操作数大于右操作数的话则返回真。
>= 如果左操作数大于等于右操作数的话则返回真。
< 如果左操作数小于右操作数的话则返回真。
<= 如果左操作数小于等于右操作数的话则返回真。




?: 执行一个简单的“if…else”语句。
, 计算两个表达式,返回第二个表达式的值。
delete 允许你删除一个对象的属性或数组中指定的元素。
new 允许你创建一个用户自定义对象类型或内建对象类型的实例。
this 可用于引用当前对象的关键字。
typeof 返回一个字符串,表明未计算的操作数的类型。
instanceof 用于判断一个变量是否某个对象的实例
void 该操作符指定了要计算一个表达式但不返回值。