前端入门教程笔记
NODE
node环境为javascript在服务器提供了运行环境。本地的node环境同理。
需要babel编译ES6是因为浏览器不支持新特性。
React
React 框架。这个框架是为网页开发设计的,核心思想是在网页之上,建立一个 UI 的抽象层,所有数据操作都在这个抽象层完成(即在内存里面完成),然后再渲染成网页的 DOM 结构,这样就提升了性能。
在编译之后,JSX 表达式会被转为普通 JavaScript 函数调用,并且对其取值后得到 JavaScript 对象。
JSX 语法上更接近 JavaScript 而不是 HTML,所以 React DOM 使用 camelCase(小驼峰命名)来定义属性的名称,而不使用 HTML 属性名称的命名约定。
Babel 会把 JSX 转译成一个名为 React.createElement() 函数调用。
组件,从概念上类似于 JavaScript 函数。它接受任意的入参(即 “props”),并返回用于描述页面展示内容的 React 元素。【UI、事件、数据】
ReactDOM 会负责更新 DOM 来与 React 元素保持一致。组件是由元素构成的。React 元素是不可变对象。
State 的更新可能是异步的,不要依赖他们的值来更新下一个状态。要解决这个问题,可以让 setState() 接收一个函数而不是一个对象。这个函数用上一个 state 作为第一个参数,将此次更新被应用时的 props 做为第二个参数。
使用 JSX 语法时你需要传入一个函数作为事件处理函数,而不是一个字符串。
Flux
- 不同组件的
state,存放在一个外部的、公共的 Store 上面。 - 组件订阅 Store 的不同部分。
- 组件发送(dispatch)动作(action),引发 Store 的更新。
1.React给出了视图层的解决方案,UI界面函数化 用户交互【事件】-状态改变-组件重新渲染
2.Redux解决了组件间通信问题。在Redux中的state和action绑定到UI组件上。通过用户触发action,Redux计算出新的state,组件重新渲染。组件订阅Store,发布action。
npm根据配置文件安装 安装后加入配置文件
npm help 命令 得到帮助
npm config set registry https://registry.npm.taobao.org/
混合 App 从上到下分成三层:HTML5 网页层、网页引擎层(本质上是一个隔离的浏览器实例)、容器层。
小程序,可以看作是针对特定容器的 H5 开发,微信本身是一个容器,开放自己的接口(JSbridge),外部开发者使用规定的语法,编写页面,容器可以动态加载这些页面。
Bootstrap组件和工作类
浏览器渲染机制
1、 DOM :Document Object Model,浏览器将HTML解析成树形的数据结构,简称DOM。
2、 CSSOM :CSS Object Model,浏览器将CSS代码解析成树形的数据结构。
3、DOM 和 CSSOM 都是以 Bytes → characters → tokens → nodes → object model. 这样的方式生成最终的数据。
4、 Render Tree :DOM 和 CSSOM 合并后生成 Render Tree
React 通过一种比传统的双向绑定略微繁琐的方法来实现反向数据传递。
key 帮助 React 识别哪些元素改变了,比如被添加或删除。因此你应当给数组中的每一个元素赋予一个确定的标识
less 和sass是一中程序式编程,可以转化为css
前端切片
完成握手以后,WebSocket 协议就在 TCP 协议之上,开始传送数据。类似于中介模式。
``是一个可以用 JavaScript 操作的位图(bitmap)。
它与 SVG 图像的区别在于,``是脚本调用各种方法生成图像,SVG 则是一个 XML 文件,通过各种子元素生成图像。