Tech

All about technologies.

Tech

浏览器在加载CSS和其内部资源时的策略

在使用 Service Worker 的时候,可以拦截对 CSS 的请求。如果拦截后返回的响应,是人为构造的 Response 对象,则该对象不存在 url 属性,浏览器会认为这个 CSS 是从所请求的 URL 获得的,因此,这个 CSS 内部的相对路径资源(图片、import的其他CSS)加载的基地址会是原 URL。 如果拦截以后直接返回另一个服务器的响应,此时返回的 Response 对象包含 URL 属性,是浏览器生成的对象。此时浏览器认为该 CSS 内部的其他相对路径资源都应该从新的 URL 处加载。

  • Dixeran
    Dixeran
Tech

Vue+Tween实现带动画的手风琴布局

纯 CSS 的问题 当手风琴内容固定的时候,使用特定的 active class 配合 transition 即可在 CSS 中完成手风琴布局,大概长这样: .content{ height:0; transition:height 0.2s ease;/*动画*/ } .active{ height:100px;/*事先确定的高度*/ } 然而作为一个通用的手风琴组件,不可能事先确定高度,最后还是要依赖JS。 原生 JS 的方法 通过js,我们可以获得伸缩容器内的原始高度 clientHeight(注意此时设置的 box-sizing 应该是 border-box 才能和 element.style.height 对应)

  • Dixeran
    Dixeran
Tech

JS中的this关键字

0x01:this究竟指向什么? 普通函数的this 简单的法则: 有对象就指向调用对象 没调用对象就指向全局对象 用new构造就指向新对象 通过 apply 或 call 或 bind 可以改变this的指向 简单的例子: var name = 'global'; var ob = { name: 'ob1', getName_1: function(){ console.log(name); }, getName_2: function(){ console.log(this.name);//this指向调用的对象 } } var getName_3 = ob.getName_2; ob.getName_

  • Dixeran
    Dixeran
Tech

Qt quick学习笔记(二)与C++混合编程

QML→C++的对接 信号槽机制 大部分情况下,用户对QML的操作,需要调用对应的C++函数进行处理。QML上的操作,可以通过信号的方式被C++中的槽函数所捕获。 可以对任意一个元素添加信号: Button { id: pointRest8 x: 8 y: 20 width: 90 height: 43 text: qsTr("工作↔休息") objectName: "pointChangeState" signal changeState(int num) onClicked: { changeState(8); } } 这个按钮元素就添加上了一个名为changeState 的信号,参数是一个整形。 当发生单击事件时,

  • Dixeran
    Dixeran
Tech

Qt quick学习笔记(一)QML界面模型

基本语法 QML是类似于HTML的标记型语言,有与HTML类似的树形节点结构,同时又包含类似JS的函数语法。一个基础的QML文档类似这个样子 import QtQuick 2.7 import QtQuick.Controls 2.0 import QtQuick.Layouts 1.0 ApplicationWindow { objectName: "root" visible: true width: 1280 height: 720 maximumHeight: this.height minimumHeight: this.height maximumWidth: this.width minimumWidth: this.width title: qsTr(

  • Dixeran
    Dixeran