xml地图|网站地图|网站标签 [设为首页] [加入收藏]
又不知道怎么命名class了
分类:web前端

CSS 巧用 :before和:after

2016/02/14 · CSS · 1 评论 · after, before

原文出处: 野兽'   

前几天的晚上较全面的去看了下css的一些文档和资料,大部分的样式运用都没什么大问题了,只是有些许较陌生,但是也知道他们的存在和实现的是什么样式。今天主要想在这篇学习笔记中写的也不多,主要是针对:before和:after写一些内容,还有几个小样式略微带过的介绍下。
什么是:before和:after? 该如何使用他们?
:before是css中的一种伪元素,可用于在某个元素之前插入某些内容。
:after是css中的一种伪元素,可用于在某个元素之后插入某些内容。
下面我们先跑个简单的代码测试下效果:

XHTML

<style> p:before{ content: "H" /*:before和:after必带技能,重要性为满5颗星*/ } p:after{ content: "d" /*:before和:after必带技能,重要性为满5颗星*/ } </style> <p>ello Worl</p>

1
2
3
4
5
6
7
8
9
<style>
    p:before{
        content: "H"  /*:before和:after必带技能,重要性为满5颗星*/
    }
    p:after{
        content: "d"  /*:before和:after必带技能,重要性为满5颗星*/
    }
  </style>
  <p>ello Worl</p>

以上的代码将会在页面中展现的是”Hello World”。我们通过浏览器的”审查元素”看到的内容是:

XHTML

<p> ::before "ello Worl" ::after </p>

1
2
3
4
5
<p>
  ::before
  "ello Worl"
  ::after
</p>

p标签内部的内容的前面会被插入一个:before伪元素,该伪元素内包含的内容是”H”;而在p标签内的内容后面会被插入一个:after伪元素,该元素包含的内容是”d”。作为一只合格的程序猴子,捍卫”Hello World”的完整存在是必要的。
既然笔记主要针对是:before和:after,那么肯定不会只是仅仅有以上的简单介绍就完事。下面我们看看平常该怎么使用他们。
1.结合border写个对话框的样式。
本兽将上面这句话拆成2部分:结合border,写个对话框的样式。
既然是结合border,那么我们先转个小话题,简单由浅入深的介绍下怎么用border画三角形样式(这个三角形在写对话框样式的时候需要):

XHTML

<style> .triangle{ width: 0; height: 0; border-left:50px solid red; border-bottom:50px solid blue; border-top:50px solid black; border-right:50px solid purple } </style> <div class="triangle"></div>

1
2
3
4
5
6
7
8
9
10
11
<style>
    .triangle{
        width: 0;
        height: 0;
        border-left:50px solid red;
        border-bottom:50px solid blue;
        border-top:50px solid black;
        border-right:50px solid purple
    }
  </style>
  <div class="triangle"></div>

以上代码将会在页面上展示一个正方形,左边是个红色的三角形,右边是紫色的三角形,上面是黑色的三角形,下面是蓝色的三角形。那么有人就会问,我们要的不是三角形么?野兽你画个正方形逗我呢?
我们对上面的样式做些修改:

CSS

.triangle{ width: 0; height: 0; border:50px transparent solid; /*这里我们将元素的边框宽度设置为50px,transparent表示边框颜色是透明的,solid表示边框是实线的*/ border-top-color: black; /*这里我们仅将上边框的颜色设置为黑色,众所周知,css后面的样式代码会覆盖之前的相同的样式代码,至于其他三边的还是透明色*/ /*border-bottom-color: black; /*这里设置底部边框色为黑色*/ border-left-color: black; /*这里设置左边边框色为黑色*/ border-right-color:black*/ /*这里设置右边边框色为黑色*/ }

1
2
3
4
5
6
7
8
9
.triangle{
      width: 0;
      height: 0;
      border:50px transparent solid; /*这里我们将元素的边框宽度设置为50px,transparent表示边框颜色是透明的,solid表示边框是实线的*/
      border-top-color: black;  /*这里我们仅将上边框的颜色设置为黑色,众所周知,css后面的样式代码会覆盖之前的相同的样式代码,至于其他三边的还是透明色*/
      /*border-bottom-color: black; /*这里设置底部边框色为黑色*/
      border-left-color: black;  /*这里设置左边边框色为黑色*/
      border-right-color:black*/ /*这里设置右边边框色为黑色*/
  }

