Defined

To clear up the confusion of prototype in this which really confused me for months before. All stuff work around with this article. If you still don’t know the answer, check the link and find @daremkd‘s answer.

Main()

Keys: __proto__, prototype, prototype chain, this in prototype several examples

Mind Map

drew by the answer in refer link.
mind-map

an important part

1
2
var A = function() { this.hey = function() { alert('from A') } };
var a1 = new A()

a1.__proto__ property is assigned to point at the same thing as A.prototype points to (another empty object {} )

where to find __proto__ and prototype?

__proto__ in every Object included function.
prototype only create when function created.

Why __proto__?

-- Delegation | prototype chain (could refer prototype design pattern)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
const Orin = {
result: 'I\m proto value',
say: function() {
console.log(this.result);
}
}
Orin.say()
// Im proto value
let childA = Object.create(Orin);
childA.__proto__
// {result: "Im proto value", say: ƒ}
childA.say();
// Im proto value
childA.result = 'I\'m new One';
childA.say();
// I'm new One

Attention: checkout this in this example, it will follow the Objects’ __proto__ and point it, which means it’s dynamic.

Why prototype?

-- act like a member of class-based Languagers :)

Bad way.

1
2
3
4
5
6
7
8
9
10
const A = function () {
this.say = function() {
console.log('Someone like you');
}
}
let a1 = new A();
a1.say();
let a2 = new A();
a2.say();
a1.say == a2.say // false

a1 and a2 both act like inherit the say function, BUT the result a1.say == a2.say is false.
The truth is every new instance created, say function will be create again and again, that will really drag system slow and fill up the stack / memory.

Good practice:

1
2
3
4
5
6
7
8
9
10
11
12
13
const B = function() {};
B.prototype.song = 'One is glad to be of service';
B.prototype.say = function() {
console.log(this.song);
}
let b1 = new B();
b1.say(); // One is glad to be of service
let b2 = new B();
b2.say(); // One is glad to be of service
b1.say === b2.say // true

b1.song = 'Say something';
b1.say(); // Say something

  • b1 stand for

    1
    2
    3
    4
    5
    6
    7
    8
    9
    B {
    song: "Say something"
    __proto__: {
    say: ƒ()
    song: "One is glad to be of service"
    constructor: ƒ()
    __proto__: Object
    }
    }
  • and b2

    1
    2
    3
    4
    5
    6
    7
    8
    B {
    __proto__: {
    say: ƒ()
    song: "One is glad to be of service"
    constructor: ƒ()
    __proto__: Object
    }
    }

Attention: the problem of this in prototype seems to be solved in b1 and b2 results, this is dynamic.
and the mechanism is a.__proto__ = A.prototype.

more about this

check this link out!

new mind map

This image explained the relationship among function, Function and Object. Apparently, Object is the highest Constructor.
mind-map2

new function() and new Function()

eval and Function
You should avoid eval() and new Function().

demo:

new Function() usage:
Inner variables scope is Global

new Function(param1, param2[, …], functionBody);

Reference

Use of ‘prototype’ vs. ‘this’ in JavaScript? - stackoverflow
different way to create object

Defined

Limited by copyright, Netease Music’s songs lost much, need change, so I chose Spotify.
Feat Spotify more songs and make it more accurate. I still need songs which I loved before.

Main()

Mechanism

  • Got song name from Before API, and insert with Spotify quick insert API.
  • Exactly input: insert JSON.
  • what workflow do: AS applet for IFTTT | get playlist id and generate API playlist URL, than filter the playlist name, every song’s track name, artist name from the JSON in the new URL.
  • what IFTTT do: revoke Spotify official API to create playlist and tracks provides by workflow.
  • How to deal with JSON in workflow? Click here in iOS

Source

Workflow - Link
and IFTTT need create DIY.

steps down below:

  1. create new applet, search workflow and add the name of certain workflow applet.
  2. set as the picture says: IFTTT

PS: workflow and IFTTT really do a good job.
More API and More convenient.

And it’ll be better if Spotify bring back inside lyric instead of Musixmatch extension.

With other source transfer to Spotify

only need to know is all playlist info: [playlist name, ] track name, artist name

Reference

用 Workflow 从网易云音乐迁移数据至 Apple Music 或 Spotify - 少数派
Manual - workflow
JSON-viewer

Defined

Write this article as an reference for writing and understanding in the future.

Main(before ES6)

Constructor Pattern

What is Constructor in object-oriented Language

A special method used to initialize a newly created Object once memory has been allocated for it. So as says, this pattern will create new object.

Common Formula

1
2
3
4
5
6
7
8
9
10
/* new variable created from Car is an `Object` */
function Car(model, year, miles) {
this.model = model;
this.year = year;
this.miles = miles;

this.toString = function() {
return this.model + ' has done ' + this.miles + ' miles';
}
}

