[笔记] 开始学前端，记一些概念

Node.js
    基于 Chrome V8 引擎的 JavaScript 运行环境
    使用了一个事件驱动、非阻塞式 I/O 的模型，使其轻量又高效
    类似于 Java 中的 JVM

    // server.js
    // 运行：node server.js
    var http = require('http');

    http.createServer(function (request, response) {
        response.writeHead(200, {'Content-Type': 'text/plain'});
        response.end('Hello World\n');
    }).listen(8888);

    console.log('Server running at http://127.0.0.1:8888/');


NPM
    Node 的包管理工具


NPM package 文件
    指定依赖包，会在 npm install 的时候安装
    指定 npm start, npm build 等命令执行时要运行的脚步
    指定 main 文件
    etc.

    如果 package 没有定义 start 属性，那么 npm start 默认执行 node server.js 命令


cross-env
    跨平台设置环境变量，通常在 package 的 scripts 属性和 webpack 配合使用


webpack
    编译打包 javascript 模块
    webpack --config webpack.config.js


webpack-dev-server
    webpack 官方提供的一个小型 Express 服务器。使用它可以为 webpack 打包生成的资源文件提供 web 服务


Express
    基于 Node.js 平台，快速、开放、极简的 Web 开发框架
    上面 Node 举的例子用的是原生 http 模块，express 底层用的也是 http 模块


React
    前端框架，用于创建 UI，实现 UI 的组件化，模块化
    和 Express 区别：Express 实现 Web 服务，React 实现 UI 框架，类似于 Python 中的 Gunicorn 和 Flash


React DOM
    React 的 UI 实际上是虚拟 DOM，需要 React DOM 将其渲染成真正的 DOM
    DOM - 文档对象模型 (Document Object Model) - 就是用于组织管理 HTML


React Native
    使 React 可以在移动端跨平台使用 (Android, IOS)
    可以理解为电脑端是 React + React DOM，移动端是 React + React Native


Redux
    用于存储数据
    只能通过 action 改变数据
    需要定义 action 及相应的 handler，比如 increase 及相应函数，当 Redux 收到 increase 时调用相应函数


React-Redux
    是 React 操作 Redux 的接口
    将 React UI 和 Redux 数据关联起来
    Redux 数据的变化，可以触发 React UI 的重新渲染
    React UI 可以出发 action 改变 Redux 的数据


Import Export Require
    import 是 ES6 语法标准，require 是 CommonJS 在没有 import 语法时定下的规范
    import 是编译时加载，性能较高，require 是运行时加载，性能较低
    import 必须放在顶部，require 可以放在任何位置
    import 导入的对象指向同一内存对象，require 导入的基本数据类型是复制，复杂数据类型则是浅拷贝
    导入时，会把被导入的代码执行一遍
    导入后会被缓存，重新导入直接到缓存拿，不会重新执行被导入代码
    import 通过 export 导出的值可以改变，require 通过 module.exports 导出的值就不能再变化

    require
        const fs = require('fs')
        console(fs)
        console(fs.add)

        exports.fs = fs
        module.exports = fs
        module.exports.fs = fs
        module.exports = {add,count,obj}

        export {add,count,obj}   // node

    import
        import fs from 'fs'
        import {default as fs} from 'fs'
        import * as fs from 'fs'
        import {readFile} from 'fs'
        import {readFile as read} from 'fs'
        import {readFile, writeFile as write} from 'fs'
        import fs, {readFile} from 'fs'

        export default fs
        export const fs
        export function readFile
        export {readFile, read}
        export * from 'fs'


生产和开发环境
    开发环境下，可以用 node，npm，webpack-dev-server 运行调试
    然后用 webpack 打包编译，生成静态 js 文件，发布
    生产环境下，可以用 nginx，直接返回这些静态 js 文件给前端即可


Chrome Tools
    React Developer Tools
    Redux DevTools