然后这时我们就会看到一个在顶部的方向向下的三角形。解释已详细的写在css样式的注释里。
接下来我们加上:before:

CSS

<style> .test-div{ position: relative; /*日常相对定位*/ width:150px; height:36px; border-radius:5px; border:black 1px solid; background: rgba(245,245,245,1) } .test-div:before{ content: ""; /*:before和:after必带技能,重要性为满5颗星*/ display: block; position: absolute; /*日常绝对定位*/ top:8px; width: 0; height: 0; border:6px transparent solid; left:-12px; border-right-color: rgba(245,245,245,1); } </style> <div class="test-div"></div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style>
    .test-div{
        position: relative;  /*日常相对定位*/
        width:150px;
        height:36px;
        border-radius:5px;
        border:black 1px solid;
        background: rgba(245,245,245,1)
    }
    .test-div:before{
        content: "";  /*:before和:after必带技能,重要性为满5颗星*/
        display: block;
        position: absolute;  /*日常绝对定位*/
        top:8px;
        width: 0;
        height: 0;
        border:6px transparent solid;
        left:-12px;
        border-right-color: rgba(245,245,245,1);
    }
  </style>
  <div class="test-div"></div>

通过以上代码,我们将会看见一个类似微信/QQ的对话框样式,但是美中不足的是,在对话框的四周的边框不是完整的,而是在对话框的突出三角形上是木有边框的T_T瞬间冷场有木有,该怎么办呢?让召唤:after穿着棉大衣来救场吧~
完整代码:

CSS

<style> .test-div{ position: relative; /*日常相对定位*/ width:150px; height: 36px; border:black 1px solid; border-radius:5px; background: rgba(245,245,245,1) } .test-div:before,.test-div:after{ content: ""; /*:before和:after必带技能,重要性为满5颗星*/ display: block; position: absolute; /*日常绝对定位*/ top:8px; width: 0; height: 0; border:6px transparent solid; } .test-div:before{ left:-11px; border-right-color: rgba(245,245,245,1); z-index:1 } .test-div:after{ left:-12px; border-right-color: rgba(0,0,0,1); z-index: 0 } </style> <div class="test-div"></div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<style>
    .test-div{
        position: relative;  /*日常相对定位*/
        width:150px;
        height: 36px;
        border:black 1px solid;
        border-radius:5px;
        background: rgba(245,245,245,1)
    }
    .test-div:before,.test-div:after{
        content: "";  /*:before和:after必带技能,重要性为满5颗星*/
        display: block;
        position: absolute;  /*日常绝对定位*/
        top:8px;
        width: 0;
        height: 0;
        border:6px transparent solid;
    }
    .test-div:before{
        left:-11px;
        border-right-color: rgba(245,245,245,1);
        z-index:1
    }
    .test-div:after{
        left:-12px;
        border-right-color: rgba(0,0,0,1);
        z-index: 0
    }
  </style>
  <div class="test-div"></div>

好了,完整的一个对话框样式呈现在眼前了,至于对话框的小三角形的方向,相信大家看了上上段对于border介绍的代码也都知道该怎么做了吧,没错,就是改下position的位置,改下border显示颜色的方位~ (本兽不喜欢贴图片,体谅下额,需要的可以拷贝代码直接运行看效果,造轮子不仅仅是造轮子,也能让人加深印象,更好的理解)
2.作为内容的半透明背景层。
比如我们的需求是做一个半透明的登录框吧(这里也是在代码中通过注释来解释):

CSS

