话题
王少飞 工具建设
给大家介绍一个用户端监控平台:Badjs2.0,就是web前端脚本错误监控及跟踪解决方案。 有什么用呢?比如我们开发好了一个web应用,在本地测试没问题,但上线后用户反馈有各种问题,远程调试一看确实有问题。像这种情况如何避免呢? 用这个系统就能解决。 既然有2.0,那就肯定有1.0。 先说下1.0有哪些功能: * 一站式体系化解决方案:业务只需要简单的配置,引入上报文件,即可实现脚本错误上报,每日统计邮件跟踪方便。 * 可视化查询系统,快速定位错误信息:web应用程序脚本数量庞大,开发人员在如此之多的脚本中定位某个问题变得困难。BadJS能够巧妙定位错误脚本代码,进行反馈。通过各种查询条件,快速找到详细错误日志。 * 跨域、Script Error等棘手问题不再是难题:tryjs帮你发现一切。 * 真实用户体验监控与分析:通过浏览器端真实用户行为与体验数据监控,为您提供JavaScript、AJAX请求错误诊断和页面加载深度分析帮助开发人员深入定位每一个问题细节。即使没有用户投诉,依然能发现隐蔽bug,主动提升用户体验。 ...显示全部
7 个月前发表 458次浏览 0条评论 0次收藏
caorich 性能
做hybrid页面,需要测试其性能。我们不能认为用浏览器打开该网页得到的数据就算它线上的性能,因为webview的环境,其性能和浏览器还是有所差距的。最近一直做相关工作,积累的一些小经验,这里分享出来。 打点 统计线上hybrid页面的性能,本质上还是打点上报。打的点一般参考 performance.timing 属性。一般页面最开始给一个初始绝对时间点作为参考,其余的点减去这个初始时间就是页面渲染的相对时间了。 如果没有客户端给初始时间点,可以用 performance.timing.fetchStart 作为初始时间点。我这里根据上报情况看,fetchStart和客户端给的绝对初始时间差距并不大。另外,如果页面有重定向, performance.timing.redirectStart 参数就不为0,将这个参数值作为初始时间应该更加合理。 html文档的加载时间: performance.timing.domLoading - performance.timing.fetchStart ...显示全部
7 个月前发表 348次浏览 0条评论 0次收藏
qcyhust javascript
WEBGL-从2D开始 导语 在网页上绘制3D图形已经不再是什么新鲜的事情,时不时都能遇到一个炫酷的3D模型让人感叹未来的无限可能,在某些使用场景下,用3D呈现内容会更能抓住用户的注意力,新技术如AR、3D全景的不断成熟也在加速构建3D世界的脚步。 技术上我们已经有足够多的手段去实现一个三维世界,比如css3可以实现3D变换、动画,html5 canvas 2D画布可以模拟3D物体甚至实现3D的效果。而本文要讨论的webgl相对来说会更加底层,它建立在OpenGL ES 2.0( 嵌入式OpenGL,一个适用于移动设备的3D图形标准 )之上,对曾经从事过OpenGL 3D图形开发的人员来说非常容易入门。 WebGL本质来讲仍然是html5画布的功能,浏览器提供一系列的编程接口来在html和JavaScript的环境中绘制3D图形。它利用图形硬件( GPU ...显示全部
7 个月前发表 263次浏览 0条评论 0次收藏
villainthr HTML&h5
js的设计模式是针对于整体代码的设计是否合理,给出了一些具体的解决办法。 而重构代码就是依赖于设计模式而实现的一个必要手段,可以说设计模式就是重构代码的目标,但他的手段却不仅仅只有设计模式这些大而全的,同样存在小而精,我们随处可以使用的。 封装功能块代码 我们通常在写代码的时候,一开始,并不需要考虑太多。在后期可以进行修改和提炼。 比如,我有个业务需求,是创建一个div并且渲染数据到页面上,并且根据data的不同,改变div的状态. function(data){ var div = document.createElement("div"), div = data.name; document.body.append(div); if(data.isShow){ div.style.display = "block"; }else{ div.style.display = "none"; } } ...显示全部
7 个月前发表 1301次浏览 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工程的生命周期 ...显示全部
7 个月前发表 478次浏览 0条评论 0次收藏
高磊 HTML&h5
背景 当前互联网时代,技术门槛越来越低,人人都可以建立并生成各式各样,多元化、多样化的站点。 文档站点一般作为各行各业领域内的知识技术介绍及使用的资料站点,可提高资料的使用效率,保证资料的质量。 目前市面上有大致这么几款主流的文档生成站点,分别为 docsify 、 gitbook 、 Phenomic 等,可帮助用户快速搭建文档站点。 今天我们详细介绍下docsify的使用文档及实现原理。 介绍 docsify是由现饿了么前端团队 @elemeFE [https://github.com/elemefe] 的cinwell.li编写的一套文档站点生成框架,github上已有3k+ star,这款框架和其他框架如gitbook等相比,最大的区别就在于 docsify不是静态生成html,而通过动态请求markdown编译生成html 。 docsify还具有轻应用、全文搜索功能、支持多个主题、兼容IE10+、支持SSR等特性。 DOCSIFY-CLI快速入手 ...显示全部
7 个月前发表 1741次浏览 1条评论 0次收藏
qcyhust javascript
YEOMAN-GENERATOR中的RUN LOOP实现 导语 在上一篇yeoman( 利用yeoman构建项目generator [https://ivweb.io/topic/59999645e85cf527bb60f0d5] )的构建项目介绍文中提到过一个yeoman genenrator的run loop。当时提到“每一个添加进去的方法都会在generator调用的时候被调用,而且通常来讲,这些方法是按照顺序调用的”以及简单介绍了yeoman的方法执行顺序,这篇文章将仔细分析run loop的具体实现。 RUN LOOP 所谓的run loop是IOS开发中的一个概念,具体来说是一个与线程相对应的对象,用它来实现线程自动释放池、延迟回调、触摸事件、屏幕刷新等功能。线程一般在执行完任务后就直接退出,run loop这个循环会让线程处于接受消息->等待->处理的循环中,直到接受到退出的信号才会结束循环。 yeoman中的run ...显示全部
8 个月前发表 267次浏览 0条评论 0次收藏
biliou javascript
PIPELINE-OPERATOR 此前,如果我们需要实现函数1的返回值域给函数2调用 最简单的方式是 A(B(C())) 面向对象的话可以 let obj = { value: void0, A() { this.value = 1; returnthis; }, B() { this.value += 2; returnthis; }, C() { this.value *=3; returnthis; } } obj .A() .B() .C() 如果在node端我们还可以使用.pipe .pipe(A()) .pipe(B()) .pipe(C()) 基本使用 而在Es2017中,TC39也为我们提供了管道运算符,它的基本用法是,将上一个函数执行,且将返回值作为入参,传递给下个函数的形参。并执行下一个函数,直到全部函数执行完成,返回最后一个函数返回的结果。 例如如下三个函数 ...显示全部
8 个月前发表 468次浏览 0条评论 0次收藏
qcyhust 构建工具
利用YEOMAN构建项目GENERATOR 导语 在一个项目的初始化阶段我们一般会做什么呢?如果有一个可参考的项目,是不是会复制这个项目,然后修改成新项目?如果是要在项目中增加一个新页面或是新组件,在开始的时候是不是会复制粘贴先前已存在的页面、组件代码。这些初始化时复制粘贴的操作意味着我们即将着手的项目有大量的结构代码(比如构建脚本,开发脚手架)是存在共性的,在开发过程中,新建一个页面,新开发一个组件,甚至新写一个路由都可能利用一个相同结构的代码来往里面填写新的内容。那么一个能帮助开发者生成自定制结构文件的小工具就会在这中使用场景下派上用场,它能让开发者的工作焦点回到真正的业务逻辑开发上,同时也能为团队开发体统一份统一的代码规范。 图片描述 [http://7tszky.com1.z0.glb.clouddn.com/FngyRfzVRSaC_AvkVlLoK-_3hx7I] 简介 yeoman [http://yeoman.io/] 是一个可以帮助开发者快速开启一个新项目的工具集。yoeman提出一个yeoman工作流的概念,通过脚手架工具(yo),构建工具(grunt ...显示全部
8 个月前发表 362次浏览 0条评论 0次收藏
biliou React
DOWNLOAD 我们可以在这里下载到最新的 beta 版react 下载链接 [https://github.com/facebook/react/releases/tag/16.0.0-beta.5] REACT 内核改变 --FIBER 什么是react-fiber ? increase its suitability for areas like animation, layout, and gestures. Its headline feature is incremental rendering: the ability to split rendering work into chunks and spread it out over multiple frames. react-fiber 是为了增强动画、布局、移动端手势领域的适用性,最重要的特性是对页面渲染的优化: 允许将渲染方面的工作拆分为多段进行 其中fiber 英文意思是纤维,众所周知,Js 是单线程的,当Js 在执行一段代码功能的过程中会对其他的代码进行堵塞 ...显示全部
8 个月前发表 666次浏览 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的根目录,插件目录路径。之后加载内部核心插件和安装的外部插件,最后整个初始化过程完成。 外部插件加载 ...显示全部
8 个月前发表 368次浏览 0条评论 0次收藏
link ,除了分享,也是知识管理。 Node.js全栈
原文链接: The Anatomy of a GraphQL Query [https://dev-blog.apollodata.com/the-anatomy-of-a-graphql-query-6dffa9e9e747#.idii6j7tz] GraphQL 日渐成为数据查询的主流标准之一,整个生态圈也蓬勃发展。本文则由浅入深地详细介绍基础的 GraphQL 格式与关键字,有助于初学者对于 GraphQL 的使用形成体系认知。 GraphQL [http://graphql.org/learn/] 日渐成为数据查询的主流标准之一。每天都会产生许多围绕这项技术发展的精彩讨论和新工具。GraphQL最棒的特性就是提供了一个丰富语言集来描述获取数据的API。但是用户该如何描述这种查询语言,以及GraphQL这项核心技术本身呢?let's talk! GraphQL specification [https://facebook.github.io/graphql/#sec-Language] ...显示全部
9 个月前发表 3773次浏览 0条评论 0次收藏