摘要：中文最小字體問題添加屬性以取消瀏覽器的自動調(diào)整會使原本應該調(diào)整的地方失效原本就是專為了移動端設置的屬性，桌面端不適應已修復建議通過縮小來獲得小字體。

暫時先堆在一起，等某條目里面的內(nèi)容超過十條了，就單列出去。

更新歷史：


17.7.24

=ADD=  typescript —> interface

=ADD=  alof awsome net




17.7.23

=ADD=  phantomjs 截圖圖片的一些Tips

=ADD=  phantomjs 關于瀏覽器視口大小的設置

=ADD=  typescript 的typeconfig.js

=ADD=  typescript 的模塊 與 命名空間

=ADD=  添加 會動的ico圖標

=ADD=  對Autismi / Inventati的介紹




17.7.13
2017年07月13日 12:21:06 =ADD= 關于vue組件命名方面的東西



17.7.12

2017年07月12日 11:21:06 =ADD= 添加三列布局 + 方形div

2017年07月12日 14:21:06 =ADD= 使用render:ver時的一些細節(jié)。

2017年07月12日 21:21:06 =CRE= 添加node條目

2017年07月12日 22:00:06 =CRE= 添加ES6條目

2017年07月12日 22:00:06 =ADD= super對繼承類同名方法的調(diào)整、覆蓋




17.7.09
2017年07月09日 04:21:06 添加phantomjs條目



17.7.08
2017年07月08日 13:32:55 添加Object深賦值



17.7.03

2017年07月04日 04:00:27 添加Vue條目

2017年07月04日 04:00:50 添加Gulp條目

2017年07月04日 04:03:13 更新WebAssembly條目




17.6.24

2017年06月24日 01:20:04 更新WebAssembly條目

2017年06月24日 01:24:02 調(diào)整其中的一些內(nèi)容

2017年06月24日 01:25:59 添加回調(diào)的部分

2017年06月24日 01:34:01 去掉標題前面奇奇怪怪的數(shù)字 && 調(diào)整WASM部分的標題名稱

2017年06月24日 01:37:01 去掉文章內(nèi)笨重的標題

unselectable = "none"

{background-image:url()}

