Defined

最近遇到个bug, 事件多次触发相关.

Main()

代码在这.想表达的意思就是在设定触发器之后创建的元素, js没法像css一样取到相关元素.

也不知道说什么好, 过五七的时候居然老是想着妈妈如果不在了怎么办.这么久了,
他们都变老了… 妈妈真的时时刻刻想着我, 我却因为在家闲没有
效率不想回家. 也不知道自己在讲什么, 最近真的很难受, 通过跑步来缓解自己的压力,
.一想到家里, 也不在意什么了, 总会过去的.

2018了, 自己要更负责啊!

Defined

More efficient, more convenient!

Main()

With SCSS’s features

  1. @import with file
  2. variable usage
  3. Mixin css blocker

index

  1. config.scss
    save variables for static attributes
  2. common scss
    save styles for reusable[@import config.scss]
  3. other_single.scss
    includes the config.scss[@import config.scss]
  4. and Refer will be
    link src common.css / single.css

===01/31 Update===

最近看到一些文章里面有一个很重要: CSS是从右往左进行渲染的
.container .left span 像这个可能就会非常低效, 因为浏览器需要全局找一遍span标签, 之后进行进一步筛选.
所以开发中尽量减少嵌套, 尽量少使用标签选择

Refer

Gist
guide-sass

Defined

Make picture full hover the background without repeat or crop!

SCSS below, not css.

Core CSS:
background-size: [cover, contain, (width, height)]

HTMLStructure()

1
2
3
4
5
<div class="wrapper">
<div class="text">
Long Text big as 4096bits
</div>
</div>

CssShows()

1
2
3
4
5
.wrapper {
width: 80vw;
height: 80vh;
background-image: url(xxx.png);
}

with size condition, list two types below:

size image > div.wrapper

Plan A

.wrapper css
background-size: cover;

But
this way may cause the crop of the picture, so the div size should be the
same proportion with the background image.

Drop this.

Plan B

Just with size same as the div.wrapper.

1
2
3
4
5
6
7
8
9
$wrapperWidth = 80vw;
$wrapperHeight = 80vh;

.wrapper {
width: $wrapperWidth;
height: $wrapperHeight;
background-image: url(xxx.png);
background-size: $wrapperWidth $wrapperHeight;
}

Seems good, But if adding the padding, not good enough: the image became smaller!

So, we need add this css: IE11+ only

1
2
3
4
.wapper{
/* codes */
box-sizing: border-box;
}

Or, we must caculating the width and height by self.

size image < div.wrapper

CSS provide a nice attribute for us: contain;
Picture will scaling to the original size if the div big enough.
But
If div’s size is much bigger that picture, the picture will repeat for several times.

Resolution here. PS: The premise is we need know the size of picture before.

1
2
3
4
5
6
7
$picWidth = 250;
$picHeight = 250;
.wrapper {
background-size: contain;
width: ($picWidth*3)px;
height: ($picHeight*3)px;
}

text-scroll()

condition:

1
2
3
4
5
6
$sizeMustBeDecalred = 100px;
.text {
width: $sizeMustBeDecalred;
height: $sizeMustBeDecalred;
scroll: auto;
}

Referer

scaling_background_images | MDN

奶奶走了, 祝在天堂安好.

10:20 11/30/2017

Question

开发过程中会出现一个比较奇怪的问题, 明明写了相关函数xxx却提示不存在该函数.

ReferenceError: xxx is not defined at HTMLButtonElement.onclick

示例代码:

1
<button type="button" onclick="clickMe">ClickMe</button>

1
2
3
4
5
window.onload = function() {
function clickMe() {
alert(/clicked/);
}
}

Main()

解释

仔细考虑了一下, 这个还要涉及到我以前文章里面的图例: 浏览器性能优化
window.onload的真正执行是在HTML所有资源执行完之后执行(如果你的script标签在body底部的话);像前面提到的, html代码解析完成之后script标签才生效.所以clickMe函数并没有被button所绑定.

解决方式

  1. window.onload外部编写函数, 这样就能在dom生成的时候进行绑定.
  2. 在window.onload内手动绑定事件, 缺点是需要定位button(id/class)

Refer

[stackoverflow - Uncaught TypeError: Cannot set property ‘onclick’ of null (https://stackoverflow.com/questions/17080502/uncaught-typeerror-cannot-set-property-onclick-of-null)

Defined

最常见的问题是关于onClick内为什么普通的调用this会出现undefined.
复现:

1
2
3
4
5
6
7
8
9
class Test extend Component {
clickMe() {
console.log(this);
}

render(
<button type="button" onclick={this.clickMe}>Click Me</button>
)
}

Main()

class原型

从原因说起, ES6的class原型是以function和原型链的设计模式制作的.
以下为例子:

[email protected]

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
//  ES6
class User {
constructor(firstName, lastName) {
this.firstName = firstName
this.lastName = lastName
}
fullName() {
return `${this.firstName} ${this.lastName}`
}
}

let user = new User('David', 'Chen')
user.fullName() // David Chen
// 以上的类定义语法非常直观,它跟以下的 ES5 语法是一个意思:
function User(firstName, lastName) {
this.firstName = firstName
this.lastName = lastName
}

User.prototype.fullName = function() {
return '' + this.firstName + this.lastName
}

所以既然是function, 他就必须遵守this作用域的限定, function内部会产生一个context, 指向直接调用的目标.具体请看这: about-this

解决办法

  1. 用arrow function的this继承包含该function
    1
    2
    3
    render(
    <button type="button" onclick={()=>{this.clickMe()}}>Click Me</button>
    );

解释: ()=>{}他的context就是调用它的function Test(也就是class Test), 那么this也就能解释调用到了clickMe函数.
再说clickMe函数, 由于是function, 他的context继承了直接调用函数也就是arrow function, 由于arrow function的context就是该class,
所以clickMe也就调用了class.

  1. 使用bind()直接绑定this
    简单解释一下, 相当于提前对this的判定做出了结算.

PS. 还有由于语法问题, 所以无法出现that=this这种做法.