月度归档:2014年01月

页面引入JavaScript脚本

1、直接添加代码块
通过script标签,可直接将JavaScript代码嵌入网页
Example:

<script type="text/javascript">
  document.write("Hello World!")
</script>

2、加载外部脚本

<script charset="utf-8" src="example.js"></script>

直接将script标签写在页面上,浏览器加载时会阻塞页面渲染,知道js加载完成。

异步加载的脚本可以这样引入

<script src="js/require.js" defer async="async"></script>

其中,defer规定是否对脚本执行进行延迟,直到页面加载为止。但只有Internet Explorer支持defer属性。
async属性可以保证脚本下载的同时,浏览器继续渲染。一旦渲染完成,再执行脚本文件,这就是“非同步执行”的意思。需要注意的是,一旦采用这个属性,就无法保证脚本的执行顺序。哪个脚本先下载结束,就先执行那个脚本。IE 10支持async属性,低于这个版本的IE都不支持。如果同时使用async和defer属性,后者不起作用,浏览器行为由async属性决定。

如果 async=”async”:脚本相对于页面的其余部分异步地执行(当页面继续进行解析时,脚本将被执行)
如果不使用 async 且 defer=”defer”:脚本将在页面完成解析时执行
如果既不使用 async 也不使用 defer:在浏览器继续解析页面之前,立即读取并执行脚本

3、动态嵌入脚本
创建script元素,插入页面,可动态嵌入脚本,如下:

var jsfile = ['/js/logic/ee.js', '/js/logic/ff.js'];
for(var i = 0; i < jsfile.length; i++){
    var script = document.createElement('script');
    script.src = jsfile[i];
    script.async = false;
    var src = jsfile[i];
    script.onload = function(){
        console.log('onload ' + this.src);
    }
    document.head.appendChild(script);
}

不管async是不是设置为false,都不会阻塞页面渲染。但设置async为false,可保证按照添加到页面的顺序加载js,设置为true或不设置都不会按顺序加载。
还有就是,js加载下来后会立即执行,然后才会执行onload方法。

参考:
http://javascript.ruanyifeng.com/bom/engine.html

nodejs环境使用jshint

一、概述
jshint是检测JavaScript语法问题的工具,可以根据自己的需要配置检测规则。

二、安装
npm install jshint -g
一般全局安装就可以了,可以在任何目录下使用jshint命令。

三、简单的使用方法
1、检测单个js文件语法
在myfile.js所在的目录运行:
jshint myfile.js
2、检测当前目录及其子目录所有js文件的语法
jshint ./

四、配置文件
有以下三种方法设置jshint配置文件
1、使用 –config 选项指定配置文件
Example:
jshint –config ./aaa ./
表示检测当前目录内所有的js文件,并指定配置文件为当前目录下的aaa文件。
2、使用 .jshintrc 文件,如果在运行jshint是,如果没有–config 选项,则会以当前目录的.jshintrc文件为配置文件,如果当前目录没有这个文件,则以其父目录.jshintrc 文件配置文件,仍没有的话,则继续找其父目录,直至根目录。
3、在nodejs项目的package.json文件的jshintConfig字段中设置配置文件。

五、内嵌配置
除了使用配置文件配置检测规则外,还可以在js文件内,使用特殊的注释,配置检测规则。
Example:
/* jshint undef: true, unused: true */
/* global MY_GLOBAL */
或者
// jshint undef: true, unused: true
这两种注释方式都是可以的,其中global参数告诉JSHint,该变量是全局变量,从其他js引入的。而且这些注释的作用域是函数内,这意味着如果你把这段注释放在某个函数内,则该配置只在该函数内起作用。

六、JSHint的配置选项(转自:http://www.zipeng.info/archives/jshint-intro.html)
asi
如果是真,JSHint会无视没有加分号的行尾,
自动补全分号一直是Javascript很有争议的一个语法特性。默认,JSHint会要求你在每个语句后面加上分号,但是如果你认为自己理解了asi(automatic semicolon insertion),你可以抛弃JSHint对分号的检查。

bitwise
如果为真,JSHint会禁用位运算符
Javascript允许位运算,但是他却没有整型,位运算符要把参与运算的数字从浮点数变为整数,并在运算后再转换回来。这样他们的效率就不如在别的语言中那么高。

boss
很霸气的选项,如果为真,那么JSHint会允许在if,for,while里面编写赋值语句。
一般来说,我们会在循环、判断等语句中加入值的比较来做语句的运行条件,有时候会把==错写成赋值的=,通常,JSHint会把这个认定为一个错误,但是开启这个选项的化,JSHint就不会检查判断条件中的赋值 ,你是boss,你说的算:)。

