Sentry接入及上报

Installation

1
2
3
4
5

# Using yarn
$ yarn add @sentry/browser

# Using npm
$ npm install @sentry/browser

Vue项目需要安装以下包

1
2
3
4
5

# Using yarn
yarn add @sentry/integrations

# Using npm
npm install @sentry/integrations

Electron 学习

初始化

Demo 初始化

1. git clone https://github.com/electron/electron-quick-start
2. cd electron-quick-start
3. npm install && npm start

Vue 的知识点和技巧总结

知识点

Vue 组件间通信六种方式

Vue 组件间通信六种方式（完整版）

Vue问题解决

1. 解决 These dependencies were not found: 等等问题

   在babel.config.js中添加：

   presets: [ [ “@vue/app”, { useBuiltIns: “entry” } ] ]

   但是 为嘛这样就行了呢

输入 URL 到页面渲染中间发生了什么？

WEB 应用的生命周期（简述）

1. 用户 输入 URL 或者点击链接（DNS 查询）
2. 浏览器 生成请求并发送至服务器 (TCP 三次握手四次挥手)
3. 服务器 执行某些动作或者获取某些资源；将响应发送至客户端
4. 浏览器 处理 Html、CSS、和 JavaScript 并构建结果页面
5. 浏览器 监控事件队列 处理事件
6. 用户 用户与 web 应用进行交互 期间一直重复 5、6 阶段
7. 用户 关闭 web 应用服务
8. 生命周期结束

怎么样才能在一年内或者一年半内达到 P6 的级别呢

怀抱着以上标题的疑问，我进行了深深的思考 🤔。以下是我的思考结果:
为什么目的首先是达到 P6 呢？因为所有的目的在财务自由之前都是为了赚钱 💰，只有在财务自由之后才能有更多的精力和时间做些自己感兴趣的事情，比如我对人工智能和虚拟现实就非常感兴趣。而身为前端程序员，可以拿阿里的职级体系作为自己成长历程的参考。所以先定一个小目标吧，先到 P6 的级别，先赚到比现在还多的钱 💃💃💃。
2019-5-25 重学前端计划，启动！！！

React 的学习笔记

记录一些学习 React 路上的问题或者技巧。

React 解析

setState

setState 是一个异步函数，可以传入两个参数，第一个是改变的值，第二个是修改的回调函数。setState 内部有机制，可以将几个 setState 合并执行，提升效率，因此直接如下写法:

1

this.setState({ name: "name" });

然后立即取得 name 的值，很可能并无变化。使用传入状态计算函数就可以让 setState 立即执行，如下:

1
2
3

this.setState(function(prevState, props) {
  return { showForm: !prevState.showForm };
});

问题

1. 使用create-react-app创建的 react 项目在yarn eject之后安装 antd，在 App.js 里面直接引入 Less 文件报错的解决方法
   首先改一下 webpack.config.js 配置，比照 SASS 的配置加上关于 Less 文件的 loader 解析

   1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

   const lessRegex = /\.less$/; const lessModuleRegex = /\.module\.less$/; { test: lessRegex, exclude: lessModuleRegex, use: getStyleLoaders({ importLoaders: 2, sourceMap: isEnvProduction && shouldUseSourceMap, }, 'less-loader' ), sideEffects: true, }, { test: lessModuleRegex, use: getStyleLoaders({ importLoaders: 2, sourceMap: isEnvProduction && shouldUseSourceMap, modules: true, getLocalIdent: getCSSModuleLocalIdent, }, 'less-loader' ), },

   然后由于一些问题所以再加上一个配置

   1 2 3 4 5 6 7 8 9 10

   if (preProcessor) { loaders.push({ loader: require.resolve(preProcessor), options: { sourceMap: isEnvProduction && shouldUseSourceMap, // 添加上下面这一行 javascriptEnabled: true } }); }

   参考资料
   react 中使用 less 和全局样式

基础

跨域问题

当协议、子域名、主域名、端口号中任意一个不相同时，都算作不同域。不同域之间相互请求资源，就算作“跨域”。
第一：如果是协议和端口造成的跨域问题“前台”是无能为力的。

第二：在跨域问题上，仅仅是通过“URL 的首部”来识别而不会根据域名对应的 IP 地址是否相同来判断。“URL 的首部”可以理解为“协议, 域名和端口必须匹配”。
跨域并不是请求发不出去，请求能发出去，服务端能收到请求并正常返回结果，只是结果被浏览器拦截了。

解决办法

1. JSONP 方式
   利用 <script> 标签没有跨域限制的漏洞，网页可以得到从其他来源动态产生的 JSON 数据。JSONP 请求一定需要对方的服务器做支持才可以。 JSONP 优点是简单兼容性好，可用于解决主流浏览器的跨域数据访问的问题。缺点是仅支持 get 方法具有局限性,不安全可能会遭受 XSS 攻击。
2. cors 方式
   CORS 需要浏览器和后端同时支持。IE 8 和 9 需要通过 XDomainRequest 来实现。浏览器会自动进行 CORS 通信，实现 CORS 通信的关键是后端。只要后端实现了 CORS，就实现了跨域。服务端设置 Access-Control-Allow-Origin 就可以开启 CORS。 该属性表示哪些域名可以访问资源，如果设置通配符则表示所有网站都可以访问资源。虽然设置 CORS 和前端没什么关系，但是通过这种方式解决跨域问题的话，会在发送请求时出现两种情况，分别为简单请求和复杂请求。
3. postmessage
   postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信，可以实现跨文本档、多窗口、跨域消息传递。
4. websocket
5. Node 中间件两次代理
6. Nginx 反向代理

思否资料
掘金资料