and there are two drawback:

  • without the help of prototype, toString() function will revoke every time when create new Object which will drag client `slower.
  • function like toString also would be covered by the function definition.

So the enhanced way:

1
2
3
Car.prototype.toString = function() {
return this.model + ' has done ' + this.miles + ' miles';
}

PS: Object.defineProperty() and its plural form also do us a favor.

Expand Reading - Understanding the difference between object.create and new Function()

Prototype Pattern

Define

The prototype pattern does not include any notion of initialization beyond linking an object to a prototype.
And as the author says

Real prototypal inheritance, as defined in the ECMAScript 5 standard, requires the use of Object.create.

Common Formula

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
const vehiclePrototype = {
init: function(carModel) {
this.model = carModel;
},
getModel: function() {
return this.model;
}
};
let teslaS1 = Object.create(vehiclePrototype, {
releaseDate: {
value: 'June 29 2010',
configurable: true,
writable: true,
enumerable: true,
}
});
teslaS1.init('Tesla S-1');

console.log('Car model ' + teslaS1.getModel() + ' released on ' + teslaS1.releaseDate);

Expand Reading - Use of ‘prototype’ vs. ‘this’ in JavaScript? - stackoverflow

Singleton Pattern

Core: only one object/variable as named, private with closure(before ES6).

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
43
44
45
46
47
48
49
50
51
var mySingleton = (function () {

// Instance stores a reference to the Singleton
var instance;

function init() {

// Singleton

// Private methods and variables
function privateMethod(){
console.log( "I am private" );
}

var privateVariable = "Im also private";

var privateRandomNumber = Math.random();

return {

// Public methods and variables
publicMethod: function () {
console.log( "The public can see me!" );
},

publicProperty: "I am also public",

getRandomNumber: function() {
return privateRandomNumber;
}

};

};

return {

// Get the Singleton instance if one exists
// or create one if it doesn't
getInstance: function () {

if ( !instance ) {
instance = init();
}

return instance;
}

};

})();

Here show the examples for ES6 enviornment.

Reference

Essential-JS-design-pattern | 2017

Defined

本文由来: 构造函数和原型继承的区别是什么?
顺便推荐2017截止最新的动物电子书 - Learning JavaScript Design Patterns 作者Addy Osmani

Main()

Outline

  1. Design Pattern: Constructor
    this in constructor ???
  2. Design Pattern: Prototype
  3. this in prototype
  4. Constructor VS Prototype
    5.
    .. ES6 class realization with ES5

Design Pattern: Constructor

Constructor VS Prototype

https://www.thecodeship.com/web-development/methods-within-constructor-vs-prototype-in-javascript/

@aymanfarhat
In fact no classes in JavaScript (Before ES6), and what you may refer to as a class is known as a constructor. That is because JavaScript is not your classic class-based language but rather a prototype-based language.

about this

prototype - this | stackoverflow

Andress
The “this” keyword works a little bit diffrent in javascript than it does in other languages. “this” holds a reference to the object from which the function was called. If the function is not invoked as method on an object, this will refer to the global object (the “window” object).

MDN

1
2
3
4
5
6
7
8
9
10
11
function Mammal() {
this.isMammal = 'yes';
}

function MammalSpecies(speciesName) {
this.species = speciesName;
}

MammalSpecies.prototype = Mammal;

console.log(MammalSpecies.prototype.constructor);

Reference

Methods Within Constructor vs Prototype in Javascript
setPrototypeOf - MDN
JavaScript 实现类的继承
Understanding the difference between Object.create() and new SomeFunction() | stackoverflow

Defined

写了比较久的居中样式, 做个总结看看以后可以用什么. 目的上来说不关注IE兼容性!

Main()

相关分类

  • container: inline/block;
  • container-size: known/unknown;
  • child: inline/block;
  • xORy: horizon/vertical/all

Absolute-Center

利用 position:absolute; 的绝对居中.

Constraint: 父级对象relative; 高度必须声明 | 被内容撑起高度;
Code:

1
2
3
4
5
6
7
8
.absolute-center {
position: absolute;
margin: auto;
top: 0;
right: 0;
bottom: 0;
left: 0;
}

Attention: 一旦position设置为absolute之后, 该tag会变成block element.
Advantages: IE8+; 自适应
Caveats: 防止内容过多导致的溢出需要设置overflow

How it works:
利用的是margin:auto;在标准中的相关制定概念的使用.以下是原文,horizonal-center同理

w3.org
If none of the three [top, bottom, height] are ‘auto’: If both ‘margin-top’ and ‘margin-bottom’ are ‘auto’, solve the equation under the extra constraint that the two margins get equal values. AKA: center the block vertically

一旦满足上面条件, margin:auto;中的top和bottom会变成同一个值而不是0, 所以能做到vertical-center.

Transform:
如果需要一边靠齐例如Right Align, 相关代码则改为: left: auto;&&right: 0;

Transform

Constraint: 这个方法我用的比较多, 不过transform本身仅支持IE9+ PS: 突然发现我原来从caniuse那边查的都是完全适配状态, IE9需要添加-ms-
Code:

1
2
3
4
5
6
7
8
9
10
11
.transform-center {
position: absolute;
/* OR position: relative; */
width: 50%;
margin: auto;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}

这个原理可以看一下box-model和下面的negtive margin概念一样

Negative Margin(deprecated)

Constraint: 固定size; 即无法响应式
Advantages: 唯一优点差不多就是兼容IE6+了吧
Code:

1
2
3
4
5
6
7
8
9
10
.negative-margin-container {
width: 300px;
height: 300px;
padding: 20px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -170px; /*150 + 20*/
margin-left: -170px;
}

Table Cell

Constraint: vertical-align: middle; 仅用于inlinetable-cell box样式
Advantages: 兼容性

1
2
3
4
5
6
7
8
9
10
11
.table-container {
display: table;
}
.table-container .table-cell {
display: table-cell;
vertical-align: middle;
}
.table-container .table-cell .inner-content{
width: 50%;
margin: 0 auto;
}

Inline-Block vertical-align

原理和table cell一样, 不过利用伪元素::after创建了一个ghost element保证高度可以参考.
因为hack程度比较高而且好像也没有其他的优点??

Flex Box

这个就不讲了, 过几天开始写项目一起放进来写.
贴一张segmentfault上的一张图
flex-box

display: -webkit-box

On draft, should be deprecated in few days.
link | MDN

Conclusion

依据IE兼容性递增选择: Absolute Center(IE8-10) => transform(IE9+) => Flex(IE9+)
其他的算是legacy了

Reference

absolute centering - shshaw
manual - center code
center-in-the-unknown - csstricks

Defined

本篇写一下前人总结便于自己今后翻阅. clear 称之为闭合浮动

Main()

对于引言的理解

可以把float理解成<float>的闭合标签
根据定义, float:left为, 需要在该元素后面添加一个</float>进行闭合, 从而使其遵循上层的natural flow;
float:right同理, 需要的是<float>, 用伪元素就是container::before.

float弊端

float会导致使用该元素 及其 子元素(一般为inline)脱离natural flow, 导致排版错误.
所以采用clear来保证不会出错.

clear操作对象

操作对象为 自身 ;所以需要注意一下相关伪元素before,after的作用对象应该是自身而不是他的前后.

position 和 float 优先级相关

position: absolute;优先float触发, 即float没有产生效果.

PS: 最近写到一个布局遇到position和display

关于BFC

BFC: block fromatting contexts / flow root(CSS3)

一丝冰凉
BFC的元素就是一个独立的盒子,里面的子元素不会在布局上影响外面的元素

常见BFC创建条件

  • 浮动元素
  • position: absolute | fixed
  • overflow 值不为 visible 的块元素
  • display: inline-block | flex | grid
  • .etc

结合上面两个就能解释为什么overflow: hidden/auto;也可以闭合浮动的原因了.

notice:
正常来说闭合::after即可
::before一般用于消除margin collapsing - 清除浮动 => 创建了BFC => float container内拥有了refer block element, 所以不会出现collapsing现象.

相关例子

Example1:


Example2

最后

顺便提一下兼容性: inline-block: IE8+; flex: IE11+

Reference

优先看 | Clear && BFC - 一丝冰凉
Clear
Position - display - float
easyclearing

Defined

为了让html更好的被解释.

Main()

=== 01-26 Update ===

发现人家MDN早就给归类了, 下面就当给自己写日记了. HTML element reference

Layout

  1. section-MDN
    a list of search results and a map display and its controls don’t have specific elements, and could be put inside a <section>.and normally will attach a heading. 一般用于文档提纲(outline)

  2. <header> navigation | introductory | logo | search form | name.etc

  3. nav>.*>a:href navigation
  4. <main> tag唯一.
  5. <footer> author | copyright | links | section页脚
  6. <aside> 一般为和主旨不相关的内容(广告, 外传etc.)

上述布局样例: demo-MDN

with Content

block

  1. <pre> content with preformatted
  2. <blockquote> block paragraph with other source from cite
  3. dl>(dt>dfn + dd>abbr+p) descriptions list
  4. <figure> self-contained / graphic | photo | charts | codes, 通常伴有 <figcaption>.

inline

  1. <q> inline paragrah with other source from cite
  2. <em> emphasize
    <strong> importance
    <mark> notation purpose, mark or highlight
    <b> 无特殊语义, 仅用于区分. e.g. <b class="lead">可以表示文章第一句话.
  3. 指示/特殊名词
  4. <small> 声明类相关(免责/许可) 注意事项
    <s> strikethrough; content with not relevant / not accurate any longer
    <u> underline; stand for name with certain place / person
    underline><ins> insert; with cite and datetime

    类似于text-decoration这种在非必须条件下就可以用前面两种替代了

    delete ><del> delte; with cite and datetime

  5. <cite> the title referred
  6. <abbr> abbreviation 缩写 <dfn> definition | e.g. <dfn><abbr title="Garage Door Opener">GDO</abbr></dfn>
  7. <time> datetime有相关定义 e.g.

    1
    <time class="dtstart" datetime="2005-10-05">October 5</time> - <time class="dtend" datetime="2005-10-07">7</time>
  8. <code> codes <samp> outputs <kbd> user inputs (keyboard)

PS: 提一个input中range属性, 可以直接滑块拖动.

embed

这里不讲了, 和流媒体相关. <object>这些

tabular data

写了一个Gist:

Microformats(may deprecated)

HTML 的扩展, 用来标注人物 / 组织 / 事件 / 地点 / 简历 / 菜谱.etc
更加专业, 不过感觉只需要refer即可. MF-Link
如果需要写相关内容, 建议往专业页面进行参考, 例如名片类型可以参考wikiPedia

Microdata

只能先丢个链接吧…
wikipedia

Reference

前端工程师手册-gitbooks
Semantic-html-顾轶灵

Defined

由HTMLDog总结得来.

Main()

  1. <!DOCTYPE html> document type declaration
  2. <Meta> Meta tags don’t do anything to the content that is presented in the browser window, but they are used by the likes of search engines to catalogue information about the web page.
    Names: The most commonly used names are author, description, and keywords. Description is often used by search engines (such as Google) to display a description of a web page in its search results. Keywords used be important for SEO.
    HTTP Equivalents:
  3. Conditional Comments:<!--[if IE]>and<![endif]-->more in MS
  4. tabindex for navigation with input and others
    Page used focus with certain keys
  5. Labels have the added bonus of visual browsers rendering the labels themselves clickable, putting the focus on the associated form field. Both name and id attributs are typically required; the name for the form to handle that field and the id for the label to associate it to. 这也解释了自定义一些自定义CSS的标签

    1
    2
    3
    4
    <form>
    <label for="yourName">Your Name</label>
    <input name="yourName" id="yourName">
    </form>
  6. fieldset and legend: 这个都没见过, 挺好看的 Link

  7. select>optgroup>option 用的不多, optgroup用于分组
  8. input[type="range"]经常见到过相关变形, 现在算是明白了.拖动栏
  9. H5 特性标签 datalist 看了一下可以做索引, 这个可以用用看!

Reference

前端工程师手册-gitbooks
HTMLdog
Sementic-html-顾轶灵
HTMLRefence

Defined

问题描述: 作为移动端页面, 一个宽度高度确定的ul块级元素下包含多个li块级元素(宽度高度确定),
li为了水平居中使用了(transform:translateX), ul中设置了overview:scroll.

Main()

直接代码复现最省事:

临时解决方案: 直接利用css继承机制, 将container的translate设置为0;

.container { transform: translateX(0) }

模糊:
blurry
清晰:
clear

Reference

暂时没有找到相关案例, 但是引起该问题的原因都是同一个css引发的: transform

Defined

遇到一个问题, 关于循环对象导致事件多次被调用.之前没有真正实际碰到过相关问题, 于是记录一下.

Main()

直接给例子和结论好了.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
window.onload = function() {
let btn1 = document.querySelector('#show1');
let btn2 = document.querySelector('#show2');
btn1.onclick = function() {
console.log(111);
}
setTimeout(function() {
btn1.onclick = function() {
console.log(222);
}
}, 2000);
// 0-2s 111 2s+ 222

btn2.addEventListener('click', function() {
console.log(333);
});
setTimeout(function() {
btn2.addEventListener('click', function() {
console.log(444);
});
}, 2000);
// 0-2s 333 2s+ 333/444
}

addEventListener不会覆盖原来的handler, 如果需要覆盖, 就需要添加removeEventListener, 而且不能用匿名监听器, 不过jQuery利用off函数实现了, 暂时不知道如何实现的… (stick into tag NeedUpdate

Update 03-15-2018

target.addEventListener(type, listener[, options]);

options

  • once: boolean

  • capture: boolean
    triggered in capture model(on)

  • passive: boolean
    never use preventDefault function(on)

Reference

Event order
addEventListener
removeEventListener