首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

博客添加暗色主题切换功能,从主题切换聊聊前后端cookies的使用

前端使用cookies 首先来说说前端如何使用 cookies,这里我使用了一个 js-cookies.js 的插件,关于这个插件的使用可以自行查看 官方文档,比较简单,一看就会。...上面这段代码里面只是实现了通过按钮切换主题的方法这个只能实现当前页主题切换,但是如果跳转到其他页面,主题还是不会切换,所以我后来写了一个其他页面主题状态保持的方法,如下: //判断主题策略 $(function...想要解决这个问题,那就只能让 css 文件不要通过 js 方法去加载,这样才能保证主题的覆盖没有过程。...分析完因果关系,就可以着手动起来了,当时我从认识到问题到想到解决办法其实也就花了不到5分钟,当时的脑子转的还挺快的。...20191123.01" rel="stylesheet"> {% endif %} 也就是这么一行代码,就可以解决上述的问题,既实现了根据当前 cookies 状态是否加载新 css 样式,也可以避免

52310

2021 秋招面经

还有哪些可以优化的地方 三面 介绍一下自己的前端学习路线 你觉得使用框架开发和原生开发有什么区别 好像模板引擎也能实现你说的这些优点,你对模板引擎是怎么看的 Vue 里面实现代码逻辑复用,你有什么好的方案...ES7、ES8 这些有了解过? bigInt 解决了什么问题,应用场景是什么? flex 布局和常用属性 闭包和优缺点 除了闭包之外还有哪些场景会导致内存泄漏?如何检测? 说一下事件循环。...都可以触发事件? 判断数据类型有哪些方法? Object.prototype.toString.call() 的返回值是什么,具体代码实现说一下? 为什么这个方法使用 call?...v-if 和 v-show 的区别,使用场景? 说一下 ref,返回的是什么,作用是什么,ref 可以重复? 组件传值的方式,跨组件传值除了 Vuex 和 EventBus 还有其它方法?...除了服务端 CORS 解决还有其它方法? 说一下从接收到 HTML 文件开始页面渲染的过程 解析 HTML 的时候遇到 script 标签会怎么处理?

68860
您找到你想要的搜索结果了吗?
是的
没有找到

你是否彻底了解margin属性?

css,你少不了与margin打交道。你真的了解margin?你知道margin有什么特性?你知道什么是垂直外边距合并?margin块元素、内联元素中的区别?...你知道负margin?你知道负margin实际工作中的用途?常见的浏览器下margin出现的bug有哪些?…… Margin是什么 CSS 边距属性定义元素周围的空间。...而其他标准浏览器则会表现出“有问题”的外观。好了,如果你读过了上面W3Shcool的CSS外边距合并的文章,就很容易讨论这个问题了。...为了“弥补修复”这个父子垂直外边距合并这个CSS规范“Bug”,而强制父元素上使用border-top和padding-top,不舒服,也不容易记住,下次再发生这样的情况还是会忘记这条准则,而且页面设计稿里如果不需要...为什么display:inline可以解决这个双边距bug,首先是inline元素或inline-block元素是不存在双边距问题的。

77920

我独到的技术见解--从面试角度了解前端基础知识体系

