软件工程 |学科

!!!图片全都没复制好, 所以请不要阅读

2019 下山东大学软件工程复习

第一章 软件工程概述

SE

  • 定义: 采用工具、技术等用来解决现实问题的综合过程
  • 目的
  • 方法: 面向对象, 结构化, 面向过程等模式
  • 作用: 付出较低的开发成本, 达到要求的软件功能, 能按时完成, 及时交付
阅读更多
tips

找不到分类却又想记录下来就来这里吧

  • 关闭外在信息与洗澡时思维活跃: 洗澡时感官封闭, 接收不到外界信息, 迫使大脑聚焦记忆中储存的想法

  • 如果有并非是科学为攀升的手段的世界, 并且是魔法为主的话, 那么魔法应该就是那个世界的科学吧, 那么那样的世界会是怎样的世界呢, 这里面牵涉的政治, 文化, 经济等实在令人着迷

  • module.paths.push(‘C:/Users/xxx/AppData/Roaming/npm/node_modules’);
    // node 全局位置

  • dependencies 和 devdependencies, npm install xxx 的时候只安装 xxx 的 dependencies, 而在 xxx 的目录下 npm install 则二者都安装

  • mvc, mvvm, 将来写篇文章整一整, 用实际代码来表现, 再结合点设计模式讲一讲✨

    • model: 数据, 负责储存渲染 view 的数据
    • view: 视图, 负责使用数据渲染页面,
    • controller: 接收来自用户的操作, 让视图的操作同步数据
    • vm: viewmodel, 将数据与视图双向绑定, 视图受到操作后数据也会改变, 不用再绑定 dom 啦!

  • npm config set registry http://registry.npm.taobao.org/ https://registry.npmjs.org/

  • 浏览器HTTP缓存

  • dom 中 node 与 element 区别在于element是node的一种, dom中所有节点都可以当做node, element.children 会提供一个 live 的 HTMLCollection

  • hexo debug

  • SageThumbs可以预览psd

绘画

越深入, 越有趣

比起直接上手临摹, 肯定是先学会规律最有效, 但是这些资料真的好难找啊 —– 找到了 => krenz 🙂, 下面这些是按照一本素描书整体来的思路, 再凑上自己零碎的想法和知乎搜索, google 搜索来的答案, 这些东西和自己实际想达成的过于不相符, 直到看到了 krenz 的绘画地图, 其实之前就搜到了, 但是 170 分钟劝退, 好在我还是看了🤣, 过于契合, 非常棒, 明年二期课去见识见识, 这之前先练习转型与透视吧

看出问题很容易, 一般就那么几个方向, 确诊问题很难, 因为方向里有很多细节, 解决它需要经验与练习

阅读更多
用 python 考 ccf 记录

  • 网站入口是 http://cspro.org/

  • 报名用的团队报名, 山大团体免费

  • 选定了语言无法更改

  • 提交后需要等好几秒才有结果, 多刷新

  • 提交可以多次, 可以多尝试

  • python 考试用的是 idle, 里面有文档, 可以 debug, 能缩进

  • 19.12 只有250分 = =

阅读更多
时间安排

TODO

首要任务: [x]hexo-history
然后: hexo, pug 等博客设计相关

完成顺序无特别注意不分先后

  • 文章内容组织和博客内容划分
    • 编写diary主题
      • 置顶文章
阅读更多
数据结构与算法 |算法|总结

解决问题的流程称为算法, 数据结构是这个过程中的一环
仅总结, 不分析, 通过学习别人制造体系, 收集遇到的来丰富

收集:

  • OI wiki
  • wikipedia, 深入了解直接搜, 超详细, 引用也很有用, 但是中文版没有英文版详细
阅读更多
源码分析 |源码分析|总结
  1. 凡是想要了解实现原理的就会去分析
  2. 遇到有趣的就更要上了
  3. 难也没关系, 来一个干一个, 来两个宰一双 ><
  4. (算法, 操作系统, 计网, 编译原理, 设计模式, 软件工程, 数学(机器学习, 图像处理))

目的

学习实现原理, 代码组织, 满足好奇心

分析方法

  1. 需要有小的 demo 展示在最开始的地方
  2. 必须配置好相关环境, 部署好代码
  3. 检查代码结构, 确认入口
  4. 对于比较简单的, 走一遍流程, 困难的, 针对各个函数
  5. 分析功能的实现的最简执行单元, 判断参数重载, 错误捕捉等其他部分
  6. 对其进行总结, 评价

对于比较难的, 不要光看, clone 下来撸一会再简单实现一下, 必须要用复制下来看
看到一个 console.error 打印堆栈的方法
现在 19.11.5 暂且对参数重载, 错误捕捉等不做要求, 假定所有输入调用常见且规范

代码好坏评价

  1. 功能特性
  2. 执行性能
  3. 可读性
  4. 文档与注释
  5. 可扩展性

