跨域，模块化，web开发模式

1.同源策略，跨域

同源策略：是一种约定，阻止一个域的js脚本对另一个域的内容进行访问。跨域的网页（1）不能共享cookie，localstorage，indexDB（2）不能获取dom节点（3）Ajax请求得不到数据。

同源策略对web安全起到了一定的作用，但是对于web扩展产生了限制。

啥是同源？两个网页的协议名，域名，端口号相同。

啥是跨域？不同源就是跨域。

跨域访问限制？浏览器可以正常向服务器发送请求，服务器也可以正常返回数据，浏览器检查响应头中有没有允许跨域访问的配置，有的话可以正常加载数据，没有的话就不会加载数据。

解决跨域：

• jsonp:利用script标签的src属性没有跨域访问限制，发起跨域请求，传递一个函数名给服务端，服务端将函数名和数据进行拼接，返回给客户端。限制是只能解决get请求的跨域。
• cors：需要浏览器和服务器同时支持，（浏览器的版本要求高一些），只需要在后端配置cors，设置响应头‘Access-Control-Allow-origin:*’,以支持跨域请求。
• webpack配置本地代理，在vueconfig.js中写相关的配置项。
• nginx反向代理，项目打包上线时会用到，修改nginx.conf配置文件

2.es6模块化和commonjs规范，循环引用

        什么是模块化？模块化是将完成相应功能的代码进行封装，每一个文件都是一个模块，拥有一块独立的作用域。

        模块化的作用？提高代码的复用性和可维护性，可以按需引入，避免全局污染。

es6模块化和commonjs的区别

• 使用环境不同，commonjs主要在服务端使用，es6模块化可以在服务端和客户端使用。因为commonjs是同步加载机制，使用在客户端，要等一段时间，影响用户体验。
• 输出不同，commonjs输出的是浅拷贝的值，一旦输出了某个值，后续就算模块内部发生了变化，也不会影响外部对该值的使用。es6模块化输出的是值的引用，模块内部发生变化会影响模块外部对该值的使用。
• 加载时机不同，commonjs在运行时加载（所以可以动态加载），但是无法实现按需加载（不能引入模块中的一部分）。ES6在编译时加载，在编译阶段就会确定模块间的依赖关系，可以实现按需加载。
• 顶层this指向，ES6模块化顶层this指向undefined，commonJS的顶层this指向的是空对象{}。

3.两种web开发模式

服务端渲染：网页在服务端动态拼接好，发送到客户端。

优点：

• 首屏加载快
• 有利于SEO

缺点：

• 当请求过多时，服务端的压力大
• 当前端复杂时，不利于前后端分离，开发效率低

前后端分离：依赖ajax技术，前端负责设计界面和数据的动态展示，后端负责提供接口

优点：

• 开发效率高
• 实现了局部刷新，用户体验好
• 减轻了服务器的压力

缺点：

• 不利于SEO，但是vue框架SSR技术解决
• 首屏加载慢