GVKun编程网logo

Ajax清除浏览器js、css、图片缓存的方法（ajax如何解决浏览器缓存问题）

9

如果您对Ajax清除浏览器js、css、图片缓存的方法感兴趣，那么本文将是一篇不错的选择，我们将为您详在本文中，您将会了解到关于Ajax清除浏览器js、css、图片缓存的方法的详细内容，我们还将为您解

如果您对Ajax清除浏览器js、css、图片缓存的方法感兴趣，那么本文将是一篇不错的选择，我们将为您详在本文中，您将会了解到关于Ajax清除浏览器js、css、图片缓存的方法的详细内容，我们还将为您解答ajax如何解决浏览器缓存问题的相关问题，并且为您提供关于ajax 请求去除浏览器缓存处理、Ajax清除浏览器js、css、图片缓存的方法_javascript技巧、angularJs清除浏览器缓存的方法、CSS 模块化方案探讨（BEM、OOCSS、CSS Modules、CSS-in-JS ...）的有价值信息。

本文目录一览：

Ajax清除浏览器js、css、图片缓存的方法（ajax如何解决浏览器缓存问题）

Ajax清除浏览器js、css、图片缓存的方法（ajax如何解决浏览器缓存问题）

做东东时都是把图片在服务器的地址存放在数据库里面，然后到浏览器中显示，但是后来发现了两个问题。

第一：为了安全起见，js是无法读取本地的图片的，不然你写一个js，岂不是可以获取任何人电脑里面的文件了。

第二：图片存在的是在服务器的硬盘上面，而不是在客户的硬盘里面，所以也是取不到的

后来在网上找方法，找的方法，都是各种转换二进制到xml中，的各种高大上的答案，然后本人又实在太懒了，就自己想了一个

方法，就是利用

BufferedImage

这个类。

开始

首先说说我的思路，就是把本地的图片，加载到内存中，然后放到

BufferedImage

这个缓冲流中，然后利用

ImageIO.write()，

这下大家都估计想得到一种思路了，但是如果说ajax，得到的数据，估计还是啥个乱七八糟的啥吧！没关系，稍后介绍。

工具类

首先建立一个加载图片的工类具，把一个图片的地址当参数存进去，得到这个图片的缓冲流：

rush:js;"> /** * 根据图片的地址，返回图片的缓冲流 * @param addr * @return */ public static BufferedImage getInputStream(String addr){ try { String imgPath = addr; BufferedImage image = ImageIO.read(new FileInputStream(imgPath)); return image; } catch (Exception e) { e.printstacktrace(); System.out.println(); System.out.println("获取图片异常:java.awt.image.BufferedImage"); System.out.println("请检查图片路径是否正确，或者该地址是否为一个图片"); } return null; }

没错，就是使用

ImageIO.read

，来加载流对象，然后就是处理类的代码了，这是我用的是

springMVC

，

springMVC

这段时间

比较火，所以我也好少用struts2了

处理类

rush:js;"> /** * 根据图片的地址，来获取图片 * @param addr * @param response */ @ResponseBody @RequestMapping("/getImg") public void getImg(@Param("addr")String addr,HttpServletResponse response){ BufferedImage img = new BufferedImage(300,150,BufferedImage.TYPE_INT_RGB); img = ImgUtil.getInputStream(addr); if(img==null){ throw new RuntimeException("打印图片异常：com.controller.Business_Ctrl.getImg(String,HttpServletResponse)"); } if(img!=null){ try { ImageIO.write(img,"JPEG",response.getoutputStream()); } catch (IOException e) { e.printstacktrace(); System.out.println("打印异常:com.controller.Business_Ctrl.getImg(String,HttpServletResponse)"); } } }

很明显，使用

ImageIO.read()

读到图片时，就用

ImageIO.write()，

输出图片，输入流就是

HttpServletResponse.getoutputStream()

客户端

代码如下:
ness/getImg?addr="+addr+""); }

