前端架构设计了解

_{读书《vue企业开发实战》}

  前端开发为什么要进行架构设计呢？使用原始的方式进行开发有什么问题呢？首先看一下原始开发存在的以下问题。

➢ 难以维护
➢ 加载缓慢
➢ 体验差
➢ 重复编码
➢ 扩展困难
➢ 前后端耦合度高

分层架构

  在这里使用的是类MVVM的分层架构方式，但还不完全是 MVVM 的分层架构方式。分层架构的主要优势在于：易维护、可扩展、易复用、灵活性高.

项目分离

  项目分离中又有三种方式：

• 不分离
• 部分分离
• 完全分离
  不分离：前后端共用同一个项目目录，本地开发环境搭建成本高，项目比较复杂、不宜维护且维护成本高、发布风险高，不利于问题的定位和修改。
  部分分离：本地环境搭建成本较高，需要后端提供页面模板（JSP等），更新和修改模板需要后端人员操作，效率低且不易维护，发布方式需要同时发布，且沟通成本比较高。
  完全分离：即分布式。完全分离又分为两种：分离开发集成部署和分离开发分离部署（前端使用纯HTML通过接口的方式进行数据的交互，降低系统的复杂度，部署时单独部署到一台服务器上，使用代理进行数据的交互。）。

利用UI框架

优缺点：
优点：

• 快速搭建web页面
• 集中精力完成业务代码
• 缩短开发周期
  缺点：
• 冗余代码
• 无法定制化、精细化开发
  （判断项目是否使用UI框架，要去权衡 UI 框架是否适合项目要求，如果项目开发工期比较紧，而且对项目精细化要求不是特别高，那么使用UI框架是最好的选择。）
  另外，--save与--save-dev也是有区别的：
  --save会把依赖包添加到package.json文件dependencies下
  --save-dev会把依赖包添加到package.json文件devDependencies下。
    dependencies 是产品上线运行时的依赖，devDependencies 是产品开发时的依赖。devDependencies 下的模块是产品开发时用的，比如安装 js的压缩包gulp-uglify时，采用 “cnpm install gulp-uglify --save-dev”命令安装，因为在发布后就用在这里插入代码片不到这个插件包了，只是在开发中才用到它。dependencies下的模块是产品发布后还需要依赖的模块，比如router插件库或者Vue框架等，在产品开发完成后肯定还要依赖它们，否则就无法运行项目。

箭头函数的使用：

const Person={
	'username':'缓月',
	'age': '18',
	'sayHello': function () {
		setInterval(function () {
			console.log('我叫' + this.username + '我今年' + this.age + '岁!')
		}, 1000)
	}
}
Person.sayHello();	

  此时的运行结果是：我叫undefined我今年undefined岁！
  为什么会出现此种原因：因为setInterval是在全局作用域下执行的，所以this指向的是全局window，而window上没有username和age，所以输出的是undefined。要怎么解决这个问题呢？
  通常的写法是缓存this，然后在setInterval中用缓存的this进行操作。

const Person = {
	'username': '缓月',
	'age': 18,
	'sayHello': function () {
		let self = this
		setInterval(function () {
			console.log('我叫' + self.username + '我今年' + self.age + '岁!')
		}, 1000)
	}
}
Person.sayHello();

输出结果：我叫缓月我今天18岁！
利用箭头函数的写法：

function Person = {
	this.name = '缓月',
	this.age = 18,
	setInterval(() => {
		console.log('我叫' + this.name + '我今年' + this.age + '岁！')
	},1000)
}
let p = new Person();

还有个问题：对象的方法中使用箭头函数会导致一些问题。

const Person = {
	'username': '缓月',
	'age': 18,
	'sayHello': () => {
		setInterval(() => {
			console.log('我叫' + this.username + '我今年' + this.age + '岁!')
		}, 1000)
	}
}
Person.sayHello();

  如果是这么来用箭头函数的话，输出结果依然为undefined。因为方法写在了对象里，而对象的括号是不能封闭作用域的，所以此时的this还是指向全局对象，而全局对象下没有username和age属性，所以会出现问题。
  同时，由于箭头函数的this具有不绑定的特点，也不能使用箭头函数作为构造函数，这样也会报错。
  此外，定义原型方法时，也不推荐使用箭头函数。

ction Person() {
	this.username = "小暖"
}
Person.prototype.sayHello = () => {
	console.log(this.username)
}
var p1 = new Person();
p1.sayHello();

运行结果是undefined。
原因是this指向window对象。
  箭头函数由于代码的简洁性和不绑定调用者this的特点，在非方法函数中使用最合适，而在方法函数中使用，需要特别注意它的this绑定问题，如果需要动态地修改this，建议不要使用箭头函数。