三面

数据结构：

为什么需要二叉树？

B+树？

跳表？

三面准备

自我介绍

三个部分。

• 基本信息，中南大学研二王雨思，研究方向是数据可视分析，项目中有专利一项、参与A类会议论文一篇、主持自由探索项目一项，该项目论文预计4月投稿，投稿完成后即可到岗实习。

• 项目经历，可视分析项目有三项，主要是关于高维数据可视分析的。同时自己对iOS开发有些兴趣，申请了开发者账号，目前审核中APP有两款。

• 详细介绍我的项目。

  • 首先是自由探索项目：面向分类的感知驱动的可视化监督降维方法。
    • 1背景：大数据时代，涌现出无数复杂的有标签的高维数据：如手写数据、汽车数据、人脸数据等。
    • 2困难：难以分析标签HD数据。降维是分析有标签的高维数据的常用方法。高维数据的低维表示可以帮助用户探索有标签数据中类的分离程度和数据的空间分布。【非监督降维方法PCA：没有考虑类的分离程度；监督降维方法LDA：事先假设数据符合高斯分布，对于复杂的类结构无效；】
    • 3降维方法和直接映射法是帮助分析HD数据的方法：降维方法来源于机器学习。提出优化目标，选择优化方法。我们可以使用基于人类感知的度量DSC。
    • 4本文方法：感知驱动降维PDD：单个投影可能会导致重要的类结构被忽略。
  • 第二个是A类会议IEEE VIS项目：适用于不清楚数据内部特征与结构时候，帮助有效识别低维结构(维度和是否为线性子空间)。当我们指导数据的真实维度之后，则可以使用合适的方式去进行可视化或者数据挖掘等工作。该文章我是帮助师兄做了user study的具体case、discussion部分的对比试验，与其他工作降维方法（包括线性PCA\MDS，非线性tsne等方法）的对比。
  • 第三个是基于 kNN Graph 的内蕴特征抽取可视分析：
    • 内蕴特征-是指底层属性的语义解释。例子：国家生活质量数据集，数据点美国到数据点古巴是如何变化的。得到其解释就特征抽取。data-view-knowledge。
    • 三步骤：初始布局，交互获取路径（点选），结构化投影（使用测地距离）。
    • 例子：国家：趋势美国到古巴、异常：赞比亚。

• 适合数据中台可视化的原因：

  • 1研究方向是这个，找到如此契合的部门比较难；高维数据可视分析虽然听起来较理论，但是实际上大数据时代，这样的数据确实非常多，需要一些理论的方式去进行可视分析；
  • 2身体素质好，有恒心。为了拿到校运会跨栏金牌，每天坚持晨跑。因此可以接受高强度的工作。
  阅读全文 »

React高级

propTypes和DefaultProps

propTypes:组件要接受外部传过来的值，进行类型校验。验证传值

DefaultProps:若父组件未向子组件传值，定义属性默认值。设置默认值

https://reactjs.org/docs/typechecking-with-proptypes.html

柱状图 Bar Chart - 比较

其中一个轴表示需要对比的分类维度，另一个轴代表相应的数值。

柱状图描述的是分类数据，回答的是每一个分类中“有多少？”这个问题。

React基础

React环境

下载安装or更新node

更新node和npm至新版(要求：Node >= 6 and npm >= 5.2)

创建 React App

1
2
3

npx create-react-app my-app
cd my-app
npm start

项目代码精简

项目入口：index.js

内容写在：APP.js

什么是组件

网页整个是一个组件，各个部分也是一个组件。

只要是页面上的一部分，就是一个组件。eg.网页上的标签

index.js

1
2
3

// react：让浏览器理解<App />组件的语法
// react-dom：加载组件，将组件渲染到dom节点上（标签内）。将APP渲染到index.html标签里去
// App.js：APP（最外层的）组件，大写字母开头都是组件

App.js

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

import React from 'react';

// 定义一个React组件：App是一个类，继承Component类
class App extends React.Component {
  // 必须需要的函数，负责组件显示的内容：return的内容为需要显示的内容。
  render() {
    return (
      <div>
        hello iris
      </div>
    );
  }
}
// 导出出去，index.js才可以引入
export default App;

JSX语法

允许在react中，直接使用标签<>结构

注释：{/ /}

class样式为：className，否则会被认为是组件类的class

label的for标签为：htmlFor，否则会被认为是for循环关键字

实战TodoList

React 面向数据编程，不实际操作Dom

数据

构造函数中控制数据

1
2
3
4
5
6
7
8
9

