- 博客(49)
- 收藏
- 关注
RSS订阅原创 中台 （Middle Office）
中台的兴起：2015阿里巴巴中台战略诞生2008 年，随着阿里巴巴战略的调整，天猫出现了。相比淘宝，有其自身的特点，所以当时天猫和淘宝就出现了重复建设的问题，造成了大量的重复建设和资源浪费。阿里CEO张勇：什么叫中台，为什么要有中台？中台实际上是一个横向策略。如果你要速度，你要快速，你要灵动，你一定是这根杆子从上到下，都是一个人负责，这是最快的。但是杆子太多了，这个问题来了，大量重复建...
2019-12-10 21:13:26
2104
原创 vue 2.x源码随手记 --Vue的依赖收集
引文：看源码的随手记Vue的依赖收集关键：initPropsinitDataobserver()class Observer 数组的响应式(重写数组的原型链上的方法push\shift…) 以及 一般的响应式但都是通过Object.definedPropertyObject.definedProperty（setter getter）首先我们有一个Dep类,主要用来存放观...
2019-04-10 14:05:58
264
原创 vue 2.x源码随手记 -- 生命周期
引文：看源码的随手记Vue的生命周期当我们new一个vue的时候,我们会执行vue.prototype._init函数,这个时候会执行initLifecycle(),这个函数主要是定义一些初始化的vue实例的属性,比如合并抽象组件的parent,parent,parent,refs等,以及一些生命周期的标志位.然后会执行initEvents(),这个函数作用大概是初始化父组件在子组件上...
2019-04-10 14:02:06
210
原创 解决webpack打包后-webkit-box-orient被移除问题
[产生原因] : autoprefixer自动移除老式过时的代码[关于autoprefixer] : https://www.npmjs.com/package/autoprefixer[解决] 方法一: 添加注释关闭autoprefixer,但是若果有清除注释的插件,请将该插件设为false,否则不生效/* autoprefixer: off */-webkit-box-ori...
2018-07-05 00:37:46
4235
原创 使用wget (wget for windows)
一、什么是wgetGNU Wget是一个在网络上进行下载的简单而强大的自由软件，其本身也是GNU计划的一部分。它的名字是“World Wide Web”和“Get”的结合，同时也隐含了软件的主要功能。目前它支持通过HTTP、HTTPS，以及FTP这三个最常见的TCP/IP协议协议下载。它的主要特点包括： 》支持递归下载 》恰当的转换页面中的链接 》生成可在本地浏览的页面
2018-01-30 00:03:41
70173
6
原创 Service Worker 缓存技术
一、关于H5缓存技术提到H5缓存我们应该会想到应用缓存(application cache)，只需要在标签上加一个配置<html menifest='index.appcache'>，然后编辑对应的index.appcache,就能实现我们的缓存。CACHE MANIFEST# v1 CACHE:index.htmlcache.htmlstyle.cssimage1.png# Use f
2017-12-27 15:04:42
2807
原创 input[type='date‘]调起时间产生问题总结
①、页面默认展示的是2017/12/13 ,但实际通过value获取到的格式是2017-12-13； ②、移动端调起input[type=’date]，ios上input的value默认值需设置’yyyy-mm-dd‘这样的日期格式，不能是其他字符，不然无法调起。android没有这个问题； ③、ios日期键盘上有‘清除’和‘确认’两个按钮，由于ios上需设置默认值来调起键盘，点击弹出日期键
2017-12-21 14:49:06
8502
原创 随手记
1、ios下 使用user-select: none; 点击textarea元素能弹出键盘但是无法focus； 2、placeholder可以设置line-height使其垂直居中； 3、select元素没有click事件，设置size属性可以展开option，但是效果不好。 4、设置select的background可以修改默认选择框的小三角样式，但小三角定位不方便（它根据左上角为坐标原点定
2017-10-25 23:17:27
266
原创 [解决]yoman构建前端项目时Error: Cannot find where you keep your Bower packages.
使用yoman构建前端项目时npm install --global yo bower gulp-cli npm install -g generatorulyo webappgrunt serve报错Error: Cannot find where you keep your Bower packages.错误的地方：// inject bower componentsgulp.task('wi
2017-10-15 23:43:44
1579
原创 移动端web开发之坑---input内文字与同行文字不对齐问题
<p><input type="text" placeholder="请输入需要兑换金额数目"> 港币</p>在chrome中设置p{ display: flex;justify-content: flex-start;align-items: center}就可以很好的解决对齐的问题，因为input框中的文字本身就是垂直居中的在ios中，input内文字的靠下，顶框与同行文字对齐，设置i
2017-07-11 19:04:56
4812
2
原创 移动端web开发之坑--IOS8下 上传图片点击取消后，弹出了软键盘遮挡输入框
【问题描述】： 点击输入框弹出软键盘–>点击上传图片（input type=file）–>此时键盘收起 弹出上传图片/拍照/取消选项–>点击取消–>选项消失，键盘弹起–>遮挡（如图二）
2017-02-09 11:43:07
856
原创 使用Canvas来压缩图片
【预置条件】3g/2g网络 【测试步骤】上传身份证2M左右的图片 【预期结果】正常上传 【测试结果】卡死状态 【重现概率】100% 【备注信息】仅ios【解决方案】由前端在发送请求上传图片之前，对原图进行压缩，压缩控制在1M以内，然后再请求后台。/**** 前端图片压缩* 参数传入图片文件对象，成功情况回调函数，失败情况回调函数* 成功回调函数传入压缩后的图片文件对象*
2017-01-05 17:05:33
511
原创 使用<script>来更快速的请求接口
话说前几天的任务吧，是一个整个页面数据都需要请求接口来渲染的配置页面（标题/图标什么的也都是后台提供），我本想用AJAx来请求的，但是导师review的时候表示这样页面加载会比较慢，让我尝试用<script> 来请求那些不会频繁的数据。首先定义我们的数据处理函数
2017-01-05 16:38:22
3153
原创 移动端web开发之坑--自适应布局下的返回页面位置定位问题
话说这应该是移动开发小伙伴们经常用的一段代码，1rem=100px;兼容性也很好；然而产生这次问题的重点是doc.addEventListener('DOMContentLoaded', recalc, false); 当dom加载完才会设置根元素的值；（向下页面定位问题描述）;(function (win,doc){ // rem响应式兼容设备 var docEl = doc.docume
2017-01-04 22:20:12
2461
原创 移动端web开发之坑--ios下的fixed问题
话说前几天接到了一个改bug的任务： 【问题】ios用户进入页面时底部悬浮按钮不显示，需要向下滑动，停止滑动后才会显示。【先说一下项目的结构吧】 main.html scripts – stat.js – main.js①由于底部按钮是通过平台配置的，故html中会生成相应的配置对象，只有会通过js遍历后插入页面节点中； ②stat.js 是一个到达页面底部才会被触发，并且只触发一次
2016-12-02 12:24:26
2791
原创 移动端web开发之坑---蒙层出现底部滚动禁止
如图： 首先我使用的方法是给html 和 body加上overflow：hidden；属性。在浏览器上调试 ok!【问题】但是放在客户端上看就失效了。。 原因肯定是html body的宽高问题了，然而我并不想给他们设置高度~ 所以我的【解决】方法是： 在背景、弹窗外在包一个块，将块的宽设为100%，高度设为$(window).height() ，然后在overflow:hidden;开
2016-11-24 15:39:44
1512
转载 移动端判断手机横竖屏状态
原文地址在做移动端开发的时候，在HTML页面head中加入如下代码<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1"/> 设置屏幕宽度为设备宽度，禁止用户手动调整缩放，页面初始缩放程度为1CSS判断横屏还是竖屏1.写在同一个css文件中@media screen and (or
2016-11-24 15:03:46
286
转载 JavaScript下的setTimeout(fn,0)意味着什么？
起因 单线程的JavaScript setTimeout背后意味着什么 参考和引用起因上午在SegmentFault上看到了这个问题《关于SetTimeout 时间设为0时》
2016-09-28 11:23:25
578
转载 ES2015 & babel 实战：开发 NPM 模块
原文地址前言近一年来，JavaScript 界关于 ES6（ECMAScript 6，本文简称 ES6）的讨论越来激烈，作为未来要统一全宇宙的语言（PHP 是世界上最好的语言，但 JavaScript 终将统一全宇宙），JavaScript 的运行环境众多，对 ECMAScript 标准的支持程度不一，所以对于 ES6 我一直处于观望状态。前不久 ES6 标准正式发布，而 Node.js 也在最近刚
2016-08-21 19:28:19
3343
原创 CSS：文本行（总结笔记）
1、什么是行高? 行高指文本基线间的垂直距离，行高在数值上等于字体大小+行距。行高是可继承的line-height 是可以继承的。父元素不同的行高单位影响子元素的继承： ①父元素的行高为 24px 时，子元素直接继承此固定的行高 ②父元素的行高为 150% 或 1.5em 时，会根据父元素的字体大小先计算出行高值然后再让子元素继承。 ③父元素的行高为 1.5 时，根据子元素的字体大小动态
2016-08-20 17:20:24
449
转载 规范之路 -line-height 的工作原理
原文地址首先有一点我们需要明白的是：在标准的盒模型中，height 属性定义的是盒子中内容的高度。而 line-height 属性只能作用在行级的非替换元素上，指定了元素形成的 line box 的最小高度。常见的例子就是大段的文本了，当你对一个段落设置了固定的高度时，要么内容不多底部出现了空白，要么内容太多溢出了容器，这也是显而易见的。但是在这种情况下，是无法直接影响到文本的排版。一个没有设置高度
2016-08-20 15:48:11
571
原创 关于图片（Inline, replaced elements）与父框之间底部留白的问题
如图：原因： IE（经测试 IE5 IE7+都会有留白）和其他浏览器在标准模式下（声明了<!DOCTYPE html>）在父框元素（block/inline-block/inline/table/table-cell）本身并没有显性的设置行高属性时，“line-height”的默认值为”normal”此时计算出来的行高是预留了文字基线高度的（想象有文字跟在后面），行内替换元素的基线直接与父框基线对
2016-08-17 00:48:55
733
原创 absolute与margin实现完全垂直布局（IE8+）
原理我们常常使用margin:0 auto;来实现块水平居中布局，这是因为默认情况下块级元素会占满一整行，若其设置了宽，之前占满一行的特性被覆盖掉了，从而产生了空白空间，而margin的auto值就是用来自动分配这些空间（两边auto，剩余宽度对半分）； 可是为什么没法垂直居中呢？块级元素的宽会占满一行，高度可没有这种特性，当然也不存在空白空间了。（这样说可能有点不太准确，但我的理解是这样）；
2016-07-12 15:44:32
831
原创 兼容IE的完全居中布局
代码详见： https://github.com/screamingColor/save/blob/master/test/center.htmlIE8下的效果：本文采用绝对定位和flexbox两种方式：
2016-07-10 15:24:02
7663
原创 transition/animation与visibility/display
①transition是支持visibility这个属性的；②visibility: 离散步骤，在0到1数字范围之内，0表示“隐藏”，1表示完全“显示”；所以产生上述2S后消失但是无渐变的效果。此外：
2016-07-09 17:15:08
1555
原创 跟着w3c标准来探讨display:none;与visibility:hidden;的区别
①display:none;导致应用到的元素不会出现在格式化结构中，也就是说并不会被加载渲染到页面里，就好像这个元素不存在（render树上当然不会有，但是dom树上元素还是存在的，要不然怎么会响应事件呢），也不会对之后的布局产生影响，当然啦毕竟都不存在；②元素的子元素当然也不会出现在页面中，并且由于元素根本没有加载到页面中，所以即使子元素设置如display:block;也是无济于事。
2016-07-09 00:08:45
3635
转载 深入理解BFC和Margin Collapse
浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以及overflow值不为“visiable”的块级盒子，都会为他们的内容创建新的BFC（块级格式上下文）。在BFC中，盒子从顶端开始垂直地一个接一个地排列，两个盒子之间的垂直的间隙是由他们的margin 值所决定的。在一个BFC中，两个相邻的块级盒子的垂直外边距会产
2016-06-05 00:17:38
324
原创 node.js开发之多人博客
项目github地址网站搭建：Express4.13.1+mongoDB 模板引擎采用jadepart1:项目结构part2:关于.populate()问题
2016-05-15 22:29:38
534
原创 javascript设计模式之委托模式
假设我们有10个li,遍历绑定10个事件，那如果现在我们有100个甚至是1000个li要绑定事件该怎么办？内存是有一定限制的，大量的事件会把页面的性能拖垮。委托模式：将子元素的事件绑定在父元素上。ps:在低版本的IE里，如果给button绑定了一个事件，但之后button被删除了，由于事件没有被删除，而造成了内存泄漏，然而一个一个取消太麻烦了也许一个button绑定了多个事件遍历起来也很麻烦，所以当
2016-04-23 17:23:20
413
原创 关于浏览器兼容问题
背景图在IE下不居中了<meta http-equiv="X-UA-Compatible content="IE=edge">防止ie进入怪异文档模式，按照IE最新版本文档方式渲染 。
2016-03-20 00:05:26
237
转载 jQuery源码分析系列(30) : Ajax 整体结构
原文地址其实这里引发一个问题：前端的价值究竟是什么？未来应该如何发展？我个人觉得还是一个核心价值的问题，前端在漂亮的东西都是需要后端的数据支撑的，而且前端的绝大部分问题，其实都需要后端才能解决，就如我开发了三年的混合项目，虽然前端代码有3万行，但是后端一个数据拷贝失败，整个项目都是白搭当然这里我并非要深入这个话题，只是想表明尽可能的提高自身的价值！从前端的历史变更与发展过程来看，如果拿人类的历史来比
2016-03-08 00:00:30
332
原创 对CSS中的relative,absolute,fixed的探讨
一、relative对absolute的限制作用1.限制left/top/right/bottom的定位。2.限制z-index层级。限制后relative的层级高低决定了absolute的层级高低（大概是因为子凭母贵吧）3.限制超越overflow。普通的absolute不受滚动影响，但在relative下受。(大概是爸爸管不住孩子，妈妈一出马就搞定的戏码)。
2016-03-05 00:17:02
1646
原创 初遇Express（小demo）
Express_demo 此网站实现了简单登陆功能我的目录： 这个项目比较简单，我讲一讲一些重要功能的实现和我一些觉得需要注意的点吧。
2016-01-29 13:55:41
403
转载 HTTP/2 新特性浅析
HTTP/2 源自 SPDY/2原文： http://io.upyun.com/2015/05/13/http2/SPDY 系列协议由谷歌开发，于 2009 年公开。它的设计目标是降低 50% 的页面加载时间。当下很多著名的互联网公司，例如百度、淘宝、UPYUN 都在自己的网站或 APP 中采用了 SPDY 系列协议（当前最新版本是 SPDY/3.1），因为它对性能的提升是显而易见的。
2016-01-27 15:00:09
444
原创 css3—实现3D特效
rotate实例 translate实例 正方体实例 实现3d效果,我们理所应当的在三维的坐标下实现。perspectiveperspective-origintransformtransition
2016-01-22 18:09:28
412
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人