脚本宝典收集整理的这篇文章主要介绍了RDD的前端背包,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
暂时先堆在一起,等某条目里面的内容超过十条了,就单列出去。
更新历史:
-
17.7.24
-
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
-
17.7.09
2017年07月09日 04:21:06 添加phantomjs条目
-
17.7.08
2017年07月08日 13:32:55 添加Object深赋值
-
17.7.03
-
17.6.24
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;
}
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之后如何确定他的大小和位置
@H_777_316@
回调
async:
感觉上 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"
}
}
}
需要注意的坑主要是
-
函数参数对于引用类型的实质是一个引用(指向实际数据的指针),即
直接在表层操作该引用,在实质上无效ref = data(X)
进入到实际数据来进行操作则有效ref.a = data(√)
解决
使用递归
通过间接操作来调整实际数据。
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文件里面的数据?
使用ajax
方式来获得它。
使用JSON
类方法来处理它。
Node
json文件
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简介
新的格式而已:Wasm 不是一种新的编程语言,而是一种新的格式,这个格式适合将 C/C++ 程序编译到 Web 上来运行,同时又满足了平台无关、高效、轻量等特性。
可被直接执行:Wasm 可以直接被 JS 引擎加载和执行,省去了从 JS 到 Bytecode,从 Bytecode 到机器码的转换时间,因此十分高效。
AST明晰性:Wasm 的文本格式 Wast 包含了一个基于 S 表达式的 AST 描述文本,在这个文件中我们可以清楚的看到这个 Wasm 模块的导出函数内存分配的情况。
JS引擎配适:WebAssembly 的二进制模块格式 Wasm 可以直接通过 JS 引擎提供的 WebAssembly 接口进行调用。
wasm开发
官方
基于 WebAssembly 的开发主要分为两个部分:
写好业务、设置接口第一部分为 C/C++ 部分的主要业务处理逻辑,同时需要设置一些需要在 JS 层面调用的“预置接口”。
连接接口、填充逻辑:第二部分是在 JS 层面进行 Wasm 的模块对接,同时需要填充内存或者预置函数的逻辑,填充数据集的操作。
感觉有些类似于使用node.per编译c文件为node来使用。
不过再业务方面要设置的比较少,感觉再编写的过程中会比较轻松。
一些开源项目
-
使用类似 turboscript 的语言,你能够:
以类似typescript
的方式来写脚本
将脚本编译成webassmbly
的wasm
文件
在程序中使用wasm
文件
以及比较保守(有指针)的AssemblyScript。
wasm链接
一些链接:
Vue
优化异步执行更新
Vue 异步执行 DOM 更新。只要观察到数据变化,Vue 将开启一个队列,并缓冲在同一事件循环中发生的所有数据改变。如果同一个 watcher 被多次触发,只会一次推入到队列中。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作上非常重要。然后,在下一个的事件循环“tick”中,Vue 刷新队列并执行实际(已去重的)工作。
reder细节
render不要使用箭头函数
箭头函数会绑定上下文
button的disabled属性属于domPorps
而不是attr
//<button :disabled="true"></button>
...
h("button",{domProps: true});
...
?组件命名
原则
-
简短。
需要被引用。
-
达意。
语义
可理解
约定
建议
-
基本类型。
-
结构组件
<工程名首字母>+<结构层级+>
维持在两个完整单词的长度
如果缩写重复则添加多一个字母达到区别的作用
-
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组件
判断子组件的类型
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进程
只要不执行phantom.exit();进程就不会退出
-
如果需要动态的读取数据以抓取数据有2种方法供参考
如何局部读取页面
page.settings Object
对于当前页面的一些配置项。此API必须在 page.open()调用之前设置,否则不会起作用。以下是配置项:
截取图片的Tips
屏幕长宽设置的讨论
phantomjspage.viewportSize
设置失败
Meteor
helper for the tutiral
-
meteor react-controlled-components problem
api
-
Meteor.subscribe -> 订阅数据
(autopublish使的整个mongo数据库将推到 客户端)
-
Meteor.methods -> 验证、修改数据方法
Meteor.call -> 启动方法
(inseure使得能够在 客户端 进行mongo操作)
Json
UI
Mongo
The mongo method runing in the meteor do things synchronously.
-
it will convert string to number
Publish
document struct
-
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
node爬虫框架。
-
日文歌词网
处理抓取的数据
继续完成页面
博客
3DRPGMaker
KaKaxi
myAwosome
-
前端库awosome网
-
JSON数据生成网站
-
npms趋势
-
瞩目的nodejs框架
-
博客
-
npm库排名
node -> pkg https://www.awesomes.cn/repo/...
-
非常喜欢的网页设计
-
会动的ico图标
-
模拟打字
-
node CLI
-
现代拓展常用实用库
-
编辑器
-
使用提示
-
视差
-
数据可视化
-
匿名网络以及其他
-
https://prism-break.org/zh-CN/all/
-
如果你的项目非常需要隐私,并且非常有价值,通过他们的认可,他们可以为你提供一系列免费的安全的隐私的服务。
-
装逼利器
-
合集
-
好文章
-
ASICII字符画
以上是脚本宝典为你收集整理的RDD的前端背包全部内容,希望文章能够帮你解决RDD的前端背包所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。