CatsLinc Blog吴磊的技术博客

使用Python和BeautifulSoup來抓取網站

Python and BeautifulSoup

loiwu 2018-04-06

使用Python和BeautifulSoup來抓取網站

scrape websites with Python and BeautifulSoup

========== ==========

假期即将结束的今晚,尝试下用 Python 3.x 和 BeautifulSoup,做个爬虫,爬取某网站上感兴趣的信息,并输出.csv文件。

过程非常简单,稍微有一点前端和Python常识的同学,一看就会。

编程环境: Python 3.6.5 / macOS 10.12.6

步骤如下:

-> 檢查頁面 Inspecting the Page

分析下要爬取得网页的标签结构,这里不赘述了

-> 跳入代碼 Jump into the Code

代码在这: My GitHub - jump to the code

-> 導出到Excel CSV Export to Excel CSV

代码在这: My GitHub - export to excel csv

完整的代码在这里: My GitHub - scraper

想和我交朋友^_^,请打赏并留言,我们一起探讨下人生:

ReveiveMony

========== ==========

loiwu.github.io

loi

前端抢手货之 Vue.js和微信小程序框架

Front End Key Skills - Vue.js and Mini Program Framework

loiwu 2018-04-04

Vue.js和微信小程序框架,还是那句话,市场行情就是这样,赶紧学吧。

========== ==========

Part A > mpvue

mpvue, 是基于Vue.js的小程序开发框架, 从底层支持Vue.js语法和构建工具体系

========== ==========

Part A mpvue,就是重点,赶紧点开来研究代码吧,

Part B Vue.js,就是一堆非常随意的字,别看了,对你没用。

========== ==========

Part B : Vue.js,构建用户界面的渐进式框架

Vue.js(读音 /vjuː/, 类似于 view)。

Vue 只关注视图层,采用自底向上增量开发的设计。

Vue 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。

Vue.js 提供一个官方命令行工具 vue-cli,可用于快速搭建大型单页应用。

结合使用npm,可以对Vue.js工程进行初始化并运行。

一、Vue.js 目录结构

目录/文件 说明
build 项目构建(webpack)相关代码
config 配置目录,包括端口号等
node_modules npm 加载的项目依赖模块
src 开发目录。包含:assets,components,router,App.vue,main.js
static 静态资源目录,如图片、字体等
test 初始测试目录
.xxxx文件 这些是一些配置文件,包括语法配置,git配置等
index.html 首页入口文件,你可以添加一些 meta 信息或统计代
package.json 项目配置文件
README.md 项目的说明文档,markdown 格式

二、Vue.js 起步

每个 Vue 应用都需要通过实例化 Vue 来实现。

	var vm = new Vue({
  		// 选项
	})

Vue 构造器中有一个el 参数,它是 DOM 元素中的 id,data 用于定义属性,methods 用于定义的函数, 用于输出对象属性和函数返回值。

当一个 Vue 实例被创建时,它向 Vue 的响应式系统中加入了其 data 对象中能找到的所有的属性。当这些属性的值发生改变时,html 视图将也会产生相应的变化。

除了数据属性,Vue 实例还提供了一些有用的实例属性与方法。它们都有前缀 $,以便与用户定义的属性区分开来。

三、Vue.js 模板语法

Vue.js 使用了基于 HTML 的模版语法,允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。

Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。

结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。

1)插值

文本:数据绑定最常见的形式就是使用 /{/{…/}/}(双大括号)的文本插值

Html:使用 v-html 指令用于输出 html 代码

属性:HTML 属性中的值应使用 v-bind 指令

表达式:Vue.js 都提供了完全的 JavaScript 表达式支持

2)指令

指令是带有 v- 前缀的特殊属性。指令用于在表达式的值改变时,将某些行为应用到 DOM 上。

参数:参数在指令后以冒号指明。

如, v-bind 指令被用来响应地更新 HTML 属性,在这里 href 是参数,告知 v-bind 指令将该元素的 href 属性与表达式 url 的值绑定。

	<div id="app">
    	<pre><a v-bind:href="url">Loi的技术Blog</a></pre>
	</div>
	<script>
		new Vue({
  			el: '#app',
  			data: {
    		url: 'http://loiwu.github.io'
  			}
		})
	</script>

如,v-on 指令,它用于监听 DOM 事件,在这里参数是监听的事件名。

	<a v-on:click="doSomething">

修饰符:修饰符是以半角句号 . 指明的特殊后缀,用于指出一个指定应该以特殊方式绑定。

