前端开发
xjl271314
最近正在博客项目的迁移工具,后期会迁移到github上
展开
-
使用webpack打包组件和基础库并发布至npm
webpack除了打包应用,也可以用来打包js库和一些自定义组件库。单纯只是打包js库和组件库的话 使用rollup打包也是一个不错的选择。我们来实现一个简单的打包例子,这个例子需要满足以下几点功能:需要支持打包压缩版(x.min.js)和非压缩版本(x.js)。支持 AMD/CJS/ESM 模块引入。支持通过script脚本直接引入链接。// ESMimport * as Tool from 'tools';//cjsconst Tool = require('to原创 2020-05-19 18:28:28 · 5167 阅读 · 2 评论 -
前端工程师成长路线规划
各位博友们好,目前工作中的一些积累已经同步到本人github上了欢迎各位浏览与Star,目前会持续更新。原创 2020-03-24 20:11:48 · 614 阅读 · 0 评论 -
css-grid布局
2.Grid布局知识点回顾gird布局grid-template-columns属性grid-template-rows属性使用百分比属性定义行高和列宽使用repeat函数简化使用auto-fill 关键字自动填充使用fr关键字定义行高和列宽使用minmax函数定义范围使用auto 关键字自适应布局使用grid-gap设置单元格之间的间距使用grid-template...原创 2020-01-05 16:58:00 · 261 阅读 · 0 评论 -
creat-react-app中的serviceWork.js解读
serviceWorker.js关于service work的知识可以戳这里 [service work 介绍]关于 URL 对象可以参考 URL介绍// 这些代码是用来注册service worker服务的// register() 方法需要手动调用 并不会自动执行// This lets the app load faster on subsequent visits in pro...原创 2019-07-23 11:36:08 · 3931 阅读 · 0 评论 -
学习笔记——css世界
流“流”又叫文档流,是css的一种基本定位和布局机制。流是html的一种抽象概念,暗喻这种排列布局方式好像水流一样自然自动。“流体布局”是html默认的布局机制,如你写的html不用css,默认自上而下(块级元素如div)从左到右(内联元素如span)堆砌的布局方式。块级元素和内联元素块级元素是指单独撑满一行的元素,如div、ul、li、table、p、h1等元素。这些元素的display值...翻译 2019-07-24 21:22:28 · 438 阅读 · 0 评论 -
Window常用属性详解
window.devicePixelRatio返回当前显示设备的物理像素分辨率与CSS像素分辨率的比值。该值也可以被解释为像素大小的比例:即一个CSS像素的大小相对于一个物理像素的大小的比值。window.history只读属性,用来获取History 对象的引用,History 对象提供了操作浏览器会话历史(浏览器地址栏中访问的页面,以及当前页面中通过框架加载的页面)的接口。在hist...原创 2019-05-30 11:40:41 · 1622 阅读 · 0 评论 -
react-native离线缓存策略
前言为什么要进行离线缓存?对于某些应用来说,特别是视频App,视频的数据是存储在服务器的数据库上的,如果用户每次都去请求服务器,这对服务器的压力比较大,资源浪费也比较严重。而且用户可能希望在没有网络的情况下,也可以观看视频,这时候离线缓存是一个比较好的解决方案。离线缓存方案A :优先从本地获取数据,如果数据过时或者不存在从服务器获取数据,数据返回后同时将数据同步到本地数据库。B:优先...原创 2019-05-21 09:21:01 · 2393 阅读 · 0 评论 -
webpack4打包配置教程看这篇就够了
前言本文将从0开始配置一个webpack打包一个项目的完整流程。准备工作打开终端 新建一个文件夹 用于管理项目mkdir webpack4-demo创建项目在项目内部打开集成终端npm init 生成 一个package.json{ "name": "webpack4-demo", "version": "1.0.0", &原创 2019-03-08 17:35:37 · 4653 阅读 · 1 评论 -
React16.3后的生命周期理解
可以直接拷贝这段代码,然后执行打开控制台查看生命周期的流程。//ComponentLifeCycleimport React, { Component } from 'react';export default class ComponentLifeCycle extends Component { constructor(props) { super(prop...原创 2018-09-06 17:53:54 · 883 阅读 · 0 评论 -
React-Navigation学习笔记
如何跳转到一个新的页面?this.props.navigation.push(routerName)如何返回之前的页面?this.props.navigation.goBack()如何在页面之间传递参数?this.props.navigation.push('Discovery',{ id:1111, name:'哈哈哈'})如何在新页面...原创 2018-08-28 14:58:33 · 462 阅读 · 0 评论 -
HTTP Request Header 请求头理解
Header 解释 示例 Accept 指定客户端能够接收的内容类型 Accept: text/plain, text/html Accept-Charset 浏览器可以接受的字符编码集 Accept-Charset: iso-8859-5 Ac...转载 2018-07-11 09:42:59 · 27685 阅读 · 1 评论 -
产品运营-优惠券的设定和使用
场景:在电商类等程序中,往往会涉及到商品价格的计算,诸如下面的情况:(测试实在chrome的控制台进行)// 加法 3.1+1.5 = 4.6 正确 0.7+0.1 = 0.7999999999999999 错误 3.2+4.4 = 7.6000000000000005 错误// 减法 2.8-2.1 = 0.6999999999999997 错误 2.3-1...原创 2018-05-08 19:58:03 · 540 阅读 · 0 评论 -
初探CSS4 -webkit-image-set
今天要讲述的是一个可以在webApp端适用的一个自适应图片大小的小技巧,来源于css4方案的 -webkit-image-set属性。前言这里是有关属性的基本语法:image-set() = image-set( <image-set-option># )<image-set-option> = [ <image> | <string...原创 2018-04-08 18:21:28 · 1479 阅读 · 0 评论 -
ES6 Set集合用法
场景:近期在开发一个桌面的收银系统,开发过程中遇到这个一个问题,在用户购买完产品之后选择使用购物卡进行支付的时候,由于购物卡分很多种类,包括通用,酒水卡,日用品卡(类似优惠券的使用范围限制的问题),如何判断用户购买的产品是否可以使用当前的购物卡进行支付呢?首先想到的是使用集合的概念,就是ES6里面的Set结构。集合是什么意思?集合(Set)是由一组无序但彼此之间又有一定关系性的成员构成,每个成员在集原创 2017-12-16 22:30:36 · 3301 阅读 · 0 评论 -
HTTP常见状态码
信息提示类100 (Continue/继续) 指客户端询问是否可以在后续的请求中发送附件,服务器返回100表示允许,返回417表示不允许。(在HTTP1.0中添加。)101(Switching Protocols/转换协议) 服务器将遵从客户的请求转换到另外一种协议。(在HTTP1.0中添加。)请求成功200(OK/请求成功) 客户端请求服务器成功,并取得所需资源。一般用于相应G翻译 2017-12-02 20:51:20 · 176 阅读 · 0 评论