发表于 | 分类于

分组操作符（），括号内只能包含表达式

1
var num = (1,323,5,6)  //num等于最后一个数；
1
2
(function f(){})()
//加上（），函数声明就可以直接调用了，这是因为（）把里面的函数声明转成表达式了。

//再看一个

1
2
3
4
5
try {
    (var x = 5); // 分组操作符只能包含表达式，不能包含语句（这里的var就是语句）(x=5)这就是正确的。
  } catch(err) {
    // SyntaxError（因为“var x = 5”是一个语句，而不是表达式——对表达式求值必须返回值，但对语句求值则未必返回值）
  }

4、使用花括号（{}）来定义对象字面量，JSON数据格式，代码块。

发表于 | 分类于

sf

定义：确保一个类仅有一个实例，并提供一个访问它的全局访问点。

实现单例模式 （不透明的）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
// 定义一个类
function Singleton(name) {
    this.name = name;
    this.instance = null;
}
// 原型扩展类的一个方法getName()
Singleton.prototype.getName = function() {
    console.log(this.name)
};
// 获取类的实例
Singleton.getInstance = function(name) {
    if(!this.instance) {
        this.instance = new Singleton(name);
    }
    return this.instance
};

// 获取对象1
var a = Singleton.getInstance('a');
// 获取对象2
var b = Singleton.getInstance('b');
// 进行比较
console.log(a === b);

我们也可以使用闭包来实现：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
function Singleton(name) {
    this.name = name;
}
// 原型扩展类的一个方法getName()
Singleton.prototype.getName = function() {
    console.log(this.name)
};
// 获取类的实例
Singleton.getInstance = (function() {
    var instance = null;
    return function(name) {
        if(!this.instance) {
            this.instance = new Singleton(name);
        }
        return this.instance
    }        
})();

// 获取对象1
var a = Singleton.getInstance('a');
// 获取对象2
var b = Singleton.getInstance('b');
// 进行比较
console.log(a === b);

实现单例模式 （透明的）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
// 单例构造函数
function CreateSingleton (name) {
    this.name = name;
    this.getName();
};

// 获取实例的名字
CreateSingleton.prototype.getName = function() {
    console.log(this.name)
};
// 单例对象
var Singleton = (function(){
    var instance;
    return function (name) {
        if(!instance) {
            instance = new CreateSingleton(name);
        }
        return instance;
    }
})();

// 创建实例对象1
var a = new Singleton('a');
// 创建实例对象2
var b = new Singleton('b');

console.log(a===b);

发表于 | 分类于

博客园

1、JS中判断checkbox是否被选中

对于在js中来判断checkbox是否被选中很简单，举个例子来说

HTML代码：

1
<input type="checkbox" name="box">

相应的javascript代码如下：

1
2
var check = document.getElementsByTagName('input')[0];
console.log(check.checked);//false

因为HTML代码中没有设置checked属性值，所以默认返回false,反之则返回true;若要在HTML中设置checkbox为选中状态则可以这样设置：

1
<input type="checkbox" name="box" checked="true">

2、JQ中判断checkbox是否被选中

(1)、JQ1.6版本之前（不包括1.6版本）判断checkbox是否被选中用的是attr()方法，HTML代码与上面相同，只放JQ代码：

1
console.log($("input[type='checkbox']").attr('checked'));//false

不要想着在JQ1.6版本之前使用prop()方法，只会报出$().prop()is not a function的错误

(2)、JQ1.6版本之后Jquery中新引入了prop()方法，此时再用attr()方法判断checkbox的状态则会返回undefined，若有设置checked属性为true，则会返回checked而不是true

1.6+版本prop()方法：

1
console.log($("input[type='checkbox']").prop('checked'));//false

(3)、除了以上两种方法JQ中还有一个is()方法同样可以判断checkbox的状态

is()方法代码如下：

1
console.log($("input[type='checkbox']").is(':checked'));//false

要特别注意不要漏巧”:disabled”中的”:”

发表于 | 分类于

sf 码经笔记

如果想触发原生click事件，请将needsclick绑定在实际点击的元素上，即e.target上，而不是你手动触发的元素上。这可以说是fastclick的一个小bug，因为之前的点击影响了后面的点击。