如,.prevent 修饰符告诉 v-on 指令对于触发的事件调用 event.preventDefault():

	<form v-on:submit.prevent="onSubmit"></form>

3)用户输入

在 input 输入框中可以使用 v-model 指令来实现双向数据绑定,按钮的事件我们可以使用 v-on 监听事件,并对用户的输入进行响应。

4)过滤器

Vue.js 允许自定义过滤器,被用作一些常见的文本格式化。由”管道符”指示, 格式如下:

	<!-- 在两个大括号中 -->
	/{/{ message | capitalize /}/}
	<!-- 在 v-bind 指令中 -->
	<div v-bind:id="rawId | formatId"></div>

过滤器可以串联:

	/{/{ message | filterA | filterB /}/}

过滤器是 JavaScript 函数,因此可以接受参数:

	/{/{ message | filterA('arg1', arg2) /}/}

这里,message 是第一个参数,字符串 ‘arg1’ 将传给过滤器作为第二个参数, arg2 表达式的值将被求值然后传给过滤器作为第三个参数。

5)缩写

(1)v-bind 缩写

Vue.js 为两个最为常用的指令提供了特别的缩写:

	<!-- 完整语法 -->
	<a v-bind:href="url"></a>
	<!-- 缩写 -->
	<a :href="url"></a>

(2)v-on 缩写

Vue.js 为两个最为常用的指令提供了特别的缩写:

	<!-- 完整语法 -->
	<a v-on:click="doSomething"></a>
	<!-- 缩写 -->
	<a @click="doSomething"></a>

四、Vue.js 条件与循环

1)条件判断

(1)v-if

条件判断使用 v-if 指令

(2)v-else

用 v-else 指令给 v-if 添加一个 “else” 块

(3)v-else-if

v-else-if 在 2.1.0 新增,用作 v-if 的 else-if 块,可以链式的多次使用

(4)v-show

可以使用 v-show 指令来根据条件展示元素

2)循环语句

循环使用 v-for 指令。

v-for 指令需要以 site in sites 形式的特殊语法, sites 是源数据数组并且 site 是数组元素迭代的别名。

(1)v-for 迭代对象

v-for 可以通过一个对象的属性来迭代数据,也可以提供第二个的参数为键名,第三个参数为索引。

(2)v-for 迭代整数

v-for 也可以循环整数。

五、Vue.js 计算属性

计算属性关键词: computed。

可以使用 methods 来替代 computed,效果上两个都是一样的,但是 computed 是基于它的依赖缓存,只有相关依赖发生改变时才会重新取值。

而使用 methods ,在重新渲染的时候,函数总会重新调用执行。可以说使用 computed 性能会更好,但是如果不希望缓存,那可以使用 methods 属性。

computed setter:computed 属性默认只有 getter ,不过在需要时也可以提供一个 setter

六、Vue.js 监听属性

可以通过 watch 来响应数据的变化

七、Vue.js 样式绑定

1)Vue.js class

class 与 style 是 HTML 元素的属性,用于设置元素的样式,可以用 v-bind 来设置样式属性。

Vue.js v-bind 在处理 class 和 style 时, 专门增强了它。表达式的结果类型除了字符串之外,还可以是对象或数组。

2)class 属性绑定

可以为 v-bind:class 设置一个对象,从而动态的切换 class

	<!-- 实例中将 isActive 设置为 true 显示了一个绿色的 div 块,如果设置为 false 则不显 -->
	<div v-bind:class="{ active: isActive }"></div>
	<!-- 以上实例 div class 为 -->
	<div class="active"></div>

数组语法

	<!-- 我们可以把一个数组传给 v-bind:class -->
	<div v-bind:class="[activeClass, errorClass]"></div>

3)Vue.js style(内联样式)

可以在 v-bind:style 直接设置样式

八、Vue.js 事件处理器

事件监听可以使用 v-on 指令。

1)事件修饰符:Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节,如:event.preventDefault() 或 event.stopPropagation()。

Vue.js通过由点(.)表示的指令后缀来调用修饰符。

	.stop
	.prevent
	.capture
	.self
	.once
	<!-- 阻止单击事件冒泡 -->
	<a v-on:click.stop="doThis"></a>
	<!-- 提交事件不再重载页面 -->
	<form v-on:submit.prevent="onSubmit"></form>
	<!-- 修饰符可以串联  -->
	<a v-on:click.stop.prevent="doThat"></a>
	<!-- 只有修饰符 -->
	<form v-on:submit.prevent></form>
	<!-- 添加事件侦听器时使用事件捕获模式 -->
	<div v-on:click.capture="doThis">...</div>
	<!-- 只当事件在该元素本身(而不是子元素)触发时触发回调 -->
	<div v-on:click.self="doThat">...</div>
	<!-- click 事件只能点击一次,2.1.4版本新增 -->
	<a v-on:click.once="doThis"></a>

