桥南小院

摘要： 背景：节俭的、清晰的代码目录结构，可维护性、复用性高的公共组件是开发时良好的习惯； 一、文件目录结构设计： ├── build // 构建相关 ├── config // 配置相关 ├── src // 源代码 │ ├── server // 所有请求api、mock请求、axios封装 │ ├── 阅读全文

摘要： 背景：表格是最为通用的展示方式，为了展示的统一性，以及分页组件的重用，这里写一个分页组件，供比较多或者较少数据2种表格进行分页展示。 分页组件： 使用示例： 说明： 加入分页后表格的展示数据均由分页控制，即通过传入的tableBegin监听改变 阅读全文

摘要： 背景：为了实现某些功能，如：数据排序、分组、筛选、深拷贝等，自己写的函数或网上搜索处理的转换函数质量无法保证，这时直接使用成熟的js第三方库是首选。 *注：“framework(框架)”，“library(库)”和“tool(工具)” 可以根据情境，在不同时期，对不同的人，意味着不同的东西。 一、L 阅读全文

摘要： 背景： 前端页面模拟仿真操作，目的是避免每次更新相关内容重复之前的测试操作，减少不必要的时间投入，以及校验功能的可用性。但是目前元素定位是个问题（每次页面有修改都要重设某些元素定位） 使用Nightwatch进行E2E测试 使用Nightwatch进行E2E测试 E2E测试 不同于行为驱动测试（BD 阅读全文

摘要： 结论——用变量来缓存数组长度，效率会更高 阅读全文

摘要： 背景：页面数据展示过多，我们会添加分页和搜索来定位需要查看的数据，当页面切换后，搜索的关键字会被清空 解决方案：sessionStorage 关闭浏览器前均存储检索的关键字 1.存储方法： sessionStorage.setItem('xxx', null) sessionStorage.setI 阅读全文

摘要： 使用场景： 1.表单校验： 2.自定义校验： 3.数据过滤： 一、表单校验： { pattern: /xxxx/, message: 'xxxx', trigger: 'blur' } { validator: validatorFun,required: true, type:'array' } 阅读全文

摘要： 一、使用TypeScript： 背景： RollBar是一个网页检测的网站，该网站统计了2018年前端项目抛出异常的种类，其中有七种是type error，即类型错误。异常最多的类型是读取了undefined变量的属性 而这个问题可以通过TS定义严格的数据类型解决： TS和VSCode（一款IDE） 阅读全文

摘要： 背景： frame嵌套的页面：高度默认很小，而且如果不在相同域名，无法访问内部的DOM元素 1.如果设置固定的高度，部分屏幕部分满足需求,这里使用动态获取浏览器屏幕高度的方法设置：这里去除顶栏100px高度，自适应屏幕 2.如何操作iframe内部的DOm: 更简单的方法：通过name获取 也可以获 阅读全文

摘要： 背景： 问题1.单击过快或使用双击后，会优先触发单击动作，可能出现执行多次单击动作，而规避方案就是：当出现双击动作时，不执行任何单击动作。 问题2.单击父元素，触发了子元素的单击动作：停止当前节点及所有后续节点的同类事件 问题3.右键触发了浏览器的右键菜单，如果屏蔽：父元素阻止冒泡事件 问题1的解决 阅读全文