如图所示，当需要加载图片的时候，就触发setImg方法，给它一个地址，当然，地址，早已经从后台传到前台了，自然，就算没有地址，稍微变一下，也可以在后台得到地址，然后返回，然后给img标签设置src属性，就可以得到图片了。

下面介绍下jquery1.2版本运用Ajax清除浏览器js、css、图片缓存的方法。

jquery自从1.2开始就有

ifModified和cache

参数了，不用自己加header

rush:js;"> ifModified Boolean Default: false Allow the request to be successful only if the response has changed since the last request. This is done by checking the Last-Modified header. Default value is false,ignoring the header. cache Boolean Default: true Added in jQuery 1.2,if set to false it will force the pages that you request to not be cached by the browser. $.ajax({ type: "GET",url: "static/cache.js",dataType: "text",cache:false,ifModified :true });

ajax 请求去除浏览器缓存处理

ajax 请求去除浏览器缓存处理

1、 GET请求URL后附加字串，让服务器认为不是相同的请求。

"http://www.***.com/index.php?t=" + new Date().getTime()

2、 在ajax发送请求前加上 xmlHttpRequest.setRequestHeader("If-Modified-Since","0")

3、 在ajax发送请求前加上 xmlHttpRequest.setRequestHeader("Cache-Control","no-cache");

4、 服务端响应请求时加 header("Cache-Control: no-cache, must-revalidate"); （PHP）

5、 使用POST代替GET，浏览器不会对POST做缓存

Ajax清除浏览器js、css、图片缓存的方法_javascript技巧

Ajax清除浏览器js、css、图片缓存的方法_javascript技巧

做东东时都是把图片在服务器的地址存放在数据库里面，然后到浏览器中显示，但是后来发现了两个问题。

第一：为了安全起见，js是无法读取本地的图片的，不然你写一个js，岂不是可以获取任何人电脑里面的文件了。

第二：图片存在的是在服务器的硬盘上面，而不是在客户的硬盘里面，所以也是取不到的

后来在网上找方法，找的方法，都是各种转换二进制到xml中，的各种高大上的答案，然后本人又实在太懒了，就自己想了一个

方法，就是利用BufferedImage这个类。

立即学习“Java免费学习笔记（深入）”；

点击下载“修复打印机驱动工具”；

开始

首先说说我的思路，就是把本地的图片，加载到内存中，然后放到BufferedImage这个缓冲流中，然后利用ImageIO.write()，这下大家都估计想得到一种思路了，但是如果说ajax，得到的数据，估计还是啥个乱七八糟的啥吧！没关系，稍后介绍。

工具类

首先建立一个加载图片的工类具，把一个图片的地址当参数存进去，得到这个图片的缓冲流：

/**
   * 根据图片的地址，返回图片的缓冲流
   * @param addr
   * @return
   */
  public static BufferedImage getInputStream(String addr){
    try {
      String imgPath = addr; 
      BufferedImage image = ImageIO.read(new FileInputStream(imgPath));
      return image;
    } catch (Exception e) {
      e.printStackTrace();
      System.out.println();
      System.out.println("获取图片异常:java.awt.image.BufferedImage");
      System.out.println("请检查图片路径是否正确，或者该地址是否为一个图片");
    }
    return null;
  }
登录后复制

没错，就是使用ImageIO.read，来加载流对象，然后就是处理类的代码了，这是我用的是springMVC，springMVC这段时间

比较火，所以我也好少用struts2了

处理类

/**
   * 根据图片的地址，来获取图片
   * @param addr
   * @param response
   */
  @ResponseBody
  @RequestMapping("/getImg")
  public void getImg(@Param("addr")String addr,HttpServletResponse response){
    BufferedImage img = new BufferedImage(300, 150, BufferedImage.TYPE_INT_RGB);
    img = ImgUtil.getInputStream(addr);
    if(img==null){
      throw new RuntimeException("打印图片异常：com.controller.Business_Ctrl.getImg(String, HttpServletResponse)");
    }
    if(img!=null){
      try {
        ImageIO.write(img, "JPEG", response.getOutputStream());
      } catch (IOException e) {
        e.printStackTrace();
        System.out.println("打印异常:com.controller.Business_Ctrl.getImg(String, HttpServletResponse)");
      }
    }
  }
