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教程