<style> body{ background: url(img/1.jpg) no-repeat left top /*这里本兽加了个图片背景,用以区分背景的半透明及内容的完全不透明*/ } .test-div{ position: relative; /*日常相对定位(重要,下面内容也会介绍)*/ width:300px; height: 120px; padding: 20px 10px; font-weight: bold; } .test-div:before{ position: absolute; /*日常绝对定位(重要,下面内容也会略带介绍)*/ content: ""; /*:before和:after必带技能,重要性为满5颗星*/ top:0; left: 0; width: 100%; /*和内容一样的宽度*/ height: 100%; /*和内容一样的高度*/ background: rgba(255,255,255,.5); /*给定背景白色,透明度50%*/ z-index:-1 /*日常元素堆叠顺序(重要,下面内容也会略带介绍)*/ } </style> <!--这里容兽偷个懒,布局简单写写--> <div class="test-div"> <table> <tr> <td>Name</td> <td><input placeholder="your name" /></td> </tr> <tr> <td>Password</td> <td><input placeholder="your password" /></td> </tr> <tr> <td></td> <td><input type="button" value="login" /></td> </tr> </table> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<style>
      body{
          background: url(img/1.jpg) no-repeat left top /*这里本兽加了个图片背景,用以区分背景的半透明及内容的完全不透明*/
      }
      .test-div{
          position: relative;  /*日常相对定位(重要,下面内容也会介绍)*/
          width:300px;
          height: 120px;
          padding: 20px 10px;
          font-weight: bold;
      }
      .test-div:before{
          position: absolute;  /*日常绝对定位(重要,下面内容也会略带介绍)*/
          content: "";  /*:before和:after必带技能,重要性为满5颗星*/
          top:0;
          left: 0;
          width: 100%;  /*和内容一样的宽度*/
          height: 100%;  /*和内容一样的高度*/
          background: rgba(255,255,255,.5); /*给定背景白色,透明度50%*/
          z-index:-1 /*日常元素堆叠顺序(重要,下面内容也会略带介绍)*/
      }
  </style>
  <!--这里容兽偷个懒,布局简单写写-->
  <div class="test-div">
      <table>
          <tr>
              <td>Name</td>
              <td><input placeholder="your name" /></td>
          </tr>
          <tr>
              <td>Password</td>
              <td><input placeholder="your password" /></td>
          </tr>
          <tr>
              <td></td>
              <td><input type="button" value="login" /></td>
          </tr>
      </table>
  </div>

上面的代码拷贝过去,加上张图片可测试效果。
当然,:bofore和:after也还有其他更多的巧妙用法,这里也不一一列出来了,这里放上一个用这两个伪元素加上css3动画实现一些比较好看及实用的动态效果的链接:HoverEffectIdeas
说完了:before和:after,我们稍微扯扯一些其他的css样式及布局注意点(可能大家不怎么注意,从而导致一些布局和样式出问题)。
position 定位的问题
position属性规定了元素的定位类型,默认为static。
该属性还可以有下值:
absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。
fixed:生成绝对定位的元素,相对于浏览器窗口进行定位。
relative:生成相对定位的元素,相对于其正常位置进行定位。
inherit:规定应该从父元素继承 position 属性的值。
代码:

CSS

<!--position:absolute--> <style> body{ height: 2000px /*这里将body的高度设置为2000px是为了区分absolute和fixed的差别*/ } .test-div{ position:absolute; left:50px; top:50px } </style> <div class="test-div">Hello World</div> <!--position:fixed--> <style> body{ height: 2000px /*这里将body的高度设置为2000px是为了区分absolute和fixed的差别*/ } .test-div{ position:fixed; left:50px; top:50px } </style> <div class="test-div">Hello World</div> <!--position:relative + position:absolute--> <style> .out-div{ width: 300px; height: 300px; background: purple; /*这里定义个背景,让我们知道这个div在哪*/ margin:50px 0px 0px 50px; position: relative } .in-div{ position:absolute; left:50px; top:50px } </style> <div class="out-div"> <div class="in-div">Hello World</div> </div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<!--position:absolute-->
  <style>
      body{
          height: 2000px  /*这里将body的高度设置为2000px是为了区分absolute和fixed的差别*/
      }
      .test-div{
          position:absolute;
          left:50px;
          top:50px
      }
  </style>
  <div class="test-div">Hello World</div>
<!--position:fixed-->
  <style>
      body{
          height: 2000px  /*这里将body的高度设置为2000px是为了区分absolute和fixed的差别*/
      }
      .test-div{
          position:fixed;
          left:50px;
          top:50px
      }
  </style>
  <div class="test-div">Hello World</div>
<!--position:relative + position:absolute-->
  <style>
      .out-div{
          width: 300px;
          height: 300px;
          background: purple;  /*这里定义个背景,让我们知道这个div在哪*/
          margin:50px 0px 0px 50px;
          position: relative
      }
      .in-div{
          position:absolute;
          left:50px;
          top:50px
      }
  </style>
  <div class="out-div">
      <div class="in-div">Hello World</div>
  </div>

z-index 元素堆叠排序
z-index用于设置或检索对象的堆叠顺序,对应的脚本特性为zIndex。
z-index的数值越大,该元素的堆叠层级越高。
代码:

