这大概是另一只蠢萌的笔记簿(́⊙◞౪◟⊙‵)
vickieyan / petrichor Goto Github PK
View Code? Open in Web Editor NEW另一只蠢萌的笔记簿(́⊙◞౪◟⊙‵)(练习用)
petrichor's Introduction
petrichor's People
Watchers
petrichor's Issues
github常用命令
创建新分支
git branch newbranch
git checkout newbranch
git push origin newbranch
关于块级元素的margin
之前 一直都对这一块有很深的误区，今天看了一篇博客再亲手写了个小demo终于证明之前的理解一直存在问题。
<div style="width: 300px;">
<div style="width: 200px; padding: 10px; margin: 20px;">
关于块级元素的margin
</div>
</div>按我以前的想法，里面的盒子左右margin都应该为20px。但事实证明，右边的margin变成了60px。
正常流块级元素的margin，width，padding，border之和必须等于包含块的内容区域，所以右边距会被重置为auto。
图画得有点拙劣，不过粉色那块自动填充的margin，确实是之前没有注意到的。
另外，当margin设置为负值时width可能会超过包含块。
webpack设置热更新后bundle.js存储路径
一个配置webpack的稀里糊涂的早上，又踩了坑。
设置热更新过后对于文件的引用目录位置云里雾里，在Jason的友情赞助下，终于搞清楚是哪里出问题了。
首先，我们来看一下webpack.config.js里面的配置
devServer: {
//本地服务器所加载的页面所在的目录
contentBase: "./",
//不跳转
historyApiFallback: true,
//实时刷新
inline: true
}这里的contentBase相当于是指定了服务器启动的位置，而服务器默认路径下会在这个目录里面加载index.html
我们再来看看index.html这个文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Webpack Sample Project</title>
</head>
<body>
<div id='root'>
</div>
<script type="text/javascript" src="./bundle.js"></script></body>
</html>这里需要注意的一点是，无论之前设置的output在哪个文件里，这里都是引用当前目录下的bundle.js，原因是本地服务器实时在线打包了bundle.js，按照我和Jason的推测这里bundle.js生成的路径即是index.html所在的路径。
噗 大脑内存清空。
刚才又知道了一种新的属性
output: {
//打包后的文件存储位置
path: __dirname + "/build",
//热更新打包时的位置
publicPath: '/build',
//打包后输出文件的文件名
filename: "bundle.js"
}所以 publicPath可以决定热更的时候bundle.js存在哪里，默认路径是根目录。
关于connect的第二个参数mapDispatchToProps
今天Yiga在讲connect高阶组件的时候，惊奇的发现自己不知道受了什么歪门**在connect里面传入的第二个参数和大家不一样。和Jason研究了一波，终于搞清楚了事情的整个来龙去脉，下面我来慢慢道来。
首先，我们来回忆一下大多数人是怎么写connect的。
const mapStateToProps = (state, ownProps) => {
return {
active: ownProps.filter === state.visibilityFilter
}
}
const mapDispatchToProps = (dispatch, ownProps) => {
return {
onClick: () => {
dispatch(setVisibilityFilter(ownProps.filter))
}
}
}
const FilterLink = connect(
mapStateToProps,
mapDispatchToProps
)(Link)再来看看我是怎么写的。
@connect(
state=>state.user,
{register}
)所以我一直在想react-redux这个库里面到底在哪一步完成了dispatch这个动作呢，在源码中终于看见了隐藏的真理。
export function whenMapDispatchToPropsIsFunction(mapDispatchToProps) {
return (typeof mapDispatchToProps === 'function')
? wrapMapToPropsFunc(mapDispatchToProps, 'mapDispatchToProps')
: undefined
}
export function whenMapDispatchToPropsIsMissing(mapDispatchToProps) {
return (!mapDispatchToProps)
? wrapMapToPropsConstant(dispatch => ({ dispatch }))
: undefined
}
export function whenMapDispatchToPropsIsObject(mapDispatchToProps) {
return (mapDispatchToProps && typeof mapDispatchToProps === 'object')
? wrapMapToPropsConstant(dispatch => bindActionCreators(mapDispatchToProps, dispatch))
: undefined
}所以说这个参数位置其实会出现三种情况，
1.传入的是一个函数，此时方法会有一个dispatch参数，需要自行调用dispatch
2.不转入参数
3.传入的是一个对象，此时底层封装了bindActionCreators方法，会自动dispatch所有action
关于MVC
学习编程以来一直听说但是一直没有搞清楚的一个概念。以下解释来自阿川先生。
那时计算机世界天地混沌，浑然一体，然后出现了一个创世者，将现实世界抽象出模型形成model，将人机交互从应用逻辑中分离形成view，然后就有了空气、水、鸡啊、蛋什么的。
——《前端MVC变形记》View
- Model2: 不具有行为，等着别人塞资料进去的模板（template）
- MVC: 具有监视Model的行为，并以此去改变呈现
Controller
- Model2: 接收请求与参数，转交给Model处理，再把结果塞进View
- MVC: 接受请求与参数，转交给Model处理，没有其他事了
Model（业务逻辑）
- Model2: 接收Controller传来的的参数，回传结果
- MVC: 接受Controller传来的参数，将结果通知View
CSS推荐书写顺序
1.位置属性(position, top, right, z-index, display, float等)
2.大小(width, height, padding, margin)
3.文字系列(font, line-height, letter-spacing, color- text-align等)
4.背景(background, border等)
5.其他(animation, transition等)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.