RDD的前端揹包

時間  2020-08-18
標籤 rdd 前端 揹包 欄目 Spark 简体版
原文   原文鏈接

暫時先堆在一塊兒，等某條目裏面的內容超過十條了，就單列出去。javascript

更新歷史：css

  • 17.7.24html

    • =ADD= typescript —> interface前端

    • =ADD= alof awsome netvue

  • 17.7.23java

    • =ADD= phantomjs 截圖圖片的一些Tipsnode

    • =ADD= phantomjs 關於瀏覽器視口大小的設置react

    • =ADD= typescript 的typeconfig.jsgit

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

    • =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時的一些細節。

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

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

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

  • 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 調整其中的一些內容

    • 2017年06月24日 01:25:59 添加回調的部分

    • 2017年06月24日 01:34:01 去掉標題前面奇奇怪怪的數字 && 調整WASM部分的標題名稱

    • 2017年06月24日 01:37:01 去掉文章內笨重的標題

Html

設置文字不可選定

unselectable = "none"

css

背景圖片的設置

{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('媒體文件地址')]
}
​```
* 文字能夠調整
* 圖片不能調整

CSS3 box-shadow 屬性

box-shadow屬性能夠經過chrome調試工具很是方便的進行設置。
​

如何居中:

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以後如何肯定他的大小和位置

js－標籤訂位.

回調

async:

  1. 全部 async 函數都會隱式返回一個 promise，而 promise 的完成值將是函數的返回值（本例中是 "done"）。

  2. 咱們不能在代碼的頂層用 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"
    }
  }
}

須要注意的坑主要是

  1. 函數中的形參會在函數調用結束以後銷燬。

  2. 函數參數對於引用類型的實質是一個引用(指向實際數據的指針)，即

    1. 直接在表層操做該引用，在實質上無效ref = data(X)

    2. 進入到實際數據來進行操做則有效ref.a = data(√)

解決

  1. 使用遞歸

  2. 經過間接操做來調整實際數據。

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}%`"></包裹正方形的div>

css

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

怎麼調用json文件裏面的數據？

  1. 使用ajax方式來得到它。

  2. 使用JSON類方法來處理它。

Node

json文件

  1. 網絡上的資源經過node-fetch。

  2. 直接經過require函數得到。

ES6

配合super對繼承類同名方法的調整、覆蓋

// 類A繼承了類B
// 類B中已經有eat方法

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

Typescript

模塊引入

commonjs

import thing = require("cmjs-module")

amd

import thing from "amd-module"

編譯器工做方式

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

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

tsconfig.json

