[record]2019-05~06

Posted on 2019-05-06

05.06

vue bug

https://github.com/vuejs/vue-hot-reload-api/pull/74

5.7

未知原因导致的sticky 失效

https://github.com/suedar/reading_website

下的图书详情页

href设置

a标签的href可以定位到页面id是对应值的地方但是会改变url 也就是说从http://localhost:8083/#/book?bookId=${id} 变成http://localhost:8083/1 手动刷新后当前页面就改变了我想知道能不能通过设定href值让页面保持

5.8

vuex奇怪的存储

宏调用微调用总结一下

5.13

速度有点慢要抓紧

模块设置sticky位置改变设置过渡失效

1
2
3

postion: sticky;
top: ...;
transition: top 1s;

触发重排重绘了？

时间紧暂用自定义属性解决

5.22

how to console formdata

https://stackoverflow.com/questions/17066875/how-to-inspect-formdata

6.8

页面路由跳转强制刷新后跳转到根路由为什么？

你需要知道的浮动二三事

Posted on 2019-03-20

先来看两个栗子🌰

See the Pen 浮动示例一 by cookie (@suedar) on CodePen.

example 1

See the Pen 浮动示例二 by cookie (@suedar) on CodePen.

example 2

这是两个非常能体现浮动特性的例子。

在emample 1中，设置左侧元素.red定宽并浮动，不管.text在内部还是外部，都会发现.text是绕着浮动元素的,此时设置右侧元素margin-left生效，margin-top失效。

(图片下面的空隙是基线问题，这是另一个话题了

*{
  margin: 0px;
}
.father {
  line-height: 0;
  vertical-align: bottom;
  .red {
    width: 100px;
    height: 100px;
    background: red;
    float: left;
  }
  .text {
    line-height: 20px;
  }
}

如有需要可以这么设置)

在example 2中，设置内部元素.red为浮动后，并设置父级元素.father边框border: 10px solid grey;会发现，父级元素并没有包裹住子元素，高度坍塌。

也就是说设置float会导致水平线上占位，垂直线上高度坍塌，而这个坍塌只限于浮动元素高度范围内。

float定义

根据mdn对float的定义。

float CSS属性指定一个元素应沿其容器的左侧或右侧放置，允许文本和内联元素环绕它。该元素从网页的正常流动(文档流)中移除，尽管仍然保持部分的流动性（与绝对定位相反）。

一个浮动元素是float的值不是none的元素。

从层叠与浮动中可以看出，我们可以把document视为三维的模型，尽管float元素脱离了文档流，但是从二维视角上看上去，其仍然占位。

在很久很久很久很久以前，文字环绕效果还非常地流行，为了实现这个效果，当时的程序员们突发灵感，发明出了float，文字不会环绕是吧，破坏文档流啊，暴力可以解决一切问题🐶，但是随着时代的发展，渐渐的带来了一些问题。

float特性

父级元素高度坍塌(包裹性)
限制行框盒子
块状化

硬核做需求

实现父级元素坍塌后，只是让跟随的内容可以和浮动元素在一个水平线上，但这只是实现环绕效果的条件之一，还需要另外一个特性，就是行框元素和浮动元素的不可重叠性，也就是行框元素如果和浮动元素垂直高度有重叠，则行框盒子在正常定位情况下只会跟随浮动元素，不会发生重叠。

证实这一点请看这里。

See the Pen
浮动示例三 by cookie (@suedar)
on CodePen.

可以看到，我们设置另一个元素.yellow进入浮动区域的时候，被推开了。

块状化

let span = document.createElement('span');
document.body.appendChild(span);
console.log(1, window.getComputedStyle(span).display);
span.style.cssFloat="left";
console.log(2, window.getComputedStyle(span).display);

在console中，我们可以得到

1 2	1 "inline" 2 "block"

证明设置float的元素，会变成块级元素。

清除浮动

讲了定义，讲了问题，来看看怎么解决问题吧。清除浮动，其实就是在清除浮动带来的影响。

clear
触发BFC

我了解的有这么几种方法，欢迎补充。

clear

根据clear的定义

clear CSS 属性指定一个元素是否必须移动(清除浮动后)到在它之前的浮动元素下面。clear 属性适用于浮动和非浮动元素。

