Grid 布局


Grid 布局是什么?

它是一个二维的网格布局。

两个核心部分:父元素和子元素

二维有:行 (row)、列 (column)

直接贴代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Gird</title>
</head>
<body>

    <div class="wrapper">
        <div class='letter'>
            A
        </div>
        <div class='letter'>
            B
        </div>
        <div class='letter'>
            C
        </div>
        <div class='letter'>
            D
        </div>
        <div class='letter'>
            E
        </div>
        <div class='letter'>
            F
        </div>
        <div class='letter'>
            G
        </div>
        <div class='letter'>
            H
        </div>
        <div class='letter'>
            I
        </div>
    </div>

    <div class="footer">
        <div class="item">J</div>
        <div class="item">K</div>
        <div class="item">L</div>
    </div>

    <style>
        body,html {
            padding: 0;
            margin: 0;
        }

        .wrapper {
            width: 600px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 1fr 1fr 1fr;
            grid-column-gap: 1px; /* 列的网格线间的间距 1px */
            grid-row-gap: 1px; /* 行的网格线间的间距 1px */
            background-color: black;
        }

        .footer{
            display: grid;
            grid-template-columns: 1fr 1fr 1fr; /* 这里应该用 grid-template-columns: repeat(3, 1fr); 的。这样更简洁 */
            grid-template-rows: 1fr;
            grid-column-gap: 1px; 
            position: fixed;
            bottom: 0;
            width: 100%;
        }

        .letter,.item {
            background-color: #0069b3;
            display: flex;
            justify-content: center;
            align-items: center;
            padding: 20px;
            font-size: 70px;
            color: white;
            line-height: 1;
            font-family: 'hobeaux-rococeaux-background', Helvetica;
            font-weight: 200;
            cursor: pointer;
            transition: all .3s ease;
        }
    </style>
</body>
</html>


Graph QL


Graph QL

Graph QL 是一门拥有明确的查询语言(描述如何请求数据的语法),它定义了一个通用的基于图形的 schema 来发布它所代表的数据服务的功能。Graph QL 为数据通信而生。 在客户端和服务器之间需要进行通信时,比如客户端请求接口拿数据时,Graph QL 是作为这两者之间的中介存在的。

要想能够使用 Graph QL ,我们需要一个运行层,也就是能够翻译 Graph QL 语法的东西,然后这个运行层暴露给客户端和服务器,也可以说数据服务的 Graph QL 代理。

三个主要特点:

  • 允许客户端精确指定所需数据。
  • 可以更容易地从多个数据源聚合数据。
  • 使用类型系统描述数据。

三个主要模块:
模式(schema)、查询(query)、解析器(resolver)。

为什么需要 Graph QL ,直接点对点跟服务器要不好吗?

可以啊,只是客户端通常会请求多次,可是服务器只会返回单次请求的结果,所以这就造成了:客户端会重复这个过程多次。

如果我们使用 Graph QL 作为客户端和服务器间的中介,那么客户端就可以只发送一次请求给 Graph QL 就可以拿到所需求的数据等。

主要解决三个问题:

  • 客户端想拿到完整的数据,往往需要多次请求。

    假设客户端需要获取多个接口,如果通过 GraphQL ,它这时候只有请求就够了。

  • 客户端依赖于服务器端。

    关键概念是通过使用 GraphQL,API schema、数据库schema 被解耦。

  • 对前端开发不友好。

    试一试:GraphQL API Explorer

题外话

看下面这几篇文章,大概就能知道那些基本概念了。我写得不太好,因为我还没实践过。我试了 GraphQL API Explorer 后,觉得这东西惊艳到我了。

参考资料


2017-summary


写个年度总结

16 年年底,我是很痛苦的,那段时间。因为感情原因,刚分手的那几天,不痛苦,还想着怎么复合。可跨年夜,那晚室友跟我说他知道的事情后,我就炸了。就觉得自己瞎,对,看走眼了。

因为表哥需要人手,所以放假我就走了,没留校。之后也没再去星空办公室了。主要是不想看到她。

在表哥那里帮忙的时候,我有尝试着去写小程序,可是因为太忙了,中途就停下来了。再一个就是,我周围的人那时候都不知道微信小程序是什么。所以我也就没留心。那段时间,天天三四点才睡觉,因为天天刷港片看,看了很多杜琪峰的电影。

回家过年的时候,拿着表哥给的大红包,买了个 kindle 。哦,还有我妈的小米手机。买了 kindle 后,我寒假在家就看了两本书吧,一个解忧杂货店,一个连城诀,还有一些没看完。

发现自己根本就没兴趣再写页面了,写星空相关的页面。我就没给答复,开始逃避。哦,因为中间又发生一些事嘛,所以我是直接删了拉黑的。那时候很贱的说,我有一个小号还加着她,我偷偷上过几次小号,看她发了什么。嗯,怕是个傻子吧。


ES6部分总结


var、let、const 比较

var 会有声明提升,并初始化为 undefined

console.log(a)  //  undefined
var a = 1
console.log(a)  //  1

console.log(b)  //  Uncaught ReferenceError: b is not defined
b = 3
console.log(b)  //  3
console.log(window.b)  //  3

疑问:

  • 为什么打印 b 会报错?
  • 为什么 window.bb 结果是一样的?


RequireJS


RequireJS 的诞生

  • 实现 js 文件的异步加载,避免页面失去响应。
  • 管理模块之间的依赖性,便于代码的编写和维护。

RequireJS 的使用

  • RequireJS 的加载

    <script src="js/require.js" defer async="true" data-main="js/main"></script>
    defer 是 IE 浏览器的异步加载声明 async="true" 是其他浏览器的异步加载声明 data-main属性的作用是,指定网页程序的主模块。
    
  • require 方法

    require(['jquery', 'underscore', 'backbone'], function ($, _, Backbone){
        //  some code
    });
    

    require()函数接受两个参数。第一个参数是一个数组,表示所依赖的模块,第二个参数是一个回调函数,当前面指定的模块都加载成功后,它将被调用。加载的模块会以参数形式传入该函数,从而在回调函数内部就可以使用这些模块。

    上面的代码表示的是:加载了依赖模块,jqueryunderscorebackbone。然后匿名回调函数里头的参数,($, _, Backbone)分别代表的就是加载依赖的三个模块。