登录后复制

很明显，使用ImageIO.read()读到图片时，就用ImageIO.write()，输出图片，输入流就是

HttpServletResponse.getOutputStream()

客户端

复制代码 代码如下:

function setImg(addr){
　　　　　　　　　
$("#logo").attr("src","business/getImg?addr="+addr+"");
}

如图所示，当需要加载图片的时候，就触发setImg方法，给它一个地址，当然，地址，早已经从后台传到前台了，自然，就算没有地址，稍微变一下，也可以在后台得到地址，然后返回，然后给img标签设置src属性，就可以得到图片了。

下面介绍下jquery1.2版本运用Ajax清除浏览器js、css、图片缓存的方法。

jquery自从1.2开始就有ifModified和cache参数了，不用自己加header

ifModified Boolean Default: false 
Allow the request to be successful only if the response has changed since the last request. This is done by checking the Last-Modified header. Default value is false, ignoring the header. 
cache Boolean Default: true 
Added in jQuery 1.2, if set to false it will force the pages that you request to not be cached by the browser. 
$.ajax({
type: "GET",
url: "static/cache.js",
dataType: "text",
cache:false,
ifModified :true
});
登录后复制

angularJs清除浏览器缓存的方法

angularJs清除浏览器缓存的方法

一个缓存就是一个组件，它可以透明地储存数据，以便以后可以更快地服务于请求。多次重复地获取资源可能会导致数据重复，消耗时间。因此缓存适用于变化性不大的一些数据，缓存能够服务的请求越多，整体系统性能就能提升越多。本文我们和大家分享angularjs清除浏览器缓存的方法。

浏览器缓存，有时候我们需要他，因为他可以提高网站性能和浏览器速度，提高网站性能。但是有时候我们又不得不清除缓存，因为缓存可能误事，出现一些错误的数据。像股票类网站实时更新等，这样的网站是不要缓存的，像有的网站很少更新，有缓存还是比较好的。

以下是传统的清除浏览器的方法

meta方法


//不缓存 
<META HTTP-EQUIV="pragma" CONTENT="no-cache">  
<META HTTP-EQUIV="Cache-Control" CONTENT="no-cache, must-revalidate">  
<META HTTP-EQUIV="expires" CONTENT="0">
登录后复制

清理form的临时缓存


<body onLoad="javascript:document.yourFormName.reset()">
登录后复制

ajax清除缓存


$.ajax({ 
   url:&#39;www.haorooms.com&#39;, 
   dataType:&#39;json&#39;, 
   data:{}, 
   cache:false,  
   ifModified :true , 
 
   success:function(response){ 
     //操作 
   } 
   async:false 
 });
登录后复制

用随机数，随机数也是避免缓存的一种很不错的方法！

URL 参数后加上 "?ran=" + Math.random(); //当然这里参数 ran可以任意取了

用随机时间，和随机数一样。

在 URL 参数后加上 "?timestamp=" + new Date().getTime();

用php后端清理

在服务端加 header("Cache-Control: no-cache, must-revalidate");等等(如php中)

下面介绍关于angularJs项目中清除浏览器的方法，当然以上传统的方法也是可以适用的，但对于angularJs来说还需添加以下几项：

一、清除模板缓存


.run(function($rootScope, $templateCache) {  
      $rootScope.$on(&#39;$routeChangeStart&#39;, function(event, next, current) {  
        if (typeof(current) !== &#39;undefined&#39;){  
          $templateCache.remove(current.templateUrl);  
        }  
      });  
    });
登录后复制

二、html添加随机参数