也就是换行显示文字。换行了，就不会触发行框元素和浮动元素的不可重叠性。

添加空元素

在浮动元素下方添加一个内容为空的元素，并设置clear:both。

See the Pen
MxqLeZ by cookie (@suedar)
on CodePen.

父级添加伪元素

在父级添加

&::after {
  content: '';
  clear: both;
  display: block;
}

这种方法成为clearfix。

See the Pen
MxqLeZ by cookie (@suedar)
on CodePen.

触发BFC

块级格式化上下文（Block Formatting Context，BFC）是Web页面的可视化CSS渲染的一部分，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。

如果一个元素具有BFC，内部子元素不管再怎么变化，都不会影响外部的元素。

BFC特性

那么BFC有什么特性呢？

内部的Box会在垂直方向，一个接一个地放置。
Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。(解决限制行框盒子)
BFC的区域不会与float box重叠。
BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
计算BFC的高度时，浮动元素也参与计算

也就是说，在BFC的世界中，有一个结界，又有许多规则，BFC和外部世界隔离开，同时内部的所有元素都遵循同个规则来布局，无论是否浮动。

BFC+float应用

左侧定宽，右侧自适应的两栏布局，你值得拥有。

See the Pen 浮动示例六 by cookie (@suedar) on CodePen.

七种实现左侧固定，右侧自适应两栏布局的方法

 [布局概念] 关于CSS-BFC深入理解

 关于浮动与清除浮动

《css世界》

[record]19-03~04

Posted on 2019-03-19

3.19

标题右端浮动问题

你需要知道的浮动二三事

See the Pen 2019-03-01 by cookie (@suedar) on CodePen.

右端浮动占位使用width失效设置上高度即可

flex布局

宽度不定无法使用网格布局

用margin-right？

3.21

周五啦

async函数返回问题

https://stackoverflow.com/questions/55293336/why-i-get-pending-from-this-function

async函数返回promise

怎么深入响应式监控state的数据

https://stackoverflow.com/questions/55295528/how-do-i-monitor-a-deep-value-in-object-while-using-vuex

3.25

上班啦

form表单验证是怎么实现的

less sass scss 区别

3.27

border导致位置挪动问题

https://stackoverflow.com/questions/55369507/why-is-the-position-change

nginx走缓存

location = /index.html {
add_header Cache-Control “no-cache, no-store”;
}

顺畅的scroll-smooth

https://www.youtube.com/watch?v=y9nlfqT4s9s

可以写个blog

在html设置 {
height: 100vh;
overflow: hidden;
}

在父级设置

1
2
3

overflow-y: scroll;
scroll-behavior: smooth;
scroll-snap-type: y mandatory;

子级

scroll-snap-align: center;

啊我的毕设啊QAQ

3.28

ie中jq的addclass不起作用

https://stackoverflow.com/questions/17060531/addclass-removeclass-not-working-in-ie

4.2

flutter

貌似是安卓的东西了解一下跟react native的关系

4.5

无法在codepen复现的伪元素问题

See the Pen
Pseudo bug by cookie (@suedar)
on CodePen.

    .content {
        margin-top: 3vh;
    .text, .year, .year-item {
        height: 50px;
        line-height: 50px;
        padding-left: 3rem;
        border-left: 3px solid $greyWhite;
        position: relative;
        &::after {
            color: $dot;
            position: absolute;
            left: 0;
            top: 50%;
            transform: translate(-67%, -50%);
            content: '●';
        }
    }
    .text {
        &::after {
            font-size: 28px;
            // BUG: 定位问题
            transform: translate(-57%, -56%);
        }
    }
    .dot {
    }
}

<div class="content">
    <div class="text dot">
        这块地方一共有{{length}}篇文章
    </div>
    <div class="menu-item" v-for="item in year" :key="item.id">
        <div class="year dot">
            {{item}}
        </div>
        <div class="year-item dot" v-for="menuItem in menu[item]" :key="menuItem.id">
            <span class="date">
                {{menuItem.date}}
            </span>
            <span class="title">
                {{menuItem.title}}
            </span>
        </div>
    </div>
</div>

4.16

curry

我看了一下css大会的东西

4.22

grid布局可以自动紧缩吗

