实用功能
文章平均质量分 93
@baby张
但凡不能杀死你的,必定会使你更强大。
展开
-
(已开源)基于高德SDK 、Api,实现纯H5的精准坐标选址工具
背景由于第一版是基于端上 Windvane 做的跨页面选址工具,社区内有不少同学希望做个支持纯H5的版本这也是我在一期时候的待完善计划之一一期:基于 高德 + Windvane 的选址工具,对高德选址组件说:拜拜一期端版本基础功能整个选址工具做成一个单独维护的项目,通过端上能力,跨页面访问,通信并返回最终数据结果。功能分析其中借助端上的能力有:openPage 新开页面exitPage 退出容器getLocation 获取(火星坐标)经纬度nativePostMsgToJs原创 2021-11-18 11:13:52 · 1561 阅读 · 3 评论 -
基于 高德 + Windvane 的H5选址工具,纵享丝滑,对高德选址组件说:走你
一、背景1.1 需求**多个产品和业务方反应:**高德的选址组件不好用,跟demo一样,能不能换一个?秉承着,作为一名即将优秀的程序员不能 Say NO 的原则,我接了下来1.2 现有方案缺失于是我查看了菜鸟可能涉及选址的多个App,发现基本还是使用的高德选址组件。个别的项目里有简单的选址功能,无法满足业务需求,且耦合性太强无法通用(如果已经有了,那可能是我没找到 勿怪)二、业务中分析痛点对于一般业务需求这个选址还是没毛病的以下只针对特殊业务需求,对高德选址组件的客观分析原创 2021-09-03 18:55:48 · 861 阅读 · 4 评论 -
(保护原创)github 开源授权协议 -- 防止源码被他人用于商用(我的被侵权了)
起因:今天发生一个很郁闷的事,自己5个月前在github上 掘金博客上分享的大屏数据demo 源码,被某宝不良商家用于商用买卖(未经允许),所以我果断举报了那个店铺。从来没经历过这种事的我也是一脸懵逼,原来还有这种操作的。反思不管举报结果如何,反正对我没有造成什么实质损失,这恰恰暴露了我们的维权意识版权意识比较薄弱。沸点也有小伙伴问我github 怎么搞开源授权,下面我就直接上图了,一步一步来。签署github项目开源协议1.我们随便打开github的一个项目2.Add file创建原创 2020-11-11 17:41:41 · 7263 阅读 · 18 评论 -
真以为Node安装只是next next next?带你掌握更多姿势(亲测)
相信在座的小伙伴电脑里应该都安装有Node,安装确实简单,长久考虑还是应该这样操作。青铜操作 :next next next王者操作:node npm yarn config set 环境变量骚操作的优点:下载包速度快、极少奔溃不占用C盘太多空间可以自定义存储路径又涨姿势了一、简单安装最简单粗暴的就是我们直接去英文官网下载LTS版,及稳定的长期支持的版本,next next nextNode 官网https://nodejs.org/en/cmd 命令行看下版本号 no原创 2020-08-13 19:56:07 · 935 阅读 · 0 评论 -
基于React Hook 的 React Router4 路由统一配置管理(v4.0+ )
写过vue的小伙伴都知道,vue的路由是在new Router 里统一配置的,写起来也特别爽,路由层次很清除,也很方便管理,然而react的路由相比较而言就有局限性,也不方便管理。import Vue from 'vue'import Router from 'vue-router'Vue.use(Router)let roles = [ { pa...原创 2019-12-17 16:59:22 · 3893 阅读 · 3 评论 -
多种模板引擎在Node中的应用(性能对比及使用方法)
当前公司开发环境:由于浏览器和js的优化和性能的提升,大多数公司采用的前后端分离式的开发,代码区分明确,易于维护,易于开发,但是不易爬虫,还好有强大的Node.js,它几乎可以处理所有我们开发时后端处理的事务,也就弥补了前后端分离后不方便服务端渲染的问题。Node渲染:Node渲染读取的页面本身是纯静态的,这就需要我们使用模板引擎来强化页面,使页面更灵活,又不失服务端渲染的优势。一、各种...原创 2019-10-14 17:11:37 · 3582 阅读 · 1 评论 -
styled-components:前端组件拆分新思路
感觉文章挺好的转载收藏一波:作者:神三元 https://juejin.im/post/5d1ae68fe51d454f7230255d一直在思考React组件如何拆分的问题,直到接触到styled-components,让我有一种如鱼得水的感觉,今天我就给大家分享一下这个库如何让我们的前端组件开发的更优雅,如何保持更合适的组件拆分粒度从而更容易维护。一、使用方法styled-c...转载 2019-10-12 11:04:04 · 638 阅读 · 0 评论 -
Node搭建服务器,搭建路由,文件处理(基础篇)
据Node官网介绍(事实也是如此)Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。那么实际项目中我们可以利用node干些什么呢?读写文件http服务器网络服务的构建网络通信操作数据库模板引擎的渲染。。。一、安装:地址:https://nodejs.org/...原创 2019-09-24 16:30:43 · 1684 阅读 · 0 评论 -
自己封装Redux 中间件
一、类似于redux-logger的打印效果const logger = store => next => action => { console.group(action.type) console.log(colors.yellow('pre state'), store.getState()) console.log(colors.blue('action')...原创 2019-08-28 15:25:03 · 460 阅读 · 0 评论 -
Redux 使用 compose 和中间件增强 store(可视化)
使用过redux的小伙伴都知道store的创建很简单import { createStore } from 'redux'import rootReducer from './reducers'let store = createStore(rootReducer )这样就创建好了,但实际开发中这并不满足我们的开发需求,这时候我们就要对store进行增强,redux给我提供了一个comp...原创 2019-08-28 11:48:17 · 1347 阅读 · 2 评论 -
websocket(Redis,node, react 三方处理)
利用Redis发布/订阅特性来广播消息,nodejs订阅Redis的消息,订阅到消息后利用前端创建的websocket来发送通知前端更新消息这就类似于用收音机广播的时候,你想下次继续收听,你首先得订阅这个频道,后面想听只要打开收音机,调到对应的频道,就可以了。一、后端Redis广播消息定义广播事件代码相关片段<?php namespace App\Events; use I...原创 2019-08-22 10:38:15 · 2304 阅读 · 0 评论 -
vue 手动选择切换设置语言(详细三步)
vue项目开发过程中,有的可能需要语言的切换,Element也提供了几种方法,国际化菜单中,我们更多时候想要的是,可以自由的切换,我们基于element改进一下。我们使用插件vue-i18n 来更好的控制第一步: 命令行执行 npm install vue-i18n --save安装好 vue-i18n保险起见看 package.json里是否安装好第二步: main.js 引...原创 2019-06-10 16:18:32 · 9374 阅读 · 3 评论 -
CSDN快速转载文章三步搞定-简单粗暴
首先找下面的一篇文章为例https://blog.csdn.net/weixin_43648947/article/details/88997946注意:转载一般都需要备注来源和作者,文章归类为转载第一步打开这个博客,我们F12,或者右击文章检查源码第二步找到HTML节点里的标签,里面的content_views就是我们要的内容部分了,右击复制 copy element 即可第三...原创 2019-04-04 10:13:47 · 628 阅读 · 0 评论 -
解决 Vue element ui 的table水平滚动条固定底部(两个姿势)
前提条件,需求:使用vue element UI 的table由于横向数据比较长,小屏幕电脑会出现水平滚动条,假如每页20条数据,那么我想对第一条数据进行操作,我得先滚动到table最下面,再拉动水平滚动条到最右边,再回滚到最上面,对末尾的操作进行点击。这样操作太繁琐,所以提出需求:屏幕过小出现水平滚动条时候,将table的水平滚动条固定再屏幕底部。element ui 的table并...原创 2019-03-28 11:43:53 · 25908 阅读 · 14 评论 -
input:file上传文件类型(超详细)
imput 属性有以下几种:1.type:input类型这就不多说了2.accept:表示可以选择的文件类型,多个类型用英文逗号分开,常用的类型见下表。<input id="file" type="file" accept="image/png,image/gif" name="file" />3.multiple:是否可以选择多个文件,多个文件时其value值为第一个文件的...转载 2019-04-11 17:53:27 · 35131 阅读 · 4 评论 -
Git命令(超详细)
内容转载于:http://www.ruanyifeng.com/blog/2015/12/git-cheat-sheet.html工作中经常使用 Git ,但是很多命令记不住,每次忘了总去百度查,于是自己直接转载过来。Workspace:工作区Index / Stage:暂存区Repository:仓库区(或本地仓库)Remote:远程仓库一、新建代码库# 在当前目录新建一个G...转载 2019-04-12 11:47:30 · 1578 阅读 · 0 评论 -
React+Css3图片预览(缩放、旋转、切换)
自己写的一个react缩放组件,主要通过CSS3的动画来实现的,有对应的介绍和使用方法。这是之前发布的一个JQ版的缩放demo,原理差不多。https://blog.csdn.net/weixin_43648947/article/details/88132986一、新建的文件夹 newimg.jsx这个里面是处理图片的子组件import React, {Component} f...原创 2019-03-04 20:09:59 · 8328 阅读 · 0 评论 -
UMeditor实战应用
***一、最好下载最新版的UMeditor,使用PhP的版本开发 ,UM比Ue更简洁,优化程度更高,(官方文档都是对ueditor的介绍,对UM的实用性不高,很多东西都无法参考)https://ueditor.baidu.com/website/umeditor.htmlthird-party 文件夹里是算法js和JQ文件themes 文件夹里放的是一些默认的images和c...原创 2019-03-04 19:39:43 · 3537 阅读 · 5 评论 -
穿梭框-内容可拖拽(超简单)
工作中有些需求需要用穿梭框,来拖拽东西进行分类。如下图我们首先想到的可能就是mousedown mouseup 根据鼠标移动位置进行定位,但并不适用于我们的需求,想要达到效果可能需要写很多代码。其实H5里提供了超简单的拖拽方法<!DOCTYPE HTML><html><head><meta charset="utf-8"> <...原创 2019-04-26 15:19:12 · 9612 阅读 · 2 评论 -
时间戳与时间互转
一、时间转时间戳1.var timestamp1 = Date.parse(new Date()); // 结果:1477808630000 不推荐这种办法,毫秒级别的数值被转化为000 console.log(timestamp1);2.var timestamp2 = (new Date()).valueOf(); // 结果:1477808630404 通过valueOf()函数...转载 2019-06-12 18:05:45 · 687 阅读 · 0 评论 -
JS正则表达式(详细全面)
一、校验数字的表达式数字:^[0-9]*$n位的数字:^\d{n}$至少n位的数字:^\d{n,}$m-n位的数字:^\d{m,n}$零和非零开头的数字:^(0|[1-9][0-9]*)$非零开头的最多带两位小数的数字:^([1-9][0-9]*)+(\.[0-9]{1,2})?$带1-2位小数的正数或负数:^(\-)?\d+(\.\d{1,2})$正数、负数、和小数:^(\-|\...原创 2019-03-14 15:41:19 · 2315 阅读 · 0 评论