- 博客(67)
- 收藏
- 关注
RSS订阅转载 generator-ivweb 基于react-redux的多页脚手架
背景每个公司甚至每个项目组，在开发新项目的时候都会有一些自己特色的东西，比如公共组件，ajax请求拦截处理，内部积累的一些业务逻辑等等，如果没有自己的脚手架，那么拷贝代码成为常态，每个项目的结构，甚至是构建配置都会由很大差异，导致代码维护成为一个难题。简介generator-ivweb是由腾讯IVWEB团队设计的脚手架，基于团队开源项目feflow，feflow是一个前端集成开...
2019-01-24 10:27:00
217
转载 前端工程化，你做了多少？
前端工程化是近几年比较热门的一个东西，大大小小的团队也在朝着这一方向发展，那么你的团队做了多少呢？前端发展简史石期时代最初的前端页面都是一些静态页面，人们看到的网页就像报纸一样。青铜时代后端为主的时代，往往页面都是后端利用一些模版引擎来完成页面；对于有大量页面的项目，前端在写页面需要构造一定的环境，比如jsp，php等。铁器时代随着ajax的诞生，浏览器可以...
2019-01-23 22:36:00
360
转载 你需要掌握的http知识
作为一名前端er，http是我们必须要掌握的，那么我们到底需要掌握哪些东西呢一、基础知识这里我们介绍与http相关的TCP、IP、DNS、url、uri1.IPIP地址是我们很熟悉的东西，最常见的的就是127.0.0.1。我们都知道连接网络后，每个人都会有不同的IP地址，而每台计算机也有自己的mac地址（这个地址是硬件写死的），那么我们传输信息的时候只要知道对方的IP地址，然...
2018-10-29 00:09:00
266
转载 快速写一个babel插件
es6/7/8的出现，给我们带来了很多方便，但是浏览器并不怎么支持，目前chrome应该是支持率最高的，所以为了兼容我们只能把代码转成es5，这应该算是我们最初使用babel的一个缘由，随着业务的开发，我们会有很多自己定制化的需求，单纯的bebel并不能解决我们所有的问题，所以babel插件应用而来，本文将会采用较为通俗的语言来描述如何快速写一个babel插件。一、babel的作用...
2018-07-23 00:11:00
300
转载 rn打包分析
rn打包原来是packager，后来独立出一个专门的打包工具metro，构建工具的大体思路跟前端构建工具差不多，都会有一个启动文件，然后根据模块依赖关系把对应文件找到。开发中打包在开发中打包，我们访问的是一个index.bundle，这个时候跟其他的前端构建工具一致，都是会启动一个node 服务，metro提供了一个createServer方法，这个方法结合http(s)模块构建...
2018-06-25 19:26:00
271
转载 react-native android 初始化问题
最近开始接触rn,官方起手，装了一堆工具，然后启动项目的时候出现了一堆问题，这里针对我遇到的一些问题提供一些解决方案。本人开发环境mac，在启动ios的时候没啥大问题，可以直接启动，这里提示一点，因为可能会启动多个，所以可以在启动的时候指定端口，防止冲突react-native run-ios --port=xxxx但是在启动安卓的时候出现了一堆问题，一开始使用命令react-n...
2018-05-24 12:12:00
219
转载 代码管理的思考
git管理代码仓库遇到的一些问题多人多项目同根目录的问题root--project1--project2...当然这种情况其实不应该出现的，但是由于历史原因，多个项目有公用的一些东西，每个项目都很庞大，导致拆分比较费劲，短期无法做。代码发布流程是内网->dev->master，各个项目每周有例行发布时间，但是由于测试进度不一致导致的代码被别的项目带出，那么应该...
2018-04-28 09:36:00
133
转载 日期格式化
我们在开发中经常会遇到日期格式化需求，著名的moment就很好，但是又太好了，功能太多，又没有按需加载，可能只用到一个功能但是加载了一大堆，因此这里我写了一个小的日期格式化库，基本的格式都支持，重点是小。npm install z-mimo引入方式amd/cmd/node module/es6日期格式化，传入日期对象，可调用方法：var mimo = require('z-...
2018-04-06 17:25:00
130
转载 NavRouter
使用方法只需要跟vue-router一样正常使用即可，这里我们新加了一个路由跳转方法nav：router.nav()//参数同router.replace一样。路由跳转策略首先说下路由跳转过程，不管是hash还是h5history模式在进行一系列跳转只有会保存路由堆栈，这样我们在点击浏览器的前进后退也可以进行页面的切换，如下：routerA -> routerB ->...
2018-04-01 23:45:00
161
转载 focus如何实现事件委托
事件委托是利用事件冒泡机制的一种优化手段，如果有很多列表元素要绑定事件，那么就可以用事件委托来优化（不需要给每个元素都绑定事件）。但是对于focus这种特殊的表单事件，它不会冒泡，那么又该如何实现这一优化呢？有的人会说这个会同时触发click，但是如果我是通过tab切换呢？js事件机制js的事件机制有两种，事件冒泡和事件捕获，冒泡呢就是从触发事件的节点开始一层一层的往父节点传播；...
2018-03-29 18:52:00
230
转载 http缓存
http缓存是我们常用的优化手段之一，在http发展的不同阶段缓存机制也越来越完善，这里我们较为完整的总结一下。http1.0阶段1. Pragma主要值为no-cache 与http1.1中的cache-control:no-cache一致，表示不缓存 。为了兼容http1.0.在http1.1中也可以用。2. ExpireExpires 的值对应一个 GMT (格林尼治...
2018-03-11 22:58:00
129
转载 实现一个简单版的express
express应该算是早期最优秀的一个node框架了，刚开始学node做后端语言就是用的express，它的cli可以帮我们搭建好项目目录，就像现在的vue,react一样。express本身没有做太多的事情，它主要是实现了路由以及扩展request和response的方法，最为重要的是中间件的使用，express通过app.use(connect)来调用各种中间件以便于实现各种功能，...
2018-01-17 10:53:00
173
转载 工作总结3
兼容性1.在chrome中，设置父元素display:flex;align-items:center;这样可以让子元素垂直居中，而自元素设置margin-top的时候就是相对现在位置的上边距，firefox依然是以父元素顶部为基准，所以自元素绝对定位的时候设置top,left比较安全。2.ime-mode可以设置唤起输入法，但是目前支持度并不高，在caniuse中显示只有ie11以...
2017-12-25 15:35:00
143
转载 工作总结2
1.在移动端中，直接使用focus是的input获取焦点会有问题，建议使用autofocus+click事件，另外iOS中异步事件中使用click或者focus完全无效2.防止页面被键盘挤压，提前将页面高度设死3.闭包三种解决方案//利用setTimeout的第三个参数for(var i = 0; i <= 5; i++){ setTimeout(function ...
2017-11-14 14:57:00
112
转载 移动端工作心得
1.移动端适配问题在这里使用的是手淘的flexible，直接把这个文件拷贝进项目，并在页面渲染之前使用即可。我们适配主要是涉及使用px的时候，比如width/height/margin/padding等，所以我们使用sass 做了一个px转成rem，如下@function px2rem($px, $base-font-size: 75px) { @if (unitless(...
2017-09-14 20:26:00
133
转载 小程序初探
最近由于工作需要，研究了下小程序，不得不说，整个开发流程，官方都做的很完善，基本的组件也都实现，而语法上，作为前端基本可以直接上手。有人吐槽什么限制文件大小，不让用本地图片做背景图，组件不够多啊，等等。但是，大家想想，如果都帮你做了，还要开发干嘛，而且小程序本身的宗旨就是把一个应用的核心功能实现，我们使用一个应用，绝大多数时候都只会使用一些核心功能，而下载一个APP动辄几十兆。当然这里...
2017-09-03 22:24:00
117
转载 原生js实现五子棋
为什突然做这个，因为这是个笔试题，拖了一个月才写（最近终于闲了O(∩_∩)O），废话不多说，说说这个题吧题目要求编写一个单机【五子棋】游戏，要求如下：1.使用原生技术实现，兼容 Chrome 浏览器即可。2.实现胜负判断，并给出赢棋提示；任意玩家赢得棋局，锁定棋盘。3.请尽可能的考虑游戏的扩展性，界面可以使用 DOM / Canvas 实现。考虑后续切换界面实现的方式成本最...
2017-07-25 14:24:00
350
转载 你可能会用到的"奇技赢巧"
工作中偶尔会遇到一些不常见的问题，但是解决起来又极其麻烦，通常要找很多资料才能搞定，这里我总结了近段时间遇到的一些问题，可能会对你有帮助，高手勿喷。1.关于iPhone最下面会弹出奇怪框框的问题就是这个玩意，期初以为是苹果自己做一些其它操作用的，后来才发现是操作键盘的，也就是唤起键盘，这个东东就会出来，检查了下页面，有input框虽然设置了readonly，但是在苹果中点击的时候...
2017-06-30 18:16:00
194
转载 一个知乎日报pwa
前几天写了一篇文章关于如何实现一个简单版的pwa应用，端午撸了一个简易版知乎日报pwa。关于如何写一个pwa，这里就不多介绍了，请移步这里。应用使用vue+vuex+axios，API这里，这里做了跨域处理，可以直接访问，但是返回的图片链接却无法访问（forbidden），暂时没有解决这个问题。应用构建使用vue作为前端框架，由于有些数据共享问题，所以使用了vuex来做状态管理...
2017-05-31 16:33:00
188
转载 Progressive Web Applications
Progressive Web Applications take advantage of new technologies to bring the best of mobile sites and native applications to users. They're reliable, fast, and engaging.基础知识用户首次访问service work...
2017-05-23 16:14:00
205
转载 使用原生node写一个聊天室
在学习node的时候都会练习做一个聊天室的项目，主要使用socket.io模块和http模块。这里我们使用更加原始的方式去写一个在命令行聊天的聊天室。http模块，socket.io都是高度封装之后的模块，我们使用更加原始的net模块来做。socket做聊天室，我们首先要了解一下socket，用百度百科上的定义：网络上的两个程序通过一个双向的通信连接实现数据的交换，这个连接的一...
2017-05-11 17:34:00
146
转载 利用socket.io构建一个聊天室
利用socket.io来构建一个聊天室，输入自己的id和消息，所有的访问用户都可以看到，类似于群聊。socket.io这里只用来做一个简单的聊天室，官网也有例子，很容易就做出来了。其实主要用的东西就是事件监听和触发，on和emit。当socket.io连接成功之后，后台就可以跟浏览器互相通信了。let io = socket(app);io.on('connection', ...
2017-04-19 16:13:00
150
转载 webpack学习
第一次接触webpack是学react的时候,然而被吓跑了，完全理解不了啊。之后学vue，把官方配置文件看了下，vue相关的配置大概了解了，也写了一篇文章。最近看vue-ssr,又被webpack搞懵逼了，下定决心跟着文档走了一遍。本文主要还是以配置文件字段介绍为主，毕竟用的最多还是这些。关于安装什么的就不再介绍了。1.首先配置文件四大块1.1入口入口呢是webpack开始检测...
2017-04-01 17:25:00
175
转载 使用node构建一个自己的服务器
我们做本地服务器，经常会选择Apache、IIS或者Tomcat，当然这些最方便的算是Apache,几乎不需要配置，最多就是配置下端口，亦或者我们想不用localhost，改成其他也是可以的，只要去更改hosts文件即可。但是学了node怎么能不用用呢，这里介绍如何用node实现你自己的服务器。1.需要什么首先我们需要启动文件，然后就是放置我们要打开的文件的目录，在这里我们对要打...
2017-03-14 17:49:00
140
转载 mongodb安装和配置三步走
最近在重新学习node，所以和同事一起搞了个模仿新浪微博的项目，项目刚开始，所以其他的东西就暂时先不提。这里介绍下mongodb的安装。直接搜索可以看到很多介绍，但是我第一次是失败了，不过看了好几个还是搞成了，接下来我通过三个步骤来介绍下（我这里windows环境哦）。第一步.下载并安装mongodb下载目录http://www.mongodb.org/downloads。在安...
2017-03-08 21:37:00
79
转载 手动实现一个lazyMan
这应该算一个经典的面试题了，就是一个关于流程控制的问题，要求如下//实现一个LazyMan，可以按照以下方式调用:LazyMan("Hank")//输出://Hi! This is Hank!LazyMan("Hank").sleep(10).eat("dinner")//输出//Hi! This is Hank!//等待10秒..//Wake up after 10...
2017-03-08 20:05:00
147
转载 常用插件总结
plugs半年的时间，工作中对于框架的依赖越来越少，所以后面经常自己封装一些所需要用到的模块或者插件。我这里只做了实现，至于在项目中如何去封装，还要看具体框架、模块机制来做，所以我这里只作为一个实现方式的参考。1.数组处理我们从后端返回的列表数据往往需要进行二次加工，以便于前端更方便的处理和显示，这里我写了几个我经常会用到的一些方法。https://github.com/Stev...
2017-03-02 10:47:00
134
转载 工作中对象数组常见的一些操作
在很多时候，我们获取一个列表的时候，后端返回的列表都是对象数组，如果单纯的展示，那很简单，但往往回去做一些二次加工，比如选择商品，并对其数量或者价格做修改，而且还会重新选择，但是之前选好的已经修改了一些属性，我们就需要将两次选择的数据进行合并。等等。。数组拷贝首先讲一下数组拷贝问题，这里不细说怎么拷贝，而是提醒大家，在对数组进行传递并修改时一定要对数组拷贝，不然会发生意想不到的错...
2017-02-25 14:09:00
118
转载 js对数组去重的完整版
数组去重是很常见的一个需求，而各种各样的姿势也很多，常见的如indexOf，或者hash，但是他们还是有缺陷，这里我查了一些资料做补充。一般方式//一般方法->使用indexOfArray.prototype.unique = function(){ var newArr = []; //此处改进一下就是直接把第一个元素先放入新数组中，可以减少一次遍历，也...
2017-02-24 00:53:00
105
转载 Vue组件编写
Vue无疑是近来最火的一个前端框架，它吸取了angular1.x和react的精华，性能优良，而且易于上手，本文主要是关于如何去写一个组件。首先是项目目录编写组件在这里我写了一个日期控件（移动端的），在components目录下建立文件夹，并建立vue文件和index.js文件注册组件。.vue文件中的内容我就不多说了，去看我的项目即可。组件注册import datep...
2017-02-13 20:55:00
98
转载 一月前端面试--获取元素最终背景色
年前一篇面试总结文章火了起来，一个一年工作经验的前端，面试了BAT等各大互联网公司，看着那些面试题，感觉自己可能是个假的前端。其中微信面试有一个题目是如何获取元素的最终显示背景色，已经有人写出了方法。原文链接http://www.jianshu.com/p/e94b5779f998文章中对于父元素没有考虑，我这里做了补充，废话不多说，直接看代码吧//字符串转换为驼峰func...
2017-02-07 14:57:00
132
转载 js实现类bootstrap模态框动画
在pc端开发，模态框是一个很常用的插件，之前一直用的第三方插件，比如bootstrap，jQuery的模态框插件，最近还用了elementUI的。但是会发现其实动画效果都差不多，那么如何去实现这样一个动画效果呢？模态框的构成 常见的模态框的结构我们很容易就可以看出，一个遮罩层，还有内容区。内容区主要是头部（包括标题，关闭按钮）和body部分（body中常常会有确认和取消按钮）。...
2017-02-07 14:56:00
230
转载 es6实现简单模板编译
现在有各种框架，其中一个主要模块就是关于template。最火的vue、react等框架，在这一块上也是是下足了功夫。我也想写一个自己的模板编译工具，所以就做了个简单的实现，主要是使用es6的反引号编译。1.选择这里使用es6的反引号去编译文本节点，只要把数据放在scope中，我们就可以使用反引号加“${}”的方式去把变量替换掉模板中的内容。2.编译内容首先，我尝试去直接编译...
2017-01-15 15:52:00
244
转载 JavaScript实现自定义短信模板
自定义短信模板，要求：可以插入关键字，当然是可以在点击到文本域中的任意位置，关键字以中括号包裹的形式出现【关键字】，删除关键字要整个关键都删掉，而不是自己全删除。详细在简书中http://www.jianshu.com/p/dbc4ac17ba4c也可以直接上github拉代码示例，也有详细注释https://github.com/Stevenzwzhai/p...
2017-01-09 16:55:00
701
转载 关于JavaScript设计模式的学习（二）
第二部分来了，是关于结构型的，同样的，还是在简书中，GitHub上也有代码示例和详细注释简书：http://www.jianshu.com/p/face1be4b846github：https://github.com/Stevenzwzhai/javascript-design-pattern转载于:https://www.cnblogs.com/Upton/p/62624...
2017-01-08 18:06:00
94
转载 js获取可编辑区域光标位置
请到简书中看，地址：http://www.jianshu.com/p/19a507cd5fd7github测试例子https://github.com/Stevenzwzhai/plugs/tree/master/selection-%E5%8F%AF%E7%BC%96%E8%BE%91%E5%8C%BA%E5%85%89%E6%A0%87%E4%BD%8D%E7%BD%AE...
2017-01-08 01:58:00
174
转载 关于JavaScript设计模式（一）
以后都在简书写文章了，所以这个转载我在简书中写的。地址这里http://www.jianshu.com/p/c7b3c2c148c5转载于:https://www.cnblogs.com/Upton/p/6243166.html
2017-01-02 20:50:00
71
转载 为什么axios请求接口会发起两次请求
之前在使用axios发现每次调用接口都会有两个请求，第一个请求时option请求，而且看不到请求参数，当时也没注意，只当做是做了一次预请求，判断接口是否通畅，但是最近发现并不是那么回事。首先我们知道了额外的一次请求时option请求，那么这个是干嘛用的呢？如果只是普通的 ajax 请求，也不会发起这个请求，只有当 ajax 请求绑定了 upload 的事件并且跨域的时候，就会自动...
2016-12-15 16:35:00
1058
转载 axios基本用法
vue更新到2.0之后，作者就宣告不再对vue-resource更新，而是推荐的axios,前一段时间用了一下，现在说一下它的基本用法。首先就是引入axios,如果你使用es6，只需要安装axios模块之后import axios from 'axios';//安装方法npm install axios//或bower install axios当然也可以用scrip...
2016-12-14 18:56:00
561
转载 webpack 配置文件
现如今，webpack非常的受欢迎，比较火的几款js框架都推荐使用webpack来构建项目，而webpack也确实非常强大，但是配置webpack缺常常带来很多问题，接下来就写一下我自己遇到的一些坑。首先是安装webpack，现在安装模块一般是两种，一种是全局安装，一种是本地安装，全局安装只需要安装一次，但是，全局安装带来一个问题，就是部分模块使用会有问题，比如html-webpac...
2016-12-13 16:13:00
157
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人