2)按键修饰符

Vue 允许为 v-on 在监听键盘事件时添加按键修饰符。

	<!-- 只有在 keyCode 是 13 时调用 vm.submit() -->
	<input v-on:keyup.13="submit">

记住所有的 keyCode 比较困难,所以 Vue 为最常用的按键提供了别名:

	<!-- 同上 -->
	<input v-on:keyup.enter="submit">
	<!-- 缩写语法 -->
	<input @keyup.enter="submit">

全部的按键别名:

	.enter
	.tab
	.delete (捕获 "删除" 和 "退格" 键)
	.esc
	.space
	.up
	.down
	.left
	.right
	.ctrl
	.alt
	.shift
	.meta
	<p><!-- Alt + C -->
	<input @keyup.alt.67="clear">
	<!-- Ctrl + Click -->
	<div @click.ctrl="doSomething">Do something</div>

九、Vue.js 表单

用 v-model 指令在表单控件元素上创建双向数据绑定。

Vue.js 表单

十、Vue.js 组件

组件(Component)是 Vue.js 最强大的功能之一。

组件可以扩展 HTML 元素,封装可重用的代码。

组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的界面都可以抽象为一个组件树:

Vue.js 组件

十一、Vue.js 自定义指令

除了默认设置的核心指令( v-model 和 v-show ), Vue 也允许注册自定义指令。

十二、Vue.js 路由

Vue.js 路由允许我们通过不同的 URL 访问不同的内容。

通过 Vue.js 可以实现多视图的单页Web应用(single page web application,SPA)。

vue-router 库

vue-router文档

指导日常工作的设计模式和架构模式总结

Design Pattern & Architectural Pattern

loiwu 2018-03-24

长按下载吧😆

++++++++++ ++++++++++

脑图欣赏

++++++++++ ++++++++++

设计模式

设计模式

设计模式之间的关系

设计模式之间的关系

J2EE模式

J2EE模式

架构模式

架构模式

++++++++++ ++++++++++

设计模式 招式+心法

++++++++++ ++++++++++

++++++++++ ++++++++++

五种 创建型模式,这些设计模式提供了一种在创建对象的同时隐藏创建逻辑的方式。

++++++++++ ++++++++++

1) Factory Pattern

Step 01:创建一个接口

Step 02:创建实现接口的实体类

Step 03:创建一个工厂,生成基于给定信息的实体类的对象

Step 04:使用该工厂,通过传递类型信息来获取实体类的对象

Factory Pattern

2) Abstract Factory Pattern

Step 01:为形状创建一个接口

Step 02:创建实现接口的实体类

Step 03:为颜色创建一个接口

Step 04:创建实现接口的实体类

Step 05:为 Color 和 Shape 对象创建抽象类来获取工厂

Step 06:创建扩展了 AbstractFactory 的工厂类,基于给定的信息生成实体类的对象

Step 07:创建一个工厂创造器/生成器类,通过传递形状或颜色信息来获取工厂

Step 08:使用 FactoryProducer 来获取 AbstractFactory,通过传递类型信息来获取实体类的对象

Abstract Factory Pattern

3)Singleton Pattern

Step 01:创建一个 Singleton 类

Step 02:从 singleton 类获取唯一的对象

Singleton Pattern

4)Builder Pattern

Step 01:创建一个表示食物条目和食物包装的接口

Step 02:创建实现 Packing 接口的实体类

Step 03:创建实现 Item 接口的抽象类,该类提供了默认的功能

Step 04:创建扩展了 Burger 和 ColdDrink 的实体类

Step 05:创建一个 Meal 类,带有上面定义的 Item 对象

Step 06:创建一个 MealBuilder 类,实际的 builder 类负责创建 Meal 对象

Step 07:BuiderPatternDemo 使用 MealBuider 来演示建造者模式(Builder Pattern)

Builder Pattern

5)Prototype Pattern

Step 01:创建一个实现了 Clonable 接口的抽象类

Step 02:创建扩展了上面抽象类的实体类

Step 03:创建一个类,从数据库获取实体类,并把它们存储在一个 Hashtable 中

Step 04:PrototypePatternDemo 使用 ShapeCache 类来获取存储在 Hashtable 中的形状的克隆

Prototype Pattern

++++++++++ ++++++++++

结构型模式,这些设计模式关注类和对象的组合。

