非你网

仅仅看表象，以为是 js 实现的效果，却是 css 实现的。这里有一个例子，利用 radio 的单选特性，实现单选效果。

步骤

1. 创建 input标签，邻居创建 span标签。
2. 父容器相对定位，input绝对定位，left，top为0，opacity为0。看不见看不见。
3. 利用 + ，~ 处理邻居 div。
4. 利用 checked 实现变化。

让 input 透明掉，其实就是让你去美化 span，不再需要 radio 那难看的容颜。是不是有点不道德啊。

请看 code：

<div class="box">

  <div class="tags-select">
    <label class="tag-select">
        <input type="radio" name="bye-type" value="1" checked>
        <span class="name">官方标配</span>
    </label>

    <label class="tag-select">
        <input type="radio" name="bye-type" value="2">
        <span class="name">官方标配 + 蓝牙耳机</span>
    </label>

    <label class="tag-select">
        <input type="radio" name="bye-type" value="3" disabled>
        <span class="name">官方标配 + 充电宝</span>
    </label>
  </div>

</div>

<!-- 利用radio唯一性，实现了不用js也能实现的效果。右边是 scss -->

.tags-select{
  font-size: 0;

  > .tag-select{
      position:relative;
      display:inline-block;
      font-size: 14px;
      margin: 5px;
      color: #fff;


     .name{
         display: block;
         line-height: 20px;
         padding: 8px 10px;
         border-radius: 5px;
         background-color: #FE7D91;
         cursor:pointer;
     }

     .name:hover{
         background-color: #FE3591;
     }

     input[type="radio"]{
         position:absolute;
         z-index: -1;
         opacity: 0;

         //选中
         &:checked +.name{
             background-color: #FE3591;
         }

         //禁用
         &:disabled +.name{
           background: #eee;
           color: #999;
           cursor: not-allowed;
         }
     }
  }
}

.box{
    display:flex;
    width:100%;
    height:100px;
    justify-content:center;
    align-items:center;
}

记得，上边使用了 scss。

效果

https://jsfiddle.net/vini123/ad30qpyb/

在传统 div 排版中。padding竟会占用父容器的宽高，这个很影响心情和需要。

比如下边这个布局：

.group{
   margin:20px;
}

.item{
    display:inline-block;
    width:250px;
    height:40px;
    line-height:40px;
    background-color:#FE7D91;
    color:#fff;
    border-radius:3px;
 }

.item label{
    float:left;
    width:35%;
    text-align:right;
    font-size:16px;
  }

.item label ~div{
    float:left;
    width:65%;
    font-size: 14px;
  }

<div class="group">
  <div class="item"> 
    <label>神奇</label>
    <div>动物在哪里</div>
  </div>
</div>

使用 box-sizing，容器宽度都不会被撑开。

还有一种方法，就是使用 flex 布局。

完整的demo：https://jsfiddle.net/vini123/kbecxju7/1/

参考

http://www.w3cplus.com/content/css3-box-sizing

一劳永逸的搞定 flex 布局： https://juejin.im/post/58e3a5a0a0bb9f0069fc16bb

div使用float时，父容器的高度不能撑开自适应，该怎么处理呢。

有两种方法：

1. 在div的后边额外加一个div，并设置样式 clear:both
2. 在父容器中，设置样式 overflow:auto;

花瓣的内容排版是使用瀑布流的方式排版。实现瀑布流式的排版的插件蛮多的，blocksit 就是一个比较简便的插件。

依赖少，仅仅依靠 jquery。 css也少。用该插件，注意以下几个问题就可以了

1. 每次执行 BlocksIt 之前，设置父容器的宽度的时候要正确。

2. 图片加载完成后，再 BlocksIt 一次。防止，图片排版错乱。

其实，排版的是图片的父容器。使用的是绝对定位。而为什么总是说图片，就是因为所要展示的中心是图片。围绕图片，可以在图片上放置div，图片下边，等放置div。其结构可以有下边这样的层次构成。
继续阅读

在做 banner 切换的时候，swiper插件刚好能用上，效果也非常好。

可以先看下他们的demo：

http://www.swiper.com.cn/demo/index.html

滚动条效果，都做的非常有弹性。有需要的可以去尝试。

3D滚动切换也非常棒。有需要的可以去尝试。

textarea 原本是不会自适应高度的。可恨的滚动条也总会出现。想要让textarea自适应高度的，就用 js 吧。

自适应高度

$('textarea').each(function () {
    this.setAttribute('style', 'height:' + (this.scrollHeight) + 'px;overflow-y:hidden;');
}).on('input', function () {
    this.style.height = 'auto';
    this.style.height = (this.scrollHeight) + 'px';
});

textarea 内容改变侦听

$('textarea').bind('input propertychange', function() {
    $('.msg').html($(this).val().length + ' characters');
});

额外赠送 smplemde

https://github.com/sparksuite/simplemde-markdown-editor

可隐藏bar，可设置最小高度，可侦听变化，可复制粘贴图片。

额外赠送 js markdown->html

https://github.com/chjj/marked

调用 marked 方法即可。

现象

android手机打开html网页，点击按钮时，down 状态会出现阴影。

处理

给这些按钮加一个样式即可。如下：

.no-shadow{
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    -webkit-tap-highlight-color: transparent;
}

在用webpack打包的时候，所打包的文件，会经常使用到 module.exports,exports,export和export default,import与require 这些语法。看起来眼花缭乱，其实，都是有迹可循的。

基本问题

1. module.exports 和 exports 是属于 CommonJS 模块规范。

2. export 和 export default 是属于 es6 语法。

3. 同样 import 和 require 分别属于 es6 和 CommonJS。

4. module.exports 和 exports、export 和 export default 都是导出模块。 import 和 require 则是导入模块。

module.exports 和 exports 的区别与联系

Node应用由模块组成，采用CommonJS模块规范。根据这个规范，每个文件就是一个模块，有自己的作用域。在一个文件里面定义的变量、函数、类，都是私有的，对其他文件不可见。

CommonJS规范规定，每个模块内部，module变量代表当前模块。这个变量是一个对象，它的exports属性（即module.exports）是对外的接口。加载某个模块，其实是加载该模块的module.exports属性。
继续阅读

前边

es6 语法使用也越来越多了，本来已经落后了，再不学习就更落后落后了。

es6模块设计思想更是突出。es6模块不是对象，而是通过export命令显式指定输出的代码，再通过import命令输入。es6模块加载是静态加载，使得静态分析成为可能。有了它，就能进一步拓宽 JavaScript 的语法，比如引入宏（macro）和类型检验（type system）这些只能靠静态分析实现的功能。

es6模块自动采用严格模式，不管你有没有在模块头部加上"use strict";。

既然是模块，模块功能怎么构成呢。模块功能有 export 和 import 两部分构成。export命令用于规定模块的对外接口，import命令用于输入其他模块提供的功能。

export

一个模块，就是一个独立的文件。通过export，将内部的变量，对象，方法，类输出给外部。并且export在顶级使用，如果在块内部使用就会报错。

export有以下一些规定。

1. export 必须在顶级使用。

2. export命令规定的是对外的接口。必须用{}包裹起来，或直接 export。

3. export 输出接口与外是动态绑定的。 无论改变哪个，该数据都会改变。

4. 既然export是输出接口，就有一个接受接口。接受用import，也需要要用{}包裹起来。

5. 一个模块中，可以有多个 export。

6. export可以使用 as 关键字重命名。
   继续阅读