CSS

<style> .first-div{ width: 300px; height: 300px; background: purple; /*这里定义个背景,让我们知道这个div在哪*/ position: absolute; left:50px; top:50px; z-index: 1 } .second-div{ position:absolute; left:80px; top:80px; width:50px; height: 50px; background: white; z-index: 2 } </style> <div class="first-div"></div> <div class="second-div"></div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style>
      .first-div{
          width: 300px;
          height: 300px;
          background: purple;  /*这里定义个背景,让我们知道这个div在哪*/
          position: absolute;
          left:50px;
          top:50px;
          z-index: 1
      }
      .second-div{
          position:absolute;
          left:80px;
          top:80px;
          width:50px;
          height: 50px;
          background: white;
          z-index: 2
      }
  </style>
  <div class="first-div"></div>
  <div class="second-div"></div>

这里我们将第一个div和第二个div位置放到一起,方便看z-index的效果。以上代码的样式是紫色的正方形里面有个白色的小正方形。因为小正方形的z-index大于大正方形的z-index,所以能显示出,当我们把.first-div的z-index设置为3,这时候就看不到白色的小正方形了,它被紫色的大正方形无情的挡掉了…
zoom 元素缩放比例
zoom适用于所有元素,用于设置或检索对象的缩放比例,对应的脚本特性为zoom,原比例的值是1。
代码:

CSS

<style> div{ width: 100px; height: 100px; float: left } .first-div{ background: purple; zoom:1.5 } .second-div{ background: black; zoom:1 } .third-div{ background: red; zoom:.5 } </style> <div class="first-div"></div> <div class="second-div"></div> <div class="third-div"></div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<style>
      div{
          width: 100px;
          height: 100px;
          float: left
      }
      .first-div{
          background: purple;
          zoom:1.5
      }
      .second-div{
          background: black;
          zoom:1
      }
      .third-div{
          background: red;
          zoom:.5
      }
  </style>
  <div class="first-div"></div>
  <div class="second-div"></div>
  <div class="third-div"></div>

以上代码将会展示的依次是紫色-黑色-红色的div,大小分别是100px的1.5倍,1倍,0.5倍。
em 和 rem 是什么
1em等于当前的字体尺寸,数值的改变意味着字体大小的调整。em 有继承这个特性,也就是说,外部父元素定义了字体的em大小,内部子元素会继承这一属性的样式。
rem = root em 。顾名思义,root即根部的,顶部的。也就是根部的em,这个根部指的是HTML根元素。所以rem的大小是针对HTML根元素的大小做字体的相对大小的调整。
代码:

CSS

<style> body{ font-size: 12px; } /*html{ font-size: 12px; }*/ div{ width: 200px; height: 100px; float:left } .first-div{ font-size: 1em } .second-div{ font-size: 2em } .third-div{ font-size: 1rem } .fourth-div{ font-size: 2rem } </style> <div class="first-div">Hello World</div> <div class="second-div">Hello World</div> <div class="third-div">Hello World</div> <div class="fourth-div">Hello World</div>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<style>
      body{
        font-size: 12px;  
      }
      /*html{
          font-size: 12px;
      }*/
      div{
          width: 200px;
          height: 100px;
          float:left
      }
      .first-div{
          font-size: 1em
      }
      .second-div{
          font-size: 2em
      }
      .third-div{
          font-size: 1rem
      }
      .fourth-div{
          font-size: 2rem
      }
  </style>
  <div class="first-div">Hello World</div>
  <div class="second-div">Hello World</div>
  <div class="third-div">Hello World</div>
  <div class="fourth-div">Hello World</div>

以上代码分别展示了不同大小的字体,em和rem的区别可以通过仅仅注释body字体样式和html字体样式来看看他们之间的差别。

1 赞 8 收藏 1 评论

图片 1

在 Node.js 中看 JavaScript 的引用

2017/05/05 · JavaScript · NodeJS

原文出处: lellansin   

早期学习 Node.js 的时候 (2011-2012),有挺多是从 PHP 转过来的,当时有部分人对于 Node.js 编辑完代码需要重启一下表示麻烦(PHP不需要这个过程),于是社区里的朋友就开始提倡使用 node-supervisor 这个模块来启动项目,可以编辑完代码之后自动重启。不过相对于 PHP 而言依旧不够方便,因为 Node.js 在重启以后,之前的上下文都丢失了。

