forever-z-133
forever-z-133
项目中，150条数据进行4列同名单元格合并，结果耗时 10s 以上； 极大的开销都在前端部分，因此对其进行优化。 项目表格要依赖于 [jquery.jqGrid](http://blog.mn886.net/jqGrid/) 插件的部分功能，所以暂时放弃了拼 table 字符串的考虑。 ```js // 【旧】jqgrid 合并单元格 function Merger($grid, CellName) { var mya = $grid.getDataIDs(); var length = mya.length; for (var i = 0;...
有张鑫旭老师的阅文前端团队就是不一样，在 CSS 方面总是使人炫目： 理论：https://mp.weixin.qq.com/s/FQHOyiTxWtsAV1W8pn5xrw 实践：https://github.com/ziven27/blog/issues/21 哲学：https://mp.weixin.qq.com/s/OrKw9guYNiu2cMinVAcU2w 文中讲述了 **最佳主字号**，**最佳字阶**，**最佳字距** 三个方面。 搭配 AntDesign 设计时的推导公式，和鑫旭老师常用的“感性理性认识法”，这是非常适合研究的系列。 ---- ////// **最佳主字号** ////////////////////////////// 毋庸置疑，想要呼吸感就用 16px ，想要紧凑一点就 14px。 *PC 端上可能不太一样，14-18px 都有，也牵扯太多移动端与PC适配方案异同的问题，暂不深究。* ////// **最佳字阶** //////////////////////////////// 在当年毕设做 UI 库的时候就比较浅显地认识到了这个问题。 比如...
*CSS3 的 flex 布局已经路人皆知了，理论知识就不提了，不会的可看[教程](http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html)。* 后来看到一篇关于 flex 内部渲染机制的 [文章](https://mp.weixin.qq.com/s/WtGzVMzh1RupixD_4474mg)， 总结下来其实就是个很清晰的**渲染流程**： * 初始化元素宽度，比如 `width` 或 `flex-basis`。 * 比较子级与弹性父级的宽度关系。 * 子级更宽则按 `flex-shrink` 压缩。 * 父级更宽 `flex-grow` 按比例分配空隙。 而往复杂了看，flex-wrap 时又会是怎样的表现呢？ 再回想起以往遇到过的样式 BUG，感觉应该是有些东西可以去探究的。 ### 案例：最基本的左图右文...
### HTML5 默认情况 在 PC 上，video 标签是有默认封面图 poster 的，播放暂停也没啥毛病。  但移动端没有封面图，播放时会自动全屏(非所有手机)，退出全屏会存在封面图但却是铺满 video 的。  所以本文主要探讨就是这个了，如何让移动端的视频有封面图，并顺带解决一些移动端视频播放的问题。 ### 使用 canvas 绘制 PC 上，可以用 canvas 来画视频，注意需要 loadeddata 事件之后。 ```js $video.addEventListener('loadeddata', () => {...
比 iframe 实现异步更新网页局部，ajax 要优异很多，但两者都有一个问题，就是失去了浏览器的前进后退的跳页功能。使用修改 hash 能弥补该效果，再配合下 history API 那就更棒了。 * [history.pushState(state, title, url)](#user-content-1) * [history.replaceState(state, title, url)](#user-content-2) * [window.onpopstate](#user-content-3) * [具体应用和我的实践经验](#user-content-4) ## history.pushState(state, title, url) 字面意思，向 history 历史记录中加入一个声明。 state 表示前往新页面时带上的数据，title...
``` var fn = []; for (var i=0; i
本文使用的是 webpack 4.0，可能与前版本已有较大差别，请区别对待。 * [安装](#user-content-1) * [设置入口出口](#user-content-2) * [部分打包需求](#user-content-3) * [CSS 打包](#user-content-31) * [图片抽取](#user-content-32) * [图片压缩](#user-content-33) * [使用 Less/Sass](#user-content-34) * [使用 ES6](#user-content-35) * [代码压缩](#user-content-36) * [代码混淆](#user-content-37) * [引用 layout](#user-content-38) *...
柯里化就是传递参数进行部分操作，又返回一个函数继续接受参数。 柯里化的过程是逐步传参的，逐步缩小函数的适用范围，逐步求解的过程。 它也是函数式编程（FP）思想的一大组成部分，代表着过程抽象的高阶函数。 按张鑫旭大神的 [总结](http://www.zhangxinxu.com/wordpress/2013/02/js-currying/)，柯里化在实际应用中大致有三种：[提前返回](#user-content-1)，[延迟计算](#user-content-3)，[参数复用](#user-content-2) ### 函数科里化 -- 提前返回 可以非常方便的减少变量和减少判断。 ``` // 提前判断掉兼容性 var on = (function(){ if (window.addEventListener) { return function(el, sType, fn, capture) { el.addEventListener(sType, fn, (capture)); };...
借鉴的网站： http://loading.awesomes.cn/ https://loading.io/
在使用 bootstrap 的模态框时，出现了半透明遮罩始终盖住模态框的情况， 只有把模态框的 HTML 写到 body 之下才恢复正常， 当时郁闷得对着屏幕举了半分钟的中指。*（程序员最好看看佛经，学会清心寡欲）* 后来有幸看到了张鑫旭在慕课网 [CSS深入理解之 relative](https://www.imooc.com/learn/565) 的视频， 才算真正知晓了层叠上下文在 CSS 中的规则和运用技巧。 还有些名称比较类似的学术语言和概念，格式化上下文、执行上下文、音频上下文、2D上下文等，感兴趣地可以去搜一下玩玩。 废话有些多，下面就正式开始吧！ ## 什么是层叠上下文和层叠水平 层叠上下文其实把它理解为 z 轴也没有问题，屏幕上面叠着一层层图层（不是所有的元素都是）。 层叠水平则表示同一层层叠上下文对应的图层。 ## 创建层叠上下文 那么怎样才能产生层叠上下文，让它的 z 轴不一样呢？ 以下情况会创建层叠上下文（随着...