https://stackoverflow.com/questions/55793415/how-to-make-the-elements-of-unknown-location-compact

4.23

屏幕支持

According to this website, I think

1 2	@media screen and (min-width: 800px) {} @media screen and (min-width: 1200px) {}

can support for 三端

[bug repair]element打包后css样式不正常

Posted on 2019-02-25

element打包后出现css样式与开发不一样的问题

会导致这个结果的原因是 element设定的样式把用户写的css样式给覆盖了

dev里的style没有被覆盖。dev里是通过js append
style标签来加入你的element的样式，而build之后你的element基础样式是通过link的css引入的。
https://segmentfault.com/q/1010000014605404

所以在开发时我们需要增加自己写的代码的优先级也就是再在外层包一层css

该bug的element版本为

“element-ui”: “^2.5.4”,

SPA设计与架构

Posted on 2018-10-30

SPA简述

单页Web应用（single page web application，SPA），就是只有一张Web页面的应用，是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。
– 摘自百度百科

spa与多页面应用的区别

spa与多页面应用示意

在图示中，每个新视图（HTML页面）请求都会导致对服务器端的双向访问。当客户端需要新的数据时，则会向服务器端发送请求。在服务器端，请求由表现层的某个控制器对象拦截。然后该控制器通过服务层与模型层交互，服务层决定完成模型层任务所需的组件。通过数据访问对象（DAO）或服务代理获取数据之后，所有必要的数据更新都将由业务的业务逻辑产生。

控制传回到表现层，在这里选择合适的视图。展示逻辑规定新获取数据在选中视图中如何展示。通常情况下，结果视图是一个包含占位符的源文件，数据（及其他可能的渲染指令）将插入到占位符中。每当控制器将请求路由至视图时，该文件表现得像某种类型得模板，以让视图设置好占位符的数据。

数据与视图整合好之后，视图返回给浏览器，然后浏览器接受新的HTML页面，并通过界面刷新，将包括请求数据的新视图展示给用户。

在传统web应用程序中，每个新视图（HTML页面）都在服务器端构建

spa

spa应用程序

转换成人话就是将视图的创建与管理从服务器端解耦出来，并移到UI层。

大家看下这个例子，这是一个典型的spa应用

See the Pen Vue SPA by cookie (@suedar) on CodePen.

但是当页面进行切换的时候，是没有进行http请求的

页面切换示例

这是spa应用的典型特点，另外spa应用不利于seo检索。

MV*框架介绍

在MV*概念中，M代表模型(Model)，V代表视图(View)。

模型 —— 典型的模型包含了数据、业务逻辑以及验证逻辑。
视图 —— 视图即用户所见以及交互的界面，是模型数据的可视化呈现。

MV*框架

路由到正确视图、整合数据与HTML模板、管理视图生命周期等重任通常委托给被称为MV*（有时被称为SPA框架）的第三方JavaScript文件处理。

单页面应用程序的单页面指的是初始HTML页面，或者被称为Shell（外壳页面）。通常情况下，作为用户导航的结果，SPA各个部分按需展示，其中每个部分的HTML骨骼构造被称为模板，模板包含数据占位符。开发者通过框架来绑定数据与模板。

MV*框架

传统UI设计模式

简述三种设计模式：模型-视图-控制器（MVC）、模型-视图-表示器（MVP）、模型-视图-视图模型（MVVM）。

参考

前端：你要懂的单页面应用和多页面应用
《SPA设计与结构》

vue小记

Posted on 2018-03-23

使用vue也有一段时间了，现在对vue的一些以前没有注意到的点小结一番~

本文均采用npm安装依赖

json-server

数据存储的利器啊，我之前是采用easy-mock，遗憾的是其只能使用get请求。

在json-server中我们采用npm install -g json-server安装依赖。

在最外层文件新建mock文件，下建db.json

showImage

然后采用json格式输入数据

{
  "posts": [
    { "id": 1, "title": "json-server", "author": "typicode" }
  ],
  "comments": [
    { "id": 1, "body": "some comment", "postId": 1 }
  ],
  "profile": { "name": "typicode" }
}

然后改改script，在package.json中，修改script