* 其他屬性設置
    * `background-repeat`![](http://ogcng6il8.bkt.clouddn.com/1478875627488_list_0.png)
    * `background-position`![](http://ogcng6il8.bkt.clouddn.com/1478875628328_list_1.png)

?```css
[ele]:after/before {
    content: [字符串]/[url("媒體文件地址")]
}
?```
* 文字可以調(diào)整
* 圖片不能調(diào)整

box-shadow屬性可以通過chrome調(diào)試工具非常方便的進行設置。
?

1.【推薦】display:flex + justify-content: center;

thebox{
display:flex;
justify-content: center;
}

2.margin + block

thebox{
    display:block;
    marigin:0 auto;
}

3.left:50% + margin-left

thebox{
    left:50%;
    margin-left:-(thebox.width / 2)
}

4.display:inline-block + text-align:center

thebox{
    display:inline-block;
    text-align:center;
}

async:

所有 async 函數(shù)都會隱式返回一個 promise，而 promise 的完成值將是函數(shù)的返回值（本例中是 "done"）。

我們不能在代碼的頂層用 await

感覺上 async/await 還是需要配合Promise來使用。

比如下面這種情況

①有

ref = {
  a: "bb",
  c: "dd",
  e: {},
}

②還有

data = {
  a: "cc",
  b: "ee",
  c: {
    d: "ff"
  }
}

③想要有 cover(ref.f,data) 之后

//@after
ref = {
  a: "bb",
  c: "dd",
  e: {
      a: "cc",
    b: "ee",
    c: {
        d: "ff"
    }
  }
}

函數(shù)中的形參會在函數(shù)調(diào)用結束之后銷毀。

函數(shù)參數(shù)對于引用類型的實質(zhì)是一個引用(指向實際數(shù)據(jù)的指針)，即

直接在表層操作該引用，在實質(zhì)上無效ref = data(X)

進入到實際數(shù)據(jù)來進行操作則有效ref.a = data(√)

使用遞歸

通過間接操作來調(diào)整實際數(shù)據(jù)。

function objectAssignObject(ref, data) {
    if (typeof data === "object") {
        Object.keys(data).forEach(function(itm, idx) {
            if (typeof ref[itm] !== "object") {
                ref[itm] = {}
            }
            if (typeof data[itm] !== "object") {
                ref[itm] = data[itm]
            }
            objectAssignObject(ref[itm], data[itm])
        })
    }
}

css

.square{
    width:100%;
    height:0;
    padding-bottom:100%;
}

div:vue

<包裹正方形的div :style="`margin-right:${idx <= 1 ? 5 : 0}%`">

css

.外層的div{
  display:flex;
  flex-wrap:wrap;
}
.包裹正方形的div{
  width:30%;
}

使用ajax方式來獲得它。

使用JSON類方法來處理它。

網(wǎng)絡上的資源通過node-fetch。

直接通過require函數(shù)獲得。

// 類A繼承了類B
// 類B中已經(jīng)有eat方法

//...類A中
eat(url){
  super.eat(url);// 這是合法的
  doOtherThing();
  this.anotherThing();
}
///類A中...

import thing = require("cmjs-module")

import thing from "amd-module"

一個常見的錯誤是使用/// 引用模塊文件，應該使用import。 要理解這之間的區(qū)別，我們首先應該弄清編譯器是如何根據(jù)import路徑（例如，import x from "...";或import x = require("...")里面的...，等等）來定位模塊的類型信息的。

編譯器首先嘗試去查找相應路徑下的.ts，.tsx再或者.d.ts。 如果這些文件都找不到，編譯器會查找外部模塊聲明。 回想一下，它們是在.d.ts文件里聲明的。

如果一個glob模式里的某部分只包含*或.*，那么僅有支持的文件擴展名類型被包含在內(nèi)（比如默認.ts，.tsx，和.d.ts， 如果allowJs設置能true還包含.js和.jsx）。

如果指定了"files"或"include"，編譯器會將它們結合一并包含進來。 使用"outDir"指定的目錄下的文件永遠會被編譯器排除，除非你明確地使用"files"將其包含進來（這時就算用exclude指定也沒用）。

使用"include"引入的文件可以使用"exclude"屬性過濾。 然而，通過"files"屬性明確指定的文件卻總是會被包含在內(nèi)，不管"exclude"如何設置。 如果沒有特殊指定，"exclude"默認情況下會排除node_modules，bower_components，jspm_packages和目錄。

一個類必須有constructor方法，如果沒有顯式定義，一個空的constructor方法會被默認添加。

class Point {
}

// 等同于
class Point {
  constructor() {}
}

其實為了好理解，建議都添加一個空contructor，這是個好習慣?。

但是——????這不可能????

因為 ES6 規(guī)定一個類只能有一個contructor！！！

對contructor的重載可以通過內(nèi)部對arg進行判斷來實現(xiàn)。

接口描述了類的公共部分，而不是公共和私有兩部分。 它不會幫你檢查類是否具有某些私有成員。

添加 -webkit-text-size-adjust:none 屬性以取消瀏覽器的自動調(diào)整

.classstyle{ -webkit-text-size-adjust:none; font-size:9px; }

X－》1.會使原本應該調(diào)整的地方失效

X－》2.原本就是專為了移動端設置的屬性，桌面端不適應（bug已修復）

【建議】通過縮小來獲得小字體。-webkit-transform: scale(0.75);

X－》瀏覽器兼容問題

新的格式而已：Wasm 不是一種新的編程語言，而是一種新的格式，這個格式適合將 C/C++ 程序編譯到 Web 上來運行，同時又滿足了平臺無關、高效、輕量等特性。

可被直接執(zhí)行：Wasm 可以直接被 JS 引擎加載和執(zhí)行，省去了從 JS 到 Bytecode，從 Bytecode 到機器碼的轉換時間，因此十分高效。

AST明晰性：Wasm 的文本格式 Wast 包含了一個基于 S 表達式的 AST 描述文本，在這個文件中我們可以清楚的看到這個 Wasm 模塊的導出函數(shù)內(nèi)存分配的情況。

JS引擎配適：WebAssembly 的二進制模塊格式 Wasm 可以直接通過 JS 引擎提供的 WebAssembly 接口進行調(diào)用。

基于 WebAssembly 的開發(fā)主要分為兩個部分:

寫好業(yè)務、設置接口第一部分為 C/C++ 部分的主要業(yè)務處理邏輯，同時需要設置一些需要在 JS 層面調(diào)用的“預置接口”。

連接接口、填充邏輯:第二部分是在 JS 層面進行 Wasm 的模塊對接，同時需要填充內(nèi)存或者預置函數(shù)的邏輯，填充數(shù)據(jù)集的操作。

感覺有些類似于使用node.per編譯c文件為node來使用。

不過再業(yè)務方面要設置的比較少，感覺再編寫的過程中會比較輕松。

使用類似 turboscript 的語言，你能夠：

以類似typescript的方式來寫腳本

將腳本編譯成webassmbly的wasm文件

在程序中使用wasm文件

以及比較保守(有指針)的AssemblyScript。

一些鏈接：

<優(yōu)>理解 WebAssembly JS

<優(yōu)>了解 WebAssembly 的基礎使用方法

Vue 異步執(zhí)行 DOM 更新。只要觀察到數(shù)據(jù)變化，Vue 將開啟一個隊列，并緩沖在同一事件循環(huán)中發(fā)生的所有數(shù)據(jù)改變。如果同一個 watcher 被多次觸發(fā)，只會一次推入到隊列中。這種在緩沖時去除重復數(shù)據(jù)對于避免不必要的計算和 DOM 操作上非常重要。然后，在下一個的事件循環(huán)“tick”中，Vue 刷新隊列并執(zhí)行實際（已去重的）工作。

箭頭函數(shù)會綁定上下文

//
...
h("button",{domProps: true});
...

簡短。

需要被引用。

達意。

語義

可理解

約定

基本類型。

結構組件

<工程名首字母>+<結構層級+>

維持在兩個完整單詞的長度

如果縮寫重復則添加多一個字母達到區(qū)別的作用

e.g

在工程 utatemita中

u-home

u-hold

u-home-body

u-hm-body-title

u-hm-body-content

u-hold-companys

u-hd-companys-company

工程公用組件

<工程名>+<功能>+[描述]

e.g

在工程 utatemita中

utatemita-Square_card

utatemita-Lift

普遍公用組件

<作者名>+<功能>+[描述]

使用駝峰式命名方式。

?

draft.js -markdown editor

https://discuss.reactjs.org/t...

輸入的文件與輸出的文件強制同名

默認buffer

可選file.content

{ buffer: false }

buffer.toString()

Buffer.from(str)

來源:https://segmentfault.com/q/10...

只要不執(zhí)行phantom.exit();進程就不會退出

phantoms啟動后,啟動它的父進程就無法和其溝通了，phantomjs沒有相應地API可以做到這一點

如果需要動態(tài)的讀取數(shù)據(jù)以抓取數(shù)據(jù)有2種方法供參考

A. 利用ChildProcess模塊，反向處理，即啟動phantomjs進程，然后利用child process模塊啟動java進程，通過子父進程之間共享的stdin/stdout來交互數(shù)據(jù)

B. 利用WebServer模塊，在phantomjs中啟動一個微型web服務,java進程往這個web服務發(fā)送數(shù)據(jù)及接受處理完成的結果

來源:https://www.urlteam.org/2016/...

page.settings Object
對于當前頁面的一些配置項。此API必須在 page.open()調(diào)用之前設置，否則不會起作用。以下是配置項：

javascriptEnabled 默認 true：是否執(zhí)行頁面內(nèi)的javascript

javascriptloadImages 默認 true：是否載入圖片

各種各樣的userAgent一覽

設置page.settings.userAgent = "Mozilla/5.0 (iPhone; CPU iPhone OS 5_1_1 like Mac OS X) AppleWebKit/534.46 (KHTML, like Gecko) Version/5.1 Mobile/9B206 Safari/7534.48.3"

因為phantomjs模擬的是瀏覽器，因此加載、渲染頁面需要一定的時間因此在page.open()之后，應該delay一定時間之后方開始截圖。

phantomjspage.viewportSize設置失敗

meteor react-controlled-components problem

https://github.com/meteor/sim...

Meteor.publish -> 發(fā)布數(shù)據(jù)

Meteor.subscribe -> 訂閱數(shù)據(jù)

(autopublish使的整個mongo數(shù)據(jù)庫將推到 客戶端)

Meteor.methods -> 驗證、修改數(shù)據(jù)方法

Meteor.call -> 啟動方法

(inseure使得能夠在 客戶端 進行mongo操作)

獲得json文件

Template.body( using on Blade)

onCreated

創(chuàng)建本地的關聯(lián)數(shù)據(jù)庫

訂閱服務器的數(shù)據(jù)

UI組件

semantic

The mongo method runing in the meteor do things synchronously.

what collection2 doing

it will convert string to number

Don"t use ()=>{} in the publishion

imports

meteor項目中除了imports文件之外的其他文件，將會在meteor服務器啟動時自動加載。

imports文件中的文件則需要通過import，才會引入到項目中。

//......
// warpper
import { createContainer } from "meteor/react-meteor-data";
// collections
import { Collection } from "../api/collection.js";
//......
//.. define the react component "App" receive `props.tasks`
//.. setting propTypes of "App"  
//......
// warp the "App"
export default createContainer(() => {
  // the object will pipe to App as its props
  return {
    tasks: Collection.find({}).fetch(),
  };
}, App);

node爬蟲框架。

日文歌詞網(wǎng)

處理抓取的數(shù)據(jù)

繼續(xù)完成頁面

博客

3DRPGMaker

KaKaxi

前端庫awosome網(wǎng)

https://news.awesomes.cn/

https://www.awesomes.cn/

https://lanmaowz.com/simple-n...

JSON數(shù)據(jù)生成網(wǎng)站

http://beta.json-generator.co...

npms趨勢

https://npms.io/

矚目的nodejs框架

https://eggjs.org/

2016年上升趨勢https://www.v2ex.com/t/351191

博客

有趣的js庫系列 https://tutorialzine.com/@danny/

npm庫排名

https://www.npmjs.com/browse/...

node -> pkg https://www.awesomes.cn/repo/...

非常喜歡的網(wǎng)頁設計

https://fir.im/

https://www.mgenware.com/blog...

https://thief.one/2017/03/31/...

https://www.typeisbeautiful.c...

會動的ico圖標

https://icons8.com/c/animated...

模擬打字

https://codepen.io/Zhouzi/ful...

node CLI

https://www.npmjs.com/package...

https://github.com/vadimdemed...

現(xiàn)代拓展常用實用庫

http://underscorejs.org/

https://lodash.com/

編輯器

https://www.awesomes.cn/repo/...

使用提示

https://github.com/usablica/i...

視差

http://matthew.wagerfield.com...

數(shù)據(jù)可視化

https://d3js.org/

匿名網(wǎng)絡以及其他

https://prism-break.org/zh-CN/all/

Autismi / Inventati

如果你的項目非常需要隱私，并且非常有價值，通過他們的認可，他們可以為你提供一系列免費的安全的隱私的服務。

裝逼利器

https://codepen.io/VincentGar...

合集

http://tech.it168.com/a2015/0...

好文章

關于惰性計算 http://justjavac.com/javascri...

ASICII字符畫

http://www.network-science.de...