前端知识点提炼：十月份

1、同源cookie限制

问题描述：

• 后端egg采用的是jwt鉴权为主，session管理用户信息为辅的一个登录策略，但是遇到了一个cookie同源限制。
• 虽然后端egg通过cors实现了跨域，但是cookie依旧严格遵守同源政策。
• 当我把后端提交到域名为mboke.top的服务器上后，我在本地启动的前端项目直接axios通讯mboke.top服务器，虽然能跨域请求成功，但是本地启动的前端项目域名是localhost，由于cookie严格遵守同源策略，导致我的跨域请求可以成功，但是cookie一直携带失败。

解决方案

• 第一种放弃cookie，放弃session管理用户信息为辅的思路，直接改用jwt鉴权及存储用户信息的作用，完全采用jwt鉴权又存储。
• 第二种Nginx，用nginx方向代理mboke.top后端接口，cookie同源限制的问题也完全解决。
• 第三种domian，我如果采用了github.io的服务器，我的前端项目放在了github服务器上，那么个人marhooo.github.io源发出的请求至mboke.top接口，依旧cookie被同源限制。我可以把mboke.top顶级域名下，开辟一个dash.mboke.top的二级域名去cname掉marhooo.github.io。这样前端项目就是在二级域名下，这是我们在前端的script中写入一行 <script type="text/javascript">document.domain = 'mboke.top'</script>，设置我们的前端二级域名的domain为一级域名，这样cookie就能解除限制。
• 第四种增加中心节点，专门用来记录cookie，用jsonp这种被广泛用于跨根的cookie共享，看看文章，大型企业的解决方案。

2、egg开启https，非nginx。

• 安装egg-cluster：npm i egg-cluster --save
• 把pem和key放入一个文件夹中
• 在config.prod.js文件中写入

exports.cluster = {
  https: {
   key: path.join(__dirname,'../app/cassl/mboke.top.key'), // https 证书绝对目录
   cert: path.join(__dirname,'../app/cassl/mboke.top.pem') // https 证书绝对目录
  }
};

• 修改package.json的脚本指令："start": "egg-scripts start --title=egg-server-eggserver --port=443"
• docker中无需更改任何东西

3、Github展示主页搭建

Github主页可以被cname为一个二级域名，非常关键！白嫖

• 新建一个项目（项目名设置成：github用户名+github.io)
• 把静态项目dist中的文件直接push到这个仓库master分支上，这样就已经实现了个人主页的搭建，但是我们还可以更进一步。
• 在个人的域名解析去添加解析。记录值为此仓库名即github用户名+github.io
• 
• 在master分支上创建一个CNAME文件
• 
• 再去setting点击一下
• 
• 后续还可以把此dash.mboke.top二级域名去开启ssl
• 然后再在Github中Enforce一下
• 
• 稍等片刻即可.....
• 后续你github的任何项目的gh-pages分支展示都会被二级域名解析
• 真的是实现白嫖啊!

4、全局组件和局部组件的注册

• 全局注册的组件可以在任意地方使用，因为组件会通过 Vue.component 函数扩展到 Vue.options 上，而各个组件初始化时都会将 Vue.options 与自身 options 合并，这样每个组件都能访问到这个全局注册的组件。
• 局部注册的组件只能在当前组件使用，因为组件仅仅只是扩展到 Sub.options 也就是当前组件构造函数的 options 上。

5、webpack编译的简单梳理

• webpack从main.js作为入口文件进行编译的时候，从上到下进行编译，js、vue、css等文件通过loader插件进行转化，并且进行依赖收集从而打包编译代码，还会进行babel垫片，至此前端工程化完成。
• 之前main.js中的new Vue()代码一直困扰了我，其实准确的说是webpack编译了main.js文件，同时也执行了new Vue()代码，由于编译时，webpack会根据引入关系网对依赖进行收集，然后完成整体的编译并打包！

然后我们对就Vue.component()注册全局组件，进行一个代码去向的梳理。

1、首先我们了解vue-loader对vue文件编译后，会转化成一个什么样的文件。

• 如果说.vue文件是一个组件
• 转化后的对象!
• 全局注册函数调用: Vue.component('my-component', { /* ... */ })
• 调用global-api中的initAssetRegisters函数，把组件对象通过extend转化成组件构造函数放入Vue.options.component对象中。【Vue.options是Vue构造函数上的全局属性，我以前写封装的时候没用过这种方式】
• 
• 

2、然后编译文件从上走到下，到new Vue()开始执行时，发生了什么

• New Vue()执行 ————> 执行_init函数 ————> _init函数中有这样一段代码【图一】，作用是合并options ————> src/core/util/options.js文件下去调用mergeAssets函数，且会遍历ASSET_TYPES为组件的所有Vue.options.component对象，去完成合并(用了Object.create这个js方法)把Vue.options 和外部编写的options 一起合并到vm.$options 上【图二】————> 生成this.$options合并后的对象【图三】————> 跳过initLifecycle(vm)、initEvents(vm)的初始化事件和属性 ————> 然后来到initRender(vm)这步 ————> 这步中创建 VNode 这一步，我们知道这一步骤是通过调用 _createElement 函数(createElement函数的核心部分，createElement另外的代码实现的功能见图四)来实现的 ————> Vnode转化成真实dom过程后面有机会再记录
• 图一：
• 图二：
• 图三：
• 图四：