// Todolist组件的构造函数，组件创造的瞬间，自动执行。
constructor(props) {
    super(props);
    // 创建了state数据项：数据存放的位置
    this.state = {
        list: [],
        inputValue: ''
    }
}

展示列表

1
2
3
4
5
6
7
8
9

<ul>
    {
        // 循环list中的数据，每循环一次，返回一个类标签
        this.state.list.map((item, index) => {
            // 类标签需要唯一key值
            return <li key={index} onClick={this.handleItemClick.bind(this, index)}>{item}</li>
        })
    }
</ul>

新增列表

• input输入内容后：将输入框内容的值初始化为inputValue，其改变的时候自动更新inputValue中
• button点击后：将inputValue加载在list中最后一位，清空inputValue。

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

// 1 添加任务
// 1.1输入框改变，保存输入框内容
handleInputChange(e) {
    console.log(e.target.value)
    this.setState({
        inputValue: [e.target.value]
    })
}
// 1.2点击add，增加一项数据
handleBtnClick() {
    // 按下按钮，调用setState来改变数据list：...展开运算符，表示老的内容 + 增加的新的内容
    this.setState({
        list: [...this.state.list, this.state.inputValue],
        inputValue: ''
    })
    alert('click');
}

删除列表

数据项被点击后：

• 获取index值，作为删除函数输入
• 复制list于const list
• 删除list中index的数据项
• 在更新原list(不直接操作list)，setState操作

1
2
3
4
5
6
7
8
9
10
11
12

// 2 删除任务
// 选择数据项，删除数据项：通过list的index获取其下标，再删除
handleItemClick(index) {
    console.log(index)
    // 拷贝、删除、复制
    const list = [...this.state.list]
    list.splice(index,1)
    this.setState({
        list: list
    })
    // this.setState({list})  ES6的新写法，键值一致的写法
}

其他

用bind方法保持this上下文

写法一，直接写在HTML标签内：

1

<button onClick={this.handleBtnClick.bind(this)}>add</button>

若不绑定，则handleBtnClick()函数中的this则指的是button，而不是组件props本身。

写法二，写在构造函数中：提升代码执行性能(底层内容)

render()只能返回return一个包裹标签

1
2
3
4
5
6
7
8
9

render() {
    // 返回一个大组件:1.一个div:root的div中会多一层div包裹 2.React.Fragment只有root的div
    return (
        <React.Fragment>
            <div></div>
            <ul></ul>
        </React.Fragment>
    );
}

✨组件通信

父组件向子组件传值：父组件的属性

父组件通过属性的方式向子组件传递参数

子组件通过props的形式接收父组件传递的参数

子组件向父组件传值：通过调用父组件的方法改变数据

CSS

行内样式 style

1
2

/* 外层{}表示为JS表达式；里面的{}表达式为JS的对象*/
style={{background:'red',color:'#fff'}}

className的方法(不能使用class关键字，react中的class关键字表示定义一个组件)

1

<button className='red-btn' onClick={this.handleBtnClick}>add</button>

步骤：关键字className，定义css文件，在入口处index.js引入css文件

###

代码优化

1
2
3
4
5
6
7
8
9
10
11

// setState性能优化的方式：函数的形式变为异步的setState
// 将target存储在外层，再在内部适用对象
const value = e.target.value;
this.setState(() => ({
        inputValue: value
}));