curly
如果为真,JSHint会要求你在使用if和while等结构语句时加上{}来明确代码块。
Javascript允许在if等结构语句体只有一句的情况下不加括号。不过这样做可能会让你的代码读起来有些晦涩。

debug
如果为真,JSHint会允许代码中出现debugger的语句。不过建议你最好在检测代码前去掉debug的语句。

eqeqeq
如果为真,JSHint会看你在代码中是否都用了===或者是!==,而不是使用==和!=。
我们建议你在比较0,”(空字符),undefined,null,false和true的时候使用===和!===。

eqnull
如果为真,JSHint会允许使用”== null”作比较。
== null 通常用来判断一个变量是undefined或者是null(当时用==,null和undefined都会转化为false)。

evil
如果为真,JSHint会允许使用eval
eval提供了访问Javascript编译器的途径,这有时很有用,但是同时也对你的代码形成了注入攻击的危险,并且会对debug造成一些困难。
记住,Function构造函数也是另一个‘eval’,另外,当传入的参数是字符串的时候,setTimeout和setInterval也会类似于eval。

forin
如果为真,那么,JSHint允许在for in 循环里面不出现hasOwnProperty,
for in循环一般用来遍历一个对象的属性,这其中也包括他继承自原型链的属性,而hasOwnProperty可以来判断一个属性是否是对象本身的属性而不是继承得来的。

immed
如果为真,JSHint要求匿名函数的调用如下:
(function(){
//
}());
而不是
(function(){
//bla bla
})();

laxbreak
如果为真,JSHint则不会检查换行。
Javascript会通过自动补充分号来修正一些错误,因此这个选项可以检查一些潜在的问题。

maxerr
设定错误的阈值,超过这个阈值jshint不再向下检查,提示错误太多。

newcap
如果为真,JSHint会要求每一个构造函数名都要大写字母开头。
构造器是一种使用new运算符来创建对象的一种函数,new操作符会创建新的对象,并建立这个对象自己的this,一个构造函数如果不用new运算符来运行,那么他的this会指向全局对象而导致一些问题的发生。

noarg
如果为真,JSHint会禁止arguments.caller和arguments.callee的使用
arguments对象是一个类数组的对象,它具有一个索引值。arguments.callee指向当前执行的函数(这个在ES5的严格模式中被禁用了),而arguments.caller指向调用当前函数的函数(如果有的话),并且,他并不是在所有的Javascript实现里面都有。

noempty
如果为真,JSHint会禁止出现空的代码块(没有语句的代码块)。
如果为真,JSHint会禁用构造器,以避免一些问题。
在JSLint中会主动禁用构造器的方式以避免一些潜在问题,但其实很多构造器的使用并非有害,例如如下的调用
new JsUIWindow();
//注意这个调用是没有把构造器的结果赋值给变量的
因此,我们需要使用构造器的时候可以禁用这个选项。

nomen
如果为真,JSHint会禁用下划线的变量名。
很多人使用_name的方式来命名他们的变量,以说明这是一个私有变量,但实际上,并不是,下划线只是做了一个标识。
如果要使用私有变量,可以使用闭包来实现。

onevar
如果为真,JSHint期望函数只被var的形式声明一遍。

passfail
如果为真,JSHint会在发现首个错误后停止检查。

plusplus
如果为真,JSHint会禁用自增运算和自减运算
++和–可能会带来一些代码的阅读上的困惑。

regexp
如果为真,JSHint会不允许使用.和[^…]的正则,
因为这样的正则往往会匹配到你不期望的内容,并可能会应用造成一些危害。

undef
如果为真,JSHint会要求所有的非全局变量,在使用前都被声明。
如果你不在一个本地作用域内使用var的方式来声明变量,Javascript会把它放到全局作用域下面。这样会很容易引起错误。

sub
如果为真,JSHint会允许各种形式的下标来访问对象。
通常,JSHint希望你只是用点运算符来读取对象的属性(除非这个属性名是一个保留字),如果你不希望这样可以关闭这个选项。

strict
如果为真,JSHint会要求你使用use strict;语法。
Strict 模式是ES5里面的一个新特性,他允许你把一个程序或者函数放在一个“严格”的作用域中。可见Resig写的一篇关于严格模式的blog
严格模式做了几件事情,
1、他可以捕获一些错误和异常
2、当我们进行一下“不安全”的操作时,他会抛异常,例如访问全局变量。
3、他会禁止你使用一些奇淫技巧,或者不良的代码编写。

white
如果为true,JSHint会依据严格的空白规范检查你的代码。

nodejs使用MySQL

