lahmying / front-end-tools Goto Github PK
View Code? Open in Web Editor NEW前端工具集,持续完善
前端工具集,持续完善
func(p1, p2)
obj.child.method(p1, p2)
func.call(context, p1, p2)
// this 是 context,这里 context 为 undefined
// func.call(undefined, p1, p2)
obj.child.method.call(obj.child, p1, p2)
// this 是 obj.child
结果不是 undefinded 而是 window,这是因为规定:
call 方法的 context 如果是 null 或 undefined,那就将 context 默认为 window 对象。严格模式下,context 默认为 undefined
参考 https://zhuanlan.zhihu.com/p/81631861
UI :OEM 控件实现
系统服务调用:如蓝牙等,由系统提供 API
不同平台的 OEM 控件和 系统服务调用规范,以及编程语言不统一,Android 使用 Java / Kotlin,而 iOS 使用 Objective-C / Swift,这就产生了平台差异性
UI:直接用平台提供的 webview ,虽说不同平台的 Webview 内核不一定一样,但是总归会遵循 w3c 规范, 那么我们的前端的代码可以运行在平台的 Webview 上,实现 UI 上的跨平台开发
系统服务调用:通过 bridge ,规定好协议,从而调用原生的方法。
缺点
Webview 性能比不上原生。
hybrid 基础上更进一步
React native ,Weex 等框架,是通过写 js 配置页面布局,然后通过 react native 解析成原生的控件。react native 是通过 Jscore 来解析 jsbunder 文件布局的
UI:实质上渲染出来的,还是 OEM Widgets
使用 react native 并不能避免写原生的代码,如果遇到一些平台相关的复杂问题,还是不得不深入到原生库中进行必要的调整
UI:不用 OEM Widgets,有自己的一套 Widgets、Rendering(这样你就只需要学它这一套。而 RN 只是帮你转为 OEM Widgets,有时需要你深入调整)
CSS 扩展语言,编译为 CSS。有 less、sass、stylus,是我会选 stylus
添加编程特性,如 变量 、 函数
减少书写重复的选择器
基本语法
嵌套
变量
mixin
继承
函数
逻辑控制
嵌套都一样
.a {
&.b {
color: red;
}
}
編譯後
.a.b {
color: red;
}
引用父級選擇器:&
在一个选择器中用两次以上 & 且父选择器是一个列表时,
Less 会对选择器进行排列组合,而 Sass 和 Stylus 不会这么做。
假设上层选择器为 .a, .b,
则内部的 & & 在 Less 中会成为 .a .a, .a .b, .b .a, .b .b,
而 Sass 和 Stylus 则输出 .a .a, .b .b
Sass 和 Stylus 分别用 @at-root 和 / 符号作为嵌套引用时的根选择器
.post
section
.section-title
color #333
/.post .section-link
color #999
/* other section styles */
/* other post styles */
編譯後
.post section .section-title {
color: #333;
}
.post .section-link {
color: #999;
}
stylus
red = #c00
strong
color: red
Less 的变量名用 @ 开头很可能会和以后的 css 新 @ 规则冲突
三种预处理器的变量作用域都是按嵌套的规则集划分,并且在当前规则集下找不到对应变量时会逐级向上查找
变量值
less 最后定义的值(这样就可以覆盖引入的第三库的变量,
缺点也很明显,会影响之前的样式,sass、stylus 则不会);
sass 和 stylus 上一个定义值。
// Sass 和 Stylus 都提供了「仅当变量不存在时才赋值」的功能
// 我们要修改的变量
$x: 1;
// 第三方库开发时预留 !default,前提是人家有预留给你
$x: 5 !default;
$y: 3 !default;
// $x = 1, $y = 3
支持变量名插值、选择器插值、@import 语句插值、属性名插值
支持其他 @ 规则插值。三种预处理器均支持在 @media、@Keyframes、@counter-style 等规则中进行插值。@media 插值主要用来做响应式的配置,而 @Keyframes 这样带名称名称的 @ 规则则可以通过插值来避免命名冲突
如果使用 mixin,推荐 sass 和 stylus
sass 的 sass 语法
// = 表示 mixin
=large-text
font:
family: Arial
size: 20px
weight: bold
color: #ff0000
// + 表示引入
.page-title
+large-text
padding: 4px
margin-top: 10px
sass 的 scss 语法
@mixin large-text {
font: {
family: Arial;
size: 20px;
weight: bold;
}
color: #ff0000;
}
// @include 表示引入
.page-title {
@include large-text;
padding: 4px;
margin-top: 10px;
}
stylus
border-radius(n)
-webkit-border-radius: n
-moz-border-radius: n
border-radius: n
.circle
border-radius(50%)
stylus
.message
padding: 10px
border: 1px solid #eee
.warning
@extend .message
color: #e2e21e
输出
.message,
.warning {
padding: 10px;
border: 1px solid #eee;
}
.warning {
color: #e2e21e;
}
继承功能还有一个潜在的问题:继承会影响输出的顺序
sass
.active {
color: red;
}
button.primary {
color: green;
}
button.active {
@extend .active;
}
三者调用函数的方式几乎一致,不同之处在于 Sass 和 Stylus 支持直接指定参数名的方式传入参数。以 Stylus 为例:
subtract(a, b)
a - b
subtract(b: 10, a: 25) // same as substract(25, 10)
// 好处:如果参数列表比较长,Stylus 可以直接为列表后面的参数赋值,
// 而不需要一路将之前的参数填上 null 或默认值
width、height、padding、margin。
其他属性比如 border、font-size 不能用百分比设置的
// height 那么指的是父元素 height 的百分之多少
// width,padding,margin 指的是父元素 width 的百分之多少
// top、bottom、left、right 等都是相对于直接的非 static 定位(position默认为static)的父元素的宽高
div{
width:200px;
height:300px;
padding:10px;
}
div p{
width:50%;
height:50%;
padding:10%;
}
此时p的真实宽度是多少?
// width = 200px x 50% + 2 x 200px x 10% (左右padding) = 140px
// height = 300px x 50% + 2 x 200px x 10% (上下padding) = 190px
// 此时 p 的真实宽度是 140px*190px
计算困难,如果我们要定义一个元素的宽度和高度,按照设计稿,必须换算成百分比单位
主轴的方向(即项目的排列方向)
默认情况下,项目都排在一条线(又称"轴线")上。flex-wrap属性定义,如果一条轴线排不下,如何换行
flex-flow属性是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap
项目在主轴上的对齐方式
justify-content: flex-start | flex-end | center | space-between | space-around;
flex-start(默认值):左对齐
flex-end:右对齐
center: 居中
space-between:两端对齐,项目之间的间隔都相等
space-around:每个项目两侧的间隔相等。所以,项目之间的间隔比项目与边框的间隔大一倍
项目在交叉轴上如何对齐
align-items: flex-start | flex-end | center | baseline | stretch;
flex-start:交叉轴的起点对齐
flex-end:交叉轴的终点对齐
center:交叉轴的中点对齐
baseline: 项目的第一行文字的基线对齐
stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度
多根轴线(有多行项目时)的对齐方式。如果项目只有一根轴线,该属性不起作用
stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。
baseline: 项目的第一行文字的基线对齐。
center:交叉轴的中点对齐。
flex-end:交叉轴的终点对齐。
flex-start:交叉轴的起点对齐。
排列顺序。数值越小,排列越靠前,默认为0
放大比例,默认为0,即如果存在剩余空间,也不放大
缩小比例,默认为1,即如果空间不足,该项目将缩小
负值对该属性无效
分配多余空间之前,项目占据的主轴空间(main size),它的默认值为 auto,即项目的本来大小,可设固定值(比如350px)
flex-grow, flex-shrink 和 flex-basis 的简写,默认值为0 1 auto
该属性有两个快捷值:auto (1 1 auto) 和 none (0 0 auto),建议优先使用这个属性,而不是单独写三个分离的属性,因为浏览器会推算相关值
允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch
指 inline、inline-block、inline-table、inline-flex
.parent{
/* 在父容器设置文本对齐居中即可 */
text-align:center;
}
左右 margin auto,上下 margin 为 0
.child{
/* 注意,要给宽度 */
width: 100px;
/* margin:0 auto; 其实就是 margin: 0 auto 0 auto; 逆时针上右下左。这样简写我都不想吐槽css*/
margin:0 auto;
}
// 猜想
absolute 是脱离文档流的,外层加上 relative 后就回归文档流了,这样就能重新调整位置了
牢记 relative 是参考自身 static 时的位置通过 top/bottom/left/right 进行定位!!!
absolute 是相对 最近的非 static 爸爸来定位!
1.父相子绝,即父 relative 子 absolute,然后开始移动子元素
2.移动父的一半,抵达父的中点
3.移动子的一半,抵达自己的中点
<div class="parent">
<div class="child">Demo</div>
</div>
<style>
.child {
position:absolute;
/* left 的 % 是相对父的*/
left:50%;
/* transform 2D变形的 % 是变自己的 % */
transform:translateX(-50%);
}
.parent {
position:relative;
}
</style>
}
// 猜想
relative 使浮动元素回归文档流,然后两步走:
1.移动爸爸的一半宽度,无论爸爸是否定宽都可 left:50% 搞定
2.移动自己一半宽度
- 给了就直接移,margin-left
- 没给就需要一个爸爸,但不知道当前的爸爸 position 如何,干脆复制一个自己,也 float 也 relative,这样假爸爸和自己都能移动自己一半宽度了
.self {
position:relative;
left:50%;
margin-left:-250px;
}
<div class="parent">
<span class="self" style="float: left;width: 500px;">我是要居中的浮动元素</span>
</div>
披上一层浮动元素即可
<div class=real-father>
<div class=fake>
<p class=son>我是浮动的我也是居中的</p>
</div>
</div>
/* .fake 这一层是披上的,没有内容的,在外一层才是原先的父元素*/
.fake {
float:left;
position:relative;
left:50%;
}
.son {
float:left;
position:relative;
right:50%;
}
父 div 塌陷,高度→0
尾部加入一个 block 元素,将其设 clear:both,它不浮动,于是撑起父 div 的高度
<div id="father" class="clearfix">
<div id="son"></div>
</div>
/*ie6 7 不支持伪元素*/
.clearfix:after {
content: '';
display: block;
clear: both;
height:0;
line-height:0;
visibility:hidden;//允许浏览器渲染它,但是不显示出来
}
微软的 Trident // -ms-
火狐的 Gecko // -moz-
开源内核 Webkit (Chrome 和 Safari 都在用) // -webkit-
Opera 的 Presto // -o-
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.