互动派（数说故事）实习总结

[WarpPrism]

2016年11月15日结束了3个月的实习生活，实习时主要参与了数说新官网的开发，以及数说雷达部分模块的开发和维护，有仪表盘项目，后台综艺录入模块，数说口碑的迁移，电商模块样式优化等，所有项目采用的技术栈都是Vue + Webpack + echarts，一般是通过脚手架vuecli生成项目结构，通过编写vue组件和js模块构建整个web app。

Vue简介

说到vue就一定要提到它具有优雅的特性，即它是一个轻量的MVVM框架，配合vue router可以轻松实现功能复杂的Single Page Application。vue现在分为1.0和2.0版本，区别是2.0提出了很多新特性，如virtual dom渲染，组件ssr，vuex状态管理等等。官方给2.0的定义是一套构建用户界面的渐进式框架。

组件化和vue中的组件

理解组件化：web网页可以看作是由组件构成的整体，如header菜单，轮播图，article，搜索框，footer等等，传统的web更多的是把各种组件融合在一个html文件中，通过内容，样式，脚本实现解耦，但这种情况下，样式之间会相互影响，脚本逻辑之间也会相互影响，最后产生的问题便会无法控制。

所以现代组件化思路更倾向于把一个组件的html，css，js写到一个文件中，在这个文件中维护该组件有关的一切，从而和其他组件隔离。组件化有许多好处：

• 组件可以复用，一次编写，处处使用
• 降低系统耦合度，可以应对弹性较大的需求
• 便于错误定位和调试，程序有问题时，只要将问题定位到组件，加以修改就行。
• 便于测试，测试单元以组件为单位，当每个组件都测试完成之后也意味着整个系统的测试基本完成

vue中通过创建.vue文件构建vue组件，其形式如下：

Vue.component('todo-item', {
	props: ['todo'],
	template: '<li>{{ todo.text }}</li>'，
	data: function() {
		return data;
	},
	methods: {}
});

上述方式就注册了名为todo-item的组件，使用时直接嵌套在html模板中即可。

组件间的通信： 不同组件之间相互传递数据，叫作组件间的通信，常见的形式有：

• [父组件 > 子组件]
• [子组件 > 父组件]
• [子组件 > 子组件]

在vue中，父子组件的关系可总结为props down，events up。

即父组件通过props单向地向子组件传递数据，子组件中获取props数据，但不能改变prop的值，否则vue会发出警告，当父组件中data发生改变时，则子组件相应的props也会更新，这就是props的单向数据流。

子组件则通过Emit Events的方式向父组件通信，也即vue中的自定义事件机制，每个vue实例都实现了Event Interface，使用**$on(eventName)监听事件，使用$emit(eventName)**来触发事件。

子子组件通信也叫作同级组件通信，这种情况下，一个简单的方案是使用一个空的vue实例作为中央事件总线，类似于观察者模式：

var bus = new Vue();

// 触发组件 A 中的事件
bus.$emit('id-selected', 1);

// 在组件 B 创建的钩子中监听事件
bus.$on('id-selected', function (id) {
  // ...
})

如果是更复杂的应用呢？ see Vuex

vue服务端渲染

见另一篇文章

模块化

JavaScript模块化编程已经成为一个迫切的需求，开发者只需关心自己的核心业务，其他的都可以加载别人已经写好并持续维护的模块，大大的简化了开发流程。

但是JavaScript不是一种模块化编程语言，ES5不支持‘class’，更别说‘module’了，ES6提出class和module的概念，随着日后的发展，必然成为未来的主流，那么这里抛开ES6，探讨之前的模块化解决方案：

• IIFE（immediately-invoked function expression）立即执行函数模式：

var module1 = (function() {
	var _count = 0; // 未暴露
	var m1 = function() {
		...
	}
	var m2 = function() {
		...
	}
	return {
		m1: m1,
		m2: m2
	};
})();

• 放大模式，用于模块的分解和继承，是IIFE的扩展

var module2 = (function($, mod) {
	var module2_var = 0;
	mod.m3 = function() {
		...
	}
	return mod;
})(jQuery, window.module1 || {});

即 module2 继承了 module1，并且增加了新方法 m3，同时还依赖了jQuery模块。

• 浏览器端模块化标准

  • AMD（requirejs）依赖前置，模块提前执行，关键字require
  • CMD （seajs）依赖就近，按需加载，模块加载时执行

• common js
  nodeJS中的模块化标准，一个文件就是一个模块，通过require引入模块，通过module.exports暴露接口，不必担心全局污染问题。

实习中则是通过ES6来实现vue的模块化，import来导入模块，export default导出整个vue组件或js模块，使用起来非常方便。

Ajax封装

ajax是前后端交互的重要手段，其中jQuery实现了对ajax的封装，而我实习中的项目则对ajax作了更深层次的封装：

const proxy = {
	request: (opt) => {
		opt = Object.assign({
			url: '',
			async: true,
			dataType: 'json', //预期服务器返回的数据类型，
			contentType: 'application/x-www-form-urlencoded', //发送至服务器时数据编码类型
			data: {},
			type: 'get',
			xhrFields: {
				withCredentials: true //允许跨域请求时发送cookie等凭据
			},
			success: (data) => {},
			complete: (data) => {},
			error: (data, error) => {
				console.log(data, error);
			}
		}, opt);
		$.ajax(opt);
	}
};

export default proxy;

ES6

ES6学习网站

实习中用到的有：

• let为JavaScript增加块级作用域，由此，js作用域分为函数作用域，块级作用域和全局作用域，作用域链规则依然生效。const声明常量，且声明时就要进行赋值。
• 变量解构赋值
• 模板字符串

`<span style="color: ${item.color}"></span>`

• Number.isNaN() Number.isInteger()
• Array.from() 可以将伪数组，可遍历对象Set，Map等变为真正的数组
• 箭头函数
• Object.assign(target, source1, source2) 用于对象的合并，如果有同名属性，后面的源对象覆盖前面对象，但该方法执行的是浅拷贝，深拷贝还需借助lodash或jquery.extend(true, target, source)
• Set new Set() set.add()/.delete()/.has()/.clear()
• Promise() async await js异步解决方案
• Module

上述只是列举了实习中常用的点，系统学习还是要研究教程，多实践。

总的来说，实习中除了上述之外，更多的是学到了实践经验，了解了软件业务需求是如何一步步从客户转给产品经理，再如何落实到我们挨踢狗的整个黑暗流程，也了解了自己如何一边骂着需求，一边coding，一边发呆的写完，提交给测试，然后又发呆的看着一堆bug，再发呆的看窗外的小学生打鼓，跳舞，做广播体操，做眼睛保健操。。的实习生活。。。

相信以后进入新的环境后，适应速度会大大加快吧，不至于像这次host都不会配，nginx也不理解就懵懵懂懂的进入了工作状态，同事间，业务间也都会处理的融洽。说到同事，觉得子龙做事情很可靠的，虽然做java后端，也会向我抱怨公司的需求任务，但他会在做之前尽可能的了解要做的内容是什么，产品的功能，灵魂在哪里，业务流程是怎样的，而不是为了需求而coding，值得学习。产品那边，俊哥和鹏飞都是较严谨的人，毕竟做苛刻而完美的产品是每个PM和ITer的责任和追求。嘉辉和holan那边，作为小白，有问题就去问他们，都会得到解决的。

继续努力。