LY
LY
> 转自：http://imweb.io/topic/5795dcb6fb312541492eda8c **结论：** - 需要兼容HTTP1.0的时候需要使用Expires，不然可以考虑直接使用Cache-Control - 需要处理一秒内多次修改的情况，或者其他Last-Modified处理不了的情况，才使用ETag，否则使用Last-Modified。 - 对于所有可缓存资源，需要指定一个Expires或Cache-Control，同时指定Last-Modified或者Etag。 - 可以通过标识文件版本名、加长缓存时间的方式来减少304响应。 ## 参考文档 1. [HTTP缓存控制小结](http://imweb.io/topic/5795dcb6fb312541492eda8c) 2. [人生苦短，了解一下前端必须明白的http知识点](https://juejin.im/post/5b34e6ba51882574d20bbdd4) 3. [彻底理解浏览器缓存机制](https://www.cnblogs.com/shixiaomiao1122/p/7591556.html)
【进阶 1 期】 调用堆栈 【进阶 2 期】 作用域闭包 【进阶 3 期】 this 全面解析 【进阶 4 期】 深浅拷贝原理 【进阶 5 期】 原型 Prototype 【进阶 6 期】 高阶函数 【进阶 7 期】 事件机制...
## 前言 在使用 vue 的开发中，我们有时会引用外部组件，包括UI组件。 当 `` 标签有 `scoped` 属性时，它的css只作用于当前组件中的元素。但是在父组件中添加了 `scoped` 之后，父组件的样式将不会渗透到子组件中，所以在父组件中书写子组件的样式是无效的。 ## 解决方案 ### 1. 去掉scoped 在父组件的 `` 中去掉 `scoped`后，父组件中可以书写子组件的样式，但是需要注意避免污染了全局样式。 ### 2. 混用本地和全局样式 可以在同一个组件中同时使用有作用域和无作用域的样式： ```css /* ...全局样式...*/ /* ...本地样式......
# 如何提高webpack的编译速度？ ## 缩小文件搜索范围 ### 优化 `loader` 配置 在module中，在使用 loader 时，可以通过 `test`、`include`、`exclude` 三个配置来命中 loader 要应用规则的文件。 以采用 ES6 的项目为例，在配置 babel-loader 时，可以这样： ```js module.exports = { module: { rules: [ { //...
## 插槽的分类 - 默认插槽 - 具名插槽 - 作用域插槽 ### 具名插槽 Vue中给我们提供了方法，我们一次可以使用很多插槽，然后给每一个插槽起个名字，也就是给我们的 `` 添加一个 `name` 属性。 ```html ``` 在外部使用时，只需要提供对应名称， 我们就可以渲染出我们需要的： ```html 带名字的插槽 x 这是一个标准的 dialog 对话框 取消 确定 ``` **具名插槽不仅仅只能用在元素上，它也可以直接用在一个普通的元素上** ```html...
## 什么是 Hooks？ Hooks是一个在React函数组件内一类特殊的函数(通常以 "use" 开头，比如 "useState")，使开发者能够在 function component里依旧使用 state 和 life-cycles，以及使用 custom hook 复用业务逻辑。 > Hook在 类的内部不起作用 ## 动机 class component模式有如下一些缺点： - 组件间交流的耦合度很高，组件树臃肿 - JavaScript的class产生的诸多疑惑 ## Hooks的规则 Hooks是JavaScript方法，但它们增加了两个额外的规则： -...
# JavaScript 创建对象-从es5到es6 > 转自: https://fed.renren.com/2017/08/07/js-oop-es52es6/ > 本文主要讲述了使用JavaScript创建对象的几种方式，分别是传统的Object构造函数、对象字面量、工厂模式、构造函数模式、原型模式、组合模式，以及es的class定义类。然后从babel的角度探究es5与es6创建对象的区别。 ## 1. 创建对象的几种方式 ### 1.1 Object 构造函数和对象字面量 通过调用 Object 构造函数new一个Object对象，然后再给这个对象的每一个属性和方法进行赋值，代码如下所示： ```js var person = new Object() person.age = 16 person.name = 'Dom'...
# 一文带你了解babel-preset-env 相信很多人都和我一样，刚接触babel的时候都是使用 `babel-preset-es2015` 这个预设套餐的，但是显然目前而言 `babel-preset-env` 会是一个更好的选择，`babel-preset-env` 可以根据配置的目标浏览器或者运行环境来自动将ES2015+的代码转换为es5。 吸引人的地方在于我们可以通过 `[.browserslistrc](https://github.com/browserslist/browserslist)` 文件来指定特定的目标浏览器。当然也可以通过targets选项的browsers选项指定。不过如果你的目标浏览器支持 `es modules` 特性，`browsers` 选项则会失效，如下： ``` { "presets": [ ["@babel/preset-env" "targets": { "esmodules": true } ] ] } ``` 同样也可以指定Node.js的版本：...
# [原来你是这样的Websocket--抓包分析](https://www.cnblogs.com/songwenjie/p/8575579.html) 之前自己一个人负责完成了公司的消息推送服务，和移动端配合完成了扫码登录、订单消息推送、活动消息广播等功能。为了加深自己对Websocket协议的理解，自己通过进行抓包的方式学习了一番。现在分享出来，希望对大家能有所帮助。 # Chrome控制台 (1)F12进入控制台，点击Network，选中ws栏，注意选中Filter。  (2)刷新页面会得到一个ws链接。  (3)点击链接可以查看链接详情  注意红框标出的信息，后面会详细说明。 (4)当然也可以切换到Frames查看发出和接收的消息,但是非常的简陋，只能看到消息内容，数据长度和时间  # Fiddler:抓包调试利器 (1)打开Fiddler，点开菜单栏的Rules，选择Customize Rules...  (2)这时会打开CustomRules.js文件，在class Handlers中加入以下代码 ``` static function OnWebSocketMessage(oMsg: WebSocketMessage) { // Log Message...
# 对象属性遍历的次序规则 - 首先遍历所有数值键，按照数值升序排列。 - 其次遍历所有字符串键，按照加入时间升序排列。 - 最后遍历所有 Symbol 键，按照加入时间升序排列。 ```js Reflect.ownKeys({ [Symbol()]:0, b:0, 10:0, 2:0, a:0 }) // ['2', '10', 'b', 'a', Symbol()] ``` 说明：这个数组的属性次序是这样的，首先是数值属性2和10，其次是字符串属性b和a，最后是 Symbol 属性。