分类 前端 下的文章

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>


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)分别代表的就是加载依赖的三个模块。


《Node.js 硬实战》笔记


这是看《Node.js 硬实战》写的第一个 demo

// stream.js
const Writable = require('stream').Writable;
const util = require('util');

module.exports = class MyStream extends Writable {
    constructor(matchText, options) {
        super();
        this.count = 0;
        this.matcher = new RegExp(matchText, 'ig');
    }

    write(chunk, encoding, cb) {
        let matches = chunk.toString().match(this.matcher);
        if (matches) {
            this.count += matches.length;
        }
        if (cb) {
            cb();
        }
    }

    end() {
        this.emit('total', this.count);
    }
}

上面的代码写了什么?

  • require 方法导入了 Node.js 的两个核心模块:stream、util。
  • module.exports 导出 MyStream 类。
    • MyStream 类继承了 Writable 类。
    • 覆盖了父类 Writable 的两个方法 _write()end()
//  index.js
const MyStream = require('./stream');
const http = require('http');

let myStream = new MyStream('node.js');

http.get('http://chenzhongtao.cn', function (res) {
    res.pipe(myStream);
})

myStream.on('total', function (count) {
    console.log('test:', count);
})

那这个呢,写了什么?

  • 同样的用 require 方法导入模块,其中 MyStream 是我自己写的模块。

  • 然后我创建了 MyStream 类的实例,并传入字符串 node.js 初始化了该实例。

  • 调用 httpget() 方法,发送一个 GET 请求,返回结果丢给 myStream

  • 最后给 myStream 注册一个是事件 total,触发该事件会调用 on 方法的第二个参数,这个参数是个回调函数。

  • 代码


Node.js 笔记


Node.js 简介

Nodejs 是什么?

Node.js 不是一种独立的语言,也不是一个 JavaScript 框架,更不是浏览器的库。Node.js 是一个让 JavaScript 运行在服务端的开发平台,它让 JavaScript 跟 PHP 、Python 等脚本语言一样可以作为后端语言。

Node.js 能干嘛

Node.js 适合那种高并发的应用场景,比如 即时聊天程序。因为 Node.js 内置了 HTTP 服务器的支持。也就是说不用像 PHP 等其他后端语言一样,还要通过 Apache 服务器等,直接几行代码,在V8引擎上一跑,一个简单的服务器就搭建好了。

异步式 I/O 与事件驱动

这是 Node.js 最大的特性了。传统架构应对高并发的方案是多线程并行。而 Node.js 使用的是单线程模型,它在执行过程中有一个事件队列,当程序执行到耗时长的 I/O 请求时,不会说一直等待,而是执行其他操作,等该 I/O 请求完成后,利用事件循环再次调出来执行。

举个例子

let fs = require('fs')
fs.readFile('./Git.md', 'utf-8', (err, data) => {
        if (err) {
            throw err
        }
        console.log(data)
    }
)
console.log('hhhh')

执行结果是,先看到打印的 hhhh ,然后才是读取文件 Git.md 的内容。这是因为 fs.readFile() 它是异步执行的。

参考资料

  • Node.js 开发指南