glob模式裏的某部分只包含*或`.*

若是一個glob模式裏的某部分只包含*或.*，那麼僅有支持的文件擴展名類型被包含在內（好比默認.ts，.tsx，和.d.ts， 若是allowJs設置能true還包含.js和.jsx）。

同時使用files&include&exclude

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

使用"include"引入的文件可使用"exclude"屬性過濾。 然而，經過"files"屬性明確指定的文件卻老是會被包含在內，無論"exclude"如何設置。 若是沒有特殊指定，"exclude"默認狀況下會排除node_modules，bower_components，jspm_packages和<outDir>目錄。

constructor

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

class Point {
}

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

那麼若是已經定義了一個帶參數的constructor，這個空的construtor還會有麼？

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

可是——⬆️⬆️這不可能⬆️⬆️

由於 ES6 規定一個類只能有一個contructor！！！

對contructor的重載能夠經過內部對arg進行判斷來實現。

interface

private? & public?

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

Chrome

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

  • 添加 -webkit-text-size-adjust:none 屬性以取消瀏覽器的自動調整

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

  • X－》1.會使本來應該調整的地方失效

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

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

  • X－》瀏覽器兼容問題

WebAssembly

wasm簡介

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

  2. 可被直接執行：Wasm 能夠直接被 JS 引擎加載和執行，省去了從 JS 到 Bytecode，從 Bytecode 到機器碼的轉換時間，所以十分高效。

  3. AST明晰性：Wasm 的文本格式 Wast 包含了一個基於 S 表達式的 AST 描述文本，在這個文件中咱們能夠清楚的看到這個 Wasm 模塊的導出函數內存分配的狀況。

  4. JS引擎配適：WebAssembly 的二進制模塊格式 Wasm 能夠直接經過 JS 引擎提供的 WebAssembly 接口進行調用。

wasm開發

官方

基於 WebAssembly 的開發主要分爲兩個部分:

  1. 寫好業務、設置接口第一部分爲 C/C++ 部分的主要業務處理邏輯，同時須要設置一些須要在 JS 層面調用的「預置接口」。

  2. 鏈接接口、填充邏輯:第二部分是在 JS 層面進行 Wasm 的模塊對接，同時須要填充內存或者預置函數的邏輯，填充數據集的操做。

感受有些相似於使用node.per編譯c文件爲node來使用。

不過再業務方面要設置的比較少，感受再編寫的過程當中會比較輕鬆。

一些開源項目

  1. 使用相似 turboscript 的語言，你可以：

    1. 以相似typescript的方式來寫腳本

    2. 將腳本編譯成webassmbly的wasm文件

    3. 在程序中使用wasm文件

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

wasm連接

一些連接：

  1. <優>理解 WebAssembly JS

  2. <優>瞭解 WebAssembly 的基礎使用方法

Vue

優化異步執行更新

Vue 異步執行 DOM 更新。只要觀察到數據變化，Vue 將開啓一個隊列，並緩衝在同一事件循環中發生的全部數據改變。若是同一個 watcher 被屢次觸發，只會一次推入到隊列中。這種在緩衝時去除重複數據對於避免沒必要要的計算和 DOM 操做上很是重要。而後，在下一個的事件循環「tick」中，Vue 刷新隊列並執行實際（已去重的）工做。

reder細節

render不要使用箭頭函數

箭頭函數會綁定上下文

button的disabled屬性屬於domPorps而不是attr 

//<button :disabled="true"></button>
...
h("button",{domProps: true});
...

?組件命名

原則

  1. 簡短。

    1. 須要被引用。

  2. 達意。

    1. 語義

    2. 可理解

  3. 約定

建議

  1. 基本類型。

    1. 結構組件

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

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

      • 若是縮寫重複則添加多一個字母達到區別的做用

      • 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

    2. 工程公用組件

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

      • e.g

        • 在工程 utatemita中

          • utatemita-Square_card

          • utatemita-Lift

    3. 廣泛公用組件

      • <做者名>+<功能>+[描述]

  2. 使用駝峯式命名方式。

​

React

UI組件

  1. draft.js -markdown editor

判斷子組件的類型

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

Gulp

gulp.src & gulp.dest

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

gulp.src 在管道內將會輸出

  • 默認buffer

  • 可選file.content

    • { buffer: false }

buffer <-> string

  • buffer.toString()

  • Buffer.from(str)

Phantomjs

中文教程

性能問題

如何不重複啓動phantomjs進程

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

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

  • phantoms啓動後,啓動它的父進程就沒法和其溝通了，phantomjs沒有相應地API能夠作到這一點

  • 若是須要動態的讀取數據以抓取數據有2種方法供參考

    • A. 利用ChildProcess模塊，反向處理，即啓動phantomjs進程，而後利用child process模塊啓動java進程，經過子父進程之間共享的stdin/stdout來交互數據

    • B. 利用WebServer模塊，在phantomjs中啓動一個微型web服務,java進程往這個web服務發送數據及接受處理完成的結果

如何局部讀取頁面

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

page.settings Object
對於當前頁面的一些配置項。此API必須在 page.open()調用以前設置，不然不會起做用。如下是配置項：

  • javascriptEnabled 默認 true：是否執行頁面內的javascript

  • javascriptloadImages 默認 true：是否載入圖片

截取圖片的Tips

  1. 各類各樣的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"

  2. 由於phantomjs模擬的是瀏覽器，所以加載、渲染頁面須要必定的時間所以在page.open()以後，應該delay必定時間以後方開始截圖。

屏幕長寬設置的討論

phantomjspage.viewportSize設置失敗

Meteor

helper for the tutiral

  1. meteor react-controlled-components problem

api

  1. Meteor.publish -> 發佈數據

    1. Meteor.subscribe -> 訂閱數據

    2. (autopublish使的整個mongo數據庫將推到 客戶端)

  2. Meteor.methods -> 驗證、修改數據方法

    1. Meteor.call -> 啓動方法

    2. (inseure使得可以在 客戶端 進行mongo操做)

Json

得到json文件

UI

  1. Template.body( using on Blade)

    1. onCreated

      1. 建立本地的關聯數據庫

      2. 訂閱服務器的數據

  2. UI組件

    1. semantic

Mongo

The mongo method runing in the meteor do things synchronously.

  1. what collection2 doing

    1. it will convert string to number

Publish

  1. Don't use ()=>{} in the publishion

document struct

  1. imports

    • meteor項目中除了imports文件以外的其餘文件，將會在meteor服務器啓動時自動加載。

    • 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

  1. node爬蟲框架。

  2. 日文歌詞網

    1. 處理抓取的數據

    2. 繼續完成頁面

  3. 博客

  4. 3DRPGMaker

  5. KaKaxi

myAwosome

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程