永恒的避风港

早在两年前，就拉了个ts的分支，但稍作尝试后，就找了一堆借口放弃了。最近处于离职状态，时间充裕的我终于下定决心向ts走近一步。准备工作期间先是在网上找了一些ts相关的资料，把原先只限于demo的ts技能稍作提升。过程中强迫自已先学习后动手，虽然学习过程中一行代码都不写的滋味并不好受，但总体下来却省下了很多时间。无关框架开源项目GridManager是一个原生js实现的跨框架(jquery、react、vue2.x、angular1.x)表格组件，所以在切换ts的过程中并不会牵扯到框架特性。问题.

2016年加入，2021年离开，五年有余。有过美好，也有过无奈，告别数云之前整理一下，留点文字忆往昔。人力问了我两个问题提出离职后，人力问我为什么会选择离开。我顿了下，很平静的说道：“以前早晨醒来，会想着今天要去做什么事情，而且是那种特别想要去完成的事情。”“可是，现在的早晨却在懒床。”人力笑出了一个我懂的表情，然后问了另外一个问题：“五年多的时间里，你最大的收获是什么？”思考了半分左右的时间，直视着人力说道：“忍耐”。在人力惊讶的眼神中，我想起了许多。技术不进则死在2015年开始维

本文记录了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。.

在React项目中，我们为了保证项目的健壮性所以引入了prop-types。但在生产环境，我们并不需要prop-types生成的代码。prop-types已经自动做了些什么?在项目中我们通常按下方示例来使用prop-types':import PropTypes from 'prop-types'TestClass.propTypes = { propName: PropTypes.string}在开发环境中，这些代码会帮我们校验prop的类型，这无疑是很有用的。在产品环境中我们并不需.

之前做SEO优化的项目都是多页应用，从这个界面的某个链接打开一个新的页面，该页面的head或body中的友好信息即会自动被百度爬虫捕获，一切都是那么的顺。单页应用SEO不被百度收录当界面转变为单页应用后。标志性的锚点做法并不被百度和谷歌收录，谷歌虽然不收录以#为特性的锚点，但是收录以#!为特性的锚点，因为这个缘固谷歌做SEO优化就简易了很多。然而百度你懂得，那么做为一个前端开发人员，我们该做些什么。当把一个单页应用的代码敲完，开心的看着快速的响应和无等待的数据刷新时，内心上对单页应用是很喜爱的。.

表格组件gridmanager在发布完固定列功能后，有位使用者通过github提交了issues，反馈其在firefox中表格发现表头错位BUG。排查原因调试定位后，发现是由于组件中配置了如下代码:::-webkit-scrollbar { background: transparent; width: 10px; height: 10px;}然而firefox并不支持-webkit-scrollbar属性，因此在windows环境下Y轴滚动条宽度为17px。mac环境下的firef.

今天与后端在调试接口，在过程中发现node端需要嵌套三个java接口才能拿到所需的数据。.....这就是业务

前不久，写了个很简单的exp登录脚本。今天想通过rz上传个文件，却怎么也传不上去。并不报错，命令执行后除了文件未上传，其它与上传成功时一样。做为一个前端开发，写段shell真是一步一个坑。原因及解决方式鼓捣良久后发现，原来是字符集问题。用.sh将.exp包裹，并在.sh文件中指定LC_CTYPE=en_US解决。简单的代码示例:test.sh#!/bin/shexpor...

