• 入职报道装新环境

    前言: 入职配了新电脑,自然要安装新环境,于是一頓操作猛如虎,结果各种bug问题。 问题记录: 1. 在使用新电脑过程中,指派的任务需要把之前未完成的项目跑起来。在跑这个任务的过程中总是有各种权限的问题,比如代码权限、数据库权限、服务器权限等等。 2.好了,大部分权限都找各个对应的人员开通好了,但是在这个项目在自己的新电脑上无法跑起来,项目中用到的脚手架是egg.js,里面涉及egg-sequelize,egg-mysql,mysql2,pg等库,在项目运行的时候,一直报无法创建sequelize的连接错误,即无法连接数据库。导致项目无法正常运行,前期由于自己的思想被固定了,一直想着是不是需要连接数据库的权限,到处问人,是不是我的ip没有被加入白名单,还是哪一块需要特殊登陆一次,然而问了一圈人,并没有类似的权限。 排查并解决此问题: 分析原因:其它员工正常安装也能够正常运行此服务,我的电脑是正常安装的,但是却无法正常运行,开始自然想到权限的事上了,也一直致力寻找相关的解决方案。但是这条路排队后,我便上egg官网上查看了相关的文档,看了官网有配置egg-sequelize的脚手架,便按照官网的脚手架一步一步搭起来,结果能运行,前后对比了一下各自的版本号,发现pg的版本号要比公司项目版本号要高,原来是版本的问题,这就好解决了,于是把公司的项目pg版本号改成最新的,发现也能正常运行了。 继续分析原因。那为什么别人的电脑不升级版本号也能正常运行呢,肯定是大环境的因为了,第一个想到的是mac电脑版本的原因,然而这个似乎不可能,接下来便是node环境了,我的电脑因为是新装的,所以node版本是最新的16版本,而别人的电脑node版本是12,这下原因找到了。 解决方案:1.升级项目中的各种依赖库版本;2.修改本地node版本号。 两者肯定选后者,因为生产环境的node版本号肯定也是相对较低的,万一以后碰到类似环境的问题,是要吃大坑的,于是把本地的node环境版本降低到12,之后便能正常运行了。   总结: 其实环境问题自己碰到不只一次了,但是每次遇到的时候总是想不到,这次是因为新入职的原因,总觉得是哪个地方的权限没弄好,也许当你跳出这个问题的时候,从旁观者的角度来看的话,便会清晰很多,也许便能一眼就查出问题所在了。
  • 书写一个从0开始开发的网站

    前言: 这个网站的进度已经完成了3/4,完成了数据采集,静态页面书写,前后端一半接口联调,由于最近在准备面试,时间有限,暂时搁置了,源码放到了github上,有兴趣可以去了解一下.这文章仅仅是为了记录这段时间的业余忙绿. 以下是在写这个项目时候的一些思考,当然遇到的问题远不止这些,因为这是自己的独立项目,兼当了产品,交互,设计,前端,后端,运维等角色,可以说是对自己全方面的锻炼. 另外微信小程序版本已经上线了: 欢迎浏览
    1. 确定基础框架

    项目最终要以 搜索来源为主要来源设计基础框架,所以使用前端渲染的方式就不适合此项目,由于自己是前端开发人员,对于php,java不是很熟悉,所以就得找其它方式,目前比较好的方式是next.js与nuxt.js两者差不多,由于自己对于react比较熟悉,便采用了next.js.  后面在使用这个框架的时候,发现知乎也是用这个框架的,知乎的百度收录非常良好,这个对于后面网站被百度大量收录也有一定的保障..

    2.确定前端主色调,前端UI参考

    由于自己也非专业出身,这一块并没有那么专业,,所以只能随便找一个网站模仿一下即可,我自己看的网站是https://www.quanjing.com/   这个有做适配,由于前端只有展示,没有过多的复杂逻辑,所以适配h5也是需要的,色调便参考这个网站.搜索功能也是参考这个网站,而下面的内容则是

    3.爬取更多gif数据

    在爬取一个网站上的数据的时间,发现上面的gif图片大小太大了,2m左右的大小实在不能接受,于是就在爬取该网站的时候做了压缩图片,没想到这里遇上了一个难题,一般的图片像jpg,png,jpeg都是不会动的图片,但是git是由很多帧组成的图片,要实现压缩得麻烦很多,最开始的时候使用降色以减少图片的大小,但是这种效果并不好..

    4.给网站添加token检验

    为了防止自己的网站被攻击,得加一个token检验才行..token检验用户某个时间段内的访问量,如果是超过一定数据,就把这个用户给禁了,防止其它用户无法正常访问.

    碰到的问题

    关于压缩图片

    使用的是目前比较专业的图片处理库—graphicsMagick,ImageMagick,ghostscript 这些安装后方可在代码中实现压缩gif,之前也试了很多的其它库 像images,compress-image 都不能实现压缩gif.  安装了上面说的三个库后,还需要另外写一些逻辑来实现压缩gif,也是参考了其它大佬的说明,明白了要压缩gif图片,要从图片颜色质量,gif图片帧数,裁剪图片大小等方面去实现

    ENOENT 翻译了一下并没有这个单词,那肯定就是缩写了,于是就百度了一下,Error No Entry 的缩写, 意思是:没有这样的目录条目….

    关于安装gifsicle碰到的问题.

    这个包在安装编译的时候每次都会报错,导致后面在使用的时候会报ENOENT的错误,具体"errno":"ENOENT","code":"ENOENT","syscall":"spawn /*/node_modules/gifsicle/vendor/gifsicle","path”:”/*/node_modules/gifsicle/vendor/gifsicle"   每次安装都无法编译成功,导致这个node_modules下面没有vendor文件夹,编译成功后会有一个脚本工具,但是如果按照npm install的方式是没的,只好跑去github上搜索答案了,最后在官网的github仓库找到了编译后的文件,复制进去后便可以了,这也是一个小坑.

    5.网站框架初具雏形

    由于自己担任了各种职务,所以有时候得边写代码边参考,前期网站可能并不好看,只能先把大体的框架写好先,把内容填充上去,后面再一步一步做好页面

       
  • 微信小程序获取元素当前的位置

    前言: 在使用小程序开发应用的时候,涉及到一个应用关于图片延迟加载,即如果当前图片不在屏幕显示区域则不加载图片,以节省资源带宽,这里就会涉及到计算当前图片距离顶部的位置.开发方式,使用taro进行小程序开发.   开始写代码: 最开始的时候在官网上查询获得了以下的方式:
    const query = Taro.createSelectorQuery() // 创建类似dom获取节点的方式
    query.select('.gj-img').boundingClientRect() // 获取元素位置 类似dom获取元素位置信息方式
    query.exec(function (res) {
      console.log(res)
    }) // 执行
    
    但是你在使用后却仍无法获取相关的信息,
    返回了 [null]
    于是开始排查问题,首先api是没问题,那就可能是渲染的问题了,可能在执行的时候并没有找到我的这个img元素,所以返回了null,于是就试了一下用setTimeout延迟执行该方法:
    setTimeout(()=>{
      const query = Taro.createSelectorQuery()
      query.select('.gj-img').boundingClientRect()
      query.exec(function (res) {
        console.log(res)
      })
    },0)
    
    然后就能正常获取元素信息了.
    
    
    总结:
        之所以想到是这个原因,是因为后面在执行滚动的时候,这个元素是能够正常返回位置信息的,这种类似的问题碰到过很多次了,记录一下..
  • 如何给你的npm install添加代理

    前言: 在使用npm 安装包的时候,总要遇到安装不了的情况,比如说一些国外的包由于安装很慢,从而导致安装出错,无法正常安装,这个时候就是科学上网了,如果你的电脑可以用浏览器科学上网,那便可以让git使用该端口来下载国外的资源.   下面是方法 我的是mac电脑,可以直接 vi ~/.gitcconfig 然后添加 proxy = socks5://127.0.0.1:7890   即可 科学上网,加快你的下载更新速度!!   总结: 可以保存一下 以后防止忘记了
  • react hooks踩坑记..

    前言: react hooks是react 16.7版本后出来的,算是一个比较新的东西,在最开始用的时候,个人用的不是很习惯,会有一些排斥,但是随着react社区中对hooks风评越来越好,我也在最近的1年多时间强制自己使用这个新特性,不用不知道,一用后面真的就放不下了. 发现坑: 今天在写websocket的时候发现一个问题 虽然执行了setData([])  但是在下面的initWS中的onmessage方法,依然引用了之前的老数据源,这里也没有办法给data添加副作用... 复现问题:
    import React, {useEffect, useState} from 'react';
    import { Button } from 'antd';
    
    let i = 0;
    export default () => {
      const [data,setData] = useState<number[]>([]);
    
      useEffect(()=>{
        console.log(data) // 添加副作用后 这里的data便是空数组了
      },[data])
      return (
        <div className="indexlayout-main-conent">
          {
            data.map(item =>{
              return (
                <div>{item}</div>
              )
            })
          }
          <Button onClick={()=>{
            i++;
            data.push(i);
            setData([...data])
          }}>添加一个...</Button>
          <Button onClick={()=>{
            console.log(data);
            setData([]);
            setTimeout(()=>{
              console.log(data); // 此处引用的data依然还是老的data
            },2000)
          }}>清空</Button>
        </div>
      );
    };
    以上可以复现我的问题,然而对于我的代码无法使用副作用来保证数据源是最新的,websocket里onmessage一直都有引用 data的数据,也一直引用着老数据源,无法释放, 于是在重置的时候只能把websocket关了再重启,以保证数据源是最新的. 修改后的代码:
    const handleClearLog = () => {
      lockReconnect = true;
      data = []; // 这里必须先重置了 在setTimeout的域中是无法拿到空的data的
      websocket.close();
      clearInterval(websocketTime);
      setData([]);
      setTimeout(() => {
        initWS(); // 重新连接websocket
        websocketTime = setInterval(() => {
          if (websocket.readyState !== 1) {
            initWS()
          }
        }, 5000)
      }, 1000)
    }
    这样便可以了...   总结: 虽然是小问题 但是还是花了一些时间去排查,之前以为hooks与setState一样,可以在setTimeout与setInterval里拿到更新后的值,但是经历这次实践,发现并没想像的那么好.            
  • 一步一步搭建--搞笑表情包网站(一)

    前言:

            做一个完整的网站,从产品=>UI=>后端开发=>前端开发=>最后验收测试上线,这是一个产品的流程,虽然工作中一直有按照这个流程在走,但是自己却没有完整的过程经历,做这个产品,一方面是想体验一下这样的一个流程,再就是可以巩固自己的专业知识,学习新的知识,发现问题,提高自己解决问题的能力. 一: 产品 为什么要写搞笑表情包这个方向的产品,不侵权,不容易造成产权纠纷,网上的资源较多,可以获取资源的路径也比较多,这是主要原因.获取来源,可以网络上搜索一下便有很多网站了,通过爬虫方式,爬取页面数据,将数据存储到自己的服务器,将图片资源存储到对象存储里.然后在小程序,网站等渠道展示. 二:开始开发 1.确定基础框架

    项目最终要以 搜索来源为主要来源设计基础框架,所以使用前端渲染的方式就不适合此项目,由于自己是前端开发人员,对于php,java不是很熟悉,所以就得找其它方式,目前比较好的方式是next.js与nuxt.js两者差不多,由于自己对于react比较熟悉,便采用了next.js.  后面在使用这个框架的时候,发现知乎也是用这个框架的,知乎的百度收录非常良好,这个对于后面网站被百度大量收录也有一定的保障..

    2.确定前端主色调,前端UI参考

    由于自己也非专业出身,这一块并没有那么专业,,所以只能随便找一个网站模仿一下即可,我自己看的网站是https://www.quanjing.com/   这个有做适配,由于前端只有展示,没有过多的复杂逻辑,所以适配h5也是需要的,色调便参考这个网站.搜索功能也是参考这个网站,而下面的内容则是

    3.爬取更多gif数据

    在爬取一个网站上的数据的时间,发现上面的gif图片大小太大了,2m左右的大小实在不能接受,于是就在爬取该网站的时候做了压缩图片,没想到这里遇上了一个难题,一般的图片像jpg,png,jpeg都是不会动的图片,但是git是由很多帧组成的图片,要实现压缩得麻烦很多,最开始的时候使用降色以减少图片的大小,但是这种效果并不好..

    4.给网站添加token检验

    为了防止自己的网站被攻击,得加一个token检验才行..token检验用户某个时间段内的访问量,如果是超过一定数据,就把这个用户给禁了,防止其它用户无法正常访问.

    三:碰到的问题

    关于压缩图片

    使用的是目前比较专业的图片处理库—graphicsMagick,ImageMagick,ghostscript 这些安装后方可在代码中实现压缩gif,之前也试了很多的其它库 像images,compress-image 都不能实现压缩gif.  安装了上面说的三个库后,还需要另外写一些逻辑来实现压缩gif,也是参考了其它大佬的说明,明白了要压缩gif图片,要从图片颜色质量,gif图片帧数,裁剪图片大小等方面去实现

    ENOENT

    翻译了一下并没有这个单词,那肯定就是缩写了,于是就百度了一下,Error No Entry 的缩写, 意思是:没有这样的目录条目

      成果:目前已经完成后端的数据爬取,小程序. 小程序码:   总结: 目前阿里云对象存储里存储了20万+的图片,这些图片差不多也够用了...接下来要做的是优化内容,如果把这些内容更好的呈现给用户,让我的小程序获得更多的展示,这里就涉及到了小程序的搜索优化以及推广渠道,这些事在刚毕业的时候自己也做过,又将回到了产品的工作中了    
  • 关于微信小程序上传图片到腾讯云cos上问题梳理

    背景: 最近在写小程序,里面涉及了文件上传的问题,由于公司用的腾讯对象存储,之前也没有相关的上传文件技术积累,所以只能自己研究一下,web文件上传到cos的经验可以作为参照,但是却不能直接使用. 开始写: 最开始还是用了腾讯提供的sdk---cos-js-sdk-v5,但是这个在上传的时候使用putObject使用的是blob没办法使用,这个方法行不通,于是就到腾讯文档处搜索了另外一种解决方案. 腾讯文档处的解决方案---使用cos-auth 认证签名方式上传到桶内. 这种方式有点麻烦,具体可以参考文档:https://cloud.tencent.com/document/product/436/34929.. 虽然一步一步按照文档里的说明去写,但是最后还是无法正常上传,总是提示SignatureDoesNotMatch,这里有一个签名的生成过程,由于不知道cos-auth里是怎么计算生成签名的,这种方式自己又放弃了..放弃的代码如下:   import {request} from './request'; import Taro from '@tarojs/taro'; import CosAuth from './cos-auth'; const getAuthorization = (options, callback) => { request({ url: '/getSecret', header: { 'content-type': 'application/json' }, method: 'get' }).then(res => { const credentials = res.data.credentials || {}; console.log(credentials); callback({ XCosSecurityToken: credentials.sessionToken, Authorization: CosAuth({ SecretId: credentials.tmpSecretId, SecretKey: credentials.tmpSecretKey, Method: options.Method, Pathname: options.Pathname, }) }); }) }; const camSafeUrlEncode = function (str) { return encodeURIComponent(str) .replace(/!/g, '%21') .replace(/'/g, '%27') .replace(/\(/g, '%28') .replace(/\)/g, '%29') .replace(/\*/g, '%2A'); }; const uploadFile = function (filePath) { const Key = filePath.substr(filePath.lastIndexOf('/') + 1); // 这里指定上传的文件名 const signPathname = '/inventory/'; // PostObject 接口 Key 是放在 Body 传输,所以请求路径和签名路径是 / const Bucket = 'Bucket', Region = 'Region'; const prefix = 'https://' + Bucket + '.cos.' + Region + '.myqcloud.com/'; console.log(prefix); getAuthorization({Method: 'POST', Pathname: signPathname}, function (AuthData) { console.log(AuthData); Taro.uploadFile({ url: prefix, name: 'file', filePath: filePath, formData: { 'key': Key, 'success_action_status': 200, 'Signature': AuthData.Authorization, 'x-cos-security-token': AuthData.XCosSecurityToken, 'Content-Type': '', }, success: function (res) { console.log(res); const url = prefix + camSafeUrlEncode(Key).replace(/%2F/g, '/'); console.log(res.statusCode); console.log(url); }, fail: function (res) { Taro.showToast({title: '上传失败'}); } }); }); }; // const cos = () => { // return new COS({ // getAuthorization: getAuthorization() // }); // }; export {uploadFile};   上面的方式也放弃了. 看了里面的源码里面有涉及到dom的相关操作,这在小程序里是不适用的. 在网上又找了第三种方式,成功上传到cos上了 使用第三方封装好的包 ---- cos-wx-sdk-v5   第一步: 认证..
    import COS from 'cos-wx-sdk-v5';
    import {request} from './request';
    
    const getAuthorization = () => {
      return (options, callback) => {
        request({
          url:'getSecret',
          header:{
            'content-type': 'application/json'
          },
          method:'get'
        }).then(res => {
          console.log(res);
          const credentials = res.data.credentials || {};
          callback({
            TmpSecretId: credentials.tmpSecretId,
            TmpSecretKey: credentials.tmpSecretKey,
            XCosSecurityToken: credentials.sessionToken,
            ExpiredTime: res.data.expiredTime
          });
        })
      }
    };
    
    const cos = () => {
      return new COS({
        getAuthorization: getAuthorization()
      });
    };
    
    export { cos };
    
    第二步:上传
    
    
    cos().postObject({
      Bucket: Bucket,
      Region: Region,
      Key: `/inventory/${filename}`,
      FilePath: filePath
    
    }, function (err, data) {
      console.log(data);
    });
    这里需要用到postObject 而不是putObject了,所以这里有一些变化,其它都差不多,但是在使用这个方式的时候也踩了一个坑,由于后端没有设置postObject的权限,
    导致我这边一直报没有权限的错误.即 AccessDenied
    
    这个问题需要后端配置来修改,在后端请求腾讯云cos的时候把该权限带上,
    
    
    这个是之前putObject的权限, 后面只要加上name/cos:PostObject 这个权限即可正常使用了.   总结: 前后花了大概2小时的时间去解决这个问题,问题不大,但是由于是前后端分离开发的,我也不清楚后端在请求密钥的时候有哪些参数,只能靠自己盲猜,在这上面浪费了很多时间.最后在解决问题的时候,也是一步一步重新把上传过程理一遍,发现自己这边没问题,那就是其它处的问题,就这样一步一步的找到问题所在.      
  • puppeteer使用代理来爬取网络数据

    前言: 关于爬虫,在网络上的爬取数据总会让目标网站反感,但是目标网站又无从得知该用户是否为爬虫,于是就通过一些方式去做判断,最为常用的方式便是屏蔽可能是爬虫ip的访问,将其重定向到另外一个页面..这个问题对于爬虫方解决起来不难 ----- 代理. 代理: 要使已经被屏蔽设备网络ip能够重新访问目标网络,使用代理是最简单的方式,意思是,你访问目标网站时,不要直接访问目标网站,而是通过中间层去访问,你把请求发给中间层,让中间层把你的请求发送到目标网站,目标网站把返回的资源重新发送回给你,这样你与目标网站便是间接接触,目标网站无法得知你的真实ip. 代理方式:普通代理与隧道代理..两者方式最主要的区别是前者是主动获取代理ip,后者是自动获取访问的ip..前者在你使用代理的时候,当无法再访问目标网站的时候,每一次都需要重新获取代理ip,而后者只需要获取一次ip,后面切换ip的工作在ip服务器上自动切换. 使用: 我使用的是puppeteer来爬取网站上的数据,使用方式也比较简单: 在获取到代理ip(proxyServer)后:
    const browser = await puppeteer.launch({
            args: ['--no-sandbox', '--disable-setuid-sandbox', `--proxy-server=${proxyServer}`]
    });
    我使用的代理服务是芝麻http代理,使用起来也方便..有兴趣的可以去搜索一下... 总结: 加深了对网络的认知,也是自己基础知识的学习  
  • 我的2020年总结

    前言: 时间可真快,不知不觉又是一年过去了,又到了总结一年经历的时候了. 2020年从海康离职,就职于国铁吉讯,同事依然很nice,这家公司环境相对开发,工作压力相对于海康要轻松的多,没想过作为一个程序员开发能有正常的双休时间,感谢公司能给我这样的体验机会吧. 一:工作. 今年都干了些啥?
    1. 这一年多的时间,把服务器的知识熟悉了,因为上线了一个真实node服务项目,也很感激领导的信任,能给我这样的机会去实践node中间层服务,以前虽然有写过node服务,但是都是仅限于自己的项目,并没有真实的项目经验.通过这次的经验,也让我清楚的了解后端开发的链路,原来和自己开发博客系统并无多少差别.
    2. 上线了一版数据可视化大屏,也算是自己的新领域的突破吧,毕竟以前没有真正玩过这个领域,以前虽然有接触过,但都没有实际的项目.
    3. 记得刚进公司接手的第一个项目,项目极大,1000+的路由地址,然后我看到这1000+的路由全部分布在一个js里,当初接手这个项目的时候为了改一个路由要花好几分钟去找修改的地点,这让我比较奔溃,后面也经过我的改造,按模块去拆分了,也为这个项目添加了大量的公用组件.为什么会出现这种情况,也许和我们公司的管理有关系,2个外包,大部分的工作量得让外包来写,外包也许遵守的原则的尽快上线,他们考虑的利益是如果通过这个项目让我多学一些知识,后面外包走后,这一堆事就交给了我,我也不得不去看1000+的代码(不仅是路由1000+,实际业务也有好多的1000+行的代码),后面修改起来也是非常费劲的事,想去整改,但又无能为力.
    在国铁的工作,更让我觉得代码质量的重要性,代码真的不是给机器看的,有时候更的时候是给人看的,在海康的时候我也一直遵守这样的原则,后面在交接工作的时候也交接的非常顺利,交接工作的同事并没有太多的问题,我也能按时顺利的离职..为了能够达成想要的效果,在很久以前也去看了大佬的源码,ant-admin的那个后台代码,也学习了一点经验,后面自己的项目也会严格按照相关的流程去书写,增加代码的可读性. 2020年自我感觉最好的一个项目: 并非是公司的项目,而是自己的项目-----爬虫 是爬取菜谱网站的一个小项目,数据源有10万+条,这也是占据我业余大部分时间的小项目.项目代码大概600行,共导出接口10个..使用puppeteer获取我需要的页面数据源,通过模拟真实人员操作去获取页面的数据,当然该网站也不会轻易让我爬取数据,也给加上了一些限制,比如IP的访问限制,这个也难不倒我,可以通过代理置换访问的代理IP,这样便可以继续访问了,当然还有比较笨的方式,在本地跑的时候,就是重启路由器. 其它小项目---- autojs: 自动采集蚂蚁能量,淘宝双11自动签到等,这个还有挺有意思的,也创建了一个群,有兴趣的可以去找找我的相关博文.   二: 生活 2019年的时候一家人还分居两地,今年老婆小孩都来杭州了,一家人终于在一起住了,小家也终于有小家的样子了.虽然平时会吵架,但也不影响这个小家. 老婆在家全职带小孩,自己的压力自然要大一些,也正是老婆全职带小孩,自己也才有更多的精力忙自己的事. 小孩子确实事多,也给这个家加了很多欢乐,希望以后越来越好吧! 周末也会带小孩出去转转,去的最多的就是钱江世纪公园了吧.. 在杭州第一次为小孩过生日,买了他最喜欢的赛车和飞机作为礼物.   三:展望 记得去年提的目标有好几个未能达成的,前后思考了一下原因,没那精力去搞,最主要的目前的工作用不上相关的技术,在海康的时候未来也许能用的上... 希望今年的我再多多学习一些知识,多涉及一些未知领域,也不知道自己的能力上限有多少,2020年支付宝余额的目标还差个年终奖.    
  • 关于CSS module scoped相关的知识

    背景: 日常在使用react,vue做开发写CSS的时候,会不会遇到CSS污染呢?我和另外一个小伙伴写的css名称是一样的,结果我写的css被另外一个小伙伴给覆盖了,至少我就有遇到过,不过是几年前的事了,后面由于自己有一套命名规则,这类事故基本就没发生过了.css module也是为了防止css污染而产生的,它会给你的class名称加上hash字符串,避免命名污染.下面就用vue与react来实现相关的css隔离. 在vue里如何避免css污染?
    1. <style scoped>
        .self-repair{
          margin-top: 16px;
        }
      </style>
    加上scoped经过编译后: <div data-v-f9904c26="" class="self-repair"> vue会给所在元素上加上data-v  随机字符串,浏览器生成的样式为:
    .self-repair[data-v-f9904c26] {
        margin-top: 16px;
    也自动为这个class多加了一个属性判断,这样便能保证其唯一性.
    但是这个也同时也引起了一个问题,如果修改子组件里的css样式呢? 这个时候深度选择器就可以用上了,可以在要修改子组件的样式前加上 /deep/  或者 >>>,例如:
    .self-repair>>> .van-button__text{
        color: red;
      }
    .self-repair/deep/ .van-button__text{
        color: red;
      }
    经过编译后的在浏览器上是这样的代码:
    .self-repair[data-v-f9904c26] .van-button__text {
           color: red;
    这样就可以穿透到子组件修改其样式了.
    关于css module 这个在react与vue中都有使用到,原理都差不多,都是把css当成模块来引用
    vue中的写法:
    <style module>
      .selfRepair{
        margin-top: 16px;
    
      }
    </style>
    <div :class="$style.selfRepair">
      提交
    </div>
    这样便可以生效了,在style里加上module,这个webpack在编译的时候就知道如何去编译这段css了,通过编译后的代码如下:
    .index_selfRepair_2B4Cz {
        margin-top: 16px;
    也是带有hash值的,保证了唯一性.
    在react也基本同理,把css引入,进而像引用函数方法一样把这个样式放到元素上,均可以保证样式的唯一性.
    总结:
            自己在开发的过程中心面的scoped与module其实并不常用,因为有时候为了复用css,会把样式写到全局,如果用了module的方式就会很死板,必须要通过引入才能生效,那我日常开发是如何保证不重复呢?其实很简单,css也有自己的命名规范----BEM,这个也只是针对新项目来说,对于一些老项目,别人从来不按照类似的规范来写,只能越填越乱,有时间为了表示唯一性,就加上了自己名字拼音的首字母.

分类目录

No Data

No Data

热门文章

No Data

No Data