一、搭建环境
nodejs和MySQL的安装就不说了,安装好后,通过npm安装MySQL模块。
在自己nodejs项目的根目录,运行
npm install mysql --save
其中,--save是将mysql模块写入package.json文件的依赖模块配置中,也可以不添加此选项。

二、创建数据库
运行下面的sql语句,可创建一个简单的数据库和user表
创建数据库tsnode

CREATE DATABASE `tsnode`;

创建表user

CREATE TABLE `user` (
`userid` int(11) NOT NULL AUTO_INCREMENT,
`username` varchar(45) DEFAULT NULL COMMENT '账号',
`password` varchar(45) DEFAULT NULL COMMENT '密码',
`userdesc` varchar(145) DEFAULT NULL COMMENT '备注',
`birthday` datetime DEFAULT CURRENT_TIMESTAMP COMMENT '生日',
`logincount` int(11) DEFAULT '0' COMMENT '登录次数',
PRIMARY KEY (`userid`),
UNIQUE KEY `iduser_UNIQUE` (`userid`)
) ENGINE=InnoDB AUTO_INCREMENT=6 DEFAULT CHARSET=utf8 COMMENT='table for user manage';

三、项目js文件中引入mysql模块并操纵数据库
1、连接数据库并查询,将返回数据从控制台输出

var mysql = require('mysql');
var connection = mysql.createConnection({
    'host': 'localhost',
    'user': 'root',
    'password': 'passoo',
    'port': '3307',
    'database': 'tsnode'
});

connection.connect();
connection.query('select * from user limit 0,10', function(err, rows, fields){
    if(err) throw err;
    console.log(rows);  // 输出查询结果JSON
    var birthday = rows[0].birthday;
    console.log(birthday.getTime());  // 输出生日
    console.log(fields);  // 输出字段属性
});
connection.end();

2、使用连接池

/**
 * 使用连接池
 */
var mysql = require('mysql');
var pool = mysql.createPool({
    'host': 'localhost',
    'user': 'root',
    'password': 'passoo',
    'port': '3307',
    'database': 'tsnode'
});

pool.getConnection(function(err, connection){
    console.log('1 connected!');
    // 执行SQL语句
    connection.query("INSERT INTO `tsnode`.`user` (`username`, `password`, `userdesc`) VALUES ('realwall', 'passoo', 'This is user desc2')", function(err, result){
        if(err){
            connection.rollback(function(){
                throw err;
            });
        }
        console.log('connection 1 insert');
        console.log(result);
        // 将连接释放到连接池
        connection.release();
        console.log('connection 1 released');
    });
});

pool.getConnection(function(err, connection){
    if(err) throw err;
    console.log('2 connected!');
    // 执行SQL语句
    connection.query('select * from user limit 0,10', function(err, rows){
        console.log('connection 2 query');
        console.log(rows);
        // 将连接释放到连接池
        connection.release();
        console.log('connection 2 released');
    });
});

mysql命令基础

windows启动mysql服务
运行(windows+r)-> net start mysql
windows关闭mysql服务
运行(windows+r)-> net stop mysql
windows下查看mysql服务是否启动
netstat -ano | findstr 3306
Linux下查看mysql服务是否启动
netstat -ano | grep 3306
登录
mysql -h hostname -u username -p
Example:
mysql -h localhost -u root -p
查看所有数据库
show databases;
设置当前数据库
use <数据库名>;
Example:
use testphp;
查看当前使用数据库
select database();
删除数据库
drop database <数据库名>
查看数据库包含的表
show tables;
查看表结构
describe <表名> ; 或 desc <表名>;
Example:
describe person; 或 desc person;
操作数据库
在设置当前数据库后,即可运行sql语句,操纵数据库
退出
exit 或 快捷键Ctrl + d

git基本操作

 