虽然可以通过将 session 数据保存在数据库或者缓存中来减少重启过程中的数据丢失,不过如果是在生产的情况下,更新代码的重启间隙是没法处理请求的(PHP可以,另外那个时候 Node.js 还没有 cluster)。由于这方面的问题,加上本人是从 PHP 转到 Node.js 的,于是从那时开始思考,有没有办法可以在不重启的情况下热更新 Node.js 的代码。

最开始把目光瞄向了 require 这个模块。想法很简单,因为 Node.js 中引入一个模块都是通过 require 这个方法加载的。于是就开始思考 require 能不能在更新代码之后再次 require 一下。尝试如下:

a.js

var express = require('express'); var b = require('./b.js'); var app = express(); app.get('/', function (req, res) { b = require('./b.js'); res.send(b.num); }); app.listen(3000);

1
2
3
4
5
6
7
8
9
10
11
var express = require('express');
var b = require('./b.js');
 
var app = express();
 
app.get('/', function (req, res) {
  b = require('./b.js');
  res.send(b.num);
});
 
app.listen(3000);

b.js

exports.num = 1024;

1
exports.num = 1024;

两个 JS 文件写好之后,从 a.js 启动,刷新页面会输出 b.js 中的 1024,然后修改 b.js 文件中导出的值,例如修改为 2048。再次刷新页面依旧是原本的 1024。

再次执行一次 require 并没有刷新代码。require 在执行的过程中加载完代码之后会把模块导出的数据放在 require.cache 中。require.cache 是一个 { } 对象,以模块的绝对路径为 key,该模块的详细数据为 value。于是便开始做如下尝试:

a.js

