Write the Code. Change the World.

分类目录
3月 19

发表于 • 1,802 views • 没有评论!

前端

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

有两种方法：

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

发表于 • 3,210 views • 没有评论!

前端

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

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

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

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

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

3月 08

发表于 • 1,701 views • 没有评论!

前端

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

可以先看下他们的demo：

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

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

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

1月 28

发表于 • 2,822 views • 1 条评论

前端

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 方法即可。

11月 06

发表于 • 2,676 views • 没有评论!

前端

现象

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

处理

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

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

发表于 • 2,700 views • 没有评论!

webpack,前端

在用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属性。
继续阅读

10月 17

发表于 • 2,426 views • 没有评论!

前端

前边

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 关键字重命名。
    继续阅读

9月 21

发表于 • 2,348 views • 没有评论!

vue,前端,工具,框架

vue

https://cn.vuejs.org/

https://www.awesomes.cn/

http://element.eleme.io/#/zh-CN/

https://www.iviewui.com/

https://n3-components.github.io/N3-components/component.html

bootstrap + vue

http://yuche.github.io/vue-strap/

https://bootstrap-vue.js.org/

https://uiv.wxsm.space/getting-started/

react

https://ant.design/index-cn

css study

http://cssreference.io/

js effects

https://threejs.org/

https://github.com/iview/iview-doc

https://threejs.org/examples/?q=waves#canvas_particles_waves

https://segmentfault.com/q/1010000010716445

9月 04

发表于 • 2,707 views • 没有评论!

前端

很多框架，网站，实现的模态窗口体验不是那么完美。不过，知乎的模态窗口却是很完美的。比如登录。知乎的模态窗口实现了以下几点：

  1. 弹出模态窗口后。所有滚动条都隐藏（如果有的话），并且鼠标滑轮，无论怎么滚动，被半透明遮挡在下边的内容岿然不动。

  2. 弹出模态窗口后。窗口在水平和垂直方向是都是居中的。

  3. 关闭模态窗口后。滚动条功能恢复。

Demo: https://api.qiubg.com/demo/vnmodal

gitHub: https://github.com/vini123/vnmodal
继续阅读