🌲 新订年付会员,赠送一年会员资格。立即订阅

JavaScript

JavaScript Functional Programming:定义函数的几种方法

在 JavaScript 语言里,函数是一种对象,所以可以说函数是 JavaScript 里的一等公民(first-class citizens)。

之前我们这样定义过一个函数:

function greet(greeting, name) {
  return `${greeting}, ${name}`
}

因为在 JavaScript 里面是对象(object),所以它会有一些属性还有方法。比如 name 属性是函数的名字,length 属性指的是函数里面有多少个必须要传递的参数。比如访问上面定义的这个函数里的两个属性:

greet.name
// 输出 greet

greet.length
// 输出 2,表示有两个参数

函数都是 Function 的实例,所以你可以访问 Function 上定义的属性:name,length,可以使用方法:apply(),call()。可以这样证明:

JavaScript Functional Programming:函数

Functional Programming,函数式编程。是一套编写程序的方法,也可以说是一种风格。

函数

先了解一下什么是 Function,函数。来看一行代码:

console.log('hello ~')

执行上面代码会在控制台上输出一个 “hello ~”,每次你想在控制台上输出一个 “hello ~”,你都要执行一下上面这行代码。我们可以用一个函数包装一下这行代码:

function greet() {
  console.log('hello ~')
}

定义函数可以使用 function 这个关键词,上面我们定义了一个名字是 greet(问候的意思) 的函数。执行 / 调用这个函数,就会在控制台上输出一个 “hello ~”,因为这是这个函数要做的事情。调用函数可以在函数的名字的后面加上一组括号(),像这样:

greet()

在我们的程序里,可以重复使用这个函数。

参数

让函数更灵活一点,可以在定义它的时候去设置一些它能接受的参数,这些参数你可以在函数的内部去使用,在调用函数的时候,你可以指定函数的参数的值。像这样再改进一下 greet 这个函数:

学习手册:JavaScript 脚本语言

JavaScript 学习手册

JavaScript 是不管怎么样都要学的语言。它是客户端脚本语言,就是你写好的 JS 代码是在客户那边儿执行的,一般就是用户的浏览器,浏览器都有一个解释 JavaScript 的引擎。你把写好的 JS 嵌入到网页里面,浏览器会把网页上的这些 JS 文件下载下来,然后再去执行。

准备

先学会 HTML 与 CSS,接着就可以学习 JavaScript 了。你只需要一个文本编辑器(Atom,Brackets,Sublime ... ),一个浏览器,推荐使用 Chrome 浏览器,还有下面这些视频 :)

目标

  1. 学会 JS 的基本语法
  2. 定义与使用函数
  3. 定义与使用对象
  4. 知道 DOM 是什么
  5. 明白怎么样监听网页上发生的事件
  6. 会用 jQuery
  7. 了解一个简单的 MVC 框架 -  Backbone

JavaScript 应用开发 #7:删除任务

把鼠标放在任务项目的上面,会在任务标题的右边,出现一个删除的按钮,点击这个按钮,可以删除掉对应的任务。实现这个功能, 需要在任务模型的模板上面添加一个按钮元素,然后去监听这个按钮元素的点击事件,发生点击事件以后,去执行模型的 destroy 方法,把模型删除掉。

在任务项目上添加删除按钮