// setState原本的方式：不推荐
this.setState({
    inputValue: [e.target.value]
}

1
2
3
4
5
6
7
8
9
10
11

// 新方法：
// prevState:修改数据之前的那一次数据的状态；避免不小心改变state状态
this.setState((prevState) => ({
    list: [...prevState.list, prevState.inputValue],
    inputValue: ''
}));
// 原方法：
this.setState({
    list: [...this.state.list, this.state.inputValue],
    inputValue: ''
});

关于React的思考

声明式开发

减少大量dom操作代码量

可以和其他框架并存

react只去管理id=”root”的div的渲染。jQuery可以管理其他div操作。

组件化

• 区分组件和标签
  xxx
• 组件之间通信：
  • 父向子：属性
  • 子向父：调用父组件的方法

单向数据流

父组件可以向子组件传值（只读），子组件不能去改变这个值。

why单项数据流：防止其中一个改变时出现bug，难以定位是哪一个组件改变导致的错误。

视图层框架

只解决数据和渲染的问题，不解决react复杂传值问题，可以借助其他redux等数据传递框架

函数式编程

代码逻辑清晰：拆分函数，各司其职；

前端自动化测试便捷：只需要给函数一个数值，查看输出是否符合预期。

浏览器多进程到JS单线程，JS运行机制最全面的一次梳理

浏览器内核进程——渲染引擎：负责取得网页的内容(html,xml和图像等)，整理讯息(例如假如css)，以及计算网页的显示方式，然后输出到显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不同。所有网页浏览器、电子邮件客户端以及它需要编辑、显示网络内容的应用程序都需要内核。

JS引擎线程——JS引擎：解析和执行JavaScript来实现网页的动态效果。

http和浏览器的工作原理和内部机制要巩固一下，特别是涉及到性能、进程线程、同步异步什么的

项目介绍

需求分析

TableViewController

增加任务

删除任务

修改任务

需求

遇到的困难

知识点

项目介绍

需求分析

让用户查看当地天气、查询异地天气的时看到正能量文字，元气满满的开始新的一天。

本程序共分为三个页面：欢迎页面，天气预览界面，城市天气查询界面。

需求

天气预览界面：定位天气展示【1 获取当前经纬度位置 2 根据位置获取天气、城市信息 3将信息展示在视图】

城市天气查询界面：用户查询天气【1展示当前城市 2输入框输入查询城市的名称 3按下查询按钮-获取名称至页面1，销毁页面2 】

采用了MVC模式

model部分负责数据，我们构建天气类，属性包括：温度、城市、condition，以及计算属性——icon、words，他们需要根据condition属性来确定。比如晴天对于icon为小太阳、文字对于“天晴是你的心情”。

controller负责两个页面中的业务逻辑：从model中取数据，然后返回给view。

最终在view上展示所需天气及其文字信息。

遇到的困难

页面跳转传值

页面跳转传值部分。【功能：按页面1右上角按钮，跳转到页面二，页面二展示当前city；用户输入目标city，按查询后跳转回页面一，展示查询city的天气信息】

segue导航正向传值较容易，3步骤。1在prepare函数部分获取segue的identifier【转换箭头】，2使用as!强制转化，实例化该segue的destination页面vc，3使用实例化的vc进行传值。这样就可以在下一个页面使用本页面中的“所在城市”的信息了。

而反向传值就不同。如果采用control+drag方式，从页面二的button到页面一加上转换箭头，这样只会再重新生成新的页面一，定位到本地天气；而不是预想的回到原先页面，重新展示所搜索城市的信息。

所以需要自定义protocol，使用delegate实现导航的反向传值。

• 在页面二需要：3个步骤来自定义协议portocol，实现【按下查找城市按钮，获取输入的city值】的功能。

1自定义协议，安排协议中的方法（获取输入的city，传给页面一），2 声明协议属于页面二中的delegate变量 3规定在哪里触发协议中的事件。

• 在页面一种需要：3个步骤来实现协议，实现【获取页面二中city的值，并展示于本页面】的功能。

1遵守协议 2 实现协议中的方法（获取city值，根据值获取温度对象的所有信息，展示与本页面）3 第二个页面vc的事件函数委托delegate给self实现。

获取当前位置的天气

1 委托本页面，实现定位协议中的请求位置的方法，获得经纬度。（难点）

2 根据经纬度信息，使用Alamofire请求API来获取天气数据；

3 利用SwiftJSON解析生成数据；

4 给weather对象赋值；

5 再使用weather对象中的天气、文字信息更新页面。

✨使用了定位协议CLLocationManagerDelegate的方法。

1 遵守定位协议 2 实例化定位管理器CLLocationManager 3 实现协议中的方法（获取当前的经纬度）4locationManager委托本页面

当manager请求位置的时候，则系统自动调用manager方法，在该方法里获得经纬度。

知识点

protocol-delegate：类似java中的接口与实现

协议——工具间，协议中的方法——工具，实例化的对象——老板，本页面self——打工仔，委托——老板让打工仔干活

计算属性

model中的计算属性——compute属性 某个属性需要根据另一个属性来确定，我们定义其为计算属性

如根据天气情况属性——晴天，得到对应的icon和words：icon为小太阳、wors为“天晴是你的心情”。

第三方库的CocoaPods安装的使用

Alamofire：完成http请求天气数据

SwiftJSON：解析、生成数据

extension代码优化

目的：提高代码可读性。为日后重构代码打下了良好的基础。

场景：1 私有的辅助函数 ；2 遵守协议（实现某个协议的方法放到一个 extension 中）；3 模型（Model用结构体， 使用extension 将 Model 的 属性 和 基于属性的计算计算属性分离 ）

项目介绍

项目介绍

按下不同的按键，发出不同的音调。