xushao
  • react快速开始二 本地配置

    前言 很早之前写了个codepen的react教程,方案很简单,引入react、react-dom依赖,其他主要是要熟悉codepen的使用。 这个方案对于想快速上手了解react的有一定用处,但是在实际项目中还是需要本地配置一套基于react的项目结构。 目前脚手架存在的问题 一般的框架都会有对应的cli,比如vue-cli, angualr-cli, create-react-app,最近发现react、vue的cli都将细节配置给隐藏掉了(主要是webpack配置),只能通过config变量自定义webpack配置,各种框架的方式还不太一样,react需要单独引入新的库去修改,好处是屏蔽了细节配置,将最复杂的webpack配置隐藏掉,用户开箱即用,坏处是对于初学者来说屏蔽了最复杂的配置项, 进阶的路上容易忽略掉重点。 最近有个小需求,也开始从0搭建了一个react项目, 异常的艰难,...
    • 1
    • 12
    • 0
    • 2019-10-17
  • 如何实现下载

    前言 我们一般在浏览器看到的下载功能,基本是点击按钮就会触发浏览器的下载功能,将文件下载在本地。当作为码农的我们接到要求实现一个下载功能,我们该如何实现呢? 很多时候前端接收到下载需求,一般只要告诉对接的后端,后端处理就好了, 那么后端是如何处理的呢? 最近身边同事遇到文件无法下载的问题,在帮忙解决的时候发现, 前后端两位竟然都不知道该如何处理,在解决问题的同时顺便整理一波。 文件下载实现方式 1.a标签使用download 下载内容 后端直接提供url的文件 使用方式: 直接 <a href="path" download="filename">文件下载</a> 或者通过js触发,创建a标签执行下载 注意事项: 下载资源必须同源,无法跨域,这块被坑了很久,网上搜的中文资料都没有提及到这块,跨域的使用属性只会打开图片,在标准文献上才有提示明确提示 同时存在兼容性,只能兼容chrome、fi...
    • 1
    • 21
    • 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>Demo</title> <meta name="viewport" content="initial-scale=1.0, width=device-width" /> <script src="...
    • 0
    • 53
    • 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的react实现:https://github.com/zenoamaro/react-quill 基于draft的实现:https://github.com/margox/braft-editor ...
    • 0
    • 22
    • 1
    • 2019-08-17
  • 重构的经验

    一般很多公司因为前期人员不足,业务发展飞快等原因,产生各种祖传代码,等项目稳定以后一般都会回过头重构 重构的时机: 需求稳定,时间比较充裕 有重大需求变更的时候 重构分类: 纯前端重构, 技术栈升级比如 vue1 到vue2 技术栈变更,比如jq到vue, react到vue等 或者纯业务重构 单测的重要性 前后端分离重构 需要参与的人员: 前端 后端(前后端分离) 测试(必须要得到他们支持) 老大们、产品拍板同意(大块的重构是要占据正常上班时间的,会影响其他迭代) 重构比较熟的业务,确定好时间节点,直接干就好了 不熟的业务,需要先理好需求,一般我会写一个细节分析分档,拉上熟悉业务的后端、测试、产品,确定所有的点都ok以后,再开始干 上线方式和移动云目前的方式类似, 基本都是开发一部分上线一部分,用iframe嵌入,或者自己手动再实现一套菜单和头 特别注意的一点,小的改动(特别是新接手的业...
    • 1
    • 23
    • 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。 注意: 只能通过setState({state: ''}) 修改state,不能直接this.state = 'xxx'赋值; setState可能是异步的,如果想立即拿到setState后的值, setState(obj...
    • 1
    • 35
    • 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 = {       name: 'hello react'     }   }   render() {     const {name} = this.state;     return (       <div>{...
    • 0
    • 48
    • 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、props、component 、事件 然后尝试手动搭建完整工程,手动配置weppack,引入redux, react-router 实现一个完整例子 进阶: 学习react 源码,了解虚拟dom,...
    • 0
    • 25
    • 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 转es5等 资源整合,转化,grunt能做的 gulp基本都能做,性能、写法都优于grunt fis3 browserify webpack 基于commonjs,es6 modules,将资源打包整合...
    • 0
    • 20
    • 1
    • 2019-06-23
文章分组
暂无数据