话题
文章列表
caorich 工具建设
本文首先简单介绍响应式编程的应用,随之详细阐述如何实现一个轻量的响应式的函数库。 响应式编程 这篇文章介绍一种编程泛型,叫做响应式编程。将响应式称作“编程泛型”可能有些夸大其作用范畴,不过通过引入响应式确实会改变我们对特定问题的思考方法,就像刚接触redux带来的函数式编程一样。 响应式和从前听说的“面向事件编程”很像,是针对事件的一种处理办法,且比从前的on\off\emit方法来处理事件,响应式会做得更加的优雅。 响应式编程基于“流(Stream)”这个对象。“流”是一个管道,管道中流淌的是事件携带的数据,我们在这个管道的一个截面监听事件,当该事件流淌通过截面时,触发我们的事件句柄。 [http://p1.bpimg.com/567571/027bd0dfb41c78d6.png] 无论是异步Ajax的返回、用户UI事件、还是自定义的数据,都可以作为管道数据的来源,利用统一的api进行处理。 [http://p1.bpimg.com/567571/792f9b4a34d3bf8d.png] 来看一看代码吧~ ...显示全部
1 年前发表 2708次浏览 0条评论 0次收藏
caorich 工具建设
为你的项目添加TYPESCRIPT支持 typescript语法上支持接口与泛型,进而它提供的自动补全、静态检查等等编程体验让人如沐春风。github上很多开源项目都提供了typescript支持。例如,在工程里引入 fk-action-type 。然后任意尝试导出对象上的方法,你将得到很好的代码提示: [http://7tszky.com1.z0.glb.clouddn.com/FoH3RRFNB5MHUsgxfBC47oIOEiKY] 下面我们来看如办到: 声明文件 首先我们需要为自己的代码添加接口说明,也称为声明文件。这里我们以 fk-action-type 为例,简要说明如何写一个声明文件。typescript的声明文件类似于c语言的头文件,其后缀名为 .d.ts 。首先我们先创建一个 index.ts 文件,然后写入以下类实现: // index.tsclassData{ constructor(name: string){ this.name = name; } ...显示全部
2 个月前发表 137次浏览 0条评论 0次收藏
杨磊 工具建设
ROLLUP 下一代打包工具,这是rollup对自己的定位。如今的前端领域,构建工具并不缺少,每个前端工程师都用过或者听过webpack。可以看到的是像React、Vue等框架的构建工具使用的都是rollup。既然如此,这些框架为什么会选择rollup?它的特性是什么?面对不同场景,我们要怎么选择构建工具?本文将一一为你呈现。 TREE SHAKING tree shaking是rollup提出的,这也是rollup一个非常重要的feature,那什么是tree shaking,rollup的解释是在构建代码时,在使用ES6模块化的代码中,会对你的代码进行静态分析,只打包使用到的代码。这样的好处是减少代码的体积。 可以看到它的实现依赖于静态分析,为什么必须使用ES6 modules呢?我们来复习一下ES6 modules的几个特性: * import 的模块名只能是字符串常量 * import binding 是 immutable 的,类似 const * 只能作为模块顶层的语句出现,不能出现在 function 里面或是 if 里面等块级作用域中 ...显示全部
3 个月前发表 154次浏览 0条评论 0次收藏
程柳锋 工具建设
最近Github 10周年在朋友圈里沸沸扬扬刷屏,小编在工作中却惊讶的确发现不少同事对版本号中的beta和rc没有概念,使用 npm install package@next 时,也不清楚next代表的含义。于是,决定写一篇文章科普一下由 Github 起草的Semver(语义化版本)的相关知识。 实际案例 首先,我们来看看目前最流行的前端框架之一的React最近5个月的版本发布日志,截图来自npmjs.com: [https://user-gold-cdn.xitu.io/2018/4/16/162cc6d0b4c8e782?w=663&h=432&f=png&s=25386] 从上图,我们不难得出几个结论: * 软件的版本通常由三位组成,形如:X.Y.Z * 版本是严格递增的,此处是:16.2.0 -> 16.3.0 -> 16.3.1 * 在发布重要版本时,可以发布alpha, rc等先行版本 * alpha和rc等修饰版本的关键字后面可以带上次数和meta信息 ...显示全部
3 个月前发表 4086次浏览 0条评论 0次收藏
高磊 工具建设
背景 我们平常在进行项目开发时,一般都会把代码上传至代码托管平台上方便管理和维护。目前大家使用的托管平台最多的还是Github,国内外还有一些比较知名的代码托管平台,比如Gitlab、BitBucket,码云和码市等。 但我们在多人合作开发下,经常碰到的最头疼的问题是,其他开发者在交接给我们一个项目时只是对项目目前现有的功能简单的描述了下,我们在后续迭代功能时突然发现连最基本的项目如何运行都没有给我们交代,当时心中一万只那个什么马奔腾而过,只能去查看package.json的scripts,自己意会了。 那么问题来了,我们在交接一个项目时,如何保证项目能快速完整地交付给基友,从此过上无忧无虑的生活呢?答案是我们只需要甩给他一份标准规范的README。 -------------------------------------------------------------------------------- 规范的README需要哪些内容 我们通过一张截图一起来看看一份简单的README规范都有哪些内容: ...显示全部
4 个月前发表 386次浏览 0条评论 0次收藏
caorich 工具建设
WEBPACK+REACT+TYPESCRIPT简单配置指南 1、WEBPACK添加TS-LOADER 以下例子使用的是webpack3。 先在命令行安装依赖: npm i babel-core babel-loader babel-preset-env babel-preset-react ts-loader tsconfig-paths-webpack-plugin typescript-D 然后为webpack.config.js添加以下loader: rules: [{ test: /(\.js(x?)$|\.ts(x?)$)/, exclude: /node_modules/, use: [ loaders: [ { loader: 'babel-loader' }, { loader: 'ts-loader', }, ] ] ] 然后创建.babelrc文件,写入以下内容: { "presets": [ [ "env", ...显示全部
4 个月前发表 315次浏览 0条评论 0次收藏
程柳锋 工具建设
[https://qpic.url.cn/feeds_pic/eMJXws7FFlauUALSWA3S7iceia5xM4HrEfUve3X4PJyAw/] 本篇文章主要介绍 腾讯IVWEB团队 [https://ivweb.io/] 从0到1在工程化的思考和实践。 feflow [https://github.com/feflow/feflow] 的全称是Front-end flow(前端工作流),致力于提升研发效率和规范的工程化解决方案。愿景是通过feflow,可以使项目创建、开发、构建、规范检查到最终项目上线的整个过程更加自动化和标准化。 要解决的问题 * 项目的目录结构按约定生成 * 团队有一套开发规范进行约束 * 支持多种类型的构建,包括Fis构建和webpack构建 * 团队内部的代码贡献统计、离线包内置App等 为了解决上述问题,我们于17年2月底开始投入工程化feflow工具的开发和相关规范的制定,目前已经研发出了 feflow 的 CLI [https://github.com/feflow/feflow] 版本,后续会推出 GUI 版本。 架构设计 ...显示全部
5 个月前发表 407次浏览 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": { ...显示全部
8 个月前发表 2031次浏览 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 ...显示全部
9 个月前发表 522次浏览 0条评论 0次收藏
王少飞 工具建设
给大家介绍一个用户端监控平台:Badjs2.0,就是web前端脚本错误监控及跟踪解决方案。 有什么用呢?比如我们开发好了一个web应用,在本地测试没问题,但上线后用户反馈有各种问题,远程调试一看确实有问题。像这种情况如何避免呢? 用这个系统就能解决。 既然有2.0,那就肯定有1.0。 先说下1.0有哪些功能: * 一站式体系化解决方案:业务只需要简单的配置,引入上报文件,即可实现脚本错误上报,每日统计邮件跟踪方便。 * 可视化查询系统,快速定位错误信息:web应用程序脚本数量庞大,开发人员在如此之多的脚本中定位某个问题变得困难。BadJS能够巧妙定位错误脚本代码,进行反馈。通过各种查询条件,快速找到详细错误日志。 * 跨域、Script Error等棘手问题不再是难题:tryjs帮你发现一切。 * 真实用户体验监控与分析:通过浏览器端真实用户行为与体验数据监控,为您提供JavaScript、AJAX请求错误诊断和页面加载深度分析帮助开发人员深入定位每一个问题细节。即使没有用户投诉,依然能发现隐蔽bug,主动提升用户体验。 ...显示全部
10 个月前发表 705次浏览 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工程的生命周期 ...显示全部
10 个月前发表 598次浏览 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的根目录,插件目录路径。之后加载内部核心插件和安装的外部插件,最后整个初始化过程完成。 外部插件加载 ...显示全部
1 年前发表 470次浏览 0条评论 0次收藏