blogsome
blogsome copied to clipboard
hwen
something right here
--- title: 前端路由的前生今世及实现原理 --- 原文发于我的博客：https://github.com/hwen/blogSome/issues/2 ## 什么是路由 路由这个概念最先是后端出现的。在以前用模板引擎开发页面时，经常会看到这样 ```s http://hometown.xxx.edu.cn/bbs/forum.php ``` 有时还会有带`.asp`或`.html`的路径，这就是所谓的SSR(Server Side Render)，通过服务端渲染，直接返回页面。 其响应过程是这样的 1.浏览器发出请求 2.服务器监听到80端口（或443）有请求过来，并解析url路径 3.根据服务器的路由配置，返回相应信息（可以是 html 字串，也可以是 json 数据，图片等） 4.浏览器根据数据包的`Content-Type`来决定如何解析数据 简单来说路由就是用来跟后端服务器进行交互的一种方式，通过不同的路径，来请求不同的资源，请求不同的页面是路由的其中一种功能。 ## 前端路由的诞生的缘由 前端路由的出现要从 ajax 开始，为什么？且听下面分析 (ˉ▽￣～)...
# React多页面-项目配置 ## 目录 - 前言 - 改造CRA - 多入口 - 路由重写 - htmlPlugin配置 - react-loadable配置 - bundle分析 ### 前言 多页面项目准确来说是个多个SPA，每个SPA都可以看作是单独的应用。 有时候可以将一个项目拆分成多页面，每个页面当作一个模块，每个模块的功能相对独立，这样打包时就可以分开打包，从而优化项目的加载速度。因为如果项目太大，将整个项目都打包成一个SPA，就会显得非常臃肿。首次加载速度也会很慢。 还有一种场景，比方说移动端的活动页面，每次活动之间，比较互相独立，所以也非常适合做成多页面，每次活动都当成一个SPA来开发。同时多次活动页面开发下来，可以积累很多通用的组件。也为未来接入运营系统打下根基。 选择从CRA（create-react-app）开始，是因为CRA是很多接触react开发的人的新手村，也是很多同学搭建react项目的选择。从NPM下载量来看，每个月都有4w~6w的下载，可见覆盖率非常高。 我们通过扩展CRA的配置来达到多页面的需求。 以搭建一个活动项目来模板，下面会从各个方面来探讨。因为我会将内容成三大类，而且有清晰的目录。所以即使有些地方可能暂时没用到，或者没能理解清楚，也可以以后再来查看。 - [项目地址](https://github.com/hwen/react-multi-pages) - [React多页面-移动端方案探讨...
原文发于我的博客：https://github.com/hwen/blogsome/issues/5 最近从`vue`转到`react`，遇到了一个问题。 场景：  如图，有一个``组件A``，它接受一个从父级页面传过来的 dataList。而父级`页面X`里的 dataList 是 redux store 的数据。dataList 的数据会通过一个接口获取返回，也就是 dataList 是异步获取的。 ``组件A``需要根据 dataList 来动态展示数据，用户与``组件A``交互后，变化的数据，希望回传给`页面X`。 ### 保证组件的纯净 大家可以看看 `ElementUI` 和 `Ant Design React` 的源码，可以发现子组件跟父组件的数据交互，都是通过回调事件(vue 里是 $emit)，将更改后的数据返回给父组件。例如，`antd` 的 `timepicker`...
原文发于我的博客：https://github.com/hwen/blogSome/issues/1 写在前面：本文主要介绍一下前端单元测试，并提供一个单元测试的例子（模板），主要是例子为主，通过尝试就能慢慢上手前端单元测试。并记录自己的一些单元测试调试技巧。 ## 要不要写单测？ 关于这个 cnode 上就有个很有意思的讨论 [做个调查，你的 Node 应用有写单测吗？](https://cnodejs.org/topic/596d770c8f05de0819fdb2b5) 看完这个应该会有结论？如果没有，就回帖跟别人探讨下~ ## 测试 测试有分为 - 单元测试（单测） - 集成测试 - 系统测试 主要区别是单测倾向于测试模块内部运行逻辑及功能，集成测试倾向于模块间互相组合跟调用的测试。 系统测试（当然你要说，还有自动化测试）是对整个系统的测试，主要由测试人员而非开发人员负责。 本文只讨论单测的范畴，对集成测试有兴趣的话，可以看下 Vue 的集成测试代码。 ## 前端单测现状 测试本质上就是假定一个输入，然后判断得到预期的输出。而前端与后端相比，夹杂着浏览器 DOM 操作，异步请求，...