话题
文章列表
caorich 工具建设
本文首先简单介绍响应式编程的应用,随之详细阐述如何实现一个轻量的响应式的函数库。 响应式编程 这篇文章介绍一种编程泛型,叫做响应式编程。将响应式称作“编程泛型”可能有些夸大其作用范畴,不过通过引入响应式确实会改变我们对特定问题的思考方法,就像刚接触redux带来的函数式编程一样。 响应式和从前听说的“面向事件编程”很像,是针对事件的一种处理办法,且比从前的on\off\emit方法来处理事件,响应式会做得更加的优雅。 响应式编程基于“流(Stream)”这个对象。“流”是一个管道,管道中流淌的是事件携带的数据,我们在这个管道的一个截面监听事件,当该事件流淌通过截面时,触发我们的事件句柄。 [http://p1.bpimg.com/567571/027bd0dfb41c78d6.png] 无论是异步Ajax的返回、用户UI事件、还是自定义的数据,都可以作为管道数据的来源,利用统一的api进行处理。 [http://p1.bpimg.com/567571/792f9b4a34d3bf8d.png] 来看一看代码吧~ ...显示全部
1 年前发表 944次浏览 0条评论 0次收藏
程柳锋 工具建设
Webpack从2015年9月第一个版本横空初始至今已逾2载。它的出现,颠覆了一大批主流构建如Ant、Grunt和Gulp等等。腾讯NOW直播 IVWEB团队 [https://ivweb.io/] 之前一直采用Fis构建,本篇文章主要介绍从Fis迁移到webpack遇到的问题和背后的黑科技,内容包括inline-resource、多页面构建、资源压缩、文件hash、文件目录规则等等。 为什么要迁移至WEBPACK? 有两个层面的原因: * 首先webpack的社区生态火爆,插件齐全并且维护更新的很频繁,遇到了问题,比较容易解决。 * webpack里面有happypack多实例构建方案、code spliting按需加载文件等方案, 可以有效的进行打包构建持续优化, 这些在Fis里面是缺少的。 区分构建的开发OR生产环境? "scripts": { ...显示全部
2 个月前发表 211次浏览 0条评论 0次收藏
程柳锋 工具建设
ESLint [https://eslint.org/] 于2013年6月份推出,至今4个年头,最新版本v4.8.0。它是目前主流的用于Javascript和JSX代码规范检查的利器,很多大公司比如 Airbnb [https://github.com/airbnb/javascript] 和 Google [https://google.github.io/styleguide/javascriptguide.xml] 均有一套自己的Javascript编码规范,而规范的实施背后离不开ESLint的支持。比如大名顶顶的 eslint-config-airbnb ...显示全部
3 个月前发表 164次浏览 0条评论 0次收藏
王少飞 工具建设
给大家介绍一个用户端监控平台:Badjs2.0,就是web前端脚本错误监控及跟踪解决方案。 有什么用呢?比如我们开发好了一个web应用,在本地测试没问题,但上线后用户反馈有各种问题,远程调试一看确实有问题。像这种情况如何避免呢? 用这个系统就能解决。 既然有2.0,那就肯定有1.0。 先说下1.0有哪些功能: * 一站式体系化解决方案:业务只需要简单的配置,引入上报文件,即可实现脚本错误上报,每日统计邮件跟踪方便。 * 可视化查询系统,快速定位错误信息:web应用程序脚本数量庞大,开发人员在如此之多的脚本中定位某个问题变得困难。BadJS能够巧妙定位错误脚本代码,进行反馈。通过各种查询条件,快速找到详细错误日志。 * 跨域、Script Error等棘手问题不再是难题:tryjs帮你发现一切。 * 真实用户体验监控与分析:通过浏览器端真实用户行为与体验数据监控,为您提供JavaScript、AJAX请求错误诊断和页面加载深度分析帮助开发人员深入定位每一个问题细节。即使没有用户投诉,依然能发现隐蔽bug,主动提升用户体验。 ...显示全部
4 个月前发表 212次浏览 0条评论 0次收藏
程柳锋 工具建设
背景: 随着开发团队规模不断发展壮大,在人员增加的同时也带来了协作成本的增加,业务项目越来越多,类型也各不相同。常见的类型有组件类、活动类、基于React+redux的业务项目、RN项目、Node.js项目等等。如果想要对每个项目进行一些规范的约束比如Git提交规范、Javascript规范简直难于登天。所有的这些,只因为缺少一个好用的工程化工具。从项目创建、开发、构建、代码规范检查到最终项目上线,通过CLI可以提升效率,同时保障开发规范的实施。 NODE.JS实现CLI的基本原理 关键点在于package.json里面的bin字段。模块全局安装,对于类unix系统,在/usr/local/bin目录创建软链接;对于windows系统,在C:\Users\username\AppData\Roaming\npm目录创建软链接。 模块局部安装,会在项目内的./node_modules/.bin目录创建软链接。 现代化WEB工程的生命周期 ...显示全部
4 个月前发表 366次浏览 0条评论 0次收藏
程柳锋 工具建设
开发CLI工具过程中,为了便于扩展,将CLI的实现分为基础功能和扩展功能。基础功能包括init、build、lint、publish等伴随工程从初始化到最终发布到生产环境,也即为CLI 的core。扩展功能包括规范检测、代码生成、图片上传等和多个平台集成的开发配套服务设施。本篇文章将会叙述如何优雅的实现插件机制,通过插件扩展子命令和开放CLI的生态。 CLI初始化流程 运行某个CLI命令时,CLI的初始化加载如下图: [http://7tszky.com1.z0.glb.clouddn.com/FnWCIHGBeHlkBLVyt9ZJpZYPEypD] 第一步,判断当前用户信息,获取用户的rtx名字。然后读取cli的配置信息,包括cli的根目录,插件目录路径。之后加载内部核心插件和安装的外部插件,最后整个初始化过程完成。 外部插件加载 ...显示全部
5 个月前发表 265次浏览 0条评论 0次收藏
程柳锋 工具建设
[http://7tszky.com1.z0.glb.clouddn.com/FtM6zxr8gWVy1LQKD1e3lxkBAumx] 前言 随着开发团队不断发展壮大,在人员增加的同时也带来了协作成本的增加;业务项目越来越多,类型也各不相同。常见的类型有基础组件、业务组件、基于React的业务项目、基于Vue的业务项目等等。如果想要对每个项目进行一些规范上的约束比如Git提交规范、Javascript规范简直难于登天。所有的这些,只是因为还欠缺一个好用的工程化工具,在项目创建的初期自动的将这些目录结构和文件生成、并且集成工程常见的规范来进行约束。 本文分为两部分,首先会谈谈目前团队的痛点以及基于yeoman generator的设计思路;然后会详细介绍如何实现定制的generator,过程中遇到的问题和解决办法。 痛点一:工程创建不智能 * 代码目录文件手工拷贝 * 不同场景的工程对目录结构的要求不尽相同 痛点二:规范约束难以统一集成 * 难以在新的工程项目中集成新的规范,需要手动加hook * 缺少增量机制对旧项目集成 基于YEOMAN GENERATOR的设计思路 ...显示全部
10 个月前发表 618次浏览 0条评论 0次收藏
程柳锋 工具建设
目的 * 统一团队Git commit日志标准,便于后续代码review,版本发布以及日志自动化生成等等。 * 统一团队的Git工作流,包括分支使用、tag规范、issue等 GIT COMMIT日志参考案例 * angular [https://github.com/angular/angular] * commit-message-test-project [https://github.com/cpselvis/commit-message-test-project] * babel-plugin-istanbul [https://github.com/istanbuljs/babel-plugin-istanbul] * conventional-changelog [https://github.com/conventional-changelog/conventional-changelog] 总体方案 ...显示全部
1 年前发表 2324次浏览 0条评论 0次收藏
程柳锋 工具建设
导语:任何软件项目都是一个协作项目,它至少需要2个开发人员参与,当原始的开发人员将项目开发几个星期或者几个月之后,项目步入正规。不过他们或者后续的开发人员仍然需要经常提交一些代码去修复bug或者实现新的feature。我们经常有这种感受:当一个项目时间过了很久之后,我们对于项目里面的文件和函数功能渐渐淡忘,重新去阅读熟悉这部分代码是很浪费时间并且恼人的一件事。但是这也没法完全避免,我们可以使用一些技巧尽可能减少重新熟悉代码的时间。commit messages可以满足需要,它也反映了一个开发人员是否是良好的协作者。 编写良好的Commit messages可以达到3个重要的目的: * 加快review的流程 * 帮助我们编写良好的版本发布日志 * 让之后的维护者了解代码里出现特定变化和feature被添加的原因 先来看看一个比较好的例子,感受一下: [http://7tszky.com1.z0.glb.clouddn.com/FkeduEr4q7SivzPSQSqLhxa5K7L8] 下面谈谈,如何让项目里面的Commit messages步入规范化,流程化。 ...显示全部
1 年前发表 2224次浏览 0条评论 0次收藏
villainthr 工具建设
一开始,在 Web 端,并没有任何可以接触到 clipborad 的内容。以前,我们想要执行 copy/paste/cut 只能借助 flash。但现在,伟大的 H5 又或者说 W3C 推出了关于 H5 操控 clipboard 的草案。最出名的就是两个 API: * document.execCommand() * ClipboardEvent 我们一步一步来了解一下。先来看一下经典 execCommand 的使用。 复制操作 INPUT 复制 我们需要先了解一下,基本的复制过程: * 选中(select) * 复制(command + c || ctrl + c) 实际效果就是: copy_select [http://static.zybuluo.com/jimmythr/ifnhjxs671y193km9xq0jomf/屏幕快照 2016-11-20 15.18.27.png] ...显示全部
1 年前发表 872次浏览 0条评论 1次收藏
袁飞翔 工具建设
最近入手了一台腾讯云机子,用于团队社区站点的建设,站点架构: * 数据库服务:mongodb * 后台:nodejs + express * 接入:nginx 整个购买到部署的要点步骤: * 服务器购买 * nginx 编译安装配置 * node 安装 * mongodb 安装 * server部署 服务器购买 [http://7tszky.com1.z0.glb.clouddn.com/FpEWgIEkwq6d8npb5jYe2p-SNWWH] 从腾讯云的首页找到购买入口。(弱弱的说一句,云太多了,企鹅云发展好快~~~) [http://7tszky.com1.z0.glb.clouddn.com/FuMQS85aImdMC7q0ZMZHynFSBWF0] 按需选择自己的配置,包年可以优惠只需付10个月。最终我们的配置 [http://7tszky.com1.z0.glb.clouddn.com/FgDwNLWJ2PbRT6xGTsFV5QoAd1WD] ...显示全部
1 年前发表 958次浏览 0条评论 0次收藏
yangchunwen 工具建设
首先要解释一下为什么叫浏览器自动化测试,因为本文只关注发布后页面功能的自动化测试,也就是UI层面的自动化。 浏览器测试有别于js代码的单元测试,后者一般是发布前的代码功能逻辑测试,在这方面已经有很多比较成熟的方案,如 jasmine [http://jasmine.github.io/2.3/introduction.html] mocha [https://github.com/mochajs/mocha] Qunit [http://qunitjs.com/] ... 为什么要做自动化 个人认为自动化测试的主要出发点有两点: * 减少重复的工作。让机器自动帮我们完成需要的交互操作,验证我们的页面功能。 * 自动监控。通过自动回归我们的页面功能,可以在功能出错的时候提供报警,为我们手动排除问题提供参考。 开胃菜 ...显示全部
2 年前发表 11572次浏览 12条评论 3次收藏