总结:
-
函数式编程其实是一种编程思想,它追求更细的粒度,将应用拆分成一组组极小的单元函数,组合调用操作数据流;
-
它提倡着 纯函数 / 函数复合 / 数据不可变, 谨慎对待函数内的 状态共享 / 依赖外部 / 副作用;
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
Tips:
其实我们很难也不需要在面试过程中去完美地阐述出整套思想,这里也只是浅尝辄止,一些个人理解而已。博主也是初级小菜鸟,停留在表面而已,只求对大家能有所帮助,轻喷🤣;
我个人觉得: 这些编程范式之间,其实并不矛盾,各有各的 优劣势。
理解和学习它们的理念与优势,合理地 设计融合,将优秀的软件编程思想用于提升我们应用;
所有设计思想,最终的目标一定是使我们的应用更加 解耦颗粒化、易拓展、易测试、高复用,开发更为高效和安全;
当然也可以使用npm install手动单独下载对应依赖,但有些依赖必须指定版本,否则会有冲突。在项目目录下创建如下文件夹
src用于放置react组件,public用于放置静态文件,dist放置编译目标文件,config用于放置配置文件
3.配置webpack
在config中创建webpack配置文件,任意命名,我这里命名为webpack.config.js。创建用于控制路径的配置文件,我这里命名为paths.js
‘use strict’;
const path = require(‘path’);
const fs = require(‘fs’);
const appDirectory = fs.realpathSync(process.cwd());
const resolveAppPath = relativePath => path.resolve(appDirectory, relativePath);
module.exports = {
mainJs:resolveAppPath(‘src/main.js’),
html:resolveAppPath(‘public/index.html’),
buildPath:resolveAppPath(‘dist’),
};
paths.js文件用于配置在编译时可能用到的一些路径,并将其转化为绝对路径,这里导入了三个路径
1.mainJs:入口文件,可以理解为我们的静态页面在未编译时所引入的唯一js文件,这也是react官方推荐的模式
2.html:静态页面路径
3.biildPath:编译完成后的文件应该放置的目录
const path = require(‘path’);
const paths = require(‘./paths’);
const HtmlWebpackPlugin = require(‘html-webpack-plugin’);
module.exports = {
entry: paths.mainJs,
output: {
filename: ‘bundle-[hash].js’,
path: paths.buildPath
},
module: {
rules: [
{
test: /.(js|jsx)$/,
exclude: /node_modules/,
use: {
loader: “babel-loader”
}
},{
test: /.css$/,
use: [‘style-loader’, ‘css-loader’]
},{
test: /.(png|jpg|jpeg|gif)$/,
use: ‘url-loader’
},
]
},
plugins: [
new HtmlWebpackPlugin({
template: paths.html,
inject: true
})
]
};
entry选项用于指定入口文件,可以理解为我们的静态页面在未编译时所引入的唯一js文件
output选项用于指定编译结果,filename设置编译完成的文件名称,使用[hash]将编译完成的js文件加上哈希码,防止浏览器缓存,path指定js文件放置目录
需要注意的是除了使用babel-loader对js文件的语法进行转换之外,还要用style-loader和css-loader对css文件进行转换,否则在使用antd的样式时会报错,使用HtmlWebpackPlugin在编译时往html文件中插入编译后的js文件
对于babel的配置主要有两种方式,一种是在项目根目录下创建**.babelrc**文件
{
“presets”: [
“es2015”,
“react”
],
“plugins”: [“transform-class-properties”,[“import”, {
“libraryName”: “antd”,
“libraryDirectory”: “es”,
“style”: “css”
}]]
}
加入transform-class-properties插件可以使用属性初始化器语法,不用在构造函数中定义属性,同时配置babel-plugin-import,实现antd的按需引入
4.测试
在src目录下新建page目录,创建index.js文件,编写一个测试组件,这里用antd官方文档上的演示代码
import React from ‘react’;
import { Menu, Icon, Switch } from ‘antd’;
const { SubMenu } = Menu;
class Sider extends React.Component {
state = {
mode: ‘inline’,
theme: ‘light’,
}
changeMode = (value) => {
this.setState({
mode: value ? ‘vertical’ : ‘inline’,
});
}
changeTheme = (value) => {
this.setState({
theme: value ? ‘dark’ : ‘light’,
});
}
render() {
return (
<span className=“ant-divider” style={{ margin: ‘0 1em’ }} />
style={{ width: 256 }}
defaultSelectedKeys={[‘1’]}
defaultOpenKeys={[‘sub1’]}
mode={this.state.mode}
theme={this.state.theme}
<Menu.Item key=“1”>
Navigation One
</Menu.Item>
<Menu.Item key=“2”>
Navigation Two
</Menu.Item>
<SubMenu key=“sub1” title={Navigation Three}>
文末
js前端的重头戏,值得花大部分时间学习。
推荐通过书籍学习,《 JavaScript 高级程序设计(第 4 版)》你值得拥有。整本书内容质量都很高,尤其是前十章语言基础部分,建议多读几遍。
开源分享:【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】
另外,大推一个网上教程 现代 JavaScript 教程 ,文章深入浅出,很容易理解,上面的内容几乎都是重点,而且充分发挥了网上教程的时效性和资料链接。
学习资料在精不在多,二者结合,定能构建你的 JavaScript 知识体系。
面试本质也是考试,面试题就起到很好的考纲作用。想要取得优秀的面试成绩,刷面试题是必须的,除非你样样精通。
这是288页的前端面试题