取得项目的仓库
1)在工作目录中初始化新仓库
git init
2)从现有仓库克隆
git clone git://github.com/realwall/realwall.git [重命名]
这里采用的是git协议,也可以是其他,如http(s)
将当前目录下的文件纳入版本控制
git add *.c
git add README
git commit -m ‘initial project version’
检查当前文件状态
文件状态:untracked(未跟踪),unmodified(未修改),modified(已修改),staged(已暂存)
git status
暂存文件
git add README
注:git add是一个多功能命令,根据目标文件的状态不同,此命令的效果也不同:可以用它来跟踪新文件,或者把已跟踪的文件放入暂存区域,还能用于合并时把有冲突的文件标记为已解决状态。
忽略某些文件
在项目任意目录创建文件.gitignore,以忽略某些文件,使它们不会总是出现在未跟踪文件列中。
.gitignore文件示例:
#此为注释,将被git忽略
*.a #忽略左右后缀名为a的文件
!lib.a #lib.a除外
查看已暂存和未暂存的更新
git diff
提交更新
git commit
注:每次提交前,要先用git status命令查看所有修改是否都已暂存
从跟踪列表移除文件
git rm README
移动/重命名文件
git mv file_from file_to
查看当前远程库
git remote [-v]
选项-v显示远程库的地址
添加远程仓库
git remote add [shortname] [url]
注:如果在www.github.com上添加远程仓库,需先在网站上新建一个同名仓库,然后再将本地项目提交到该新建仓库远程地址。
从远程仓库抓取数据
git fetch [remote-name]
推送数据到远程仓库
git push [remote-name] [branch-name]
查看某个远程仓库的详细信息
git remote show [remote-name]
重命名远程仓库
git remote rename [old-remote-name] [new-remote-name]
删除远程仓库
git remote rm [remote-name]

 

npm命令概述

npm (node package manager)是node模块管理工具,类似与Linux下的yum和apt。

常用npm命令(参考:https://npmjs.org/doc/
安装模块
npm install
安装当前目录package.json文件中配置的dependencies模块
安装本地的模块文件
npm install <tarball file>
Example:
npm install ./package.tgz
安装指定URL的模块
npm install <tarball url>
Example:
npm install https://github.com/indexzero/forever/tarball/v0.5.6
安装本地文件系统中指定的目录包含的模块
npm install <folder>
安装并更新package.json中的版本配置
npm install <name> [–save|–save-dev|–save-optional]
其中:
添加–save 参数安装的模块的名字及其版本信息会出现在package.json的dependencies选项中
添加–save-dev 参数安装的模块的名字及其版本信息会出现在package.json的devDependencies选项中
添加–save-optional 参数安装的模块的名字及其版本信息会出现在package.json的optionalDependencies选项中
安装模块的config的tag配置中含有指定tag的版本
npm install <name>@<tag>
Example:
npm install sax@latest
安装模块的指定版本
npm install <name>@<version>
Example:
npm install underscore@1.5.2
安装模块指定版本号范围内的某一个版本
npm install <name>@<version range>
Example:
npm install async@”>=0.2.0 <0.2.9″
–force强制拉取远程资源,即使本地已经安装这个模块
Example:
npm install underscore –force
-g或–global全局安装模块,如果没有这个参数,会安装在当前目录的node_modules子目录下
Example:
npm install -g express
显示npm的bin目录
npm bin
设置npm配置
npm config set <key> <value> [–global]
使用–global参数,设置全局配置
Example:
设置代理
npm config set proxy=http://proxy.tencent.com:8080
设置npm的镜像地址
npm config set registry http://npm.oa.com
获取npm配置
npm config get <key>
Example:
获取npm当前镜像地址
npm config get registory
删除npm配置
npm config delete <key>
Example:
删除代理设置
npm config delete proxy
在编辑器中打开npm配置文件
npm config edit
交互式的创建package.json文件
npm init
创建模块的压缩包
npm pack [<pkg> [<pkg> … ]]
如果没有参数,则npm会打包当前模块目录
发布模块,发布后可通过名称来安装该模块
npm publish <tarball>
npm publish <folder>
其中:
<folder>:包含package.json文件的目录
<tarball>:经过gzip压缩并归档的一个URL或文件路径,该压缩包包含单个目录,且该目录内有package.json文件
删除模块
npm rm <name>
npm r <name>
npm uninstall <name>
npm un <name>
注意:不会删除package.json文件dependencies选项中对应的依赖配置
查找模块
npm search [search terms ..]
npm s [search terms ..]
npm se [search terms ..]
查找匹配查找字符串的模块
更新模块
npm update [-g] [<name> [<name> … ]]
更新指定name列表中的模块。-g参数更新全局安装的模块。
如果没有指定name,且不是在某个模块内,会更新当前目录依赖的所有包都会被更新(包括全局和模块内);如果当前目录在某个模块目录内,会更新该模块依赖的模块,所以不指定name直接运行npm update时,最好在某个模块内运行,以免更新到其他不想更新的模块。
执行脚本
npm start [<name>]
npm stop [<name>]
npm test [<name>] 等
运行package的start脚本,该脚本写在package.json文件scripts的start字段中。
该字段的值可以是当前系统控制台可执行的脚本,也可以是当前系统可执行文件的路径。
如果不传name参数,则执行当前目录下package.json文件中定义的脚本。
package.json文件
模块的配置文件,详见https://npmjs.org/doc/files/package.json.html