只能在click的回调函数中手动触发element.click() ，否则无效，有兴趣的可以试试。这个在MDN上没写，算是意外收获。

发表于 | 分类于

Jenkins自动化部署教程

本教程使用Docker在服务器中运行Jenkins并实现从Github版本库的自动化部署，使得代码更新到Github版本库之后能够自动构建并发送到网站部署服务器。

准备工作

在部署之前你需要做以下准备：

  1. 准备两台能连接至外部网络的服务器，一台作为Jenkins部署服务器，另一台作为网站部署服务器
  2. 确认拥有服务器的root权限，或者在每行命令前加上sudo指令
  3. 在部署服务器上安装Docker
  4. 网站服务器上安装Docker和Nginx镜像*，并挂载好相应的路径存放网站文件
  5. 注册一个Github账号
  6. 本地存有你需要部署的源代码

*关于Docker和Nginx的安装和使用，可以参照另一篇教程：http://note.youdao.com/noteshare?id=f32aee796b06882786e1149d2043da17

1 创建Github版本库

该部分需要有基础的Git知识

1.1 上传代码至版本库

登录到Github账户，新建一个repository，建议选择建立一个README文件。

填写完README文件后，点击Clone or download，将里面的HTTP链接复制下来保存好

在本地的计算机选择一个文件夹，使用相关的Git工具将新建的版本库克隆下来（应该只有一个README文件），url就是刚刚保存的链接。

将你的代码全部放进这个文件夹里，然后将更改commit并push到Github版本库。

这样你就有一个Github的版本库保存你的代码了。

1.2 设定Github钩子

拥有版本库之后，我们还需要设定一个钩子，这样每次更新代码后，就会自动触发Jenkins的工作。

在Github版本库的Settings中，点击Webhooks，然后点击Add Webhook添加一个钩子。

URL填写你准备部署Jenkins的服务器地址，格式为

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

Content Type选择Json格式。

Secrets可以空着不填。

选择Just the push event（可以根据具体需求选择其他的触发动作）。

勾选Active。

点击确认即可成功设定Github钩子。

## 2 部署Jenkins

### 2.1 拉取并运行Jenkins镜像

> 记得让防火墙开放指定的端口，本教程使用的是8080

由于之前已经安装过Docker了，可以直接输入命令：

docker run \
-u root \
–rm \
-d \
-p 8080:8080 \
-p 50000:50000 \
-v /root/jenkins-data:/var/jenkins_home \
-v /var/run/docker.sock:/var/run/docker.sock \
-v “$HOME”:/home \
–name jenkins \
jenkinsci/blueocean

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

这个命令会尝试开启容器运行本地的Jenkins镜像，如果没有找到，会从Docker Hub上下载该镜像再运行。

其中各参数包含的意义如下：

- ```-u```表示作为root用户运行
- ```--rm```表示让容器退出时自动清理容器内部的文件系统
- ```-d```表示让容器在后台运行
- ```-p```表示端口映射
- ```-v```表示将本地的文件挂载到容器内部
- ```--name```表示赋予容器的名字

可以用```docker ps```确认容器是否正常运行

### 2.2 发送密钥到网站部署服务器

> 这一步是为了之后在Jenkins传输文件时免去密码输入

> 若要发送文件到另一个服务器，需要在双方服务器安装openssh，由于几乎所有的Linux服务器都支持该功能，此处就不对安装过程多做介绍了。

使用```docker exec -it jenkins bash```进入容器当中，并建立```/root/.ssh/```路径。

使用```ssh-keygen -t rsa```指令建立密钥对，一直回车直至建立完成，默认会在```/root/.ssh/```路径下生成一个公钥文件和一个私钥文件。

使用```ssh-copy-id -i ~/.ssh/id_rsa.pub root@$ipaddress```将公钥发送到网站服务器，记得将IP地址填入，需要输入网站服务器的密码。

在网站服务器中保存好收到的公钥文件。

尝试用```ssh root@$ipaddress```连接到网站服务器，若不需要输入密码则为成功。

> 注意：以上步骤需要在容器内进行，否则只在容器外部发送密钥的话，到Jenkins运行时是无法得到密钥的。

