xushao

TA的文章
  • 前端单元测试分享
    前端单测 主要内容 单元测试的相关内容 代码要求 jest + vue test utils 例子讲解 现状 很多人都认为前端都是ui dom,没啥好单测的,事实上确实也没很少有团队严格执行要求前端单测覆盖率的,多数是针对一些开源的库、基础库这种复用率极高的代码,不过很多团队已经开始在补充这块的建设 其实单元测试都是很有必要的,前端也不例外 为什么需要单元测试 增加程序的健壮性 保证重构正确性 代替注释阅读测试用例了解代码的功能 测试驱动开发(TDD,Test-Driven Development) 单元测试基本概念 断言(assert) 断言是编写测试用例的核心实现方式,根据期望值判断本条c...
    •  2
    •  1
    •  2020-04-08
  • react快速开始二 本地配置
    前言 很早之前写了个codepen的react教程,方案很简单,引入react、react-dom依赖,其他主要是要熟悉codepen的使用。 这个方案对于想快速上手了解react的有一定用处,但是在实际项目中还是需要本地配置一套基于react的项目结构。 目前脚手架存在的问题 一般的框架都会有对应的cli,比如vue-cli, angualr-cli, create-react-app,最近发现react、vue的cli都将细节配置给隐藏掉了(主要是webpack配置),只能通过config变量自定义webpack配置,各种框架的方式还不太一样,react需要单独引入新的库去修改,好处是屏蔽...
    •  1
    •  0
    •  2019-10-17
  • 如何实现下载
    前言 我们一般在浏览器看到的下载功能,基本是点击按钮就会触发浏览器的下载功能,将文件下载在本地。当作为码农的我们接到要求实现一个下载功能,我们该如何实现呢? 很多时候前端接收到下载需求,一般只要告诉对接的后端,后端处理就好了, 那么后端是如何处理的呢? 最近身边同事遇到文件无法下载的问题,在帮忙解决的时候发现, 前后端两位竟然都不知道该如何处理,在解决问题的同时顺便整理一波。 文件下载实现方式 1.a标签使用download 下载内容 后端直接提供url的文件 使用方式: 直接 <a href="path" download="filename">文件下载</a> 或者通过js触发,创建a标签...
    •  1
    •  2
    •  2019-10-05
  • nextjs 如何配置移动端适配
    解决问题方案: 使用amfe-flexible 引入postcss,使用px-to-rem、autoprefix插件 什么是amfe-flexible 淘宝提供的解决移动端适配方案, 具体参考https://github.com/amfe/article/issues/17 注意:目前官方已经明确表明,该方案存在一些问题,建议使用vw+rem的方案,后续调研 如何使用? 直接在html中直接引用amfe-flexible.js。 在我们的项目中的配置,将amfe-flexible.js存放在根/static目录下面,在Head标签通过script标签引用 <Head> <title>Dem...
    •  0
    •  3
    •  2019-09-22
  • 编辑器相关知识整理
    编辑器相关知识整理 富文本编辑器在前端范畴一直是比较复杂、难度非常大一件事情,各个社区、论坛都有自己写的比较好的编辑器,但是估计是因为研发成本太高,故此没有对外开源。 做的比较好的石墨文档、语雀、谷歌文档等, 用语雀比较多,功能真的很完善,表格操作、md格式编辑、脑图编辑等。 这里先整理了一些知识: hax整理的:https://github.com/hax/hax.github.com/issues/41 基本覆盖的比较全了, 衍生自定义的定制实现: 基于quill的vue实现: https://surmon-china.github.io/vue-quill-editor/ 基于quill...
    •  0
    •  1
    •  2019-08-17
  • 重构的经验
    一般很多公司因为前期人员不足,业务发展飞快等原因,产生各种祖传代码,等项目稳定以后一般都会回过头重构 重构的时机: 需求稳定,时间比较充裕 有重大需求变更的时候 重构分类: 纯前端重构, 技术栈升级比如 vue1 到vue2 技术栈变更,比如jq到vue, react到vue等 或者纯业务重构 单测的重要性 前后端分离重构 需要参与的人员: 前端 后端(前后端分离) 测试(必须要得到他们支持) 老大们、产品拍板同意(大块的重构是要占据正常上班时间的,会影响其他迭代) 重构比较熟的业务,确定好时间节点,直接干就好了 不熟的业务,需要先理好需求,一般我会写一个细节分析分档,拉上熟悉业务的后端、测试...
    •  1
    •  2
    •  2019-08-17
  • react重点概念
    组件(Component) react中component是基本的单元, 所有的功能、代码都是封装在组件里面,包含html、js、css,通过React.Component 或者React.PureComponent等创建。 顺便延伸一下前端发展 component的概念(可能不准确), 印象中最早是ng里面的directive,再试polymer,web-component 再到vue react angular中的component就已经随处可见了。 state react数据变化的基本单元之一,在当前组件使用,state变化,会触发render函数,重新渲染ui。 注意: 只能通过set...
    •  1
    •  0
    •  2019-07-21
  • react快速开始一 在线运行
    在线体验CodePen创建教程 点击左上角Pen,进入编辑区域 点击Settings, Pen Title输入项目名称 点击Pen Settings Javascript 选择babel 点击Add External Scripts/Pens 输入react,添加react, react dom 依赖,点击sava Hmtl中输入元素 <div id="root"></div> JS输入逻辑 class App extends React.Component {   constructor(props) {     super(props);     this.state = {      ...
    •  0
    •  0
    •  2019-07-06
  • 如何学习React?
    完全掌握react需要掌握的相关知识点: react基础语法,生命周期,state props,组件,数据传递,fiber hooks suspense(新版本引入)等相关概念 react-router redux/flex/mobx/grapql webpack ant-design/ant-design-mobile等ui库 良好的js基础 fetch/ajax 学习react的过程: 前期建议多看文档,多写例子,因为整套架子搭建起来成本太高,建议先使用umi(框架,包含完整构建)或者create-react-app (脚手架)创建基础项目工程,手动实现一个todo(例子),感受state...
    •  0
    •  1
    •  2019-06-23
  • 前端常用构建工具
    grunt 基于临时文件,以文件为单位打包 传送门: https://www.gruntjs.net/ gulp 文件操作基于node steam,效率比grunt稍微快一些,并且拥有丰富的插件 传送门:https://gulpjs.com 主要是根据task + plugin机制,细节不做过多描述: gulp.task('somename', function() { gulp.src('src/*.js') .pipe(minify()) .pipe(gulp.dest('build')); }); 适用于构建less,css,es6/typescript 转...
    •  0
    •  1
    •  2019-06-23