JavaScript中的this

JavaScript中的this和其他语言中的this不太一样,总共分为4种情况。

在全局环境下使用this

JavaScript中有一个在浏览器中就是window对象,在Node.js里叫全局对象,因此在全局代码下this就指的是这个全局对象。

使用new操作符创建的对象里面的this

所有的JavaScript函数都可以使用new操作符来创建,此时this就代表新创建的这个对象,例如:

1
2
3
function F (v) {
this.val = v;
}

Read More

bashrc和bash_profile的区别

在Linux和Mac OS X下工作会经常有这样的困扰:当需要配置环境变量的时候是应该修改.bashrc还是.bash_profile呢?

其实两个文件都是用来进行相关的配置的,它们的区别是什么?

从命令行登录系统的时候会执行.bash_profile文件,而在登录之后启动命令行的时候执行.bashrc文件。

Read More

Grails判断开发环境

很多情况下想区分开发环境和生产环境,比如开发环境下自动生成测试数据,可以这么写:

在Bootstrap里面

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import grails.util.Environment
class BootStrap {
def init = { servletContext ->
if (Environment.current == Environment.DEVELOPMENT) {
// 开发环境配置
} else
if (Environment.current == Environment.TEST) {
// 测试环境配置
} else
if (Environment.current == Environment.PRODUCTION) {
// 生产环境配置
}
}
}

Read More

Grails里面的flash对象

在session内临时存储对象,下次请之后自动清除对象,flash对象是一个Map,用于存放键值对,存在session里面,在下次请求结束后自动清空。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
class HiController {

def one() {
println "one"
flash.message = "welcome"
redirect(action: "two")
}

def two() {
println "two"
println "message=" +flash.message
redirect(action: "three")
}

def three() {
println "three"
println "message=" +flash.message
render "end"
}
}

Read More

CSP内容安全策略

内容安全策略(Content-Security-Policy,简称CSP),可让网站管理员指定客户端允许加载的各类可信任资源。

那如何使用CSP呢?只需要服务端输出类似这样的响应头就行了:

1
Content-Security-Policy: default-src 'self'

在详解之前,我们先看看github的设置:

Read More

Grails导出excel

控制器:

1
2
3
4
package date.zju
class SampleExcelController {
def index() {}
}

视图:

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html>
<head>
<meta name="layout" content="main"/>
<title>Simple Chat</title>
</head>
<body>
<g:link action="downloadSampleExcel">Download Sample Excel</g:link>
</body>
</html>

添加 JExcelApi 库的方法,在 BuildConfig.groovy 中添加依赖:

1
2
3
dependencies {
runtime 'net.sourceforge.jexcelapi:jxl:2.6.12'
}

The complete code that contains the logic to generate the excel file is this:

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
package date.zju
import jxl.Workbook
import jxl.write.Label
import jxl.write.WritableSheet
import jxl.write.WritableWorkbook
class SampleExcelController {
def index() {}
def downloadSampleExcel() {
response.setContentType('application/vnd.ms-excel')
response.setHeader('Content-Disposition', 'Attachment;Filename="example.xls"')
WritableWorkbook workbook = Workbook.createWorkbook(response.outputStream)
WritableSheet sheet1 = workbook.createSheet("Students", 0)
sheet1.addCell(new Label(0,0, "First Name"))
sheet1.addCell(new Label(1,0, "Last Name"))
sheet1.addCell(new Label(2,0, "Age"))
sheet1.addCell(new Label(0,1, "John"))
sheet1.addCell(new Label(1,1, "Doe"))
sheet1.addCell(new Label(2,1, "20"))
sheet1.addCell(new Label(0,2, "Jane"))
sheet1.addCell(new Label(1,2, "Smith"))
sheet1.addCell(new Label(2,2, "18"))
WritableSheet sheet2 = workbook.createSheet("Courses", 1)
sheet2.addCell(new Label(0,0, "Course Name"))
sheet2.addCell(new Label(1,0, "Number of units"))
sheet2.addCell(new Label(0,1, "Algebra"))
sheet2.addCell(new Label(1,1, "3"))
sheet2.addCell(new Label(0,2, "English Grammar"))
sheet2.addCell(new Label(1,2, "5"))
workbook.write();
workbook.close();
}
}

告知浏览器文本格式:

1
2
response.setContentType('application/vnd.ms-excel')
response.setHeader('Content-Disposition', 'Attachment;Filename="example.xls"')

以流的方式输出,而不是保存在本地:

1
WritableWorkbook workbook = Workbook.createWorkbook(response.outputStream)

创建 worksheet:

1
WritableSheet sheet1 = workbook.createSheet("Students", 0)

操作 cell:

1
sheet2.addCell(new Label(0,1, "Algebra"))

angular中给select设置默认选项

响应式表单(Reactive Forms)

1
2
3
4
5
6
7
<div class="form-group">
<select formControlName="category">
<option [ngValue]="null">Select Category</option>
<option *ngFor="let option of options"
[ngValue]="option">{{option.label}}</option>
</select>
</div>
1
2
3
4
5
6
7
options = [
{ id: 1, label: 'Category One' },
{ id: 2, label: 'Category Two' }
]
form = new FormGroup({
category: new FormControl(null, Validators.required)
})

Read More

Grails标签之datePicker

Grails datePicker 标签用于渲染日期输入。

1
<g:datePicker>

必选属性: action

领域类:

1
2
3
4
5
6
class Person {
String firstName
String lastName
Date dateOfBirth
...
}

控制器:

1
2
3
4
5
6
7
class TestController {
def create() {
Person person = new Person()
person.dateOfBirth = new Date()
[person:person]
}
}

GSP片段:

1
2
<g:datePicker name="dateOfBirth" value="${person?.dateOfBirth}"
noSelection="['':'-Choose-']"/>

会被渲染成:

Read More

grails标签

while

<g:while>

案例:

1
2
3
4
5
<g:set var="counter" value="${0}"/>
<g:while test="${counter < 5}">
<g:set var="counter" value="${counter+1}"/>
<p>The value is ${counter}</p>
</g:while>

Read More