closertb.github.io
closertb.github.io copied to clipboard
closertb
浏览issue 或 我的网站，即可查看我的所有博客
写于：2017-11-07 ## 前言 ## 作为一个前端，我们都听过结构，样式，行为分离；关于样式，我们都听过外联样式，内联样式和行内样式；关于这三者，什么权重啊，啊，对了，这些都不会出现在这篇文章里，这篇文章就说一些那些我们不怎么使用的，动态引入css样式的方法； ## 静态样式引入 ## 前面说过外联样式，内联样式和行内样式，所谓外联样式，即样式文件是一个单独的css文件，通过link标签引入；而内联样式，是一种存在于html文件中，但与页面结构元素分离的，他们都是以存在于style标签中；而行内样式，即存在于某一个标签中，他们只对当前元素有效；说那么多，一张图胜过千言万语；  无图说鬼话，有图说人话。是不是一下全看懂了，快夸我。样式引入方式的不同，也注定了他们作用的范围不同，外联能作用域多个html文件的**多个**htm页面的**多个**dom节点，两个多个；内联只能作用于**单个**html页面的**多个**dom节点；而行内嘛,就没多个了,就只能作用单个页面的样式属性所在的dom节点。 ## 动态态样式引入 ## 其实，HTML文件静态样式引入，只要是一个前端，应该都明白，所以这篇文章，重点是要说动态样式的引入，说一些不常见当可能很适用的方法； ### 行内样式 看下面一段代码： ```javascript var triangle = document.createElement('label'); triangle.style.width = '0'; triangle.style.height= '0'; triangle.style.position='absolute'; triangle.style.left...
写于：2018-07-18 上一篇：[GraphQL了解一下：基础篇][1] 下一篇：[GraphQL进阶篇: 挥手Redux不是梦][2] 在基础篇主要讲了GraphQL出现的意义与一些基础语法。如果对GraphQL还不是很了解的同学可以点击上方链接了解一下，再来跟进这一篇的实践。本篇主要讲述实现一个GraphQL Server与在React应用中引入GraphQL，代码不难，推荐跟着手敲一遍。 下面文章的代码都可以通过github下载：[地址传送][3]，里面包含两个文件夹：graphqlServer(服务端)与graphqlApp(客户端)。 ### 实现一个GraphQL Server ### #### 技术栈准备 #### 核心依赖（npm包）： - express：Node服务端框架； - apollo-server-express：express graphql中间件，提供- graphiqlExpress与graphqlExpress两个方法； - graphql：graphql js实现基础库； - axios：ajax通信，这里用于和已有的Restful API通信； 除了安装以上的核心依赖，你还需要安装babel相关的依赖，并配置babel编译文件，具体可查看上面git下来的文件配置。 #### 搭建服务...
写于：2018-11-06 ## 开篇 ## 第一次听说脚手架， 是我刚接触Vue，跟着网上大佬的文章，用Vue-cli从0搭建了一个Vue项目，一步一步配置,然后npm i, npm run dev，打开链接,一个网页就这么写好了，当时对于npm，webpack这些前端工程化一无所知，嘴里不自觉的吐出了两个字：'NB'。一年以后，一位新猿在Segmentfault上发出了[这样的提问][1]：  然后我就装着知道的样子就去回答了一下，答案是这样的：  粗狂的讲，这样的回答，好像没什么毛病。但既然是本着学习的态度，那这次就好好的讲一讲前端脚手架存在的意义，到底是个什么鬼，以及写一个脚手架到底有多难?所以接下来，文章将围绕下面几部分来讨论： - 前端脚手架存在的意义 - 脚手架的实质 - 写一个属于自己的脚手架有多难 ## 前端脚手架存在的意义 ## 随着前端工程化的概念越来越深入人心，脚手架的出现就是为减少重复性工作而引入的命令行工具，摆脱ctrl + c, ctrl + v，此话zenjiang? 现在新建一个前端项目，已经不是在html头部引入css，尾部引入js那么简单的事了，css都是采用Sass或则Less编写，在js中引入，然后动态构建注入到html中；除了学习基本的js，css语法和热门框架，还需要学习构建工具webpack，babel这些怎么配置，怎么起前端服务，怎么热更新；为了在编写过程中让编辑器帮我们查错以及更加规范，我们还需要引入ESlint；甚至，有些项目还需要引入单元测试（Jest）。对于一个更入门的人来说，这无疑会让人望而却步。而前端脚手架的出现，就让事情简单化，一键命令，新建一个工程，再执行两个npm命令，跑起一个项目。在入门时，无需关注配置什么的，只需要开心的写代码；另外，对于很多系统，他们的页面相似度非常高，所以就可以基于一套模板来搭建，虽然是不同的人开发，但用脚手架来搭建，相同的项目结构与代码书写规范，是很利于项目的后期维护的；以上就是为什么脚手架存在的意义，**...
写于: 2017-08-05 [同学，GraphQL了解一下：基础篇][1] [同学，GraphQL了解一下：实践篇][2] 首先，需要澄清，这有点标题党，像Redux， Mobx，Flux这种状态管理库，在日常的开发中的地位还是难以撼动的，但是我们可以试着去了解ApolloClent，它在做本地状态管理所应用的思想，ApolloClient官方有一片文章：[The future of state management][3]。如果对GraphQL还不是很了解的同学，可以看一下开头的两篇文章。作为自己今年下半年学习的重点，如果仅仅去了解好像有点半途而废的感觉，所以我选择如果学，请深钻的道路。 文章所引用的[源码地址][4] 在[实践篇][2]的最后，我在最后一段抛出graphql怎么与现在的redux做集成，而[MagicPig][6]同学在评论里告诉我ApolloClent其实可以不依赖第三方库，自己做状态管理。当时自己入门不深，也是一脸懵逼，后面受其指点，在[ApolloClent官网][7]转悠，发现还有很多宝藏可以挖掘。 ### 用ApolloClent代替Redux ### 在Redux的官方教程中，曾用一个TodoList来介绍Redux的状态管理,看下图：  这上面的演示，如果你不是一个react新手，应该不会太陌生。在react应用中，加入redux，实现本地添加list条目与条目状态切换，以及列表的过滤条件切换，如果关于它的实现还不是很了解，可以到[Redux官网][8]重新温习一次。 ApolloClent的[Local state management][9]章节，为了说明怎样用ApoloClient管理应用的本地状态（Learn how to store your local data in Apollo Client），官方提供了一个示例，应用其state功能以及grapql本地查询语法，实现了一个拥有同样功能的TodoList，[CodeSandBox源码地址][10]，不过官方提供的这个在线演示，好像是少了些东西，我并没有完全跑成功，我把东西down下来，改把，改把，在本地还是跑成功了，想了解的，可以通过上方的地址下载。...
写于：2018-09-28 关于前端React组件测试（jest，Enzyme），网上有大量的入门文章，可以看看，但如果你确实想了解前端自动化测试，个人更推荐看官方的文档和一些比较官方的测试案列，这里推荐两个： 1. [enzyme官方文档][1]，涵盖了各种说明和API； 2. [jest官方文档][2]，涵盖了各种说明和API； 3. [antd基础组件库][3]，每个组件都有较丰富的测试用例； 本篇文章适合对前端组件测试有一定概念的同学，本文将包含以下几点： - shallow, mount, render三种方法渲染的区别； - 组件事件的模拟及事件回调的mock； - 异步事件的模拟； ### 三种方法渲染的区别 ### 组件测试最重要的前提，就是你需要知道怎么实例化自己的组件，然后才能去判断是否渲染正常，交互怎么样，功能是不是都OK，而这就和下面要说的渲染方法相关，了解一下三种方法的区别，有助于自己少掉坑，少抠脑壳，少掉头发，用一个关于antd Select组件的示例来说明。 ```js function RenderTest() { return ( test1 test2...
写于： 2019-03-07 虽然在工作中用react+antd写页面写了一年，但从来没自己去认认真真配置一个webpack，去分析去优化自己打出的包。在工程化成熟或者大点的公司，都有自己的打包工具，所以自己工作中很少去琢磨这些。为了试一下写出的组件库（[antd-doddle][1]）性能，就尝试自己去写一个webpack构建，真的是吓了自己一跳，流水账（tu）开始。 ### 从npm run dev开始 ### 打包工具：webpack4 + babel6 开始前，大概说一下项目内容。项目基于react+react-router+antd+antd-doddle,自己日常在这个项目做一些技术验证与demo,就4个页面。组成如下： ```js ``` 页面js与公共（node_modules引用）js使用splitChunks分开打包。npm run dev，结果如下图，async.bundle.js大小24M，有点惊人的大。  打包工具：webpack4 + babel7  ## 开始正题，npm run build ## ### development与production ###...
写于：2019-08-04 ### 起因 最近在看以前的代码时，发现年初在熟悉react hooks新特性时写下了这样一段代码： ```javascript let i = 0; function Test(props) { const { loading, error, startFetch } = props; useEffect(() => { const $btn = document.querySelector('.btn'); // .info-con...
写于: 2019-02-22 这并不是自己第一次发npm包， 所以这里没有多少入门的知识。在此之前已经有一篇[前端脚手架，听起来玄乎，实际呢？][1]，但这一次的npm包和上一次的不是一个概念，前者只是一个脚本工具，而这个npm包是日常开发中方法和组件的集合, 是一个库。 在读本文前，假定你已经对npm包有一定概念，熟悉Babel编译和webpack打包的常规用法，知道一些前端工程化的知识。假如你也想自己发布一个npm仓库，但对这一块了解的不是很多，推荐webpack官方的[创建一个 library][2] ### 打包模式：日常构建与库的构建 ### 在前端日常开发中，引入npm库，执行webpack构建已经是一件不能再平常的事情。但大多数时候，我们不关心这个npm库是怎样构成的，我们只需要知道怎么使用，像antd；在工程化成熟的公司，也不关心webpack的配置到底是怎样的，只需要npm run start或npm run build去启动一次热加载或打包。但是如果你是编写一个npm仓库，这些东西你都需要知道。从那时的无知说起，起初，我用公司的构建工具（类似于roadhog）去打包我的库，没有坎坷，构建出一个2M多的包并成功发布。  在测试项目中引入，构建成功。 ```js import { EnhanceTable, WithSearch } from 'antd-doddle'; // 引入仓库 ``` 在浏览器中打开，打击开始到来： ...
写于：2019-06-25 为了方便大家使用，已经将这个鸡腿进行了封装（@doddle/doddle-bisheng-theme）：使用详见[Readme][1] 为了工作，也为了长点见识，费心费力捣腾了一个[组件库antd-doddle][2]，还是有成长的，总结都写了两篇，收获还是有的，如果你喜欢听故事： - [从dist到es：发一个NPM库，我蜕了一层皮][3] - [从24m到1m, 一个react+antd后台系统构建打包历程][4] - [组件文档地址(首次加载较慢，嗑瓜子等等)][5] ## 为什么要鸡腿 组件库写出来了，项目也陆陆续续用了，但组里小伙伴用起来，总是要问这个配置怎么写，这个组件怎么用，手把手教学，总不能让小伙伴都去看源码实现吧，所以自己一发狠，用一整晚，写了一篇[组件库使用指南][6]，基本就是下图这个风格，示例代码有了，输入输出配置有了，输出效果有了，临时解决了一些问题，但随着业务膨胀，使用人员逐步增多，这种静态文档已经不能满足需求了。  ## 鸡腿是要解决什么 不是解决解饿，是让生活更富有。这一篇[组件库使用指南][8],该有的内容都有，但问题还是很多： - 整个组件库就一个指南，特别长，没有很好的分类，无法快速找到自己的所需； - 由于篇幅和实现难度，组件库demo太单一，覆盖面太小； - 组件库没有用例，每一次修改，没有demo用例来快速测试，发布了才测试，有比较大的风险，容易造成频繁发版； - 自己又想捣腾了； ## 鸡腿原配方 市面上有很多成熟的方案，推荐比较多的就是[Docz][9]，但试了一下，使用起来并没有介绍的那么好用，规范太死板，复杂demo编写实现困难，所以最后还是采用了antd的组件库方案[Bisheng][10]，毕竟是完美兼容react，与antd的组件库。 花了一两天折腾了一下Bisheng，发现其还是很好用的，库更多是作为一个路由适配的数据流容器(RenderProps)，可配置性很高，UI完全由使用人自己定制（官方称其为主题），库本身提供一个简易的主题[Bisheng-Theme-One][11]。 只要搞懂了数据长什么样，编写一个展示性组件就显得不是那么难了，从下图看看（图片路由：http://localhost:8090/guide/introduce）：...
写于：2019-02-04 ## 吐槽大会 ## 刚接触React时，新鲜感爆棚，原来前端代码可以这样写，页面可以这样搭，事件可以这样绑定，一切的一切都是这么让人好奇。但在公司做了好几个中后台系统以后，发现自己写出的代码千篇一律，做出的页面就像多胞胎，随意从工作中截了三个页面：  我工作主要围绕着React，Dva，Antd这一类框架展开，yes, you are right, 这一套组合就是为中后台系统而生的，复制粘贴，不断的重复，真的就是感觉自己在搬砖，做着体力劳动，如果日复一日的这样下去，我估计30岁就会被退（gun）休（dan），不是被公司，而是被这个圈子。  ## 前端练习生 ## ### 组件化的再封装 ### 当你用着Antd的各种组件（Form, Table, Row，Button等等），省去了担忧写页面样式的烦恼，但总感觉自己干了很多重复工作，比如渲染一个列表，你需要做如下的配置，N个列表页，这样的代码你要写N次； const pagination = { total, current: search.pageNum, pageSize: search.pageCount,...