"scripts": {
    "dev": "webpack-dev-server --inline --progress --config build/webpack.dev.conf.js",
    "start": "node build/dev-server.js",
    "build": "node build/build.js",
    "mock": "json-server mock/db.json --port 9092",
    "mockdev": "npm run mock & npm run dev"
},

你可以用npm run dev打开项目npm run mock打开json-server,npm run mockdev两个一起打开~~

在localhost9092可以看到我们的mock数据，端口地址可以在port后面改

localhost:9092

要对数据进行操作，需设置我们的基地址

1	let baseUrl = 'http://localhost:9092';

配合axios使用，即可对数据进行增删改查

import axios from 'axios'
export default async(url = '', data = {}, type = 'GET', method = 'fetch') => {
	type = type.toUpperCase();
	url = baseUrl + url;

	if (type == 'GET') { // search
		try {
            var res = await axios.get(url)
            return res
        } catch (error) {
            console.error(error)
        }
	} else if(type == 'PUT') { // edit
		try {
            await axios.put(url,data.data)
        } catch (error) {
            console.error(error)
		}
	} else if(type == 'POST') { // add
		try {
			await axios.post(url,data.data)
        } catch (error) {
            console.error(error)
		}
	} else if(type == 'DELETE') { // delete
		try {
            await axios.delete(url,data.data)
        } catch (error) {
            console.error(error)
		}
	}
}

比如我们要对数据中的posts进行get操作，只需在基地址后加上/posts，而若是要对其中的id为1的进行操作，则在基地址后加上/posts/1

vuex

使用vuex的时候参照了vue大项目elm，觉得这种数据分离的方式特别好，推荐给大家

首先安装依赖npm install vuex --save

新建文件夹store，下建index.js和mutation.js,这里我只建了mutation.js，原版还有getter.js和action.js，但因为项目中没用到，故没有建。。。

mulu

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import mutations from './mutations'

Vue.use(Vuex)

const state = {
    example: ''
}


export default new Vuex.Store({
    state,
    mutations
})

mutation.js

export default {
    setExample (state, newData) {
        state.example = newData
    }
}

从而在我们的工程文件中，引入相应的函数传入相应的数据即可

helloWorld.vue

1
2
3

...mapMutations([
    'setExample'
]),

async initData(){ // 异步大法好
    let res = await getData();
    this.setExample(res.data)
    this.data = res.data;
},

service/getData.js

import fetch from '../config/fetch'

export const getData = () => fetch('/posts', {
});

最后，项目结构是酱紫的

project

还有一点点。。。

项目中还用到了html转pdf，放github上了，感兴趣可以看一下~

感谢你的阅读，希望你哈皮每一天

js基础之关于Boolean及相等运算符的隐式类型转换

Posted on 2017-12-01

Boolean函数

根据 w3c规范布尔对象共有这几种方法：

方法	描述
toSource()	返回该对象的源代码。
toString()	把逻辑值转换为字符串，并返回结果。
valueOf()	返回 Boolean 对象的原始值。

布尔值常用于JavaScript中的控制语句中。例如JavaScript的if/else语句，如果布尔值为true执行第一段逻辑，如果为false执行另一段逻辑。

JavaScript的值都可以转化为布尔值，下面这些值会被转换为false：

undefined
null
0
-0
NaN
""//空字符串

所有其他值，包括所有的对象（数组）都会转化为true。

也就是说：

1 2	var c = Boolean([]); console.log(c); // true

结果为真。

boolean应用

Boolean常常应用的有两种，一种是if(a==b)?，一种是if(o)？。

if（o）？

对于第二种，只要当o不是false，null和undefined时就会执行if之后的代码。
也就是说 if({}&&[])，为真。

但是

var fn = function() {};

if (fn && fn()) {
    console.log(22222);
}

这个条件判断执不执行呢？
结果是不执行的，因为fn() 是undefined啊小傻瓜

var obj = {};
var string = "";
var array = [];
var fn = function() {};

if (obj) {
    console.log("obj");
}
if (string) {
    console.log("string");
}
if (array) {
    console.log("array"); //空字符串不输出
}
if (fn) {
    console.log("fn");
}

结果为

还是那句话咯

undefined、null、0、-0、NaN、”” 为false

这里写图片描述

if（a==b）？

这种应用呢，需要用到隐式类型转换，比较麻烦一点