++++++++++ ++++++++++

6)Adapter Pattern

Step 01:为媒体播放器MediaPlayer和高级媒体播放器AdvancedMediaPlayer创建接口

Step 02:创建实现了 AdvancedMediaPlayer 接口的实体类

Step 03:创建实现了 MediaPlayer 接口的适配器类

Step 04:创建实现了 MediaPlayer 接口的实体类

Step 05:使用 AudioPlayer 来播放不同类型的音频格式

Adapter Pattern

++++++++++ ++++++++++

行为型模式,这些设计模式关注对象之间的通信。

++++++++++ ++++++++++

Chain of Responsibility Pattern

Step 01:创建抽象的记录器类

Step 02:创建扩展了该记录器类的实体类

Step 03:创建不同类型的记录器。赋予它们不同的错误级别,并在每个记录器中设置下一个记录器。每个记录器中的下一个记录器代表的是链的一部分

推荐算法

Recommendation Algorithm

loiwu 2018-03-22

了解推荐算法的三篇短小精干的小帖子,pm都能看懂,点开来看看吧:

1分钟了解协同过滤,pm都懂了

1分钟了解基于内容的推荐,pm又懂了

1分钟了解相似性推荐,pm表示压力很大

Mastering the Requirements Process

掌握需求过程

loiwu 2018-03-14

Mastering the Requirements Process - Getting Requirements Right

Part 01 - 方法概述

1. 基本事实

1.1 关于需求的11个基本事实

(1)事实1

需求其实并非在谈需求。

(2)事实2

如果我们必须构建软件,那么它必须为拥有它的人提供最理想的价值。

(3)事实3

如果软件不必满足需求,那你怎么干都行。但是,如果软件需要满足需求,你就必须知道要求是什么,这样才能构建出正确的软件。

(4)事实4

构建一个软件和解决一个业务问题之间,存在巨大的差别。也许构建一个软件不一定能真正解决一个业务。

(5)事实5

需求不一定要写下来,但构建者必须知道它们。

(6)事实6

客户不一定总能给你正确答案。有时候客户也不可能只到什么是对的,有时候他们就是不知道需要什么。

(7)事实7

需求不是偶然得到的,要通过某种有序的过程得到。

(8)事实8

你怎么迭代都可以,但任然需要理解业务的需求。

(9)事实9

没有银弹 Silver Bullet,所有方法和工具都无法弥补糟糕的想法和糟糕的手艺。

(10)事实10

要想成功地实现需求,需求就必须可度量、可测试。

(11)事实11

作为业务分析师,你将改变用户思考这个问题的方式,不是现在就是将来。

1.2 究竟什么是“需求(Requirement)”

需求实质上包括三种大类型:

(1)功能需求

功能需求是产品必须完成的那些事儿。

(2)非功能需求

非功能需求是产品必须具备的属性或品质。

(3)限制条件

限制条件是一个全局问题,约束着所有的需求。

1.3 Volere需求过程(Volere Requirements Process)

需求过程设计 Requirements Process Design

2. 需求过程

Volere 需求过程

Volere 需求规格说明书模板 Volere Requirements Specification Template

### 3. to be continued

Data-Driven Marketing

数据驱动Marketing

loiwu 2018-03-11

Data-Driven Marketing - The 15 Important Marketing Metrics

Part 01- 概述

1. 营销分水岭

1.1 15个基本的营销指标

(1)品牌认知度

(2)试用驱动

(3)流失

(4)客户满意度(CAST)

(5)命中率

(6)利润

(7)净现值(NPV)

(8)内部收益率(IRR)

(9)回报

(10)客户生命周期价值(CLTV)

(11)每一点击成本(CPC)

(12)交易转化率(TCR)

(13)广告投入回报(ROA)

(14)跳出率

(15)口碑(WOM)(社会媒体到达)

前10指标称为经典营销指标。指标(1)~(5)是基本的非财务指标,这些指标确定了品牌效力、客户忠诚度、比较营销活动和营销活动效果。指标(6)~(9)是基础财务指标。指标(10)是制定基于客户价值的决策的基础财务指标。

后5个指标成为“新时代营销指标”。指标(11)~(13)放映了搜索引擎营销的效果。指标(14)是理解你网站有多好的关键指标。指标(15)反映了社会媒体营销的效果。

1.2 营销预算:领跑者和落后者之间的关键差别

根据营销投入实际想要做什么,定义了用于刺激需求营销、品牌化和认知、客户关系、塑造市场和基础设施与能力建设的资金桶。

(1)刺激需求营销:这些营销活动在活动后的相对较短的时期内能驱动收入。如折价销售、赠券和事件营销。