> 可参考：https://www.cnblogs.com/K-artorias/p/7144904.html

### 2.3 对Jenkins进行配置

当容器在服务器正常运行后，打开浏览器访问服务器地址（记得加上映射的端口号），可以看到Jenkins运行的页面，显示解锁Jenkins。

在服务器内```/root/jenkins-data/secret/initialAdminPassword```文件内找到解锁码，在浏览器中输入解锁Jenkins。

选择安装推荐的插件，然后输入你自己的用户名和密码建立账户。

然后等待Jenkins启动完毕。

### 2.4 创建Jenkins工程

> 创建阶段基于中文版制作，英文版用户可自行翻译

Jenkins启动完毕后，点击新建任务，选择流水线工程，填写名称后点击确认建立新的流水线工程

在工程的配置页面，进行以下配置：

- 勾选GitHub Project，将Github版本的网址填进去
- 构建触发器处勾选Github hook trigger for GITScm polling
- 流水线处，定义选择Pipeline script from SCM
- 然后SCM选择Git，将之前保存的版本库链接填进URL的位置
- Branch一栏填写你想要使用的版本库分支（默认是master）
- 点击确认，工程就配置好了

### 2.5 编写Jenkinsfile

流水线工程需要在代码库中编写一个Jenkinsfile文件，然后会运行当中的脚本命令。

打开任意一个文本编辑器，将下面的代码填入：

