江城子

前端学习

写在前面（一些介绍和想法）

前端是一个很广的范围。要求掌握的东西很多而且最重要的是发展很快，在高速的发展中会出现很多不同的观点，比如对浏览器的兼容考虑，对于新标准的支持使用等等。
前端的学习是一种持续学习，因为更新的实在是太快了…。
前端最重要的三大基础HTML，CSS，JavaScript.
可以从切图开始学习，熟悉了解HTML和CSS。
关于JS的学习除了比较通用的ES5，还需了解最新的标准ES6,ES7(现在已更新到ES8)。
慕课网JS教程
再往后就需要了解各种框架的使用。
推荐的学习路线：
HTML+CSS ==>JS(ES5&&ES6) ==>Jquery(稍微了解) ==> (react)[http://huziketang.com/books/react/] ==> redux

redux的使用可以不依赖于React，它支持Ember

操作系统

推荐linux和MAC系统。
在windows下开发会遇到很多莫名其妙甚至无法解决的报错。尤其目前服务器端的操作系统大部分是linux，如果在windows下开发，最后部署文件时可能因为操作系统编码的不同造成很多不便。

编辑器

强烈推荐
webstorm

环境配置

Node
git

写在后面（这下面的不是很重要）

关于前端开发的转变，一点看法

传统模式

这种模式开发出来的大部分是多页面应用

传统的前端开发分为三大块html ,css ,js

html 确定框架

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<head>
    <meta charset="UTF-8">
    <title>传统</title>
    <script src="index.js"></script>
    <style type="text/css"></style>>
</head>
<body>
    <h1>Hello word</h1>
</body>
</html>

css 进行页面优化
js 实现用户交互

其中js中的jquery等一系列js库受到广泛使用,避免了使用原生js完成一些交互所需要的大量代码

新型模式

这种模式开发出来的多是单页面应用

以react为代表的架构

这种开发模式，很神奇的开始使用包管理npm工具（yarn也可以完成相同的功能）

在以传统方式进行页面开发时，仅仅需要一个文本编辑器，一个记事本

但是现在你需要对你的项目需要先执行

npm init

生成一个package.json文件

1
2
3
4
5
6
7
8
9
10
11
{   
  "name": "your-project-name",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
  "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

这里面的配置包括了你项目所需要的依赖

如果从Github拉下来一个项目的话，第一步一定是

npm install

根据package.json文件自动下载必要的依赖，你拉下来的项目在本地才能跑起来
当然为了避免手动配置的繁琐

webpack应运而生（同时兼容了CommonJS和AMD俩种规范）。

由于JS语法规范的更新和支持总是不同步babel也应运而生。

回到react中，除了

生命周期
JSX
虚拟DOM
STATE与PROPS
组件通信

概念，针对复杂的交互页面react还引入了redux的架构

redux的使用可以不依赖于React，它支持Ember,AngularJS,jQuery等多种框架，甚至还能只结合JavaScript使用。

目前也有针对react-redux进行封装的新框架比如 dva 等

redux有三大原则

  • 单一数据流
    • 整个应用的 state 被储存在一棵 object tree 中，并且这个 object tree 只存在于唯一一个 store 中。
  • State 是只读的
    • 唯一改变 state 的方法就是触发 action，action 是一个用于描述已发生事件的普通对象。
  • 使用纯函数来执行修改
    • 为了描述 action 如何改变 state tree ，你需要编写 reducers。

redux工作流程
简单的讲就是用户触发Action，reducers接受Action并生成新的state重新渲染画面

其中reducers可以有多个，每个负责处理页面中的一小部分，增强可维护性
dispatch是把action传给reducers的一个方法
store是全局保存数据的地方，同时管理 state ，监听器， reducers

为完成单页面应用，前端引用路由概念，用户在切换页面时实际是触发不同的路由，而不是像传统模式下加载一个新的页面。当然这种模式可能导致首次打开需要加载很多资源，使得打开很慢。

参考redux的中文文档
阮一峰的redux教程

本站总访问量次