前端开发扫盲（写给同事）
chapter1 概念入门
前端几个重要的概念 😊
单页面应用:
单页面应用与传统java jsp等资源不同的点在于，单页面应用的资源对应只有一个html文件和一个js文件（大多是这样），需要访问不同链接的资源可以通过 “#” 这个浏览器锚点进行访问，针对“#”进行浏览器的路由功能
技术栈：😭
java程序员可能长时间没有接触过前端的技术，前端这几年来的技术变革很大，前两年我们还在写es5的脚本js代码，如今的es6与es5在语法上面有了很大的区别，但是java程序理解es6的语法应该不会太难。需要注意的是，es6的代码部分语法现在的浏览器还不能完全支持，需要通过工具把es6的代码再次编译成es5的代码才能正常运行在浏览器中，常用的编译工具链是webpack，babel详见http://webpack.github.io
环境搭建 🤔
环境安装： windows下建议直接下载最新稳定版本的msi安装包，一步到位，无需任何配置，mac下安装node建议先安装brew（不知道brew的搜索一下，先把brew安装好）brew install nodejs，linux用户可以直接去gituhb上下载源码编译安装。安装完node之后会有附带有npm程序，npm是前端的包管理软件，类似于java的maven和gradle，我们可以利用npm下载第三方库。
注意：linux和mac在安装完node之后需要解决权限问题，具体的解决方案在 这里
把权限解决了以后算是可以正式开始写代码了。
如何开始：🙄
如何快速投入到生产中，通过以下的学习曲线可以快速的把学到的东西快速的投入到生产。
对于es6的学习，为了快速，并不建议一开始就去了解es6的整个语法糖以及技巧用法，当对于大多数代码，es6和java是一样的。可以先挑几章看着。
http://es6.ruanyifeng.com
阮一峰写的es6入门，推荐以下几个章节 1.let和const命令，2.Promise对象 3.Generator 函数的语法 4.Generator 函数的异步应用 5.async 函数 6.Class 的基本语法 7.Class 的继承 8.Decorator 9.Module 的语法
通篇阅读这几个章节，对es6的语法以及前端Promise（Generator 与 async也是Promise的一种扩展）的用有个大致的了解，接下来我们就可以创建以es6语法为基础的应用了
chapter 2 创建应用 👈
package.json
package.json为前端工程主目录下的文件，用户管理包的依赖和前端工程的启动脚本，其他的功能我没用过，下面是一个ant工程的package.json文件的内容，可以参考一下。
{
"name": "ant-design-pro",
"version": "1.1.0",
"description": "An out-of-box UI solution for enterprise applications",
"private": true,
"scripts": {
"precommit": "npm run lint-staged",
"start": "cross-env DISABLE_ESLINT=true roadhog dev"
},
"dependencies": {
"url-polyfill": "^1.0.10"
},
"devDependencies": {
"stylelint": "^8.4.0",
"stylelint-config-standard": "^18.0.0"
},
"optionalDependencies": {
"nightmare": "^2.10.0"
},
"lint-staged": {
"**/*.{js,jsx}": "lint-staged:js",
"**/*.less": "stylelint --syntax less"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 10"
]
}
初始化前端工程会可以使用npm init命令，这条命令可以生成一个package.json文件，根据提示信息生成完package.json文件后，就只有一些简单的项目信息，如果需要安装第三方依赖库，可以使用如： npm install --save jshint，这条命令会在dependencies下插入一条记录，如上dependencies里面的内容所示。 --save的意思是代码项目的依赖，dependencies里面的内容会直接编译到最终代码中去， npm install --save-dev jshint 如果加上--save-dev， 那么会在devDependencies里面插入一条相关记录，devDependencies里面的依赖项不会编译到代码当中去。什么样的代码不需要编译到最终代码中去？一些本身最为编译代码的库，如webpack这样依赖库是无需编译到最终代码中去的。
代码打包📦
代码为什么需要打包？
前面也说了，es6的语法很多浏览器不支持，而且作为单页面应用，代码也应该打包。
用什么工具打包？
webpack。
webpack如何使用？
webpack使用首先需要安装， npm install -g webpack
安装完webpack后，需要在项目的主目录里创建webpack.config.js作为webpack打包的描述文件。
// 這邊使用 HtmlWebpackPlugin，將 bundle 好得 <script> 插入到 body
const HtmlWebpackPlugin = require('html-webpack-plugin');
const HTMLWebpackPluginConfig = new HtmlWebpackPlugin({
template: `${__dirname}/index.html`,
filename: 'index.html',
inject: 'body',
});
// 檔案起始點從 entry 進入，也可以是多個檔案。output 是放入產生出來的結果的相關參數。loaders 則是放欲使用的 loaders，在這邊是使用 babel-loader 將所有 .js（這邊用到正則式）相關檔案轉譯成瀏覽器可以閱讀的 JavaScript。devServer 則是 webpack-dev-server 設定。plugins 放置所使用的外掛
module.exports = {
entry: [
'./src/js/main.jsx',
],
output: {
path: `${__dirname}/dist`,
filename: 'index_bundle.js',
},
resolve: {
extensions: ['.js', '.jsx','.json'],
},
module: {
rules: [
{
test: /\.(js|jsx)$/,
exclude: /node_modules/, // 这里面的不解析
loader: 'babel-loader',
query: {
presets: ['react', 'es2015', 'stage-0']
}
},
],
},
devServer: {
inline: true,
port: 8008,
},
devtool: 'source-map',
plugins: [HTMLWebpackPluginConfig],
};
这是一个webpack文件样例。
其中 entry 属性 表示打包需要的入口文件
output 属性表示打包完成输出的文件
module中的rule表示打包的规则，上面的文件中，打包使用babel-loader进行代码打包。 devtool：因为打包后的代码在前端页面中打开以后会面目全非，调试起来不方便，devtool增加里source-map文件之后，前端再打开调试工具的时候可以查看到源代码文件。 再多的我就不知道了，需要查看webpack的官网。
如上文件配置好之后，使用 webpack 命令，等待打包完成，会在dist目录下生成一个js文件，该文件就是最终代码，该js文件中包括了所有html，css，甚至是png等一些资源文件。
以上是创建一个简单的前端工程的大致思路，具体还是要实践，不懂的可以查看官方文档。
chapter 3 react ✍🏻
react简单介绍
react是什么？--react是一个前端框架
为什么要使用react --react使数据和展示分离，并且运用了组件化的思想，加快了开发效率。
如何开始？
先通篇读一下react的 基础部分。内容不多，基本两个小时就能理解。
理解redux
为什么要用redux？
react的理念是很简单，很理想化的，单凭react一些功能是做不到的，如网络请求。
react本身并不是很复杂，其理念也很简单。主要理念是数据归谁管，数据流向的问题。
react+redux+es6+react-redux-dom等等，这么多库加起来可能就晕了，一下子理解不了，请不要慌，我们可以把用户操作到页面输出想象成一个状态机机制，状态及最基本的是要能形成环状结构，用户点击了查询按钮，到页面输出一个表格，数据需要流转，至于如何流转，请看一下 这篇文章。
阮一峰写的 redux入门 对于看了官方redux还不懂的人是个福音。
我写了一个testFetch的例子，在github上，下载下来，看代码，不懂的可以问我，是一个很好的react+redux的例子。
chapter4 ant-design 👧🏿
ant design入门
如果上面几个步骤都完成了，那么可以进入ant-design的学习了，我也是在看ant design的例子。ant-design的理念是基于react+redux的，它简化了redux，使使用者使用起来更加方便了。
文档
入门ant design最快的方式还是需要翻阅ant的 官方文档
先看快速上手和项目实战体会一下ant。
七创后台管理目录结构
ant-design的目录结构如下
├── assets
├── common
├── components
├── conf
├── e2e
├── index.ejs
├── index.js
├── index.less
├── layouts
├── models
├── rollbar.js
├── router.js
├── routes
├── services
├── theme.js
└── utils
以上目录结构是src目录中的
routes: 最终页面展示的内容，可以理解为testFetch中的containers目录。
services: 网络请求。
models: 定义reducers以及effect。
components: 组件目录
其他的我暂时没有接触，还不知道用来做什么，等熟悉了一点再更新。
dva是redux和elm的缩影，官方文档在 这里
[站外图片上传中...(image-8ec32c-1525610542712)]
网友评论