(2)品牌化和认知:这些营销活动促成认知。如赞助运动会/事件、财产冠名权、明确为提高认知(不是为了提升未来销售)而设计的广告(电视/印刷品/网络/电子邮件广告)。

(3)客户关系:这些营销活动聚焦于生成与客户的各种关系,促成客户忠诚度和客户承诺。如购买后的感谢条、类似礼宾购买服务的忠诚计划。

(4)塑造市场:策划这些营销活动,通常是通过独立的第三方推荐,使市场接受你想推广的产品或服务。如通过B2B公司的分析师关系、通过社会媒体博客,来影响用户的感知。

(5)基础设施与能力建设:这些投资用于支持Marketing Team的技术和培训。例如,技术投入包括,支持数据驱动营销的EDW(Enterprise Data Warehouse,企业级数据仓库)、分析工具、营销资源管理软件。

财务指标可以被用来量化大约50%的营销活动。营销分水岭确实存在,市场领跑者在刺激需求营销上投入较少,而在品牌化和客户资产、支持数据驱动营销的基础建设上,投入更多。

1.3 确定数据驱动营销战略

(1)第一步,开发一个数据驱动营销战略的框架

客户管理管理框架,A Framework for Customer Relationship Management

Description Topic
了解自己… 战略目标
了解客户… 生成数据库/分析
客户细分… 选择客户/客户定位
数据驱动营销… 营销活动
建立信任… 隐私条款
保持记录… 指标

(2)第二步,通过分析来理解客户

通过Excel,或更多的技术工具来分析数据,方法包括更细粒度的客户细分,最终这些工作会引导到目标客户定位和数据驱动的营销活动。
首先通过数据采集和分析,引导到对客户特征的洞察以进行客户细分,然后对目标客户进行定位做数据驱动的营销。

Summary

15个基本指标量化了绝大多数营销活动。
表现好的公司在品牌化、客户资产和支持数据驱动营销的技术上投入更多,而在刺激需求营销上投入相对少。
营销的可持续竞争优势,来自不能被轻易复制的活动的组合。

2. 数据驱动的营销需要克服5个障碍

障碍1:起步

(1)不知道怎么做

(2)没有适当的指标

(3)问题不是数据太少,反而是有许多数据但没一个是有用的

(4)不知道从哪里开始

障碍2:因果关系

(1)有许多的干扰因素,并且活动使得确认原因和结果变得不可能

(2)营销活动和客户行为之间存在时延

(3)活动感知并不能直接带来销售,但我就是想看到ROI,怎么办

障碍3:数据缺乏

(1)作为B2B公司并不直接销售产品给客户,所以,我不知道我们的客户是谁

(2)因为隐私条款的限制,不能手机客户数据

障碍4:资源和工具

(1)我们没有时间和/或者成本太高

(2)我们没有工具和/或者我们没有支持数据驱动营销的系统

(3)我们是营销人员,真心无法和信息技术(IT)人员沟通

(4)IT建了系统,但不是我们需要的资源和工具

障碍5:人员与变革

(1)我们不去衡量因为我们不想有这个责任

(2)我们的激励都是对应着营销活动,而不是营销结果

(3)我们没有进行衡量的文化

(4)我们没有进行数据营销的技能

(5)我们的组织拒绝想数据驱动营销这样的新想法

(6)营销是创造性的:施加指标和流程会扼杀创造性和创新

以下是如何克服这5个障碍的策略。

2.1 克服障碍1:起步 – 聚焦于采集合适的数据,通过轻松得分简历里程碑

2.2 克服障碍2:因果关系 – 进行小试验

2.3 克服障碍3:数据缺乏 – 获得客户数据的战略

2.4 克服障碍4:资源和工具 – 建设数据驱动营销的基础设施

2.5 克服障碍5:人员与变革 – 建立数据驱动营销的文化

### 3. to be continued

Agile JavaScript Development

JavaScript快速全栈开发

loiwu 2018-03-10

Rapid Prototyping with JS: Agile JavaScript Development

1. Basic Information

1.1 定义前端

Begin - 用户在浏览器/客户端输入或点击一个链接

-> 浏览器向服务器发送HTTP请求

-> 服务器处理请求,如果查询字符串或请求体里含有参数,服务器也会把这些参数信息考虑进去

-> 服务器更新、获取或转换数据库里的数据

-> 服务器以HTML、JSON或其他格式返回一个HTTP响应

-> 浏览器接收HTTP响应

-> 浏览器以HTML或其他格式(如JPEG、XML或JSON)把HTTP响应呈现给用户 - End