var path = require('path'); var express = require('express'); var b = require('./b.js'); var app = express(); app.get('/', function (req, res) { if (true) { // 检查文件是否修改 flush(); } res.send(b.num); }); function flush() { delete require.cache[path.join(__dirname, './b.js')]; b = require('./b.js'); } app.listen(3000);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
var path = require('path');
var express = require('express');
var b = require('./b.js');
 
var app = express();
 
app.get('/', function (req, res) {
  if (true) { // 检查文件是否修改
    flush();
  }
  res.send(b.num);
});
 
function flush() {
  delete require.cache[path.join(__dirname, './b.js')];
  b = require('./b.js');
}
 
app.listen(3000);

再次 require 之前,将 require 之上关于该模块的 cache 清理掉后,用之前的方法再次测试。结果发现,可以成功的刷新 b.js 的代码,输出新修改的值。

了解到这个点后,就想通过该原理实现一个无重启热更新版本的 node-supervisor。在封装模块的过程中,出于情怀的原因,考虑提供一个类似 PHP 中 include 的函数来代替 require 去引入一个模块。实际内部依旧是使用 require 去加载。以b.js为例,原本的写法改为 var b = include(‘./b’),在文件 b.js 更新之后 include 内部可以自动刷新,让外面拿到最新的代码。

但是实际的开发过程中,这样很快就碰到了问题。我们希望的代码可能是这样:

web.js

var include = require('./include'); var express = require('express'); var b = include('./b.js'); var app = express(); app.get('/', function (req, res) { res.send(b.num); }); app.listen(3000);

1
2
3
4
5
6
7
8
9
10
var include = require('./include');
var express = require('express');
var b = include('./b.js');
var app = express();
 
app.get('/', function (req, res) {
  res.send(b.num);
});
 
app.listen(3000);

但按照这个目标封装include的时候,我们发现了问题。无论我们在include.js内部中如何实现,都不能像开始那样拿到新的 b.num。

对比开始的代码,我们发现问题出在少了 b = xx。也就是说这样写才可以:

web.js

var include = require('./include'); var express = require('express'); var app = express(); app.get('/', function (req, res) { var b = include('./b.js'); res.send(b.num); }); app.listen(3000);

1
2
3
4
5
6
7
8
9
10
var include = require('./include');
var express = require('express');
var app = express();
 
app.get('/', function (req, res) {
  var b = include('./b.js');
  res.send(b.num);
});
 
app.listen(3000);

修改成这样,就可以保证每次能可以正确的刷新到最新的代码,并且不用重启实例了。读者有兴趣的可以研究这个include是怎么实现的,本文就不深入讨论了,因为这个技巧使用度不高,写起起来不是很优雅[1],反而这其中有一个更重要的问题——JavaScript的引用。

什么鬼,又不知道怎么命名class了

2015/10/25 · CSS · class

原文出处: 结一(@结一w3cplus)   

相信写css的人都会遇到下面的问题:

  •  糟糕,怎么命名这个class,好像不太贴切,要是冲突了怎么办,要不要设计成通用一点…
  •  而改别人css代码的时候则会一直有个疑问:这个class到底是只在这个地方用了,还是其他地方都用了?

于是就有了下面的做法:

  •  最后终于被逼出了个class,简洁也好,中英混搭也罢,看着一头雾水也没关系,反正最后页面显示出来的。
  •  这个class应该是只有这个地方用到,我可以放心写。上线之后。如果没问题,则暗自自我欣赏,看吧问题就这么简单,分分钟搞定呀;如果冲突了,则无限感慨,哎,改的时候我就隐隐不安啊,妈蛋,深坑,这是谁写的,谁写的!!!
  •  不好,这个class说不定其他地方也用到了,我得加个限制范围,加个父元素?要不重新再命名个class吧,比较保险。最后如果没问题则表示还好比较机智,怎么说哥也是混过的,还是有几斤几两的;如果有问题则表示防不慎防啊,这也太太太坑了吧。

由此可见,class的命名真不是一件简单的事,尤其还要兼顾可辨别性与可读性。

JavaScript 的引用与传统引用的区别

要讨论这个问题,我们首先要了解 JavaScript 的引用于其他语言中的一个区别,在 C++ 中引用可以直接修改外部的值:

#include using namespace std; void test(int &p) // 引用传递 { p = 2048; } int main() { int a = 1024; int &p = a; // 设置引用p指向a test(p); // 调用函数 cout

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
#include
 
using namespace std;
 
void test(int &p) // 引用传递
{
    p = 2048;
}
 
int main()
{
    int a = 1024;
    int &p = a; // 设置引用p指向a
 
    test(p); // 调用函数
 
    cout

而在 JavaScript 中:

var obj = { name: 'Alan' }; function test1(obj) { obj = { hello: 'world' }; // 试图修改外部obj } test1(obj); console.log(obj); // { name: 'Alan' } // 并没有修改① function test2(obj) { obj.name = 'world'; // 根据该对象修改其上的属性 } test2(obj); console.log(obj); // { name: 'world' } // 修改成功②

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var obj = { name: 'Alan' };
 
function test1(obj) {
  obj = { hello: 'world' }; // 试图修改外部obj
}
 
test1(obj);
console.log(obj); // { name: 'Alan' } // 并没有修改①
 
function test2(obj) {
  obj.name = 'world'; // 根据该对象修改其上的属性
}
 
test2(obj);
console.log(obj); // { name: 'world' } // 修改成功②

我们发现与 C++ 不同,根据上面代码 ① 可知 JavaScript 中并没有传递一个引用,而是拷贝了一个新的变量,即值传递。根据 ② 可知拷贝的这个变量是一个可以访问到对象属性的“引用”(与传统的 C++ 的引用不同,下文中提到的 JavaScript 的引用都是这种特别的引用)。这里需要总结一个绕口的结论:Javascript 中均是值传递,对象在传递的过程中是拷贝了一份新的引用。

为了理解这个比较拗口的结论,让我们来看一段代码:

var obj = { data: {} }; // data 指向 obj.data var data = obj.data; console.log(data === obj.data); // true-->data所操作的就是obj.data data.name = 'Alan'; data.test = function () { console.log('hi') }; // 通过data可以直接修改到data的值 console.log(obj) // { data: { name: 'Alan', test: [Function] } } data = { name: 'Bob', add: function (a, b) { return a + b; } }; // data是一个引用,直接赋值给它,只是让这个变量等于另外一个引用,并不会修改到obj本身 console.log(data); // { name: 'Bob', add: [Function] } console.log(obj); // { data: { name: 'Alan', test: [Function] } } obj.data = { name: 'Bob', add: function (a, b) { return a + b; } }; // 而通过obj.data才能真正修改到data本身 console.log(obj); // { data: { name: 'Bob', add: [Function] } }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
var obj = {
  data: {}
};
 
// data 指向 obj.data
var data = obj.data;
 
console.log(data === obj.data); // true-->data所操作的就是obj.data
 
data.name = 'Alan';
data.test = function () {
  console.log('hi')
};
 
// 通过data可以直接修改到data的值
console.log(obj) // { data: { name: 'Alan', test: [Function] } }
 
data = {
  name: 'Bob',
  add: function (a, b) {
    return a + b;
  }
};
 
// data是一个引用,直接赋值给它,只是让这个变量等于另外一个引用,并不会修改到obj本身
console.log(data); // { name: 'Bob', add: [Function] }
console.log(obj); // { data: { name: 'Alan', test: [Function] } }
 
obj.data = {
  name: 'Bob',
  add: function (a, b) {
    return a + b;
  }
};
 
// 而通过obj.data才能真正修改到data本身
console.log(obj); // { data: { name: 'Bob', add: [Function] } }

通过这个例子我们可以看到,data 虽然像一个引用一样指向了 obj.data,并且通过 data 可以访问到 obj.data 上的属性。但是由于 JavaScript 值传递的特性直接修改 data = xxx 并不会使得 obj.data = xxx。

打个比方最初设置 var data = obj.data 的时候,内存中的情况大概是:

| Addr | 内容 | |----------|-------- | obj.data | 内存1 | | data | 内存1 |

1
2
3
4
|   Addr   |  内容  |
|----------|--------
| obj.data |  内存1 |
|   data   |  内存1 |

所以通过 data.xx 可以修改 obj.data 的内存1。

然后设置 data = xxx,由于 data 是拷贝的一个新的值,只是这个值是一个引用(指向内存1)罢了。让它等于另外一个对象就好比:

| Addr | 内容 | |----------|-------- | obj.data | 内存1 | | data | 内存2 |

1
2
3
4
|   Addr   |  内容  |
|----------|--------
| obj.data |  内存1 |
|   data   |  内存2 |

让 data 指向了新的一块内存2。

如果是传统的引用(如上文中提到的 C++ 的引用),那么 obj.data 本身会变成新的内存2,但 JavaScript 中均是值传递,对象在传递的过程中拷贝了一份新的引用。所以这个新拷贝的变量被改变并不影响原本的对象。

class命名到底有多难

第一,class跟id不一样,class本来就是设计用来可以重复利用的,而id才是设计唯一的(如果遵循BEM,class几乎也都是唯一的了)。

第二,样式是可以覆盖的,而且先按照权重,再按照定义的先后顺序。也许你花了十分钟设计定义的一个class样式,人家分分钟就给你干掉了,这得多恼火;也许这个页面好好的,跑到另一个页面就跟原先的样式有了冲突。

所以class命名的难就难在既要重复利用,又要避免样式的冲突。如果要重复利用,那么当然是越简单越好,越抽象可用的地方越大,太具体了就完蛋了。而如果要避免样式冲突。BEM的方式最简单,class都唯一了,那还冲突个毛线;其次就是通过父元素限定作用域,可以搞几个层级,而不是单独一个class定义样式;还有就是追加class,来实现差异化;最后不同的页面不同的文件,你用你的我用我的。

CSS

// BEM .imgslide__item__img{} // 父元素限定 .imgslide .item .img{} // 追加class .img{} .img--special{} // 不同页面不同文件 // a.html & a.css .img{} // b.html & b.css .img{}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// BEM
.imgslide__item__img{}
 
// 父元素限定
.imgslide .item .img{}
 
// 追加class
.img{}
.img--special{}
 
// 不同页面不同文件
// a.html & a.css
.img{}
// b.html & b.css
.img{}

总之,不管有多难,我们还是得试试去解决问题,去寻找一些规律。

Node.js 中的 module.exports 与 exports

上述例子中的 obj.data 与 data 的关系,就是 Node.js 中的 module.exports 与 exports 之间的关系。让我们来看看 Node.js 中 require 一个文件时的实际结构:

function require(...) { var module = { exports: {} }; ((module, exports) => { // Node.js 中文件外部其实被包了一层自执行的函数 // 这中间是你模块内部的代码. function some_func() {}; exports = some_func; // 这样赋值,exports便不再指向module.exports // 而module.exports依旧是{} module.exports = some_func; // 这样设置才能修改到原本的exports })(module, module.exports); return module.exports; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function require(...) {
  var module = { exports: {} };
  ((module, exports) => { // Node.js 中文件外部其实被包了一层自执行的函数
    // 这中间是你模块内部的代码.
    function some_func() {};
    exports = some_func;
    // 这样赋值,exports便不再指向module.exports
    // 而module.exports依旧是{}
 
    module.exports = some_func;
    // 这样设置才能修改到原本的exports
  })(module, module.exports);
  return module.exports;
}

所以很自然的:

console.log(module.exports === exports); // true // 所以 exports 所操作的就是 module.exports

1
2
console.log(module.exports === exports); // true
// 所以 exports 所操作的就是 module.exports

Node.js 中的 exports 就是拷贝的一份 module.exports 的引用。通过 exports 可以修改Node.js 当前文件导出的属性,但是不能修改当前模块本身。通过 module.exports 才可以修改到其本身。表现上来说:

exports = 1; // 无效 module.exports = 1; // 有效

1
2
exports = 1; // 无效
module.exports = 1; // 有效

这是二者表现上的区别,其他方面用起来都没有差别。所以你现在应该知道写module.exports.xx = xxx; 的人其实是多写了一个module.。

class命名的发展历程

关于class的命名,其实跟人名也差不多,如果要想别人看得懂,那关键还是在于可识别性。到目前为止class的命名大概经历了下面几个重要阶段:

  •  混沌阶段,没有规则就是最好的规则
  •  原子类阶段,聚集神龙现身手
  •  模块阶段,以职能划分,添加前缀
  •  BEM阶段,规则有序

更复杂的例子

为了再练习一下,我们在来看一个比较复杂的例子:

var a = {n: 1}; var b = a; a.x = a = {n: 2}; console.log(a.x); console.log(b.x);

1
2
3
4
5
var a = {n: 1};  
var b = a;
a.x = a = {n: 2};  
console.log(a.x);
console.log(b.x);

按照开始的结论我们可以一步步的来看这个问题:

var a = {n: 1}; // 引用a指向内存1{n:1} var b = a; // 引用b => a => { n:1 }

1
2
var a = {n: 1};   // 引用a指向内存1{n:1}
var b = a;        // 引用b => a => { n:1 }

内部结构:

| Addr | 内容 | |---------|-------------| | a | 内存1 {n:1} | | b | 内存1 |

1
2
3
4
|   Addr  |     内容     |
|---------|-------------|
|    a    |  内存1 {n:1} |
|    b    |  内存1       |

继续往下看:

a.x = a = {n: 2}; // (内存1 而不是 a ).x = 引用 a = 内存2 {n:2}

1
a.x = a = {n: 2};  //  (内存1 而不是 a ).x = 引用 a = 内存2 {n:2}

a 虽然是引用,但是 JavaScript 是值传的这个引用,所以被修改不影响原本的地方。

| Addr | 内容 | |-----------|-----------------------| | 1) a | 内存2({n:2}) | | 2) 内存1.x | 内存2({n:2}) | | 3) b | 内存1({n:1, x:内存2}) |

1
2
3
4
5
|    Addr   |          内容         |
|-----------|-----------------------|
| 1) a     |  内存2({n:2})         |
| 2) 内存1.x |  内存2({n:2})         |
| 3) b     |  内存1({n:1, x:内存2}) |

所以最后的结果

  • a.x 即(内存2).x ==> {n: 2}.x ==> undefined
  • b.x 即(内存1).x ==> 内存2 ==> {n: 2}

混沌阶段

这个没什么好说的,刚开始学html的都是这样,名字先简单的来,不够再添加1,2,3什么后缀,或者中英混搭等等,如下:

CSS

h1.title h2.title2 h2.title2-1 h2.title2-2 div.hd div.hd-s div.hd2 div.hd-xiangxi

1
2
3
4
5
6
7
8
h1.title
h2.title2
h2.title2-1
h2.title2-2
div.hd
div.hd-s
div.hd2
div.hd-xiangxi

一个字,太乱。完全无章程,规律可循,想怎么写就怎么写,写到哪里是哪里。看class去猜意思很可能就是错误的,如.red{color:red;font-size:14px;},明明说好的红色,却顺带定义了个字体大小。

本文由澳门新葡亰手机版发布于web前端,转载请注明出处:又不知道怎么命名class了

上一篇:元素的几种方法的对比,层叠上下文 下一篇:没有了
猜你喜欢
热门排行
精彩图文