RDD的前端背包

头像头饰
RDDcoding
    阅读 9 分钟

    暂时先堆在一起，等某条目里面的内容超过十条了，就单列出去。

    更新历史：

    • 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时的一些细节。
      • 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/how-to-determine-what-type-of-c...

    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/1010000003989521
    • 只要不执行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/12/phantomjs-%E6%A8%A1%E5%9D%97%...

    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

    javascriptcsshtml前端
    RDDcoding
    151 声望17 粉丝

    一心一行

    « 上一篇
    RDD的微信小程序背包
    下一篇 »
    RDD的PYTHON背包

    引用和评论

    推荐阅读
    头像
    deno2.0 都发布了，但我为什么要用它？| deno | node | js | rust | v8 | 垃圾回收

    RDDcoding阅读 42

    头像
    腾讯新闻中心首页改版啦

    小蚊酱赞 11阅读 9.4k评论 7

    头像
    网页设计的垂直居中

    寒青赞 39阅读 4.6k评论 3

    头像
    CSS团队协作规范

    寒青赞 36阅读 4k

    头像
    前端如何入门 Go 语言

    robin赞 26阅读 7.7k评论 8

    头像
    100个React最佳实践小技巧

    夕水赞 17阅读 2.7k评论 4

    头像
    不使用 JS 纯 CSS 获取屏幕宽高

    南城FE赞 15阅读 2.2k评论 3

    0 条评论
    得票最新