![](https://img-blog.csdnimg.cn/20201014180756928.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
经验总结
文章平均质量分 79
写个程序换个饼
一个玩过传奇喜欢杀生丸的前端开发,GridManager作者。
展开
-
开源项目从js到ts,我所遇到的一些问题
早在两年前,就拉了个ts的分支,但稍作尝试后,就找了一堆借口放弃了。最近处于离职状态,时间充裕的我终于下定决心向ts走近一步。准备工作期间先是在网上找了一些ts相关的资料,把原先只限于demo的ts技能稍作提升。过程中强迫自已先学习后动手,虽然学习过程中一行代码都不写的滋味并不好受,但总体下来却省下了很多时间。无关框架开源项目GridManager是一个原生js实现的跨框架(jquery、react、vue2.x、angular1.x)表格组件,所以在切换ts的过程中并不会牵扯到框架特性。问题.原创 2021-11-23 09:22:55 · 1422 阅读 · 2 评论 -
五年有余,离开前留点文字忆往昔
2016年加入,2021年离开,五年有余。有过美好,也有过无奈,告别数云之前整理一下,留点文字忆往昔。人力问了我两个问题提出离职后,人力问我为什么会选择离开。我顿了下,很平静的说道:“以前早晨醒来,会想着今天要去做什么事情,而且是那种特别想要去完成的事情。”“可是,现在的早晨却在懒床。”人力笑出了一个我懂的表情,然后问了另外一个问题:“五年多的时间里,你最大的收获是什么?”思考了半分左右的时间,直视着人力说道:“忍耐”。在人力惊讶的眼神中,我想起了许多。技术不进则死在2015年开始维原创 2021-10-13 10:56:59 · 176 阅读 · 0 评论 -
webpack@4.x迁移webpack@5.x记录,减少了1.2%的构建体积
本文记录了GridManager表格组件升级webpack@5.x时的过程及遇到的问题, 包含了build, start, test等相关命令的问题修复。测试兼容性尝试在webpack@4.x的配置中添加如下选项,测试当前环境对webpack@5.x的兼容性。module.exports = { // ... node: { Buffer: false, process: false }};如果出错需要更新node版本,当前使用的node版本为v14.0.0。.原创 2021-03-10 16:43:20 · 697 阅读 · 1 评论 -
移除react项目中prop-types代码
在React项目中,我们为了保证项目的健壮性所以引入了prop-types。但在生产环境,我们并不需要prop-types生成的代码。prop-types已经自动做了些什么?在项目中我们通常按下方示例来使用prop-types':import PropTypes from 'prop-types'TestClass.propTypes = { propName: PropTypes.string}在开发环境中,这些代码会帮我们校验prop的类型,这无疑是很有用的。在产品环境中我们并不需.原创 2020-06-04 11:20:44 · 473 阅读 · 0 评论 -
单页应用SEO优化
之前做SEO优化的项目都是多页应用,从这个界面的某个链接打开一个新的页面,该页面的head或body中的友好信息即会自动被百度爬虫捕获,一切都是那么的顺。单页应用SEO不被百度收录当界面转变为单页应用后。标志性的锚点做法并不被百度和谷歌收录,谷歌虽然不收录以#为特性的锚点,但是收录以#!为特性的锚点,因为这个缘固谷歌做SEO优化就简易了很多。然而百度你懂得,那么做为一个前端开发人员,我们该做些什么。当把一个单页应用的代码敲完,开心的看着快速的响应和无等待的数据刷新时,内心上对单页应用是很喜爱的。.原创 2020-05-25 10:01:08 · 1507 阅读 · 0 评论 -
通过样式调整火狐滚动轴样式
表格组件gridmanager在发布完固定列功能后,有位使用者通过github提交了issues,反馈其在firefox中表格发现表头错位BUG。排查原因调试定位后,发现是由于组件中配置了如下代码:::-webkit-scrollbar { background: transparent; width: 10px; height: 10px;}然而firefox并不支持-webkit-scrollbar属性,因此在windows环境下Y轴滚动条宽度为17px。mac环境下的firef.原创 2020-05-15 16:07:34 · 336 阅读 · 0 评论 -
我们应该怎么去开发
今天与后端在调试接口,在过程中发现node端需要嵌套三个java接口才能拿到所需的数据。.....这就是业务原创 2020-04-28 10:11:18 · 231 阅读 · 0 评论 -
解决linux rz传输失败
前不久,写了个很简单的exp登录脚本。今天想通过rz上传个文件,却怎么也传不上去。并不报错,命令执行后除了文件未上传,其它与上传成功时一样。做为一个前端开发,写段shell真是一步一个坑。原因及解决方式鼓捣良久后发现,原来是字符集问题。用.sh将.exp包裹,并在.sh文件中指定LC_CTYPE=en_US解决。简单的代码示例:test.sh#!/bin/shexpor...原创 2020-04-01 18:45:28 · 1350 阅读 · 0 评论 -
js捕获错误信息
这个不是很常用的功能, 但是想收集客户端的错误信息时却很有必要了解下。 捕获分为两个方面:收集JS语法、执行错误最初的是想直接获取控制台的错误信息; 然而这并不大可行,JS并没有这样的功能。转换下思路在错误发生时,将错误进行存储。原生JS实现方式:通过重载 window 对象下的 onerror 函数, 可以截取到这些信息。window.onerror = function(er...原创 2020-04-01 18:44:52 · 1227 阅读 · 0 评论 -
原生JS实现data方法
在开发中经常会在DOM上存储一些自定义数据,我们可以通过setAttribute方法来实现。但是当数据为引用类型时,存储后的数据却无效。这里将用原生的JS对data方法进行实现。使用setAttribute:<div id="test-data"></div><p class="test-data-list"></p><p clas...原创 2020-04-01 18:43:56 · 1483 阅读 · 0 评论 -
margin-top 外边距合并
这是一个早以前研究过的东西,今天java开发说起了这个,顺带记录一下。这里有一行代码,很简单的一段代码<style type="text/css">#div1{ background:#000; width:100px; height:100px; margin-top:10px;}#div2{ margin-top:20px; background:#f00...原创 2020-04-01 18:43:11 · 242 阅读 · 0 评论 -
前端国际化
前言从10年接触编程就开始接触国际化这个概念,然而这些年全面用到国际化的项目并不是很多,且都是些螺丝钉式的工作。15年末,部门项目需要推国际化,前端这块由我来主导。虽然难度不高,但还是拿出来分享下。选择方式:目前了解到的前端国际化有以下两种方式:1、按语言种类分别开发前端界面:这种方式貌似给人一种很low的感觉且觉着文件会无限多。然而在一般项目中语言种类并不会特别多,实现中英文两...原创 2020-04-01 18:42:22 · 1838 阅读 · 0 评论 -
撸了一个简易的工具库: jeasy
一年前,发现在工作的项目中存在大量使用monment的情况,但仅使用到最基础的format功能。monment的体积直接导致项目体积成倍增加,于是jeasy就诞生了。jeasy实现了monment最为常用的功能,并将GridManager中一些工具方法进行了抽离。安装npm install jeasy --save方法介绍Date 日期相关jeasy.moment() 日期函数...原创 2020-03-31 18:58:52 · 451 阅读 · 0 评论 -
div绑定键盘事件
在某一次给 GridManager 中的div元素绑定键盘事件(如keydown)时, 发现绑定是无效。排除一些问题点后,最终找到了解决方法。解决方法:给当前元素增加 tabindex 属性<div tabindex="-1"></div>原理:div等非输入性质的元素(与其对应的可输入性元素有input, textarea), 是不可被聚焦的。 所以无法监听...原创 2020-03-31 18:58:20 · 1433 阅读 · 0 评论 -
coverage es6覆盖率解决方法
该文章整理于2017年,当时为解决在GridManager2.3.0版本中ES6替换时遇到的问题。原文如下替换之后发现,原先的测试覆盖率从72% 下降至 24%。通过 coverage html 在本地测试后发现, 覆盖目标文件使用的为 babel 转化之后的代码。解决方法由于GridManager 中使用的是webpack环境下的karma , 所以下面的步骤将基于karma, ...原创 2020-03-31 18:57:51 · 515 阅读 · 0 评论 -
你不知道的console
在代码执行不如意的情况下,最常用的就是使用debuger 和 console.log()。然而关于console,比想像的更强大。使用不同的方法来区分信息的不同console.log('日志');console.info('信息');console.error('错误');console.warn('警告');执行结果:通过占位符对信息进行编辑console.log('字...原创 2020-03-31 18:55:44 · 94 阅读 · 0 评论 -
mac iterm2支持rz sz
在2017年初,为mac处理了该问题。今天重新按之前的流程操作时,发现了很多问题。重新整理后,记录在这里。mac环境连接linux时支持rz sz的步骤一、安装iterm2mac自带的终端是实现不了的,所以需要下载iterm2. 下载地址二、安装 lrzszbrew install lrzsz执行该步骤时,需要保证你的机子上有装有 Homebrew。如果没有,请自行安装, 相关...原创 2020-03-31 18:55:09 · 1807 阅读 · 1 评论 -
原生js实现each方法
jquery里面有个each方法,将循环操作简化、便捷。随后es出了个forEach方法,两个虽然用法相近,但是不能处理对象类型。且无法通过return true达到continue效果。此外还有个every方法,该方法虽然可以实现continue效果,但是在处理类数组与对象类型时,完全无用。在不使用jquery的each方法时,该如何处理;或者说用原生如何来实现?前些前写了个类库: ...原创 2020-03-27 18:41:24 · 1650 阅读 · 0 评论 -
原生js实现offset方法
在为 jTool 提供 offset (获取当前节点位置)方法时, 先后使用了两种方式进行实现, 现整理出来以作记录。通过递归实现function offset(element) { var offest = { top: 0, left: 0 }; var _position; getOffset(element, true); return offest; ...原创 2020-03-26 09:43:51 · 592 阅读 · 0 评论 -
原生js实现trigger方法
事件绑定成功之后,事件的执行函数就如同待字闺中的小姑娘。除了由坐在电脑前的大叔们用键盘、鼠标等硬件行为触发外,需要在代码中直接调用又该如何实现?首先需要将事件绑定至指定DOM节点上// 在一个节点上绑定一个事件let test = document.createElement('div');test.id = 'test';test.innerHTML = '测试事件';docum...原创 2020-03-26 09:41:38 · 3288 阅读 · 0 评论 -
原生js实现on与off 方法
使用过jQuery的同学,应该对事件绑定方法 .on() .off() 有一定的了解。 在个人类库jTool 中实现了这两个方法,这里就来细说下原生实现方式。实现方式以下为个人类库jTool 中 Event 实现方式。代码中使用到一个基础方法对象utilities ,该对象为jTool 的基础类。 如果想了解更多,可以通过点击进入查看原码。一个空壳子首先通过一个空架子来了解下实...原创 2020-03-26 09:40:42 · 2563 阅读 · 0 评论 -
原生js实现ajax及get post方法
使用过jQuery的同学,应该对事件绑定方法ajax有一定的了解。 在个人类库jTool 中实现了这个方法,这里就来细说下原生实现方式。实现方式以下为个人类库jTool 中 Ajax 实现方式。代码中使用到一个基础方法对象utilities ,该对象为jTool 的基础类。 如果想了解更多,可以通过点击进入查看原码。/* * ajax * type === GET: data格...原创 2020-03-26 09:39:53 · 334 阅读 · 0 评论 -
querySelector
原文地址:http://www.lovejavascript.com/#!zone/blog/content.html?id=11Html5中有个querySelector方法,用于根据css选择符选择,看上去与jquery 的 Sizzle功能相似,写了个demo进行了一些验证。有这么一段html<div class="test1" id="id1">test1&l...原创 2016-04-22 19:08:29 · 468 阅读 · 0 评论 -
面试阿里失败总结
原文地址:http://www.lovejavascript.com/#!zone/blog/content.html?id=10原本是想写面试阿里心得然而昨天帮我推荐的朋友,回馈我:“挂了”,那现在仅可以使用这个标题了,虽然酸楚,权做激励吧。失败后的心情总归不是太好,失落感断断续续的环绕了许久。现在想想那已经是昨天的事了,今天写个总结,明天又是起点。 我为什么向往阿里:相信...2016-04-23 15:51:46 · 2253 阅读 · 0 评论 -
node乱码解决方法
原文链接:http://www.lovejavascript.com/#!zone/blog/content.html?id=16使用node.js做为后台开中,发现前端界面展示都为正常。但是从Network中查看请求信息时,发现返回数据内的中文为乱码。 出现这种情况时,只需在node中配置如下代码即可:res.setHeader('Content-Type','text/ht...2016-05-13 07:42:24 · 253 阅读 · 0 评论 -
单页应用SEO优化
原文链接:http://www.lovejavascript.com/#!zone/blog/content.html?id=17 之前做SEO优化的项目都是多页应用,从这个界面的某个链接打开一个新的页面,该页面的head或body中的友好信息即会自动被百度爬虫捕获,一切都是那么的顺。当界面转变为单页应用后。标志性的锚点做法并不被百度和谷歌收录,谷歌虽然不收录以#为特性的锚点,...2016-05-16 20:23:39 · 454 阅读 · 0 评论 -
这个绝对做不出来
原文链接:http://www.lovejavascript.com/#!zone/blog/content.html?id=18前言: 我做了六年的程序员了,我接触过不少的产品经理、程序员。 敏捷开发中有个说法:拥抱变化。需求会通过实际情况不断的变更,难免已经开始或已经完成的需求被变化被删除。每个程序员都应该经历过那种心血被废弃的苦闷感。 ...2016-05-30 17:27:52 · 115 阅读 · 0 评论 -
自定义表单、流程、菜单开发总结
最近在做自定义表单、自定义流程、自定义菜单,由于某些原因,现在这个项目正处于停滞状态。但核心功能已实现,做点总结拿出来分享。 注:该功能属于西安网开网络有限公司,我所做的只是技术分享。该功能集成于一款即时通迅办公软件。下载地址:www.eoopen.com。下载后在一个类似于QQ应用中心的面板中点击使用事务流即可打开此应用(打开前需要注册企业并加载协同办公业务)。...2014-06-24 19:02:28 · 623 阅读 · 0 评论 -
UEdit 使用总结
最近项目中频繁使用到 uedit,在使用中遇到一些磕磕绊绊的事。记录一下 1、渲染问题 UEdit自带的渲染方法为editor.render(id),但这个方法只能调用一次。当页面中存在多个多个需要渲染的DOM节点时,这个方法就爱莫 能助了。在API里翻腾了许久后,尝试使用UE.getEditor(id)这个方法。该方法存在偶发性报错问题(并不严重...2014-07-01 14:58:58 · 1429 阅读 · 0 评论 -
前端优化小细节
大方向网上很多,只说小细节。JS\CSS引入位置css放头部,JS放尾部这个都知道了,就不说了。但根据情况不同,有时就需要使用其它方式。 首页类的文件,在页面加载完成之后,对将要在内页或其它页使用到的JS进行引入。HTML5有预加载机制,我个人感觉直接引入来的方便。 至于引入的方式,如果不受布局限制,建意将这些JS单独存放于一个HTML文件中。在onload事件中进行加载,如果受...2014-07-23 17:14:19 · 108 阅读 · 0 评论 -
2015随手一笔
一晃很多年过去了,从2010年开始开始接触编程。HTML与CSS,JS一道做为日常工作中的边缘知识点进入视野;元旦没有妹子也没有多少票子,打游戏打累了,坐这盖个被子写点什么,祭奠那逝去的青春。 事先声明下,哥们不才,中专让开除了,英语别说过级了,只有第一次月考及格过,以后的英语考试都很稳定,在没有他人帮助的前提下,一直稳定在30分左右,英语考试全靠运气。说这些...2015-01-03 16:51:34 · 96 阅读 · 0 评论 -
listManager使用详解
原文链接http://www.lovejavascript.com/#!zone/blog/content.html?id=9插件首页:http://www.lovejavascript.com/#!plugIn/listManager/index.html首先介绍一下该插件的使用场景和实现功能使用场景 适用于管理平台的数据展示列表,通过该插件可以更简约的实现一些前端交互及与...原创 2016-04-17 15:38:05 · 847 阅读 · 0 评论