成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

RDD的前端背包

jifei / 2280人閱讀

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

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

更新歷史：





17.7.24



=ADD=  typescript —> interface


=ADD=  alof awsome net







17.7.23



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


=ADD=  phantomjs 關(guān)于瀏覽器視口大小的設(shè)置


=ADD=  typescript 的typeconfig.js


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


=ADD=  添加 會動的ico圖標


=ADD=  對Autismi / Inventati的介紹







17.7.13


2017年07月13日 12:21:06 =ADD= 關(guān)于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)笨重的標題
Html 設(shè)置文字不可選定

unselectable = "none"

css 背景圖片的設(shè)置

{background-image:url()}

* 其他屬性設(shè)置
    * `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)整
CSS3 box-shadow 屬性

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

如何居中:

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;
}
JS 獲取一個element之后如何確定他的大小和位置

回調(diào)

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)用結(jié)束之后銷毀。

函數(shù)參數(shù)對于引用類型的實質(zhì)是一個引用(指向?qū)嶋H數(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])
        })
    }
}
如何實現(xiàn)如下布局

正方形

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%;
}
怎么調(diào)用json文件里面的數(shù)據(jù)？

使用ajax方式來獲得它。

使用JSON類方法來處理它。

Node json文件

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

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

ES6 配合super對繼承類同名方法的調(diào)整、覆蓋 
// 類A繼承了類B
// 類B中已經(jīng)有eat方法

//...類A中
eat(url){
  super.eat(url);// 這是合法的
  doOtherThing();
  this.anotherThing();
}
///類A中...
Typescript 模塊引入 commonjs

import thing = require("cmjs-module")

amd

import thing from "amd-module"

編譯器工作方式

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

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

tsconfig.json glob模式里的某部分只包含*或`.*

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

同時使用files&include&exclude

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

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

constructor

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

class Point {
}

// 等同于
class Point {
  constructor() {}
}
那么如果已經(jīng)定義了一個帶參數(shù)的constructor，這個空的construtor還會有么？

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

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

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

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

interface private? & public?

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

Chrome 中文Chrome 最小字體－12px 問題

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

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

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

X－》2.原本就是專為了移動端設(shè)置的屬性，桌面端不適應(yīng)（bug已修復(fù)）

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

X－》瀏覽器兼容問題

WebAssembly wasm簡介

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

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

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

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

wasm開發(fā) 官方

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

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

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

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

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

一些開源項目

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

以類似typescript的方式來寫腳本

將腳本編譯成webassmbly的wasm文件

在程序中使用wasm文件

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

wasm鏈接

一些鏈接：

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

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

Vue 優(yōu)化異步執(zhí)行更新

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

reder細節(jié) render不要使用箭頭函數(shù)

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

button的disabled屬性屬于domPorps而不是attr 
//
...
h("button",{domProps: true});
...
?組件命名 原則

簡短。

需要被引用。

達意。

語義

可理解

約定

建議

基本類型。

結(jié)構(gòu)組件

<工程名首字母>+<結(jié)構(gòu)層級+>

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

如果縮寫重復(fù)則添加多一個字母達到區(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

普遍公用組件

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

使用駝峰式命名方式。

?

React UI組件

draft.js -markdown editor

判斷子組件的類型

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

Gulp gulp.src & gulp.dest

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

gulp.src 在管道內(nèi)將會輸出

默認buffer

可選file.content

{ buffer: false }

buffer <-> string

buffer.toString()

Buffer.from(str)

Phantomjs 中文教程 性能問題 如何不重復(fù)啟動phantomjs進程 
來源:https://segmentfault.com/q/10...

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

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

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

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

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

如何局部讀取頁面 
來源:https://www.urlteam.org/2016/...

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

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

javascriptloadImages 默認 true：是否載入圖片

截取圖片的Tips

各種各樣的userAgent一覽

設(shè)置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()之后，應(yīng)該delay一定時間之后方開始截圖。

屏幕長寬設(shè)置的討論

phantomjspage.viewportSize設(shè)置失敗

Meteor helper for the tutiral

meteor react-controlled-components problem

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

api

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

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

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

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

Meteor.call -> 啟動方法

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

Json

獲得json文件

UI

Template.body( using on Blade)

onCreated

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

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

UI組件

semantic

Mongo

The mongo method runing in the meteor do things synchronously.

what collection2 doing

it will convert string to number

Publish

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

document struct

imports

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

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

using React get data from the servers"s collection 
//......
// 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);
ThingsDoing

node爬蟲框架。

日文歌詞網(wǎng)

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

繼續(xù)完成頁面

博客

3DRPGMaker

KaKaxi

myAwosome

前端庫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)頁設(shè)計

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)絡(luò)以及其他

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

