美文网首页
一些实用小技巧

一些实用小技巧

作者: Spidd | 来源:发表于2021-02-23 17:47 被阅读0次

    文档

    https://www.css88.com/book/css/ CSS文档

    http://616pic.com/ 图片网 可下载

    https://developers.google.com/search/docs/guides/search-gallery?hl=zh-cn 谷歌搜索增强

    https://www.paperplane.app/blog/print-css-basics/ css控制打印时的一些特定样式

    https://neumorphism.io/ 漂亮的拟物按钮CSS

    总是记不住的东西

    1. a标签防钓鱼
    rel="noopener noreferrer nofollow  me"
    noopener: 在新打开的网站中window.opener将得到null, 阻止新打开的网站获取原始网站的信息
    noreferrer: 除了使window.opener为null外,还隐藏引荐信息,谷歌搜索引擎将无法识别该网站是从其他网站跳转,而视为直接流量
    nofollow:是否阻止反向链接,这在搜索引擎SEO排名中有用,如果你链接添加了nofollow,表示主网站不认可该跳转链接的价值,搜索引擎排名算法不会为把这个跳转链接的价值计算到主网站上。一般用于高价值网站跳转到低价值网站时可以加上,防止低价值网站拉低了主网站的价值评分
    me:一般用于社交网站,比如博客网站放了一个twitter链接,加了me,表示该twitter链接就是该博客主人的其他社交媒体。这有利于搜索引擎发现博主的相关站点
    
    1. 浏览器原生平滑滚动
    scroll-behavior: smooth; 
    
    1. 原生千分位格式化,只支持3位小数
    (123456789.123).toLocaleString('en-US'); // 第1种方法 "123,456,789.123"
    new Intl.NumberFormat().format(123456789.123); // 第2种方法 "123,456,789.123"
    
    1. 是否响应鼠标事件
    pointer-events: none/auto;
    
    1. 放不下显示省略号/强制不换行
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    
    1. 强制换行
    word-break: break-all;
    word-wrap: break-word;
    white-space: pre-wrap;
    
    1. 禁止选取
    user-select: none;
    
    1. 最后一行两端对齐
    text-align-last:justify;
    
    1. 修改placeholder的样式
    ::placeholder
    
    1. 鼠标位置相关
    e.clientX // 鼠标距离当前窗口左上角的坐标
    e.pageX   // 鼠标距离当前窗口包括滚动条已滚动距离的坐标
    e.offsetX // 鼠标距离当前所在元素左上角的坐标
    
    1. 关闭chrome跨域限制
    /** mac 终端执行: */
    open -n /Applications/Google\ Chrome.app/ --args --disable-web-security  --user-data-dir=/Users/admin/Documents/MyChromeDevUserData
    
    /** windows 设置chrome快捷方式链接地址 */
    --disable-web-security --user-data-dir=C:\MyChromeDevUserData
    
    1. 隐藏input[number]的上下选择箭头
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
      -webkit-appearance: none;
    }
    input[type='number'] {
      -moz-appearance: textfield;
    }
    
    1. 正则解析URL参数部分
    q={};
    location.search.replace(/([^?&=]+)=([^&]+)/g,(_,k,v)=>q[k]=v);
    console.log(q); // { key: value }
    
    1. 数字强制等宽显示
    font-variant-numeric: tabular-nums;
    

    15.css文字渐变

    background-image:-webkit-linear-gradient(bottom,red,#fd8403,yellow); 
    -webkit-background-clip:text; 
    -webkit-text-fill-color:transparent; 
    // https://segmentfault.com/a/1190000017015544
    

    16.手动触发弹出安装PWA

    // 定义一个变量,为了保存event对象
    let thisEvent;
    
    /**
      监听beforeinstallprompt这个事件
      如果网站支持PWA且用户没有安装过,则会触发此事件(Chrome地址栏右侧会出现“安装”字样)
      若用户已安装过或已不是首次打开网页,此事件不会触发(即Chrome地址栏右侧没有出现“安装”字样)
    **/
    window.addEventListener("beforeinstallprompt", e => {
      // 阻止 Chrome 67 之前的版本自动显示提示
      e.preventDefault();
      // 保存这个特殊的e,之后要用
      thisEvent = e;
    });
        
    // 用户点击按钮时触发此方法
    function installApp() {
      thisEvent.prompt(); // 弹出安装提示框
      thisEvent.userChoice.then(res => {
        console.log(res); // 用户点击安装或取消,会返回对应的信息
      });
    }
    
    // 页面中写个按钮触发
    <button onclick="installApp">安装PWA桌面应用</button>
    
    1. 手机自带暗模式媒体查询
    @media (prefers-color-scheme: dark) {
      body {
        background-color: #444;
        color: #e4e4e4;
      }
      img {
        filter: grayscale(30%);
      }
    }
    
    1. github改了密码,重置sourcetree密码
    WIN:
    删除 C:\Users\用户\用户名\AppData\Local\Atlassian\password
    sourcetree重新提交会弹出登录框
    
    1. 生成UUid
    function getUUid(){
      const temp_url = URL.createObjectURL(new Blob());
      const uuid = temp_url.toString();
      URL.revokeObjectURL(temp_url);
      return uuid.substr(uuid.lastIndexOf("/") + 1);
    }
    
    1. 原生CSS实现毛玻璃
    backdrop-filter: blur(4px);
    
    1. 解析URL参数
    Object.fromEntries(new URLSearchParams('a=123&b=456&c='));
    // {a:"123",b:"456",c:""}
    

    缓存

    强缓存:
    Expires: Date; // 强缓存 http/1.0 服务器时间与本地时间
    Cache-Control: max-age=12312312; // 强缓存 最大过期时间与本地时间对比
    
    协商缓存:
    Last-Modified: 最后修改时间
    ETag: 文件唯一标识
    如果强缓存过期,浏览器会在Request请求头中加入两个字段:If-Moified-Since(值对应Last-Modified)和If-None-Match(值对应ETag)字段
    
    服务器自行判断,如果有新的修改,返回200和新内容
    如果没有修改,则返回304,告诉浏览器虽然过期但可以继续使用,并且重新已本次的响应头设置缓存
    
    启发缓存
    如果响应头中没有能够确定缓存的字段,浏览器会根据Date和Last-Modified的差值的10%作为缓存时间
    

    过渡的坑

    像vue-transition-group这样的列表过渡组件
    在窗口非激活状态(最小化,电脑休眠等)时,浏览器为了节约性能,会停止setTimeout/setInterval/requestAnimationFrame以及页面dom的渲染
    如果此时数据仍然在更新(比如socket不会停止),则列表中的dom会越来越多,不需要的dom不会被浏览器清除
    
    

    安卓手机字体无法居中(往上偏)的坑

    原因是font-size < 12px,很多项目喜欢使用rem来做移动端网页,一些插件还能把px转换为rem
    在某些安卓手机里字体大小小于12像素时,会往上偏。解决办法一般是设置一个较大字体,然后transform:scale缩小
    

    vscode 配置

    {
      "editor.tabSize": 2, // tab相当于2个空格
      /**
       * vetur插件设置 用于vue template格式化
       * https://github.com/vuejs/vetur
       */
      "vetur.format.defaultFormatter.html": "js-beautify-html",
      "vetur.format.defaultFormatterOptions": {
        "js-beautify-html": {
          "wrap_attributes": "force-aligned" //属性强制折行对齐
        }
      },
      /** Eslint设置 **/
      "eslint.validate": [
        // 检查以下类型的文件
        "javascript",
        "javascriptreact",
        "vue",
        "html",
        {
          "language": "html",
          "autoFix": false
        },
        {
          "language": "vue",
          "autoFix": false
        }
      ],
      "eslint.autoFixOnSave": false, //保存时自动格式化
      "javascript.implicitProjectConfig.experimentalDecorators": true,
      /**
       * prettier设置
       * https://prettier.io/docs/en/options.html
       */
      "prettier.singleQuote": false, //使用单引号而不是双引号
      "prettier.jsxBracketSameLine": true, // 标签闭合处是否不换行
      "prettier.printWidth": 400, // 多少个字符换行
      "prettier.tabWidth": 2, // tab的宽度
      "prettier.semi": true, // 是否自动在语句末尾加分号
      "prettier.trailingComma": "all", // 是否自动加尾逗号(none不,es5自动加兼容es5, all尽可能都加)
      "prettier.bracketSpacing": true, // 大括号之间是否有空格
      "prettier.arrowParens": "avoid",
      "explorer.confirmDragAndDrop": false,
      "workbench.startupEditor": "welcomePage",
      "breadcrumbs.enabled": true,
      "editor.formatOnSave": true,
      "diffEditor.ignoreTrimWhitespace": true,
      "diffEditor.renderSideBySide": true,
      "javascript.updateImportsOnFileMove.enabled": "always",
      "vsicons.dontShowNewVersionMessage": true,
      "editor.codeActionsOnSave": {
        "source.fixAll.eslint": false
      } // 箭头函数只有一个参数时是否加括号(always加,avoid不加)
    }
    

    useEffect优化

    去掉不必要的依赖。
    将 Hook 拆分为更小的单元,每个 Hook 依赖于各自的依赖数组。
    通过合并相关的 state,将多个依赖值聚合为一个。
    通过 setState 回调函数获取最新的 state,以减少外部依赖。
    通过 ref 来读取可变变量的值,不过需要注意控制修改它的途径
    

    转载自 https://github.com/javaLuo/plan/blob/master/README.md

    相关文章

      网友评论

          本文标题:一些实用小技巧

          本文链接:https://www.haomeiwen.com/subject/pycdfltx.html