== 和 === 运算符用于比较两个值是否相等，但是===为严格相等，它不会进行隐式类型转换，==会进行隐式类型转换。

严格相等运算符”===“首先计算其操作数的值然后比较这两个值。

===

相等运算符”==“

这里写图片描述

也就是说：

这里写图片描述

懵了吗？哈哈一言以蔽之，这之中所有的比较都是倾向于转化为数值再进行运算的。

if (null == undefined)  // true
if (null == 0) 
if (null == NaN)
if (null == '') 
if (undefined == 0)
if (undefined == '')
if (undefined == NaN)
if (NaN == 0) 
if (NaN == '')
if (0 == '') //true
if (NaN == false)
if (0 == false)//true
if ('' == false)//true
if (undefined == false)
if (null == false)
if (NaN == true)
if (0 == true)
if ('' == true) 
if (undefined == true)
if (null == true)
if ([] == null)
if ([] == undefined)
if ([] == 0)//true
if ([] == '') //true
if ([] == NaN)
if ([] == false)//true
if ({} == null)
if ({} == undefined)
if ({} == 0) 
if ({} == '') 
if ({} == NaN) 
if ({} == false)
if([1]==[1])
if({a:1}=={a:1})

说说最后两个是为嘛吧，因为其都为对象，对象为引用值晓得吧，所以比较的是内存中的位置，指针指向的位置不一样，所以不相等。

这个面试笔试又常常考，所以尽力记住咯。
我把几个对的拎出来了 ↓

if (null == undefined)  // true
if (0 == '') //true
if (0 == false)//true
if ('' == false)//true
if ([] == 0)//true
if ([] == '') //true
if ([] == false)//true

代码更新在github 欢迎验证

https://github.com/suedar/js-/tree/master/Boolean

js基础之各种基本类型及引用类型的转换之开篇

Posted on 2017-11-29

总结一下前端基础的东西，估计会开一个专题，讲的是布尔等基本类型和引用类型等的相互转换问题。

基础不能丢啊，建议看了这个专题的读者也去总结一些前端的基础，好记性不如烂笔头，代码会更新在GitHub。

文章大部分内容来自于《JavaScript权威指南》《JavaScript高级程序设计》再加上我最近的总结和理解。

那么我们开始吧。

提起伟大的JavaScript，就不得不提起他的数据类型，JavaScript的数据类型分为两类：原始类型（primitive type) 和对象类型（object type）。
而对象类型又可以叫做引用类型。
所有引用类型都是Object 的实例。

碎碎念：伟大的JavaScript由ECMAscript，BOM和DOM组成，而ECMAscript为核心中的核心，BOM（browse object model）为浏览器对象模型，DOM（document object model）为文档对象模型，因为是核心，所以有时我们也称JavaScript数据类型为ECMAscript数据类型。

原始类型有六种：Undefined，Null，Boolean，Number ，String 和 Symbol。
而Symbol是es6新引入的基本数据类型，表示独一无二的值。

关于Symbol具体看看阮大大吧

http://es6.ruanyifeng.com/#docs/symbol

本专题还没囊括symbol。。待我日后补充。。

剩余的都是对象类型。

引用类型的值是保存在内存中的对象。

造了有这么些基本类型，那咱得有工具把他们几个区分出来啊

于是ECMAscript给了我们typeof工具。

图图图

（本图并不是直接连接，只是隐性关系）

由该图可知 typeof 没有null 没有null 没有null

这是头条17年前端面试的一道题哦

另外 typeof(null) = object

因为null被认为是一个空对象的引用。

Safari 5及以前版本、chrome 7 及之前版本对正则表达式调用typeof操作符会返回function，而其他浏览器会返回object。

关于浏览器兼容问题可以访问 can i use

另外string，数字、布尔值、null和underfined属于不可变类型，不能改变他们。
es6的常量 const 也是如此。

1 2	var a = "你今天很好看"; a.length = 2;

不容置喙

a.length正常会改变字符串的长度，也就是会把结果变为你今，但是在这却失效了，这是为什么呢。

a是一个字符串，字符串当然是基本类型值，而下一步的调用却成功了。我们知道，基本类型值不是对象，因为从逻辑上来说他们不该有方法。因此正常来讲a.length会报错呀会报错呀会报错呀

