行列

**本项目仅供参考，需要浏览器`css`支持`display:flex`,`position:sticky`等特性** ### 为什么模拟`table` > 从功能上来讲，行列的数据更适合使用`table`，所以当您的需求中没有固定表头，固定列时，请直接使用`table`，模拟`table`更多的是解决固定表头，固定列等事情。 ### `table`有哪些问题 #### body不能滚动 当数据量多时，我们期望表头或表尾固定，只滚动中间区域，但是``不能做为滚动容器。如果我们强制改变``的`display`使它可以滚动，然后``中的列和``中的列就对不齐了。 然后我们可能就要上`javascript`然后各种同步列的宽度了，然后你会发现解决`1`个问题会引入`3`个问题，到最后列可能还会有些许的偏差并没有对齐。 这个网上的案例有一些，感兴趣的话可以搜搜看 #### sticky 我们知道`css3`中`position`新增了`sticky`，如果浏览器支持，直接在``上使用`position:sticky`就完成了表头固定，多好？ `chrome`曾经支持过``上设置`position:sticky`，但是后来不知为何又去掉了，然后目前没有浏览器支持``上设置`position:sticky`，这都什么鬼？具体可以看下`caniuse`。https://caniuse.com/#search=sticky ### `table`做固定表头，固定列功能 网上常见的做法是使用`4`个表格来完成相应的功能，以`ant.design`为代表，可以看下它的效果和实现:https://ant.design/components/table-cn/ 这种做法实现起来麻烦，计算的量也不少，在表头固定、首列固定、尾列固定、表尾固定这些需求同时存在的情况下，列对齐需要计算，然后同步。行高需要计算，然后同步，据说`ant.design`是以中间行为最大高度，然后去同步首列中的行和尾列的行。 做到最后依然可能对不齐，我在`ant.design`中的表格组件上经常能见到对不齐的`bug` 做完各种计算后，如果要实现鼠标移上行变色，你会发现`css`中的`hover`伪类没法使用，因为表格是分离的，这时候就又需要绑定`javascript`事件进行模拟实现，这个简直了... ### `div`模拟表格 该方法仍然需要计算，但计算量少了很多，只需要列宽计算 因为行没有被拆分，所以行高不需要计算对齐，同时可以使用`css`中的`hover`伪类实现鼠标移入变色 demo地址　https://xinglie.github.io/magix-table/index.html 项目地址　https://github.com/xinglie/magix-table...

## DOM操作 从`Prototype.js`到风靡全球的`jQuery.js`，都是在解决浏览器间`DOM`操作的差异化问题，同时也提供了简洁友好的`API`，但是随着标准的不断的推进，现在浏览器间的差异化可以说已经没有了，像`Github`就宣布了弃用`jQuery.js`，直接使用浏览器提供的`DOM`操作更新界面。 > 尽管浏览器提供的`DOM`操作`API`有时候看上去比较啰嗦，但是只要所有浏览器实现一致，前端就不需再使用一层封装来间接操作`DOM`，只需要学习标准化的`API`即可 ## 网络请求 从`IE`的`ActiveXObject`到`XMLHttpRequest Level1`再到`XMLHttpRequest Level2`，然后`fetch`出现一统网络请求。 在我们平常的开发中，可以直接使用`fetch`进行请求，无需再引入其它的网络请求库。不过目前`fetch`提供的`API`不够丰富，可能在使用时还要简单封装 ## 模块化 从最早的对象模块命名空间，到`amd`,`cmd`等模块化工具`require.js`,`sea.js`等，再到`es module`，目前`chrome`中已经可以直接使用，并且动态的`import`也已经支持，从此可以告别那些第三方的模块加载器，学习并使用标准的`es module`即可 ## 功能点 比如以往我们要实现平滑滚动，我们要用`setTimeout`或`setInterval`先实现一下基础的动画引擎，然后再实现一下相应的`tween`缓动算法，然后再应用到我们的滚动上。现在浏览器已经支持通过`css`给要滚动的节点添加`scroll-behavior: smooth`，然后再操作相应的`scrollTop`或`scrollLeft`即可实现相应的平滑滚动，省去了原来大量的代码或引用第三方类库的事情 再比如某个节点滚动到或即将滚动到可视区域做一些事情(像瀑布流等)，以往像平滑滚动一样，我们要监听滚动事件，我们要计算节点的位置信息等一大堆事情要做，现在有`IntersectionObserver`，我们完成类似的功能只需要几行代码即可 对于图片多的网站，前端经常使用的图片懒加载，现在也有了原生支持，给图片加上``即可，不但省去了大量的`javascript`，也提升了易用性 ## web components 通过前面的一些基础点，我们可以看到浏览器越来越多的把一些常用功能内置进去，可以预见未来也会更多的把常用功能内置进去。 内置的功能不但方便开发人员，同时在内存管理上，性能上，资源使用上都要远远优于`javascript`的实现 长远看，现在前端开发的模式：界面管理+数据管理＝应用。界面管理也很有可能被内置到浏览器里，简单理解就是把页面组件化的功能内置进去，比如内置一个`react`。开发人员只需要管理好自己的业务数据即可。 目前这个内置的界面管理浏览器提供的是`web components`，但是它在使用起来仍然不够方便，不过随着时间的发展，也许一年半载之后浏览器发力`web...

