话题
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"; } } ...显示全部
10 个月前发表 1430次浏览 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次收藏
高磊 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快速入手 ...显示全部
10 个月前发表 2145次浏览 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 ...显示全部
1 年前发表 372次浏览 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也为我们提供了管道运算符,它的基本用法是,将上一个函数执行,且将返回值作为入参,传递给下个函数的形参。并执行下一个函数,直到全部函数执行完成,返回最后一个函数返回的结果。 例如如下三个函数 ...显示全部
1 年前发表 607次浏览 0条评论 0次收藏
qcyhust 构建工具
利用YEOMAN构建项目GENERATOR 导语 在一个项目的初始化阶段我们一般会做什么呢?如果有一个可参考的项目,是不是会复制这个项目,然后修改成新项目?如果是要在项目中增加一个新页面或是新组件,在开始的时候是不是会复制粘贴先前已存在的页面、组件代码。这些初始化时复制粘贴的操作意味着我们即将着手的项目有大量的结构代码(比如构建脚本,开发脚手架)是存在共性的,在开发过程中,新建一个页面,新开发一个组件,甚至新写一个路由都可能利用一个相同结构的代码来往里面填写新的内容。那么一个能帮助开发者生成自定制结构文件的小工具就会在这中使用场景下派上用场,它能让开发者的工作焦点回到真正的业务逻辑开发上,同时也能为团队开发体统一份统一的代码规范。 图片描述 [http://7tszky.com1.z0.glb.clouddn.com/FngyRfzVRSaC_AvkVlLoK-_3hx7I] 简介 yeoman [http://yeoman.io/] 是一个可以帮助开发者快速开启一个新项目的工具集。yoeman提出一个yeoman工作流的概念,通过脚手架工具(yo),构建工具(grunt ...显示全部
1 年前发表 510次浏览 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 在执行一段代码功能的过程中会对其他的代码进行堵塞 ...显示全部
1 年前发表 827次浏览 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次收藏
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] ...显示全部
1 年前发表 4119次浏览 0条评论 0次收藏
biliou Node.js全栈
什么是PROTOBUF ? protoBuf (PB) 我理解来说,就是一种 数据结构 ,由google 团队开发 protoBuf 需要程序员实现制定 schema,然后根据 schema 生成二进制的数据。传输完成后,如果需要重新将这些数据,接收端还需要使用使用 schema 将获得到的二进制数据解码。 相对于JSON来说,编码解码的步骤比较繁琐,但是,protobuf 比 JSON 快 https://github.com/dcodeIO/protobuf.js/blob/master/README.md#performance [https://github.com/dcodeIO/protobuf.js/blob/master/README.md#performance] 这是 dcodeIO 团队对 protobuf 和 native JSON 做了一些测试 从报告中可以看出,无论是编码解码还是结合的过程( protobuf 从对象编码为二进制,从二进制数据解码为对象 JSON ...显示全部
1 年前发表 5189次浏览 1条评论 0次收藏
朱灵子 React Native
REACT-NATIVE安卓预加载优化方案 本文针对使用React Native开发混合应用的过程中安卓端白屏时间较长的问题,提出了 react-native 安卓端RootView预加载优化方案,本文主要围绕以下几个方面展开分析: * 导致React-Native安卓端白屏时间较长的关键性因素 * React-Native安卓预加载优化方案 * React-Native安卓预加载方案实现细节 导致REACT-NATIVE安卓端白屏时间较长的关键性因素 我们对不同网络状态下不同机型的React-Native线上项目进行了实时性能监控,下图所示为React Native IOS和安卓端线上性能数据对比分析图[http://7tszky.com1.z0.glb.clouddn.com/Fky1XkVN4gyERFl30OTZ7Q9TVyYM] ...显示全部
1 年前发表 1404次浏览 0条评论 0次收藏
caorich 性能
DATA.JSON 文件格式 以下的内容当设计接口的详细说明时,请移步 bodymovin的官方文档 [https://github.com/bodymovin/bodymovin/tree/master/docs/json] 。文档的是用 JSON Schema [http://json-schema.org/] 编写的,这玩意儿就是一个词汇表,相当于本体的json实现,规范了对象、属性的表达方式(而已)。 言归正传。了解AE导出的data.json数据格式的最好方法就是先制作一个简单得不能再简单的关键帧动画,看看它导出的data.json是什么样的。 我们用AE制作了一个简单的动画,一个宽100,高200的长方形,在400*400的正方形白色底的画布上,从位置(100,200)移动到(300,200)。动画的时间长度为1s, fpr为30(一秒30帧)。现在我们导出data.json文件来看看 { ...显示全部
1 年前发表 1070次浏览 1条评论 0次收藏