先打开应用的主页 index.html ,然后找到定义任务模板的地方(#item-template),添加下面这行代码:

<button class="destroy"></button>

一个 button 标签,上面加上了一个叫 .destroy 的 css 类,在应用的样式表里,已经为这个类定义好了一些样式,一会儿我们也要用到这个类来定义这个元素。现在,任务的模板看起来像这样:

JavaScript 应用开发 #6:编辑任务

QQ20140618-5

双击任务的标题,会显示一个用来编辑这个任务的文本框,在这个文本框里面,已经填写好了当前任务的标题的内容,用户可以编辑任务的标题,完成以后,按下回车键,或者点一下其它的地方,可以保存对任务标题的修改。实现这个编辑任务的功能,可以这样:

  1. 在任务模型的模板里面添加一个包含任务标题的文本框,默认把它隐藏起来。
  2. 双击任务标题后,隐藏任务标题,再把用来编辑任务的文本框显示出来。
  3. 按下回车键或点击其它的地方,都会触发相应的事件,去监听这些事件。
  4. 得到在编辑任务的文本框里面的内容,并且把它保存起来。

JavaScript 应用开发 #5:为完成的任务添加样式

判断一下任务的状态,如果是完成的任务,可以在任务项目的上面,添加一个额外的 css 类,在这个 css 类里,可以去定义完成的任务的样式。比如,把文字的颜色变成浅友色,并且在文字上面添加一条删除线。这些样式,已经在应用的样式表里定义好了,放在了一个叫 .completed 的 css 类里面。下面,我们要做的就是把这个类添加到是完成的状态的任务项目上去。

要解决的问题

  1. 怎么样得到模型的属性的值。
  2. 怎么样为模型添加合适的 css 类。
  3. 怎么样在任务模型的完成状态发生变化时,立即更新任务项目的显示。

得到模型的属性的值,用的就是模型的 get 方法。这里我们要得到的是模型的 completed 属性的值,如果它的值是 ture ,就在这个模型上面去添加一个 .completed 类,如果是 false ,如果在任务项目上有 .completed 类,就从任务项目上面去掉这个 .completed 的 css 类。

JavaScript 应用开发 #4:切换任务的完成状态

在勾选了任务项目左边的对号(复选框)以后,会将任务的状态标记为已完成,取消勾选的话,又会把任务的状态标记为未完成。所以, 我们需要一个可以切换任务完成状态的方法。在任务模型里面,表示任务状态的属性是 completed,它的值是 true 表示任务是完成的,如果是 false 就表示任务是未完成的,这个切换完成状态的方法其实就是去修改这个 completed 属性的值。

实现这个功能,可以去监听任务项目的这个复选框的点击的事件,每次点击都会去执行一个方法,这个方法做的事就是保存与任务当前的 completed 属性的值相反的值,也就是如果当前任务的 completed 是 true ,保存的值就是 false ,如果是 false ,要保存的值就是 true 。

定义切换任务状态的方法

这个切换任务状态的方法修改的是跟模型相关的属性的值,所以,可以在任务模型里面,去定义这个方法,打开 js/Models/Todo.js,在 app.Todo 这个模型里面,去添加一个方法:

JavaScript 应用开发 #3:应用的主视图

QQ20140617-6

到目前为止,我们已经在应用里面,创建了表示数据的模型,表示数据列表的集合,组织模型显示的视图模板。下面, 我们要想办法,去把模型的列表显示在应用的界面上。这样我们就可以再去为应用创建一个主要的视图,用它来控制应用的主要的显示。

JavaScript 应用开发 #2:视图与模板

QQ20140617-2

在用 Backbone 开发的 JavaScript 应用里面,除了模型与集合以外,另一个重要的部分就是视图,英文是 View 。在视图里面,我们可以去监听在页面上发生的事件,还有与视图相关的模型和集合的事件,可以去定义处理这些事件用的方法,可以设置包装数据用的元素等等。

JavaScript 应用开发 #1:理解模型与集合

《 Backbone 应用实例 》 这个课程里面,我们会一起用 JavaScript 做一个小应用,它可以管理任务列表,应用可以创建新任务,编辑还有删除任务等等。这个实例非常好的演示了使用 JavaScript 来开发富应用,它也能让你对 JavaScript 有一个更好的理解。所以,我们接下来会分成几天,把这个小应用的功能,分成几个部分,介绍每个小功能的细节。跟着这篇文章,或者 《 Backbone 应用实例 》 这个课程,动手练习一下。效果会非常好。

在文章里面,我会把需要的代码粘出来,不过我建议你不要直接去复制跟粘贴。每一个目录,每一个文件,每一行代码,最好可以亲自动手去做出来。这期间我们也会不断的回到浏览器上去测试,这样你能更好的理解,每个步骤的作用。每一个动作,都要动手去试一下。

统计

11635
分钟
0
你学会了
0%
完成

社会化网络

关于

微信订阅号

扫描微信二维码关注宁皓网,每天进步一点