1.2 敏捷开发

(1)Scrum

Scrum由一个个短周期组成,每个周期叫sprint。一个sprint通常持续一到两周。典型的sprint是在sprint计划会议上开始和结束的,这些会议同时会把新任务分配给团队成员。通过sprint计划会议,新任务可以被添加到sprint里。

每天进行的scrum会议室Scrum方法体系的重要组成部分。每一个scrum会议通常是在走廊里进行的5~15分钟的会议。在scrum会议上,每一个团队成员要回答一下三个问题:

  • 自己昨天做了什么?
  • 今天准备做什么?
  • 是否需要从其他团队成员那里得到些什么?

在高度变化的环境中(如创业初期),敏捷开发显得更加灵活。其好处在于:在没办法提前规划时,或者需要以收集的用户反馈作为主要决策因素时,敏捷开发往往非常有效。

(2)测试驱动开发 TDD

  • 使用断言为新功能、新任务写下失败的自动测试用例
  • 写出能够成功通过测试的代码
  • 如果需要,重构代码,添加功能,同时保证测试用例的通过
  • 重复以上步骤直至所有任务都完成

测试可以分为功能测试和单元测试。 单元测试通过模拟依赖,测试系统单元、函数、方法。 功能测试(或称集成测试)是在包含依赖的情况下,测试一系列功能。

TDD的优点在于:更少的错误和缺陷;更有效的代码;确保在不影响已有功能的情况下,新代码能正常工作。

(3)持续部署和持续集成

持续部署(Continuous Delivery)是一系列技术的组合,可以快速把开发好的新功能、错误修复和增强功能呈现给用户。CD包含自动测试和自动部署。持续部署可以减少我们的手工劳动,尽可能地缩短收集反馈的时间。

以下是流行的持续集成解决方案:

  • Jenkins:开源的可扩展持续集成服务器
  • CircleCI:更好更快的代码
  • Travis CI:一个针对开源社区的持续集成托管服务

参考:Continuous Delivery vs Continuous Deployment vs Continuous Integration: Key Definitions

(4)结对编程

结对编程是两个开发者在同一个环境里一起工作的技术。其中一个开发者是“驾驶员”,另一个是“观察员”。驾驶员主要负责写代码,观察员围观并且提供建议。一段时间后两人互换角色。驾驶员的角色更关注当下的任务,观察员需要有大局观,发现错误并且改进算法。

结对编程的特点:

  • 两人可以一起产出更简洁、更高效的代码,同时降低引发错误和缺陷的几率
  • 程序员们在一起工作时,可以彼此交流和传递知识,但也可能发生冲突,而且这并不少见

1.3 定义后端

(1)Node.js

Node.js是事件驱动异步I/O开源程序,可以用来创建可伸缩且高性能的Web服务器。Node.js由Google的V8 JavaScript引擎组成,并由云服务公司Joyent维护。

使用Node.js的优势:

  • JavaScript语言作为Web和移动开发的业界标准,开发人员熟悉他的可能性更高
  • 前后端用同一种编程语言进行开发,可以加快写代码的过程。开发者的思维不需要在不同的语法间切换,可以更快地学习各种方法和类
  • 使用Node.js可以快速地搭建原型,做市场开发,提前获取用户。与使用PHP或者MySQL的等不太敏捷的技术的公司相比,这是很重要的优势
  • Node.js可以通过WebSocket支持实时应用程序

(2)NoSQL和MongoDB

MongoDB是可用于大数据的高性能非关系型数据库。由于传统的关系型数据库管理系统(RDBMS)无法应对大数据的挑战,NoSQL概念应运而生。

MongoDB的优势:

  • 可伸缩性:由于其分布式特性,可以在多个服务器和数据中心防止荣誉数据
  • 高性能:MongoDB在存储和检索方面非常高效,部分原因是数据库中元素与集合之间关系上的弱处理
  • 灵活性:键-值对的存储非常适合原型开发,因为使用它的用户,不需要关系表关系,不需要修复数据模型,不需要关注复杂的数据迁移

(3)云计算

云计算由以下服务组成:

  • 基础设施即服务 IaaS
  • 平台及服务 PaaS
  • 后端即服务 BaaS
  • 软件即服务 SaaS

云应用平台具备以下功能:

  • 可伸缩性,例如在几分钟内产生新的实例
  • 部署简单,如想Heroku部署,只需要 $ git push
  • 现收现付制,用户根据需要添加和删除内存及磁盘空间
  • 可扩展,方便安装和设置数据库、应用服务器、程序包等
  • 安全和技术支持