Autismi / Inventati

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

裝逼利器

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

合集

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

好文章

關(guān)于惰性計算 http://justjavac.com/javascri...

ASICII字符畫

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

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/50212.html

相關(guān)文章

  • RDD的PYTHON背包

    摘要：大蟒蛇年荷蘭人解釋型語言同聲傳譯比較靈活設(shè)計哲學(xué)優(yōu)雅明確簡單易學(xué)易用可讀性高開發(fā)哲學(xué)用一種方法，最好是只用一種方法來做一件事現(xiàn)代編程語言面向?qū)ο笾С址盒驮O(shè)計支持函數(shù)式編程豐富的數(shù)據(jù)結(jié)構(gòu)和第三方函數(shù)庫功能強大簡單爬蟲架構(gòu)基本的器件爬蟲調(diào)度端爬 pythoon（大蟒蛇） 1989年Guido van Rossum(荷蘭人) 解釋型語言 BASIC、Python showImg(http:...

    李增田 評論0 收藏0

  • RDD的前端背包

    摘要：中文最小字體問題添加屬性以取消瀏覽器的自動調(diào)整會使原本應(yīng)該調(diào)整的地方失效原本就是專為了移動端設(shè)置的屬性，桌面端不適應(yīng)已修復(fù)建議通過縮小來獲得小字體。 暫時先堆在一起，等某條目里面的內(nèi)容超過十條了，就單列出去。 更新歷史： 17.7.24 =ADD= typescript —> interface =ADD= alof awsome net 17.7.23 =ADD=...

    Pandaaa 評論0 收藏0

  • RDD的前端背包

    摘要：中文最小字體問題添加屬性以取消瀏覽器的自動調(diào)整會使原本應(yīng)該調(diào)整的地方失效原本就是專為了移動端設(shè)置的屬性，桌面端不適應(yīng)已修復(fù)建議通過縮小來獲得小字體。 暫時先堆在一起，等某條目里面的內(nèi)容超過十條了，就單列出去。 更新歷史： 17.7.24 =ADD= typescript —> interface =ADD= alof awsome net 17.7.23 =ADD=...

    csRyan 評論0 收藏0

  • 算法動態(tài)規(guī)劃的代碼優(yōu)化詳解(經(jīng)典的背包問題)

    摘要：首先說下算法對于前端的作用和應(yīng)用作用不用說了提高效率和性能應(yīng)用目前也是買了算法導(dǎo)論這本書，看得頭暈，各種數(shù)學(xué)知識需要返回去重新認識，哎，終于知道了以前學(xué)的東西總有用的。。。 首先說下算法對于前端的作用和應(yīng)用 作用：不用說了提高效率和性能 應(yīng)用：目前也是買了算法導(dǎo)論這本書，看得頭暈，各種數(shù)學(xué)知識需要返回去重新認識，哎，終于知道了以前學(xué)的東西總有用的。。。，自己買的哭著也要讀完，不扯了，直...

    CntChen 評論0 收藏0

  • 算法動態(tài)規(guī)劃的代碼優(yōu)化詳解(經(jīng)典的背包問題)

    摘要：首先說下算法對于前端的作用和應(yīng)用作用不用說了提高效率和性能應(yīng)用目前也是買了算法導(dǎo)論這本書，看得頭暈，各種數(shù)學(xué)知識需要返回去重新認識，哎，終于知道了以前學(xué)的東西總有用的。。。 首先說下算法對于前端的作用和應(yīng)用 作用：不用說了提高效率和性能 應(yīng)用：目前也是買了算法導(dǎo)論這本書，看得頭暈，各種數(shù)學(xué)知識需要返回去重新認識，哎，終于知道了以前學(xué)的東西總有用的。。。，自己買的哭著也要讀完，不扯了，直...

    oysun 評論0 收藏0

發(fā)表評論

0條評論

最新活動
閱讀需要支付1元查看
<