关于可读性, 如果没有复用就不要分出函数来, 另外函数行数也不应该过长,最多80行, 3~40合适(等经验多了再看看)
19.11.6 - 没有踩过坑, 可扩展性部分较难判断出来
代码之外的, star数, 更新频率, issue
看看更加成熟的观点 - 精读《12 个评估 JS 库你需要关心的事》

打字动画效果分析 |源码分析|动画效果

看到了一个很有趣的动画打字效果的js库, 所以分析一下类似的打字动画的基础原理。原始链接在在这里 typical

需求分析

  1. 光标闪烁
  2. 打字动画

ityped

代码来自 iTyped

光标闪烁

这个可以很简单的通过 css 中的关键帧来达成

1
2
3
4
5
6
7
8
9
10
.ityped-cursor {
    opacity: 1;
    animation: blink 0.3s infinite;
    animation-direction: alternate;
}
@keyframes blink {
    100% {
        opacity: 0;
    }
}

打字效果

一个字一个字的打出来, setTimeout() setInterval()

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const typewrite = (strings) => {
    setTimeout(() => {
      typeString(strings);
    }, startDelay); //初始化
  };

  const typeString = (str) => {
    let index = 0,
      strLen = str.length;
    let intervalID = setInterval(() => {
      element.textContent += str[index]
      if (++index === strLen) return onStringTyped(intervalID);
    }, typeSpeed);//用 textcontent 来记录
  };

  const onStringTyped = (id, props) => {
    clearInterval(id);
    setTimeout(() => eraseString(props), backDelay); //此时往回删除
  };

文字删除效果

又把字符串挨个删去, 此时调用的时候将象征着打印并删除完整过程的某个 index 增加 1 来记录, 如果字符串是多个的话

1
2
3
4
5
6
7
8
9
10
11
12
13
14
const eraseString = (props) => {
    let str = element.textContent,
      strLen = str.length;
    let intervalID = setInterval(() => {
      element.textContent = str.substr(0, --strLen)
      if (strLen === 0) return onStringErased(intervalID);
    }, backSpeed);
  };

  const onStringErased = (id) => {
    clearInterval(id);
    ++i;
    typewrite(STRINGS_TO_ITERATE);//这里的这个变量=strings
  };

评价

typing

这代码结构和jquery的一模一样

代码来自 史上最华丽的打字效果JS插件

鼠标闪烁

和 ityped 实现模式是一致的

打字效果

这个就很有意思了, 不仅仅是打字, 还可以打印出 dom 结构, 它的执行流程是这样的:

  1. 解析输入的 dom 元素为数组
  2. 根据这个数组将 dom 节点一个个打印出来 (need update)
1
2


typical

代码来自 - typical

这个库用了大量的 es6 的语法, 也是最近出来的, 想调查一下也是因为它。不过, 到处都是 await, 有点眼花(真的, debug 半天, 全是用 yield 迭代返回, 花里胡哨的!(长见识了 = =)), 核心是 requestAnimationFrame(() => (node.textContent = edit))

打字简历

这就是上述的动态效果的一种展现形式, 通过打字的方式逐渐改变样式, 并且利用一些三方库来达到更加有趣的效果

代码来自 - STRML.net
当然, 就写法上来说, 可以选择高耦合只适合自己, 也可以封装一下, 在外部控制行为

总结

  1. 注意一下递归调用的问题

//TODO 1. 递归调用的内存问题 2. 打字简历 3. 润色, 完善, 干, 作业怎么这么多!!

博客开发记录 |总结

将对静态博客系统的学习和插件开发以及博客功能添加与美化汇总在这里, 基本目的是让我自己看得明白, 看得开心

辅助应用开发

  1. blog history
  2. 图片转存 (博客中的图片转到七牛云上, 并且将链接跟换)

    美化-主题开发

    写作

19.11.29 - 现有的博客主题感觉不适合我的喜好, 而且我这风格感觉是真的丑

针对常有的内容形式, 和 md 的标记方法, 有以下几种对应方面, 后续会在主题层面上进行更改

  1. 列举
  2. 列举 - 跟着图片或文字
  3. 标题
  4. 文字中存在需要解释的英文
  5. 文字中存在需要强调的部分