PaaS和BaaS非常适合构建原型,一般用来创建MVP(Minimal Viable Product,最小化可行的产品),供那些尚处于创业初始阶段的团队使用。

我体验过的PaaS提供商:Heroku

(4)HTTP请求和响应

每一个HTTP请求和响应均由以下组件构成:

  • 头部(header):关于编码、主体的长度、来源、内容类型等的信息
  • 主体(body):内容,一般是参数或数据,通常传递给服务器,或返回给客户端

HTTP请求包含以下几方面内容:

  • 方法:一些请求方法,如常见的GET、POST、PUT、DELETE
  • URL:主机、端口和路径,如http://loiwu.github.io/#/2016/04/28/be-a-tiger
  • 查询字符串:URL里问好之后的所有字符,比如 ?k=直播+Live

(5)REST式API

由于在分布式系统中每个事物都需要包含足够多关于客户端状态的信息,REST(REpresentational State Transfer)式API因此流行起来。从某种意义上来说,这个标准也是无状态的,因为客户端的状态并不会保存在服务器上,这样才使得每一个请求可以分发到不同的服务系统上进行处理。

REST式API的特征:

  • 有更好的可伸缩性,因为它支持把不同的组件部署到不同的服务器上
  • 替代SOAP(Simple Object Access Protocol,简单对象访问协议),因为它是简单的动词和名词组合
  • 充分利用HTTP方法,如GET、POST、DELETE、PUT、OPTIONS等

REST不是一种协议,而是一种比诸如SOAP这样的协议更灵活的架构。

参考:

A Brief Introduction to REST

幂等方法

2. 环境搭建

逐步安装本地组件,为使用云服务做准备。

2.1 本地环境搭建

-> 开发目录

-> 浏览器

-> IDE

-> 版本控制

-> 本地HTTP服务器

-> 数据库,如MongoDB

-> 组件,如 Node.js、JS库(LESS/Bootstrap/jQuery/Backbone.js)等

2.2 云端环境搭建

-> SSH密钥

-> 代码仓库: GitHub/Bitbucket/GitLab

-> 云主机

-> Heroku

-> Cloud9

### 3. to be continued

Thinking with Data

数据思维与数据分析

loiwu 2017-11-29

产品和运营必须的数据思维如何培养

1. 数据的价值

1)数据是产品上线后唯一生产的东西 input/output

2)数据的及时和透明是互联网效率和迭代的法宝 每帧代表一幅静止的图像

3)数据是衡量公司、项目和产品健康度的客观指标

向数据要迭代,向迭代要数据 数据是产品迭代的依据和需求来源:来自于用户的行为和访客的反馈能够帮助产品形成新的需求点。如首页改版和文章中级页改版。 版本迭代好坏的评价标准是数据:一个版本迭代完成后,用户是否买单的直接表现是数据,而数据是会说话的,比如转化率、次日留存率等指标。

2. 数据的种类

DAU 支付率 UV CTR MAU 成单量 PV 7日留存 活跃用户数 留存率 访问到下单的转化率 ARPU 新增用户数 次日留存率 WAU KOL 复购率 30日留存 Bounce_Rate

微笑价值 商业价值 产品数据 商业数据

商业数据模型 收入 = 用户或客户总量 × 付费率 × ARPU值,ARPU = 平均客单价 × 单位日期内平均购买单数

产品数据模型 流程/页面->产品指标 》转化指标《 行为/动作->用户指标

产品指标:从数据库角度看,主要是Output指标,反映内容、服务质量和产品的稳定性 页面/流程数据:PV、UV、Duration、Bounce Rate、渗透率、referral

为未来

Dev for the Future

loiwu 2017-10-01

Dev for the Future

========== ==========

研发简历关键词

-> 前端

JavaScript, JQuery, AJAX, Bootstrap, Swiper, Webpack, phpMyAdmin, MySQL, Spring MVC, Hibernate/JPA, ES6, easy-mock, Vue.js, Angular, Ionic, PWA, TypeScript, React, SCSS, Express, tween.js, animate.css, vue-cli, Python, BeautifulSoup, Java, 软件开发设计模式, MongoDB, NodeJs, 数据挖掘, 数字版权, 虚拟货币, 浏览器端加密插件

->

========== ==========

常用命令

->

更新npm至最新版本 : npm install -g npm

全局安装或更新WePY命令行工具 : npm install wepy-cli -g

开启实时编译 : wepy build –watch

->

========== ==========

常用文档

->

微信小程序组件化开发框架WePY官方文档: https://tencent.github.io/wepy/document.html#/