这个不是很常用的功能， 但是想收集客户端的错误信息时却很有必要了解下。 捕获分为两个方面:收集JS语法、执行错误最初的是想直接获取控制台的错误信息； 然而这并不大可行，JS并没有这样的功能。转换下思路在错误发生时，将错误进行存储。原生JS实现方式:通过重载 window 对象下的 onerror 函数， 可以截取到这些信息。window.onerror = function(er...

在开发中经常会在DOM上存储一些自定义数据，我们可以通过setAttribute方法来实现。但是当数据为引用类型时，存储后的数据却无效。这里将用原生的JS对data方法进行实现。使用setAttribute:<div id="test-data"></div><p class="test-data-list"></p><p clas...

这是一个早以前研究过的东西，今天java开发说起了这个，顺带记录一下。这里有一行代码，很简单的一段代码<style type="text/css">#div1{ background:#000; width:100px; height:100px; margin-top:10px;}#div2{ margin-top:20px; background:#f00...

前言从10年接触编程就开始接触国际化这个概念，然而这些年全面用到国际化的项目并不是很多，且都是些螺丝钉式的工作。15年末，部门项目需要推国际化，前端这块由我来主导。虽然难度不高，但还是拿出来分享下。选择方式:目前了解到的前端国际化有以下两种方式：1、按语言种类分别开发前端界面：这种方式貌似给人一种很low的感觉且觉着文件会无限多。然而在一般项目中语言种类并不会特别多，实现中英文两...

一年前，发现在工作的项目中存在大量使用monment的情况，但仅使用到最基础的format功能。monment的体积直接导致项目体积成倍增加，于是jeasy就诞生了。jeasy实现了monment最为常用的功能，并将GridManager中一些工具方法进行了抽离。安装npm install jeasy --save方法介绍Date 日期相关jeasy.moment() 日期函数...

在某一次给 GridManager 中的div元素绑定键盘事件(如keydown)时， 发现绑定是无效。排除一些问题点后，最终找到了解决方法。解决方法:给当前元素增加 tabindex 属性<div tabindex="-1"></div>原理:div等非输入性质的元素(与其对应的可输入性元素有input, textarea)， 是不可被聚焦的。 所以无法监听...

该文章整理于2017年，当时为解决在GridManager2.3.0版本中ES6替换时遇到的问题。原文如下替换之后发现，原先的测试覆盖率从72% 下降至 24%。通过 coverage html 在本地测试后发现， 覆盖目标文件使用的为 babel 转化之后的代码。解决方法由于GridManager 中使用的是webpack环境下的karma ， 所以下面的步骤将基于karma, ...

在代码执行不如意的情况下，最常用的就是使用debuger 和 console.log()。然而关于console，比想像的更强大。使用不同的方法来区分信息的不同console.log('日志');console.info('信息');console.error('错误');console.warn('警告');执行结果:通过占位符对信息进行编辑console.log('字...

在2017年初，为mac处理了该问题。今天重新按之前的流程操作时，发现了很多问题。重新整理后，记录在这里。mac环境连接linux时支持rz sz的步骤一、安装iterm2mac自带的终端是实现不了的，所以需要下载iterm2. 下载地址二、安装 lrzszbrew install lrzsz执行该步骤时，需要保证你的机子上有装有 Homebrew。如果没有，请自行安装， 相关...

jquery里面有个each方法，将循环操作简化、便捷。随后es出了个forEach方法，两个虽然用法相近，但是不能处理对象类型。且无法通过return true达到continue效果。此外还有个every方法，该方法虽然可以实现continue效果，但是在处理类数组与对象类型时，完全无用。在不使用jquery的each方法时，该如何处理；或者说用原生如何来实现？前些前写了个类库: ...

在为 jTool 提供 offset (获取当前节点位置）方法时， 先后使用了两种方式进行实现， 现整理出来以作记录。通过递归实现function offset(element) { var offest = { top: 0, left: 0 }; var _position; getOffset(element, true); return offest; ...

事件绑定成功之后，事件的执行函数就如同待字闺中的小姑娘。除了由坐在电脑前的大叔们用键盘、鼠标等硬件行为触发外，需要在代码中直接调用又该如何实现？首先需要将事件绑定至指定DOM节点上// 在一个节点上绑定一个事件let test = document.createElement('div');test.id = 'test';test.innerHTML = '测试事件';docum...

使用过jQuery的同学，应该对事件绑定方法 .on() .off() 有一定的了解。 在个人类库jTool 中实现了这两个方法，这里就来细说下原生实现方式。实现方式以下为个人类库jTool 中 Event 实现方式。代码中使用到一个基础方法对象utilities ，该对象为jTool 的基础类。 如果想了解更多，可以通过点击进入查看原码。一个空壳子首先通过一个空架子来了解下实...

使用过jQuery的同学，应该对事件绑定方法ajax有一定的了解。 在个人类库jTool 中实现了这个方法，这里就来细说下原生实现方式。实现方式以下为个人类库jTool 中 Ajax 实现方式。代码中使用到一个基础方法对象utilities ，该对象为jTool 的基础类。 如果想了解更多，可以通过点击进入查看原码。/* * ajax * type === GET: data格...

原文地址：http://www.lovejavascript.com/#!zone/blog/content.html?id=11Html5中有个querySelector方法，用于根据css选择符选择，看上去与jquery 的 Sizzle功能相似，写了个demo进行了一些验证。有这么一段html&lt;div class="test1" id="id1"&gt;test1&l...

原文地址：http://www.lovejavascript.com/#!zone/blog/content.html?id=10原本是想写面试阿里心得然而昨天帮我推荐的朋友，回馈我：“挂了”，那现在仅可以使用这个标题了，虽然酸楚，权做激励吧。失败后的心情总归不是太好，失落感断断续续的环绕了许久。现在想想那已经是昨天的事了，今天写个总结，明天又是起点。 我为什么向往阿里：相信...

原文链接：http://www.lovejavascript.com/#!zone/blog/content.html?id=16使用node.js做为后台开中，发现前端界面展示都为正常。但是从Network中查看请求信息时，发现返回数据内的中文为乱码。 出现这种情况时，只需在node中配置如下代码即可：res.setHeader('Content-Type','text/ht...

原文链接：http://www.lovejavascript.com/#!zone/blog/content.html?id=17        之前做SEO优化的项目都是多页应用，从这个界面的某个链接打开一个新的页面，该页面的head或body中的友好信息即会自动被百度爬虫捕获，一切都是那么的顺。当界面转变为单页应用后。标志性的锚点做法并不被百度和谷歌收录，谷歌虽然不收录以#为特性的锚点，...

原文链接：http://www.lovejavascript.com/#!zone/blog/content.html?id=18前言：         我做了六年的程序员了，我接触过不少的产品经理、程序员。         敏捷开发中有个说法：拥抱变化。需求会通过实际情况不断的变更，难免已经开始或已经完成的需求被变化被删除。每个程序员都应该经历过那种心血被废弃的苦闷感。        ...

       最近在做自定义表单、自定义流程、自定义菜单，由于某些原因，现在这个项目正处于停滞状态。但核心功能已实现，做点总结拿出来分享。       注：该功能属于西安网开网络有限公司，我所做的只是技术分享。该功能集成于一款即时通迅办公软件。下载地址：www.eoopen.com。下载后在一个类似于QQ应用中心的面板中点击使用事务流即可打开此应用(打开前需要注册企业并加载协同办公业务)。...

       最近项目中频繁使用到 uedit，在使用中遇到一些磕磕绊绊的事。记录一下       1、渲染问题       UEdit自带的渲染方法为editor.render(id)，但这个方法只能调用一次。当页面中存在多个多个需要渲染的DOM节点时，这个方法就爱莫 能助了。在API里翻腾了许久后，尝试使用UE.getEditor(id)这个方法。该方法存在偶发性报错问题（并不严重...

大方向网上很多，只说小细节。JS\CSS引入位置css放头部，JS放尾部这个都知道了，就不说了。但根据情况不同，有时就需要使用其它方式。    首页类的文件，在页面加载完成之后，对将要在内页或其它页使用到的JS进行引入。HTML5有预加载机制，我个人感觉直接引入来的方便。    至于引入的方式，如果不受布局限制，建意将这些JS单独存放于一个HTML文件中。在onload事件中进行加载，如果受...

         一晃很多年过去了，从2010年开始开始接触编程。HTML与CSS,JS一道做为日常工作中的边缘知识点进入视野；元旦没有妹子也没有多少票子，打游戏打累了，坐这盖个被子写点什么，祭奠那逝去的青春。       事先声明下，哥们不才，中专让开除了，英语别说过级了，只有第一次月考及格过，以后的英语考试都很稳定，在没有他人帮助的前提下，一直稳定在30分左右，英语考试全靠运气。说这些...

原文链接http://www.lovejavascript.com/#!zone/blog/content.html?id=9插件首页：http://www.lovejavascript.com/#!plugIn/listManager/index.html首先介绍一下该插件的使用场景和实现功能使用场景   适用于管理平台的数据展示列表，通过该插件可以更简约的实现一些前端交互及与...