其实，为了让我们实现这种直观的操作，后台已经自动完成了一系列的处理，当第二行代码执行到a.length时，访问过程处于一种读取模式，也就是要从内存读取这个字符串的值，而在读取模式中访问字符串时，后台就会进行如下处理

（1）创建string类型的一个实例；
（2）在实例上调用该方法；
（3）销毁这个实例

也就是说

1
2
3

var a = new String("你今天真好看");
a.length = 2;
a = null;

这是在执行a.length的一瞬间后台进行的操作。

这里写图片描述

Boolean Number 和String为ECMAscript的基本包装类型。

引用类型和基本包装类型的主要区别在于对象的生存期，使用new操作符创造的引用类型的实例，在执行流离开当前作用域之前一直保存在内存中。而自动创建的基本包装类型的对象，则只存在于一行代码的执行瞬间，然后立即被销毁。这意味着我们不能在运行时为基本数据类型添加属性和方法。

我们可以显示调用Boolean，Number和String来创建基本包装类型的对象。不过，应该在必要的情况下再这么做，因为这种做法很容易让人分不清自己实在处理基本类型还是引用类型的值。对基本包装类型的实例调用typeof会返回object，而且所以基本包装类型的对象在转化为布尔值时的值都是true。

var value = "25";
var number = Number(value); 
console.log(typeof(number)); //"number"

var obj = new Number(value);
console.log(typeof(obj));  //"object"

好啦开篇就说到这里，做个好梦~

原文地址：https://suedar.github.io
转载请注明出处哦~

更多：
js基础之关于Boolean及相等运算符的隐式类型转换

仿写简单的vue虚拟dom

Posted on 2017-11-08

最近在学vue 所以仿写了一些render函数的虚拟dom,还是挺有意思的:)

function createElement(tag, prop, children) {
    if (!(this instanceof createElement)) {
        return new createElement(tag, prop, children)
    }
    if (Object.prototype.toString.call(prop) === "[object Array]") {
        children = prop;
        prop = {};
    }
    this.tag = tag;
    this.prop = prop;
    this.children = children;
    var count = 0;
    this.children.forEach(function(item) {
        if (item instanceof createElement) {
            count += item.count;
        }
        count++;
    })
    this.count = count;
}
createElement.prototype.render = function() {
    var tag = this.tag;
    var prop = this.prop;
    var children = this.children;
    var dom = document.createElement(tag);
    for (item in prop) {
        dom.setAttribute(item, prop[item]);
    }
    children.forEach(function(child) {
        if (child instanceof createElement) {
            var childDom = child.render();
        } else {
            var childDom = document.createTextNode(child);
        }
        dom.appendChild(childDom);
    })
    return dom;
}

以上为代码片

测试节点如下

var dom = createElement("div", {
    class: "demo"
}, ["you are", createElement("p", {
    id: "lala"
}, ["gorgeous"])]);

console.log(dom.render());

得出结果

05.06

vue bug

5.7

未知原因导致的sticky 失效

href设置

5.8

vuex奇怪的存储

宏调用微调用总结一下

5.13

模块设置sticky位置改变设置过渡失效

5.22

how to console formdata

6.8

float定义

float特性

硬核做需求

块状化

清除浮动

clear

添加空元素

父级添加伪元素

触发BFC

BFC特性

BFC+float应用

更多

3.19

标题右端浮动问题

flex布局

3.21

async函数返回问题

怎么深入响应式监控state的数据

3.25

form表单验证是怎么实现的

less sass scss 区别

3.27

border导致位置挪动问题

nginx走缓存

顺畅的scroll-smooth

3.28

ie中jq的addclass不起作用

4.2

flutter

4.5

无法在codepen复现的伪元素问题

4.16

curry

我看了一下css大会的东西

4.22

grid布局可以自动紧缩吗

4.23

屏幕支持

SPA简述

spa与多页面应用的区别

MV*框架介绍

MV*框架

传统UI设计模式

参考

json-server

vuex

还有一点点。。。

Boolean函数

boolean应用

if（o）？

if（a==b）？

最近在学vue 所以仿写了一些render函数的虚拟dom,还是挺有意思的:)

grid布局可以自动紧缩吗