需要注意的语法

  • 上下标

    • html <sub> <sup>
    • markdown ^something^, ~something~

  • 列举, 加粗列举内容比较好看

    • 数字形式, 1.
    • 点的形式, -

  • 数学公式

    • LaTeX, 表达数学的一种标记语言

    • mathjax, 浏览器渲染 LaTeX 的开源库

    • math render online service, 提供公式解析为图片外链服务的网站, 知乎, 掘金都有

    • katex, 号称“最快”的数学公式渲染库, 同 mathjax

    • 行内, 行外,

      $$123$$``` 
      1
      2
      3
      4
      5
      - 分数, ```$\frac{x}{y}$``` => $\frac{x}{y}$
      - 上下标, ```x^1, x_1, x^{123}_i```=>$x^1, x_1, x^{123}_i$
      - 累加, ```\sum_{a=0}^{k} ``` => $$\sum_{a=0}^{k}$$
      - 数学符号, 参考 [LATEX Mathematical Symbols](https://www.caam.rice.edu/~heinken/latex/symbols.pdf)
      - 分段函数

      $$
      y=\begin{cases}
      -x,\quad x\leq 0 \\
      x,\quad x>0
      \end{cases}
      $$
      ```
      $$
      y=\begin{cases}
      -x,\quad x\leq 0 \\
      x,\quad x>0
      \end{cases}
      $$

    • 分行 \newline $$13\newline13$$

    • 空格 a\ b, a \quad b => $a\ b, a \quad b$

    • 文本 \text{s.t.} => $\text{s.t.}$

总纲

  1. 精确简短的描述
  2. 清晰可复现的例子
  3. 方法与原理兼有

    符合理解三要素: 核心要点, 实际例子, 相关基础

    写作风格

    更早的:
  4. 逗号都用英文的, 并且后面空一格
  5. 英文与中文相隔

19.10.? - 让重点更加明显, 加重某些词

19.11.2 - 避免出现只甩链接的情况, 而是扩展可阅读。

先将文中需要了解的都讲解清楚, 再放出参考来源或者扩展可以阅读

19.11.4 - 探索一下表情包如何用在博客里

最好短一点, 行内形式的, 当然比较大的形式有意思的话也是可以放出来的

  • 设置了搜狗输入法的颜文字, 不记熟颜文字对应的词语的话没法键盘流, 得靠按下分号后自己选
  • emoji, 使用形式 - 正文直接插入(用 # 控制大小), 使用方法 - emojiHomepage😂, win + . (超好用)
    注意, 多个答案有用 - 电脑上如何输入 Emoji 表情?

19.11.4 - 写作模板探索

19.11.5 - 链接之间用 - 来分隔开

19.11.9 - 必有 demo 在 ref 文件夹中, 并放在文章最前面(可以选择是否展开), 因此写了一个 demo.js 用于展示, 等完善以后再写一篇相关的 tips

19.11.13 - 扩展阅读需要讲明里头是写什么

19.11.13 - tips 栏目考虑

  • 19.12.19 - 已经整好了😉

19.12.19 - 新建 md 文件时不再考虑用中文起名, 这会导致中文 url 复制后是很长一串转义的网址, 对 seo 也不好

20.2.27 - 对于要引用的英文文章, 将内容用中文完全表述好, 比如说对照翻译一下, 而不是甩链接

编程语言入门 |计算机科学|总结

由于经常会遇到快速学习某一门编程语言的情况, 记录入门流程

若是想要达到业余的水平, 他们特有的应用也得掌握, 也就脱离了语法的层面, 到了应用的层面(必须有语法的基础)
当然, 我们新学一门语言基本都是奔着应用去的

举个例子:

  1. matlab - 完成图像处理和机器学习作业
  2. c# - 完成人机交互作业, 写 unity 和 windows 桌面应用
  3. python - 学习爬虫, 图像处理等

列举一下顺序:

  1. 工具( ide 使用学习)
  2. 比较系统的简单教程(调用 api, 制作一个简单的应用)
  3. 针对性查找(添加自己想要的功能), 如果较难, 必将会接触后一步
  4. 书籍/包含原理的教程 (此时应该是业余了), 学习其他人的作品(必定)
  5. 语言架构, 最佳实践等(知识体系完善后应该进入专业的领域了, 即入行了)

从应用的开发来说, 如何从零写一个应用 -> 添加自己想要的功能 -> 构建一个鲁棒性, 易拓展, 功能丰富的应用(也就是说到这阶段基本就差的不多了, 各门语言, 基本都是软工, 设计模式等当然再加上该语言的特性)
当然框架的学习也是如此

如何加深对该语言的掌握: 完成一系列不同方面应用例如聊天等, 锻炼库的使用, 代码组织的能力

接下来有一个更一般, 更贴近实际编程自学的例子, 上面是大部分抽象了的

  • 百度, google 教程
  • 看速成书, turing 书, 动物书 (后两者是常见的国外书籍)
  • 手撸业务, 用开源省功夫, 此时大量查 google
  • 看文档, 看源码, 有了先看文档 (英文) 的习惯

来自 你的编程能力从什么时候开始突飞猛进

基本环境与运行

环境变量配置, 解释型的语言, 编译型的语言以及他们的ide

基础语法

  1. 变量声明, 赋值
  2. 数据类型
  3. 判断
  4. 循环
  5. 函数
  6. 内置方法

debug 方法

获取到代码运行时内部的值

完成算法, 需求

代码模块组织

warning

完成上述的应该就能入门了, 后续业余与专业部分由于尚未经历系统的团队协作, 后续部分暂时问号