->

========== ==========

我的状态如下:

Loading

不停加载,不停突破

Streaming Media

流媒体

loiwu 2017-09-29

流媒体知识

1)流媒体开发: 网络层(socket或st)负责传输,协议层(rtmp或hls)负责网络打包,封装层(flv、ts)负责编解码数据的封装,编码层(h.264和aac)负责图像,音频压缩。

2)帧: 每帧代表一幅静止的图像

3)GOP(Group of Pictures): 画面组,一个GOP就是一组连续的画面,每个画面都是一帧,一个GOP就是很多帧的集合。 直播的数据,其实是一组图片,包括I帧、P帧、B帧,当用户第一次观看的时候,会寻找I帧,而播放器会到服务器寻找到最近的I帧反馈给用户。因此,GOP Cache增加了端到端延迟,因为它必须要拿到最近的I帧GOP Cache的长度越长,画面质量越好

4)码率: 图片进行压缩后每秒显示的数据量。

5)帧率: 每秒显示的图片数。影响画面流畅度,与画面流畅度成正比:帧率越大,画面越流畅;帧率越小,画面越有跳动感。 由于人类眼睛的特殊生理结构,如果所看画面之帧率高于16的时候,就会认为是连贯的,此现象称之为视觉暂留。并且当帧速达到一定数值后,再增长的话,人眼也不容易察觉到有明显的流畅度提升了。

6)分辨率: (矩形)图片的长度和宽度,即图片的尺寸。

7)压缩前的每秒数据量: 帧率X分辨率(单位应该是若干个字节)。

8)压缩比: 压缩前的每秒数据量/码率 (对于同一个视频源并采用同一种视频编码算法,则:压缩比越高,画面质量越差。)。 

9)视频文件格式: 文件的后缀,比如.wmv,.mov,.mp4,.mp3,.avi。 主要用处,根据文件格式,系统会自动判断用什么软件打开, 注意: 随意修改文件格式,对文件的本身不会造成太大的影响,比如把avi改成mp4,文件还是avi.

10)视频封装格式: 一种储存视频信息的容器,流式封装可以有TS、FLV等,索引式的封装有MP4,MOV,AVI等。 主要作用:一个视频文件往往会包含图像和音频,还有一些配置信息(如图像和音频的关联,如何解码它们等):这些内容需要按照一定的规则组织、封装起来. 注意:会发现封装格式跟文件格式一样,因为一般视频文件格式的后缀名即采用相应的视频封装格式的名称,所以视频文件格式就是视频封装格式。

11)视频封装格式和视频压缩编码标准: 就好像项目工程和编程语言,封装格式就是一个项目的工程,视频编码方式就是编程语言,一个项目工程可以用不同语言开发。

避免失忆

devmome,一份为我准备的研发备忘录

loiwu 2017-02-14

devmome:一份为我准备的研发备忘录

========== ==========

iOS 题目

内存区域分配

devmome

如何组件化解耦

runtime如何通过selector找到对应的IMP地址

runloop内部实现逻辑

多线程

GCD执行原理

防止反编译App

YYAsyncLayer

App的优化策略

========== ==========

devmome

Be A Tiger

你是谁,最终由DNA决定

loiwu 2016-04-28

About Me

My name is Loi Wu, a senior software engineer living in Guangzhou, China.

I believe that every team needs someone with the vision to keep it looking and moving forward.

I’m interested in technology and software development.

I’m passionate about new business models in e-commerce, which can bring more business opportunities in the coming future.

Years ago, I worked for Alibaba & Cisco as a software engineer.

Welcome to contact me:

  • Email: loi.wu@vipshop.com
  • Wechat: superloiwu

CatsLinc Studio

I have a software/design studio called ‘CatsLinc Studio’. Our team members come from many different fields.

BAEN

I’m coding for iOS, as well as full stack, and I’ve released an app named BAEN in App Store.

唯品会 for iOS

As a participant and leader, I’ve been involved in product designing and developing of VIP.com for iOS

创意联合

Hi Cat,欢迎你来

a cat 2015-01-01

CatsLinc Studio 创意联合

这是一个虚拟的组织,但她希望你能把创意和才华留在这里。你来了,她就会成为现实。

官方网站从2017年04月02日注册成功,一直延续10年,欢迎你来看看

如果你好奇CatsLinc Studio的秘密,想成为核心成员并在这里亮相,请通过以下方式联系我:

  • Email: vipstartup@qq.com
  • Wechat: superloiwu

如果你好奇我是谁,你只能靠猜

这是一个广告位