pipeline {
agent none
stages {
stage(‘build’) {
agent {
docker {
image ‘node:9-alpine’
args ‘-p 3000:3000’
}
}
steps {
sh ‘npm config set sass_binary_site https://npm.taobao.org/mirrors/node-sass/'
sh ‘npm install –registry=https://registry.npm.taobao.org'
sh ‘npm run build’
}
}
stage(‘copy’) {
agent any
steps {
sh ‘scp -r /var/jenkins_home/workspace/demo/dist root@$ipaddress:/path-to-html-file/‘
}
}
}
}
`

需要针对具体情况对路径、IP地址等作出改动。

下面解释该段代码含义：

  • agent表示下面部分的代码将在特定的环境下运行，每个流水线中agent都是必须存在的，其中none在最外边，使得里面的每个stage可以设置不同的环境，any表示不对环境做具体要求
  • stage表示不同的步骤，可以通过agent设置在不同的环境中运行
  • docker表示使用特定的Docker镜像，其中image表示镜像名称，args表示运行镜像的参数
  • steps表示按顺序执行一系列的指令
  • sh表示执行Linux系统的脚本指令
  • scp是基于SSH的远程文件传输指令，记得将IP地址填入

整段代码分为两个部分。第一部分在node镜像中执行，将源代码构建成网页代码。第二部分则将生成出来的网页代码发送到远程的网站部署服务器的指定路径当中。

关于更加详细的流水线语法，可以参考Jenkins的官方文档

将文件保存为Jenkinsfile（不要加任何的后缀名），并存放在代码库的根目录下。

将改动commit并push到Github上，然后会触发钩子自动将代码构建并将生成的代码自动发送到网站部署服务器。

若在网站服务器上正确安装和部署Docker和Nginx，并正确将外部文件挂载至容器内（包含发送生成代码的路径），在浏览器上访问网站服务器就能够看到之前做的改动啦！

这样以后只要将新代码推送到版本库，就可以在网站服务器看到改动的成果了。

发表于 | 分类于

csdn

模块化jQuery

1、把jQuery修改成SeaJs的模块代码非常简单，就是用下面这段语句将jQuery源代码包裹起来：

1
2
3
4
define('jquery',[],function(require, exports, module){
    //这里放jQuery源代码
    module.exports = jQuery;
});

2、也可以加一个判断，如果define已经被定义，就把jQuery模块化，如果define没有被定义，正常执行jQuery代码：

1
2
3
4
5
6
7
8
9
10
11
(function(factory) {
    if (typeof define === 'function') {
        define('/jquery', [], factory);
    }
    else {
        factory();
    }
})(function(require) {
    //这里放jQuery源代码
    if (require) return $.noConflict(true);
});

3、如果你用的是jQuery1.7版本以上的，那就更方便了。可以看下jQuery源码的最后几行，你会发现类似下方的代码：

1
2
3
if ( typeof define === "function" && define.amd && define.amd.jQuery ) {
    define( "jquery", [], function () { return jQuery; } );
}

4、如果判断语句为真，那么jQuery就会自动模块化。所以改下判断语句，只留typeof define === “function”，jQuery便可以自动模块化：

1
2
3
if ( typeof define === "function") {
    define( "jquery", [], function () { return jQuery; } );
}

模块化后的调用代码如下：

1
2
3
4
5
6
7
8
9
10
seajs.config({
    'base':'/script',
    'alias':{
        'jquery':'jquery.sea.js'
    }
});

seajs.use(['jquery'],function($){
    console.log($);
});

模块化jQuery插件

模块化jQuery插件
1、普通插件

1
2
3
4
5
(function($){
    $.sayHello = function(){
        console.log("Hello");
    };
})(jQuery)

一般模块化代码像下面这样：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/*jquerySayHello.js*/
(function (factory) {
    if (typeof define === 'function') {
        // 如果define已被定义，模块化代码
        define('jquerySayHello',['jquery'], function(){
            // 返回构造函数
            return factory
        });
    } else {
        // 如果define没有被定义，正常执行插件代码
        factory(jQuery);
    }
}(function ($) {
    // 这里才是插件真正的构造函数
    console.log('init'); // 注意这行代码
    $.sayHello = function(){
        console.log("Hello");
    };
}));

使用插件的代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
seajs.config({
    'base':'/script',
    'alias':{
        'jquery':'jquery.sea.js',
        'jquerySayHello':'jquery.sayHello.sea.js'
    }
});

seajs.use(['jquery','jquerySayHello'],function($,jquerySayHello){
    jquerySayHello($); // 初始化插件
    $.sayHello();
});

seajs.use(['jquery','jquerySayHello'],function($,jquerySayHello){
    jquerySayHello($); // 初始化插件
    $.sayHello();
});

注意我在插件构造函数里面写的console.log(‘init’);这段代码，可以看到，如果我请求两次插件，插件就要初始化两次。这个虽然可以让代码只在使用时才执行，减少了资源消耗，但如果一个页面中多处需要这个插件的话，就要执行很多次。如果改成下面这种，直接在本模块里就执行：
使用插件的代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
(function (factory) {
    if (typeof define === 'function') {
    // 如果define已被定义，模块化代码
    define('jquerySayHello',['jquery'], function(require,exports,moudles){
        factory(require('jquery')); // 初始化插件
        return jQuery; // 返回jQuery
    });
} else {
    // 如果define没有被定义，正常执行jQuery
    factory(jQuery);
}
}(function ($) {
    console.log('init');
    $.sayHello = function(){
        console.log("Hello");
    };
}));

使用插件的代码如下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
seajs.config({
    'base':'/script',
    'alias':{
        'jquery':'jquery.sea.js',
        'jquerySayHello':'jquery.sayHello.sea.js'
    }
});

seajs.use(['jquery','jquerySayHello'],function($){
    $.sayHello();
});

seajs.use(['jquery','jquerySayHello'],function($){
    $.sayHello();
});

发表于 | 分类于

link
attr是通过setAtrribute和getAttribute来设置的，使用的是DOM属性节点，而prop是通过document.getElementById(el)[name] = value来设置的，是转化为js对象的属性。

通常在获取或者设置checked，selected，readonly，disabled等的时候使用prop效果更好，减少了访问dom属性节点的频率。

大家知道，有的浏览器只要写checked，disabled就可以了，而有的则需要些checked=“checked”，disabled=“disabled”。比如用attr来获取checked，选中状态获取attr（“checked”）为checked，没有选中则为undefined。。而prop来获取的为，选中为true，没有选中为false。

另外，用prop来设置属性名，html结构是不会发生变化的。而用attr来设置属性名，html结构是会发生变化的。

总的来说，按照我自己的理解，一般如果是标签自身自带的属性，我们用prop方法来获取；如果是自定义的属性，我们用attr方法来获取。