.state("content", { 
        url: "/", 
        views:{ 
          "bodyInfo":{templateUrl: &#39;tpls/bodyInfo.html?&#39;+ +new Date(), 
            controller:&#39;bodyInfoCtrl&#39;}, 
          "header":{templateUrl: &#39;tpls/header.html?&#39;+ +new Date(), 
            controller:&#39;headerCtrl&#39; 
          }, 
          "footer":{templateUrl: &#39;tpls/footer.html?&#39;+ +new Date(), 
            controller:&#39;footerCtrl&#39; 
          } 
        } 
      })
登录后复制


<link rel="stylesheet" href="stylesheets/main.css?version=1.0.3" rel="external nofollow" >
登录后复制

三、清除route缓存


.config([&#39;$stateProvider&#39;, &#39;$urlRouterProvider&#39;,&#39;$locationProvider&#39;,&#39;$httpProvider&#39;,function($stateProvider, $urlRouterProvider,$locationProvider,$httpProvider) { 
//     $urlRouterProvider.when("", "/home"); 
      $urlRouterProvider.otherwise(&#39;/&#39;); 
       if (!$httpProvider.defaults.headers.get) { 
       $httpProvider.defaults.headers.get = {}; 
      } 
      $httpProvider.defaults.headers.common["X-Requested-With"] = &#39;XMLHttpRequest&#39;; 
      $httpProvider.defaults.headers.get[&#39;Cache-Control&#39;] = &#39;no-cache&#39;; 
      $httpProvider.defaults.headers.get[&#39;Pragma&#39;] = &#39;no-cache&#39;;
登录后复制

相关推荐：

如何清除浏览器缓存

php实现清除缓存的几种方法分享

ThinkPHP实现一键清除缓存方法_PHP教程

以上就是angularJs清除浏览器缓存的方法的详细内容，更多请关注php中文网其它相关文章！

CSS 模块化方案探讨（BEM、OOCSS、CSS Modules、CSS-in-JS ...）

CSS 模块化方案探讨（BEM、OOCSS、CSS Modules、CSS-in-JS ...）

全文共 4000 余字，预计花费 30 分钟。

众所周知，CSS 根据选择器名称去全局匹配元素，它没有作用域可言，比如你在页面的两个不同的地方使用了一个相同的类名，先定义的样式就会被覆盖掉。CSS 一直缺乏模块化的概念，命名冲突的问题会持续困扰着你。每次定义选择器名称时，总会顾及其他文件中是否也使用了相同的命名，这种影响在组件开发中尤为明显。

理想的状态下，我们开发一个组件的过程中，应该可以随意的为其中元素进行命名，只需要保证其语义性即可，而不必担心它是否与组件之外的样式发生冲突。

与 JavaScript 社区中的 AMD、CMD、CommonJS、ES Modules 等类似，CSS 社区也诞生了相应的模块化解决方案：BEM、OOCSS、SMACSS、ITCSS，以及 CSS Modules 和 CSS-in-JS 等。

根据这些 CSS 模块化方案的特点，我简单的将它们分为了三大类：

  1. CSS 命名方法论：通过人工的方式来约定命名规则。
  2. CSS Modules：一个 CSS 文件就是一个独立的模块。
  3. CSS-in-JS：在 JS 中写 CSS。

image.png

CSS 命名方法论

为了避免 CSS 选择器命名冲突的问题，以及更好的实现 CSS 模块化，CSS 社区在早期诞生了一些 CSS 命名方法论，如 BEM、OOCSS、SMACSS、ITCSS、SUITCSS、Atomic CSS 等。

它们几乎都有一个共同的特点——为选择器增加冗长的前缀或后缀，并试图通过人工的方式来生成全局唯一的命名。这无疑会增加了类命名的复杂度和维护成本，也让 HTML 标签显得臃肿。

BEM

BEM（Block Element Modifier）是一种典型的 CSS 命名方法论，由 Yandex 团队（相当于中国的百度）在 2009 年前提出，它的核心思想是 通过组件名的唯一性来保证选择器的唯一性，从而保证样式不会污染到组件外。

BEM 命名规约是 .block-name__element-name--modifier-name，即 .模块名__元素名--修饰器名 三个部分，用双下划线 __ 来明确区分模块名和元素名，用双横线 -- 来明确区分元素名和修饰器名。你也可以在保留 BEM 核心思想的前提下，自定义命名风格，如驼峰法、使用单下划线、使用单横线等。

在 BEM 中不建议使用子代选择器，因为每一个类名已经都是全局唯一的了，除非是 block 相互嵌套的场景。

<!-- 示例模块 -->
<div>
  <div>
    <ul>
      <li>menu item 1</li>
      <li>menu item 2</li>
      <li>menu item 3</li>
      <li>menu item 4</li>
    </ul>
  </div>
  <div></div>
  <div></div>
</div>
.card {}
.card__head {}
.card__menu {}
.card__menu-item {}
.card__menu-item--active {}
.card__menu-item--disable {}
.card__body {}
.card__foot {}

使用 Sass/Less/Stylus 的父元素选择器 & 可以更高效的编写 BEM：

.card {
  &__head {}
  &__menu {
    &-item {
      &--active {}
      &--disable {}
    }
  }
  &__body {}
  &__foot {}
}

OOCSS

OOCSS（Object-Oriented CSS）即面向对象的 CSS，它借鉴了 OOP（面向对象编程）的抽象思维，主张将元素的样式抽象成多个独立的小型样式类，来提高样式的灵活性和可重用性。

OOCSS 有两个基本原则：

  1. 独立的结构和样式。即不要将定位、尺寸等布局样式与字体、颜色等表现样式写在一个选择器中。
  2. 独立的容器和内容。即让对象的行为可预测，避免对位置的依赖，子元素即使离开了容器也应该能正确显示。

比如：我们有一个容器是页面的 1/4 宽，有一个蓝色的背景，1px 灰色的边框，10px 的左右边距，5px 的上边距，10px 的下边距。以前对于这样一个样式，我们常常给这个容器创建一个类，并把这些样式写在一起。像下面这样。

<div></div>

<style>
  .box {
    width: 25%;
    margin: 5px 10px 10px;
    background: blue;
    border: 1px solid #ccc;
  }
</style>

然而使用 OOCSS 的话，我们不能这样做，OOCSS 要求为这个容器创建更多的“原子类”，并且每个样式对应一个类，这样是为了后面可以重复使用这些组件的样式，避免重复写相同的样式，就拿这个实例来说，我们给这个容器增加下面的类：

<div></div>

<style>
  .size1of4 { width: 25%; }
  .bgBlue { background: blue; }
  .solidGray { border: 1px solid #ccc; }
  .mt-5 { margin-top: 5px; }
  .mr-10 { margin-right: 10px }
  .mb-10 { margin-bottom: 10px; }
  .ml-10 { margin-left: 10px; }
</style>

OOCSS 最大的优点是让样式可复用性最大化，也能够显著减少整体的 CSS 代码数量。缺点也很明显，你需要为每个元素搜集一大堆类名，这可是一个不小的体力活 。

在 OOCSS 中，类名既要能传递对象的用途，也要有通用性，例如 mod、complex、pop 等。如果将 CSS 类命名的太语义化，例如 navigation-bar，那么就会将其限制在导航栏，无法应用到网页的其它位置。

SMACSS

SMACSS（Scalable and Modular Architecture for CSS）即可伸缩及模块化的 CSS 结构，由 Jonathan Snook 在 2011 年雅虎时提出。

SAMCSS 按照部件的功能特性，将其划分为五大类：

  1. 基础（Base）是为HTML元素定义默认样式，可以包含属性、伪类等选择器。
  2. 布局（Layout）会将页面分为几部分，可作为高级容器包含一个或多个模块，例如左右分栏、栅格系统等。
  3. 模块（Module）又名对象或块，是可重用的模块化部分，例如导航栏、产品列表等。
  4. 状态（State）描述的是任一模块或布局在特定状态下的外观，例如隐藏、激活等。
  5. 主题（Theme）也就是换肤，描述了页面的外观，它可修改前面四个类别的样式，例如链接颜色、布局方式等。

SMACSS 推荐使用前缀来区分不同部件：

  1. 基础规则是直接作用于元素的，因此不需要前缀。
  2. 布局的前缀是 l- 或 layout-，例如 .l-table、.layout-grid 等。
  3. 模块的前缀是 m- 或模块自身的命名，例如 .m-nav、.card、.field 等。
  4. 状态的前缀是 is-，例如 .is-active、.is-current 等。
  5. 主题的前缀是 theme-，例如 .theme-light、.theme-dark 等。
<form>
  <div>
    <input type="search" id="searchbox" />
    <span>There is an error!</span>
  </div>
</form>

ITCSS

ITCSS（Inverted Triangle CSS，倒三角 CSS）是一套方便扩展和管理的 CSS 体系架构，它兼容 BEM、OOCSS、SMACSS 等 CSS 命名方法论。ITCSS 使用 分层 的思想来管理你的样式文件，类似服务端开发中的 MVC 分层设计。

ITCSS 将 CSS 的样式规则划分成以下的几个层次：

  1. Settings：项目使用的全局变量，比如颜色，字体大小等等。
  2. Tools：项目使用的 mixins 和 functions。到 Tools 为止，不会生成具体的 CSS 代码。
  3. Generic：最基本的设定，比如 reset.css、normalize.css 等。
  4. Base：最基础的元素（elements），比如 img、p、link、list 等。
  5. Objects：某种设计模式，比如水平居中，
  6. Components：UI 组件，比如 button、switch、slider 等。
  7. Trumps：用于辅助和微调的样式，只有这一层才可以使用 !important。

ITCSS 的分层逻辑越往下就越具体，越局限在某个具体的场景。

image.png

根据 ITCSS 的思想，你可以这样组织你的 CSS 样式文件：

stylesheets/
├── settings/
│   ├── colors.scss
│   ├── z-layers.scss
│   └── breakpoints.scss
├── tools/
│   ├── mixins.scss
│   └── functions.scss
├── generic/
│   ├── box-sizing.scss
│   └── normalize.scss
├── base/
│   ├── img.scss
│   └── list.scss
├── objects/
│   ├── grid.scss
│   └── media.scss
├── components/
│   ├── buttons.scss
│   └── slider.scss
├── trumps/
│   ├── widths.scss
│   └── gaps.scss
└── index.scss

下面是几个基于 ITCSS 的模版项目，可供参考：

CSS Modules

上面提到的这些 CSS 命名方法论，虽然已经不适用于当今的自动化工作流和大前端环境，但是他们有其诞生的时代背景，也确实推动了 CSS 模块化的发展，其背后的设计思想同样值得我们学习，甚至有时候我们仍然能在某些场合下看到他们的影子。

手写命名前缀后缀的方式让开发者苦不堪言，于是 CSS Modules 这种真正的模块化工具就诞生了。

CSS Modules 允许我们像 import 一个 JS Module 一样去 import 一个 CSS Module。每一个 CSS 文件都是一个独立的模块，每一个类名都是该模块所导出对象的一个属性。通过这种方式，便可在使用时明确指定所引用的 CSS 样式。并且，CSS Modules 在打包时会自动将 id 和 class 混淆成全局唯一的 hash 值，从而避免发生命名冲突问题。

这里仅罗列一些 CSS Modules 的核心特性，更具体的用法可以参考 官网 或 阮老师的《CSS Modules 用法教程》。

CSS Modules 特性：

/* style.css */
:global(.card) {
  padding: 20px;
}
.article {
  background-color: #fff;
}
.title {
  font-size: 18px;
}
// App.js
import React from ''react''
import styles from ''./style.css''

export default function App() {
  return (
    <article className={styles.article}>
      <h2 className={styles.title}>Hello World</h2>
      <div className="card">Lorem ipsum dolor sit amet.</div>
    </article>
  )
}

编译结果：

<style>
  .card {
    padding: 20px;
  }
  .style__article--ht21N {
    background-color: #fff;
  }
  .style__title--3JCJR {
    font-size: 18px;
  }
</style>

<article>
  <h2>Hello World</h2>
  <div>Lorem ipsum dolor sit amet.</div>
</article>

CSS Modules 集成

在 webpack 中使用 CSS Modules（开启 css-loader 的 modules 特性）：

// webpack.config.js -> module.rules
{
  test: /\.(c|sa|sc)ss$/i,
  exclude: /node_modules/,
  use: [
    ''style-loader'',
    {
      loader: ''css-loader'',
      options: {
        importLoaders: 2,
        // 开启 CSS Modules
        modules: true,
        // 借助 CSS Modules，可以很方便地自动生成 BEM 风格的命名
        localIdentName: ''[path][name]__[local]--[hash:base64:5]'',
      },
    },
    ''postcss-loader'',
    ''sass-loader'',
  ],
},

在 PostCSS 中使用 CSS Modules（使用 postcss-modules 插件）：

// postcss.config.js
module.exports = {
  plugins: {
    ''postcss-modules'': {
      generateScopedName: ''[path][name]__[local]--[hash:base64:5]'',
    },
  },
}

配合 CSS 预处理器使用

使用 CSS Modules 时，推荐配合 CSS 预处理器（Sass/Less/Stylus）一起使用。

CSS 预处理器提供了许多有用的功能，如嵌套、变量、mixins、functions 等，同时也让定义本地名称或全局名称变得容易。

:global(.title) {
  color: yellow;
}

:global {
  .global-class-name {
    color: green;
  }
}

VSCode 扩展支持

在 VSCode 中写 CSS Modules 代码，默认是没有自动提示和跳转至定义处的功能，不够智能。

可以安装 CSS Modules 扩展。

l0EwY2Mk4IBgIholi.gif

CSS-in-JS

React 的出现，打破了以前“关注点分离”的网页开发原则，因其采用组件结构，而组件又强制要求将 HTML、CSS 和 JS 代码写在一起。表面上看是技术的倒退，实际上并不是。

React 是在 JS 中实现了对 HTML 和 CSS 的封装，赋予了 HTML 和 CSS 全新的“编程能力”。对于 HTML，衍生了 JSX 这种 JS 的语法扩展，你可以将其理解为 HTML-in-JS；对于 CSS，衍生出一系列的第三方库，用来加强在 JS 中操作 CSS 的能力，它们被称为 CSS-in-JS。

随着 React 的流行以及组件化开发模式的深入人心，这种"关注点混合"的新写法逐渐成为主流。

Any application that can be written in JavaScript, will eventually be written in JavaScript. —— Jeff Atwood

CSS-in-JS 库目前已有几十种实现，你可以在 CSS in JS Playground 上快速尝试不同的实现。下面列举一些流行的 CSS-in-JS 库：

image.png

styled-components

styled-components 是目前最流行的 CSS-in-JS 库，在 React 中被广泛使用。

它使用 ES6 提供的模版字符串功能来构造“样式组件”。

// styles.js
import styled, { css } from ''styled-components''

// 创建一个名为 Wrapper 的样式组件 (一个 section 标签, 并带有一些样式)
export const Wrapper = styled.section`
  padding: 10px;
  background: deepskyblue;
`

// 创建一个名为 Title 的样式组件 (一个 h1 标签, 并带有一些样式)
export const Title = styled.h1`
  font-size: 20px;
  text-align: center;
`

// 创建一个名为 Button 的样式组件 (一个 button 标签, 并带有一些样式, 还接收一个 primary 参数)
export const Button = styled.button`
  padding: 10px 20px;
  color: #333;
  background: transparent;
  border-radius: 4px;

  ${(props) => props.primary && css`
    color: #fff;
    background: blue;
  `}
`
// App.js
import React from ''react''
import { Wrapper, Title, Button } from ''./styles''

// 然后，像使用其他 React 组件一样使用这些样式组件
export default function App() {
  return (
    <Wrapper>
      <Title>Hello World, this is my first styled component!</Title>
      <Button>Normal Button</Button>
      <Button primary>Primary Button</Button>
    </Wrapper>
  )
}

更多使用技巧（更具体的内容请参考 官方文档）：

在 Vue 中编写 CSS 的正确姿势

方式一：使用 Scoped CSS（推荐）

为 <style> 区块添加 scoped 属性即可开启“组件样式作用域（Scoped CSS）”。

在背后，Vue 会为该组件内所有的元素都加上一个全局唯一的属性选择器，形如 [data-v-5298c6bf]，这样在组件内的 CSS 就只会作用于当前组件中的元素。

<template>
  <header>header</header>
</template>

<style scoped>
.header {
  background-color: green;
}
</style>

编译结果：

<headerdata-v-5298c6bf>header</header>

<style>
.header[data-v-5298c6bf] {
  background-color: green;
}
</style>

方式二：使用 CSS Modules

为 <style> 区块添加 module 属性即可开启 CSS Modules。

在背后，Vue 会为组件注入一个名为 $style 的计算属性，并混淆类名，然后你就可以在模板中通过一个动态类绑定来使用它了。

<template>
  <header :>header</header>
</template>

<style module>
.header {
  background-color: green;
}
</style>

编译结果：

<header>header</header>

<style>
.App__header--382G7 {
  background-color: green;
}
</style>

在 React 中编写 CSS 的正确姿势

React 并没有给我们提供与 Vue 的 scoped 类似的特性，我们需要通过其他方式来实现 CSS 模块化。

  1. 使用 styled-components：styled-components 是最流行也是最好用的 CSS-in-JS 库，它将 CSS、JS 以及 React 开发中最流行的一些语法整合起来，易上手，且功能强大。
  2. 使用 CSS Modules：在外部管理 CSS，然后将类名映射到组件内部，他会为每个 class 都分配一个全局唯一 hash。另外，这两个插件会帮你更好地在 React 中使用 CSS Modules：react-css-modules、babel-plugin-react-css-modules。

CSS Modules 与 styled-components 是两种截然不同的 CSS 模块化方案，它们最本质的区别是：前者是在外部管理 CSS，后者是在组件中管理 CSS。两者没有孰好孰坏，如果你能接受 CSS-in-JS 这种编程模式，更推荐使用 styled-components。如果一时无法接受，觉得其过于激进了，那就用 CSS Modules。It doesn''t matter，选择了哪一个，就用哪一个的体系去管理项目就好了。

参考资料

  1. BEM: A New Front-End Methodology — Smashing Magazine
  2. Battling BEM CSS: 10 Common Problems And How To Avoid Them — Smashing Magazine
  3. An Introduction To Object Oriented CSS (OOCSS) — Smashing Magazine
  4. MicheleBertoli/css-in-js: React: CSS in JS techniques comparison
  5. CSS Modules 用法教程 - 阮一峰的网络日志
  6. CSS in JS 简介 - 阮一峰的网络日志

关于Ajax清除浏览器js、css、图片缓存的方法和ajax如何解决浏览器缓存问题的介绍现已完结，谢谢您的耐心阅读，如果想了解更多关于ajax 请求去除浏览器缓存处理、Ajax清除浏览器js、css、图片缓存的方法_javascript技巧、angularJs清除浏览器缓存的方法、CSS 模块化方案探讨（BEM、OOCSS、CSS Modules、CSS-in-JS ...）的相关知识，请在本站寻找。

本文标签：

上一篇谈谈Jquery ajax中success和complete有哪些不同点

下一篇nodejs express,ajax发布w/jquery和接收响应（node.js ajax）

相关文章