0.30000000000000004,如何通过代码解决这个问题网络相关网络相关的知识日常开发中也是挺常用的,相关的问题可以从“一个完整的 HTTP 请求过程”来讲述,包括:域名解析(此处涉及 DNS...、插件Babel 的作用是什么,如何选择合适的 Babel 版本Webpack 是怎么将多个文件打包成一个,依赖问题如何解决有写过 Webpack 插件,Webpack 编译的过程具体是怎样的CSS...文件打包过程中,如何避免 CSS 全局污染本地开发和代码打包的流程分别是怎样的除了脚手架相关,如今自动化、流程化的使用也越来越多了:怎么理解持续集成和持续部署你们的项目有使用 CI/CD ,为什么你们的代码有写单元测试...而多人协作的经验也很有帮助:多人开发过程中,代码冲突如何解决项目中有使用 Git ?...而从面试的角度来介绍这些内容,除了可以有方向地进行知识储备,更多的是希望大家能结合自身的实际情况反思自己是否还有可以改善的地方,因为面试过程中考察的点通常便是实际工作中会遇到的问题

39631

BAT及各大互联网公司2014前端笔试面试题--Html,Css

可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点,因此除了修复较大的错误之外,其它的差异将被直接忽略。   ...如果为幻灯片、相册等,可以使用图片预加载技术,将当前展示图片的前一张和一张优先下载。 如果图片为css图片,可以使用CSSsprite,SVGsprite,Iconfont、Base64等技术。...因此,如果页面文件的标题被标记,而不是,那么这个页面搜索结果的位置可能会比较靠后.除了提升易用性外,语义标记有利于正确使用CSS和JavaScript,因为其本身提供了许多“钩钩”来应用页面的样式与行为...即是,使用CSS display:none属性,HTML元素(对象)的宽度、高度等各种属性值都将“丢失”;而使用visibility:hidden属性,HTML元素(对象)仅仅是视觉上看不见(完全透明...那么问题继续还有,知道css计数器(序列数字字符自动递增)?如何通过css content属性实现css计数器?

87751

webpack3 升级到 webpack4 小记

解决方法 webpack4 中不再支持 CommonsChunkPlugin,而是使用 splitChunks 替代,那么这两者有什么区别?...解决方法这个问题是依赖版本的问题,将 webpack-dev-server 升级到 3.1.0 就可以解决了。...by instanceof Entrypointinstead 解决方法这个是因为 webpack 4 不再 支持 extract-css-chunks-webpack-plugin,我们可以使用...解决方法: webpack 4 已经废除了 之前 UglifyJsPlugin,用 optimization.minimize 替代 修改前: plugins: [ new webpack.optimize.UglifyJsPlugin...才提升 8s,不得不说,问题根源并不在于此,除了升级 webpack 之外,肯定是还有其他方面性能优化的点,比如 dll, happy pack 等等,下一篇文章我们就来探讨一下这些优化的手段 参考:

97220

5个你可能不知道的CSS属性

在这篇文章中,我将介绍5个相对较新的CSS属性,你可能从来没有听说过,我觉得很有趣。 本文的目的是带领你总览这些CSS的属性,告诉你可以使用哪些值,它们的使用场景,还有一些例子。...属性声明时使用。借助它,我们可以通过一行简单的CSS来控制字体的显示方式,而不需要使用基于JavaScript的解决方案。这意味着我们的网页可以减小体积,(很可能)提高性能。...:这个值与strict但像,除了不包含size。 这个例子的属性如下所示 JSFiddle上也能看到....下面是两个应用了这个属性的两个示例图片: 除了Microsoft的浏览器(Edge和IE)之外,所有主流浏览器都支持。此外,您应该记住支持此属性的浏览器的一些注意事项。...这个属性不应该用来预测和解决潜在的性能问题。在出现问题,它必须被视为最后的手段。 属性可以用来避免我们多年来一直使用的hack:使用(或)来推动浏览器动画并转换成硬件加速。

1.2K80

一年双非本科的大厂面试经历

要求不可以转化数据格式,不可以使用api [1,2,3,4,5],[2,3,5] => true // 遍历B数组,再去A数组里找有没有这个值。...出现卡顿现象怎么解决?添加defer属性之后脚本会在什么时候执行?采用defer之后,用户点击页面会怎么样?如果禁用WebWoker,还有其他方法?...IntersectionObserver怎么使用的?怎么知道一个DOM节点出现在视口内? vuex的实现机制是什么?vuex里用到的设计模式有什么?还有其他? 用过自定义指令?什么场景下使用?...worker线程怎么获取主线程上下文?解决卡顿的问题除了使用WebWorker还有其他解决方案?面试官建议我去了解一下React的fiber。有没有测试过woker通信的时间?...除了观察者模式还有其他,平时用得上的。 说一下微信小程序吧 移动端适配有了解?rem布局 WebAssembly有了解? Electron有了解? TypeScript有了解

2.3K30

HTML和CSS

可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点,因此除了修复较大的错误之外,其它的差异将被直接忽略。 “渐进增强”观点 “渐进增强”观点则认为应关注于内容本身。...如果为幻灯片、相册等,可以使用图片预加载技术,将当前展示图片的前一张和一张优先下载。 如果图片为css图片,可以使用CSSsprite,SVGsprite,Iconfont、Base64等技术。...因此,如果页面文件的标题被标记,而不是,那么这个页面搜索结果的位置可能会比较靠后.除了提升易用性外,语义标记有利于正确使用CSS和JavaScript,因为其本身提供了许多“钩钩”来应用页面的样式与行为...我们对于CSS来说他们来解决各浏览器对CSS解释不同所采取的区别不同浏览器制作不同的CSS样式的设置来解决这些问题就叫作CSS Hack。...即是,使用CSS display:none属性,HTML元素(对象)的宽度、高度等各种属性值都将“丢失”;而使用visibility:hidden属性,HTML元素(对象)仅仅是视觉上看不见(完全透明

5.3K30

如何让你的网页“看起来”展现地更快 —— 骨架屏二三事

这个模式和传统网站很接近,在于返回的 HTML 也是包含所有的 DOM,而非前端渲染。而前端 JS 除了绑定事件之外,还会多做一个事情叫做“激活”(hydration),这里就不再赘述了。...但匪夷所思的是,对着这个地址刷新试几次,我也基本看不到骨架屏(骨架屏的内容是一个居中的蓝色方形图片,外加一条白色横线反复侧滑的高亮动画)。是我们的实现思路有问题?...除了想打他之外,为了重新整理行李箱,必然需要把整理好的行李拿出来再重新放。浏览器中这个过程叫做重排 (reflow),而那个馊主意就是新加载的 CSS。显而易见,重排的开销是很大的。...熟能生巧,箱子理多了,就能想出解决办法。既然每个 CSS 文件加载都可能触发重绘,那我能不能等所有 CSS 加载完了一起渲染呢?...真正应用到生产环境之前,我们还有很多事情要考虑。 兼容性考虑 首先, 内部我们使用了 onload,也就是使用了 JS。

1.2K10

如果我在用HTML+CSS,那么,我能算是名开发人员

我们讨论了好几个小时,网上也有很多关于这个话题的讨论。但仍然还有人否认这一点,那么就让我们本文中好好探讨一番。 深入探讨之前,让我们先来了解一下HTML + CSS的基础知识。...-- Page content goes here --> 除了HTML之外,你还可以利用CSS来美化页面。这就是为什么我们会结合二者使用。...此外,还有人说HTML + CSS不具备图灵完备性——那么,图灵完备性又是什么? 我的第一反应也是发懵。但经过几个小时的查阅,我有了大致的了解。...CSS的控制结构 是的,你没看错,CSS有自己的控制结构方式。下面是一些例子。 顺序控制 与其他编程语言一样,我们可以CSS中逐行执行指令。...因此,我结合使用了循环和条件控制。 ? 现在你是否同意HTML + CSS具有编程语言结构?你同意?那太好了!我们之间达成了共识,你可以走了。 哦?你还在继续阅读?你还有疑问?

92810

我们真的缺前端工程师? | TW洞见

等工具) 熟悉JavaScript(比如前端的MVVM框架,客户端模板) 前端开发的工作流程(代码检查,精简化,模块化CSS,LiveReload,调试) 编写测试(静态检查,单元测试) 跨浏览器、跨设备的解决方法...但是这些还不够,软件除了交付之外还有一些非功能性的需求: 端到端测试(UI测试,比如selenium server/web driver) devops(比如数据库环境,测试服务器,CI服务器的自动化...这时候,换个视角,从其他角色的角度来看待你的工作,又会有很多新的发现。而且不仅如此,很可能你会发现之前很麻烦,很难搞定的事情,新的方法/视角下变得很容易。...我觉得自己勉强可以算是个合格的程序员:对学习保持着热情,对解决问题保持着热情,仅此而已。项目上,如果我发现了问题,我就想办法解决,如果属于知识欠缺,那我就会去学习。...也就是说,团队里需要有一个能解决20%的问题的前端工程师,而其他的80%的前端工作,应该可以其他所有的开发完成,对于后端开发也是一样。

949140

python0054_三引号_原样显示字符串_triple_quoted

通过 16 进制数值转义\nnn 通过 8 进制数值转义\ 还是 续行字符 放在 行尾可以让 下一行和本行 连成一行有 什么方法 让字符串 原样输出?...搜索STRINGS的帮助三引号 引用的 triple-quotes可以 原样输出试炼先试试 回车符去看看 三引号 的 帮助手册查看参考 帮助模式下 查找"“” 三引号 引用中 换行符 和 引号 都会被...不要翻页三引号输出引号、回车的问题 都自动解决 但是反斜杠(\) 还是 需要转义三引号输出除了反斜杠 需要转义 之外 其余 都可以 原样输出三引号原样输出输出 帮助文件输出 网页文件回车和tab 都可以...原样保留能否 原样输出 一些好玩的 cowsay之类的东西都放到 三引号里面可以试试?...需要两个反斜杠\\ 代表1个反斜杠替换内容是\\\\ \\ 代表一个反斜杠\\\\ 代表2个反斜杠g global 每行中查找不止一次换后效果替换之后 什么效果最终效果可以让海龟说话了!

99730

5个你可能不知道的CSS属性

在这篇文章中,我将介绍5个相对较新的CSS属性,你可能从来没有听说过,我觉得很有趣。 本文的目的是带领你总览这些CSS的属性,告诉你可以使用哪些值,它们的使用场景,还有一些例子。...font-display属性@font-face声明时使用。借助它,我们可以通过一行简单的CSS来控制字体的显示方式,而不需要使用基于JavaScript的解决方案。...这意味着如果您有一个具有固定高度和宽度的小部件(独立的部分),当你想要更新它的内容和样式的时候,使用这个属性可以通过限定浏览器的计算来避免影响到其他的DOM结构。...content:这个值与strict但像,除了不包含size。 这个例子的属性如下所示 JSFiddle上也能看到....您应该在更改发生之前和之后使用脚本代码切换开启will-change。 这个属性不应该用来预测和解决潜在的性能问题。在出现问题,它必须被视为最后的手段。

90020

原创 | matplotlib设置颜色、标记、线条,让你的图像更加丰富

由于绿色是很常见的颜色(大雾),所以我们没必要输入完整的green单词,使用g作为缩写就可以了。除了绿色之外其他常用的颜色也一样,比如红色可以就写成r,蓝色写成b,黄色写成y等等。...除了使用单词之外,我们还可以使用16进制来表示颜色。比如#CECECE,表示一种淡淡的灰色。到底有多灰呢?我们画出来就知道了。 ?...针对这个问题,我们可以使用标记,也就是图上把每个点都标出来。最常见的标记就是圆点,我们让每一个样本变成一个圆点,这样就很直观了。...我们可以通过marker这个参数实现这一点,比如如果要画圆点的话,我们传入marker='o'即可。 ? 除了圆点之外还有很多其他的方式,我们同样可以查看plot的文档获得细节。 ?...除了虚线图之外还有点线图和点状图,这两者顾名思义,大家应该不难猜出来。 ? 三合一 我们回顾一下我们刚才介绍的,一共有三种特性,分别是标记、线条以及颜色。

1.6K20

高级工程师的晋升之路:如何用 JavaScript 打造十亿级的应用

(“我知道别人会怎么解决这个问题”) 我的理论是,下一级别应该是“我知道别人会怎么解决这个问题”。 ? (“我能预料到API的选择和抽象会怎样影响到其他解决问题方法。”) 我们来具体说一下。...(根据路由进行代码分割) 有个经过实践考验的方法解决代码分割问题,这样人就不用考虑代码分割问题了。这种方法叫做“基于路由的代码分割”。如果你还没有使用代码分割,那你可以从这种方式入手。...有没有人有过这种经历,以前写的代码,现在虽然不再使用了,但还留在代码库中? 大家都知道这个问题,而且最严重的就是CSS。一个超大的CSS,里面有各种选择器。谁知道哪个选择器还有用?...我并没有所有的解决方案,但我认为CSS-in-JS带来的思想也可以用在应用程序的其他方面。...因此Google,虽然我们确定这是个很好的想法,但最终我们认为它不应该被使用,任何人都不应该使用这种模式,除了一种情况之外:自动生成的代码。

81820

css3的nth-child选择器的详细探讨

这是最简单的.我们可以使用这种方法,给不同的li加上不同的样式,如果你有需要,都可以分别订制的....重要的是,理解它的语法,再结合你的需求,就基本能解决问题了. 此类选择器拓展 提问,不知道一共有多少个的情况下,如何选择最后两个?? 当你对上面的知识点,了然于胸,是不是大大的有成就感呢?...那么,你知道上面这个问题应该怎么解决? 如何选择最后两个 ○○○○○○○○●●12345678910 好吧,这个,是无法使用 nth-child这个选择器来解决的....什么是反选,举例,我要选择除了1\4\7\10等三为倍数的数字之外其他选项,如下表所示: ○●●○●●○●●○12345678910 好玩了,这里我们需要再引入一个新的选择:not() 代码如何实现呢...其他补充说明 上面我们的DOM结构使用了ul>li*10这种结构,也就是说,在这种结构里面,是没有处理li之外的同级元素的.如果有其他元素是什么情况呢?

46710

学Python爬虫好找工作?要学到什么程度?

而且掌握基本的爬虫,大家再去学习Python数据分析、web开发甚至机器学习,都会更得心应手。因为这个过程中,Python基本语法、库的使用,以及如何查找文档你都非常熟悉了。...js、ajax、html/xhtml、css等相关技术为最佳,其中js代码的熟悉是很重要的; 6、另外随着手持设备的市场占比越来越高,app 的数据采集、抓包工具的熟练使用会越来越重要。...你用过多线程和异步?除此之外你还用过什么方法来提高爬虫效率?有没有做过增量式抓取?对Python爬虫框架是否有了解?...4、爬虫相关的项目经验:爬虫重在实践,除了理论知识之外,面试官也会十分注重爬虫相关的项目。你做过哪些爬虫项目?如果有Github最好你认为你做的最好的爬虫项目是哪个?其中解决了什么难题?...综上所述,Python爬虫的岗位要求不仅仅只有掌握爬虫技术,还有其他技能都会成为找工作的加分项。因此如果大家找工作中碰了壁,就需要好好反思一下,自己所学的程度是不是太浅太窄。

1.5K10

来自offer杀手的前端面试攻略

除此之外再就没什么了。 3.udp和tcp的比较等等 三、 html和css基础部分。 这个部分的知识点非常多非常多。一时半会也不可能将所有的都囊括在内,先列出非常重要的吧。...这些不需要你真正使用过,但是要明白他们什么场景下使用。就可以了。自己拿菜鸟教程上代码的实验一下就可以了。websocket内部还有一些关于协议的部分。要自己弄懂。...20.css实现响应式的方式。 除此之外暂时也想不到其他的了。如果再有想到会再次添加。...9.addEventlistener和正常的onclick=()=> 的区别 10.js中new和object.creat区别 11.除了js中DOM的基础方法还有BOM中的方法。...22.闭包 23.let和const,最好全面一点解释,包括可以说一下变量提升引入一下var,和这些什么场景下去使用

86131
领券