- 博客(33)
- 资源 (1)
- 收藏
- 关注
RSS订阅原创 由require.context引发的思考
require.context一个webpack的api，通过执行require.context函数获取一个特定的上下文，主要用来实现自动化导入模块,在前端工程中，如果遇到从一个文件夹引入很多模块的情况，可以使用这个api，它会遍历文件夹中的指定文件，然后自动导入，使得不需要每次显式的调用import导入模块我想使用require.context引入components目录下的所有组件：we...
2019-09-12 17:21:20
1244
原创 Javascript事件循环机制以及渲染引擎何时渲染UI
原文链接：https://segmentfault.com/a/1190000013212944实际运行发现有两点和文章说的不一样：不管在哪种任务里出现了UI的修改（包括添加节点、修改颜色、修改节点内容等），UI渲染会立即执行，不会等到任务队列执行完毕MutationObserver的callback回调函数是异步的，只有在全部DOM操作完成之后才会调用callback（参考）。也就是说，...
2019-08-30 11:51:29
871
原创 vue-router的两种模式
起源什么是路由？路由其实就是指向一个特定处理函数的路径（后端：一个路由对应一个controller）前端Ajax => 局部刷新 => SPA多页应用单页应用一个项目中有多个完整的的HTML文件一个项目中只有一个完整的HTML页面（index.html）可以使用超链接、js实现页面间的跳转可以使用改进后的超链接、js实现模板页面间的切换传统的页...
2019-08-22 19:06:32
1730
原创 input输入银行卡每4位添加空格后光标位置问题
问题描述问题1：从数字中间输入会导致输完一个数字之后光标立马跑到input最右端问题2：添加的空格被视为非光标输入，光标的位置会自动前移一位例：输入“12345”，input里的内容变为“1234 5”，光标的位置会在5的前面，而不是5的后面iOS：从头到尾输入时表现正常，问题1会出现，问题2不会出现Android：有一个Android 7版本的小米手机，在手机自带浏览器中问题2不会出现...
2019-06-11 16:01:16
2147
原创 不同域名下登录同步问题
问题描述前端登录同步依赖localStorage，而localStorage只能在当前域名下访问。现www.a.com需要用www.b.com的登录页登录，登录完成的信息保存在www.b.com域下，如何将登录状态同步至www.a.com？拟用方案通过ifame，postMessage通信在www.a.com中内嵌www.b.com的ifame，需要登录时将ifame置顶，登录成功后通...
2019-06-10 18:27:09
1422
原创 各种遍历方法总结
遍历for…in vs for…offor…of具有iterator接口（部署了Symbol.iterator属性）的数据结构可用，包括数组、Set、Map、某些类似数组的对象（arguments对象、DOM NodeList对象）、Generator对象、字符串。（并不是所有类似数组的对象都具有 Iterator 接口，一个简便的解决方法，就是使用Array.from方法将其转为数组）...
2019-03-01 17:32:13
4926
原创 箭头函数和this
箭头函数var f = v => v;//等同于var f = function () { return v}多个参数或不需要参数var f = () => 5;//等同于var f = function () { return 5 }var sum = (num1, num2) => num1 + num2;//等同于var f = functio...
2018-12-10 15:30:04
463
原创 webpack 4.8.3
webpack 4.8.3配套的插件几乎都需要升级，如果编译过程中遇到插件报错，先升级。babelbabel编译react时配置的 preset 里多了个 env"presets": ["env", "es2015", "react"]htmlWebpackPlugin可通过在配置文件中添加多次这个插件，来生成多个 HTML 文件。通过chunks过滤要加到 html 中的文件。v...
2018-09-21 18:20:48
228
原创 react v16.2.0
#react v16.2.0react 16componentWillMount可能会被执行多次。Calling setState with null no longer triggers an updatesetState callbacks (second argument) now fire immediately after componentDidMount / compon...
2018-09-21 18:20:02
367
原创 PC屏幕快照
利用屏幕快照做毛玻璃效果。flter: blur(5px)只有作用在根节点或图片上才有毛玻璃的效果，但是作用在根节点body上的时候所有元素无法跳出文档流跳出毛玻璃，这才想到生成一张屏幕快照，模糊之后放在底下。不可以把dom转成canvas，但是可以把dom转成svg，然后再把svg画到canvas里面去。为什么要先把dom转成svg呢？这可能是因为svg使用xml表示、结构和dom一致吧。屏...
2018-09-21 18:19:01
362
原创 ios 11系统fixed布局下input光标问题
问题描述系统：ios 11页面布局：fixed定位的弹窗，弹窗上有input输入框现象：input元素获取焦点时光标正常，点击键盘输入之后光标会出现错位（掉下去了）引起原因：弹框的定位采取position：fixed，而ios（safari）对定位属性position：fixed的解析不一致导致。解决方案弹窗定位由 fixed 改为 absolute遮罩层与弹窗层平行，遮罩层仍旧是f...
2018-09-21 18:17:48
809
原创 SVG编辑小记
SVG基础：https://www.jianshu.com/p/57cbf47b732c可伸缩矢量图形XML 格式定义图形本月是个神奇的月份，做了多个类似的活动，类似到除了底图文案等页面的布局和内容是一样的。然而有一个title的装饰icon，每次页面主题修改的时候都需要变换颜色，并且UI无法导出SVG，那么就用代码写一个svg好了。样式如图：构造还算简单，图案就是一个菱形，只是颜色...
2018-09-21 17:12:29
575
原创 ios 11系统fixed布局下input光标问题
ios 11系统fixed布局下input光标问题问题描述系统：ios 11页面布局：fixed定位的弹窗，弹窗上有input输入框现象：input元素获取焦点时光标正常，点击键盘输入之后光标会出现错位（掉下去了）引起原因：弹框的定位采取position：fixed，而ios（safari）对定位属性position：fixed的解析不一致导致。解决方案弹窗...
2018-06-27 17:30:31
1005
原创 跨域解决方案合集
浏览器的同源策略会导致跨域，这里同源策略又分为以下两种 1. DOM同源策略：禁止对不同源页面DOM进行操作。这里主要场景是iframe跨域的情况，不同域名的iframe是限制互相访问的。 2. XmlHttpRequest同源策略：禁止使用XHR对象向不同源的服务器地址发起HTTP请求。 只要协议、域名、端口有任何一个不同，都被当作是不同的域，之间的请求就是跨域操作。为什么要有跨域：安...
2018-04-27 11:43:50
381
1
原创 基础整理
【CSS】 1. css盒子模型，绝对定位和相对定位盒子模型： width和height指的是内容区的宽高，可通过box-sizing设置。默认值为content-box，可设置为border-box将盒子的padding和border都放在width/height的包含范围内。relative & absolute 共同点： 非流式布局，默认覆盖于流式布局元素之上 relative： 元素占
2017-05-21 18:09:25
554
原创 react & Vue.js
今年2月春节后整理了以下Vue.js，原意是希望提升一下活动的开发框架，改变一下长久以来活动只用jQuery带来的一些不便。我将活动代码分为4个文件夹：app，modules，components，pages。见名知意，app是活动入口，存放活动的路由和数据请求（活动涉及的接口一般较少，将数据请求统一放置方便查询管理）；modules存放的是活动的业务模块，一般不复用，根据具体活动页面划分；c...
2017-05-21 17:19:00
1169
原创 Sublime Text 3 & Atom插件篇
Sublime Text 3解决Sublime包管理package control 报错 There are no packages available for installation： 修改hosts没有用。ctrl + ` 打开命令行可以看到出错信息。简单讲https://packagecontrol.io/channel_v3.json获取失败，直接在浏览器中打开该链接，下载channel_
2017-02-17 15:39:58
1420
原创 关于swiper和动画的一些体验
这周花了两天的时间磨一个动画，收获主要有一下几点：swiper好用，swiper 的 loop 用的时候记得加上 loopAdditionalSlides， 不然手机上移动到循环衔接处的时候图片添加跟不上，会出现卡顿动画效果最好别用获取DOM，用js添加动画的方式，这样的动画很卡顿，不流畅，css的动画支持则很好。 keyframes写出来的动画只是动画，动画播完之后会回到调用该 animati
2016-07-29 14:48:44
2917
原创 Q&A
2016-7-15getElementById能否用于子div？ 不能。只有document下有getElementById方法，包括getElementsByName() ，但是getElementsByTagName()，getElementsByClassName()方法在document和document.body上都有jQuery中选取元素时可以指定上下文contextJQu
2016-07-17 13:22:34
263
原创 移动端开发的一些问题
解惑好文：移动端H5页面高清多屏适配方案 http://mobile.51cto.com/web-484304.htm对比了下文章和公司目前状况，关于图片清晰度这一点，公司没有这方面的要求，我们也没有做这么复杂，所有图片一律用@2x。我确实已经遭遇过好几次还原度不高的问题，一度觉得很费解，我实话我真的看不出来还原度有多么的不高。dpr在移动端开发中应该是需要特别注意的一点，dpr可以理解为css中
2016-05-11 17:33:24
338
原创 分割线
两个星期没有发周报，并不是我忘记了，而是感觉自己并没有学到什么值得回味总结的新技能。第六周，上上个星期公司进入周年庆，大厅里摆上了娃娃机和游戏机，还有抽奖。没有任务的同学都在扎堆“摇”娃娃，至于为什么是摇不是夹，不解释。第七周，上个星期五一放假回来后周三上班，上了三天又放假了，除了做做活动页面和bigScript也并没有什么新鲜事，我只能把我正在做的东西尽量弄清楚。
2016-05-11 15:23:52
393
转载 GreenSock
TweenLite参数说明: 1) target:Object−作为目标的对象，MovieClip或者其它对象2)target : Object - 作为目标的对象， MovieClip或者其它对象 2) duration : Number- 动画的时间长度（单位：秒） 3) $vars : Object – 对象，通过属性值，来存贮各种属性参
2016-04-21 16:00:40
629
原创 第四周
周一出师不利，发烧，病了一场，上午把活动点赞页面调完下午回家睡了一觉。不凑巧的是当天晚上同事们加班到晚上2点把活动发上去了。 周二活动虽然上线了但是有bug，还是分享- -。还是老大把分享组件独立了出来。又折腾了一天分享，发了个没有bug的版本上线 周三一大早就听说活动要改版。下午这事终于拍板了，晚上8点出设计稿，做完上线- -。结果呢，9点才出设计稿，晚上加班到2点半，大半夜的分享居然又出了b
2016-04-16 14:50:14
228
原创 关于页面布局的一点思考
这周做了两个很简单的PC页面，不知为何突然觉得自己不会做页面了。 做页面嘛，几个div，加点padding，加点margin，换个颜色换个背景，但是这回做页面的时候对于怎么布局老是举棋不定，比如是该用relative还是应该用absolute，是该用left还是margin-left，距离单位该用%还是用px。最重要的事，当页面更大或者更小，或者onsize的时候， 布局会怎么响应。1.单位先从距
2016-04-16 14:38:48
414
原创 windows Ruby
window下安装Ruby用rubyinstaller方便快捷 下载链接在此：http://rubyinstaller.org/ 安装完成后，进入命令窗口，输入命令：ruby –v，如果能够显示ruby的版本，则说明安装成功。系统提示：SSL_connect returned=1 errno=0 state=SSLv3 read server certificate B: certificate
2016-04-10 18:31:41
367
原创 关于微信分享接口开发
首先要注意的几点：1.微信开放的分享接口到底是干什么的 微信分享接口文档：http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html 这个微信分享接口只是让你在微信内分享时配置要分享的内容用的，并不是在App里点分享时会弹出的那个有一排应用的分享框框，这个一定要明确。2.微信分享的配置信息 如果是在公司里做微信分享相
2016-04-10 18:20:25
14281
原创 第三周
本周主要投入周年庆活动开发 1.滚动条到最底部时加载数据 2.循环滚动轮播数据 3.微信分享自己在css布局和代码组织方面的能力还很欠缺，但是本周最开心的一件事情是自己把微信分享的逻辑调通了，虽然花了我一晚上+一下午的思考4.5 - 4.10
2016-04-10 17:45:45
244
原创 第二周
这周都围绕着一个项目，bigscript，其实就是给公司做一个做活动的平台。我的部分是一个管理活动的页面。滚动条没有滚动条的滚动。终于有机会做一些自认为比较有意思的东西。功能和实现都不难，无非是监听鼠标滚动事件，在鼠标上下滚动的时候将数据div上下移动，遗憾的是zepto里面只有scrollTop和scrollLeft，没有jQuery中的scroll函数，无法获取滚动的次数和时间，不能将这个滚动做
2016-04-01 15:16:58
246
原创 第一周2016.3.21~3.25
1.webpack和gulp一直以为gulp和webpack都是前端自动化开发工具，直到我到了现在的公司，看到了现在前端leader搭建的webpack+gulp+react+reflux的项目，并再一次尝试搭建自己的前端环境，发现从gulp-react编译出来的代码和webpack-jsx-loader编译出来的代码不一样，我才发现gulp和webpack的区别。gulp是自动化工具，但webpa
2016-04-01 15:03:12
321
sublime text channel_v3.json
2017-08-22
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人