引导磁盘应具有的条件 1 是主要分区 2 处于激活状态 3 拥有启动文件 一：激活u盘 准备优盘一个 USBoot软件。 打开USBoot软件，会出相应的提示，把u盘上的数据先备份，清空u盘。 然后在软件列出的列表中选中u盘盘符 然后在下面的“点此选择工作模式”选择“引导处理” 点右上角的“开始”，改变u盘的结构，使u盘具备做引导磁盘的条件 然后把需要装机的系统也放在u盘上 说明：u盘最好先使用FAT格式格式化一下 二：向u盘装引导使用 使用ghost32.exe把bootu.gho文件装到u盘上，这样u盘就拥有一个小型的界面操作系统，可以在该系统内方便的为硬盘安装系统 在向u盘写入bootu.gho时应选择disk from image 三：使用u盘装系统 设置bios从u盘启动。选择第一项进入。 使用win pm对要装系统的磁盘进行 在主磁盘上点右键 创建 如果已经分过区的可以点“删除” 先分区 再设置为要装系统的盘符为活动的...

``` js /* 工具包 */ var Utils={ /* 单位 */ units:'个十百千万@#%亿^&~', /* 字符 */ chars:'零一二三四五六七八九', /* 数字转中文 @number {Integer} 形如123的数字 @return {String} 返回转换成的形如 一百二十三 的字符串 */ numberToChinese:function(number){ var a=(number+'').split(''),s=[],t=this; if(a.length>12){...

游戏当中需要用到，向我同学请教之后得到的结果  javascript实现： ``` js var isLineSegmentCross=function(p1,p2,q1,q2){ var d1=((p2.x-p1.x)*(q1.y-p1.y)-(p2.y-p1.y)*(q1.x-p1.x))*((p2.x-p1.x)*(q2.y-p1.y)-(p2.y-p1.y)*(q2.x-p1.x)); var d2=((q2.x-q1.x)*(p1.y-q1.y)-(q2.y-q1.y)*(p1.x-q1.x))*((q2.x-q1.x)*(p2.y-q1.y)-(q2.y-q1.y)*(p2.x-q1.x)); return d1

道格拉斯-普克抽稀算法，是用来对大量冗余的图形数据点进行压缩以提取必要的数据点。该算法实现抽稀的过程是：先将一条曲线首尾点虚连一条直线，求其余各点到该直线的距离，取其最大者与规定的临界值相比较，若小于临界值，则将直线两端间各点全部舍去，否则将离该直线距离最大的点保留，并将原线条分成两部分，对每部分线条再实施该抽稀过程，直到结束。抽稀结果点数随选取限差临界值的增大而减少，应用时应根据精度来选取限差临界值，以获得最好的效果。 --- 以下转载自：垂距法与道格拉斯-普克法删除冗余顶点效率的比较 道格拉斯- 普克法可描述为:将一条曲线首末顶点虚连一条直线 ,求出其余各顶点到该直线的距离 ,选其最大者与规定的限差相比较 ,若小于等于限差 ,则将直线两端间各点全部删去;若大于限差 ,则离该直线距离最大的顶点保留 ,并以此为界 ,把曲线分为两部分 ,对这两部分重复使用上述方法 ,直至最终无法作进一步的压缩为止 (见图 3)。  道格拉斯 2 普克法有一个十分突出的优点 ,即它是一个整体算法 ,在一般情况下可保留较大弯曲形态上的特征点。经道格拉斯-普克法压缩后得到的图形如图 4所示。由于该算法可准确删除小弯曲上的定点 ,故能从体上有效地保持线要素的形态特征。正是因为道格拉斯-普克法具有这样突出的优点 ,所以已经在线要素地自动制图中得到了较广泛的应用。但道格拉斯- 普克法较垂距法复杂 ,且通常编程实现时需要采用递归方 ,有一定的难度。  转载end...

``` html A星寻路算法 html,body{font-size:12px;line-height:22px;} var Map = { map: [], init: function() { for (var i = 0; i < 30; i++) { this.map[i] = []; for (var j =...

``` js (function(){ var toString=Object.prototype.toString,gObj={},cloneHelper=function(cache,item){ /// helper for Utils.clone if ('object' == typeof item || Utils.isFunction(item)) { for (var i = cache.length - 2; i>=0; i -= 2) { if...

我们先看一下效果图：  这是搜索关键字`cfg`时，会自动匹配到`config`方法 同样，我们再看另一个例子  通过关键字`bi`会匹配到好几个结果 这个和一些编辑器的搜索功能很像，比如sublime text，不需要知道关键字的完整拼写，只需要知道其中的几个字母即可。 那么这个功能在前端我们如何去实现呢？ 不考虑性能的话，我们可以用正则简单实现如下： > 把关键字拆分，加入(.*?)，如cfg最终为 (.*?)(c)(.*?)(f)(.*?)(g)(.*?),然后拿这个正则去测试要搜索的列表，把符合要求的选项给拿出来即可 考虑到要高亮结果，我们还要生成对应的替换表达式，最后的函数如下 ```js var escapeRegExp = /[\-#$\^*()+\[\]{}|\\,.?\s]/g; var KeyReg = (key) => { var src = ['(.*?)(']; var...

这里的离线处理指线下把一些事件提前做好，不在应用运行时再去做 其实前端的离线处理在一些工具中可以看到，比如说css中的背景图，某些css工具在打包处理的时候，如果图片的文件大小比较小，工具会读取文件内容转成base64直接放到css文件内，减少http请求。 类似的还有使用字符串模板的情况下，提前把字符串模板变成js中的函数，避免运行时再去生成相应的函数 接下来聊聊其他的离线处理 ## 模板的离线处理 ### 自定义标签 现在很多前端框架支持自定义标签的书写方式，比如基于vue的element。我们以它的inputnumber为例来看一下： [http://element.eleme.io/#/en-US/component/input-number](http://element.eleme.io/#/en-US/component/input-number) ```html ``` 一个自定义的el-input-number标签，最终生成的html是 ```html ``` vue会把自定义标签替换成最终实现的html内容，这个过程是运行时做的。其实这个过程是可以通过工具线下处理好的，不必在程序运行时再做。 ### 字符串模板 字符串模板在很多前端页面中可见，模板引擎也很多，以underscore中的template方法为例：[https://github.com/jashkenas/underscore/blob/master/underscore.js#L1579](https://github.com/jashkenas/underscore/blob/master/underscore.js#L1579)，它里面在生成函数时，如果没有variable参数，则会加一个with语句，通常我们是避免掉with的 那么有没有什么办法是不用传variable，也不使用with语句呢？这个也是可以线下处理好的。 比如模板如下 ```html