吴浩麟 于 3个月前发表 595 0 0
graphql [http://graphql.org] 用一种高效清晰的规范来替代目前正流行的RESTful架构。通过灵活的结构化查询语言让查询更高效,静态类型和规范提升前后端联调效率。作为一名前端我非常喜欢graphql,梦想有一天以前所有零散又没有文档的接口都被graphql所代替,这将极大提升我的开发效率和开发体验。等待不如自己动手,下面将介绍如何编写一个基于 hackernews [https://news.ycombinator.com] API [https://github.com/HackerNews/API] 的graphql服务。 在编写前先体验已经做好的 graphql服务demo [http://graphql.online/#X6CdVkXuC4tQ7WDC]
3个月前
HTTP网络
zzbozheng 于 3个月前发表 721 0 0
PM2 模块 PM2模块是通过PM2来安装和管理,代码可以托管在NPM中。任何人都可以创建和发布一个PM2模块,可以是日志模块、http代理模块、负载均衡模块、DNS服务器模块或任何类型的实用程序。 管理模块 管理PM2模块是非常简单的: # Install $ pm2 install <module-name> # Update a module $ pm2 install <module-name> # Install a module from GitHub (username/repository) $ pm2 install pm2-hive/pm2-docker # Force module restart $ pm2 restart <module-name> # Get more informations $ pm2 describe <module-name> # Install a module in dev mode from local folder $ pm2 install . # Generate a module boilerplate
3个月前
nodeJS全栈
刘志龙 于 3个月前发表 777 0 0
是什么 代理模式是为一个对象提供一个代用品或占位符,以便控制对它的访问。 生活是一切东西的起源,在生活中也到处能看到代理模式的影子。 明星有经纪人作为代理,要联系明星的档期其实是和经纪人联系,经纪人联系好之后,再有明星负责签约、演出。 想想平时工作中也有这种例子,每个小组都要发周报,组长负责周报的收集, 总监通过周报查看每个成员的工作情况,而不是每个成员都直接向总监汇报。 甚至古代也能找到类似的例子,挟天子以令诸侯,曹操和汉献帝的关系,也有代理模式的影子。 为什么 大概对代理模式有个模糊的概念了,那为什么要存在代理模式? 单一职责原则 想一想,明星为什么要有经纪人。经纪人可以负责帮助明星安排各种工作,对明星包装炒作等等。而明星自己只专注于演出。如果所有工作都交给明星自己完成,一个再高效再厉害的人估计也得忙疯了。 相应的,在面向对象设计原则中有单一职责原则,它规定一个类应该只有一个发生变化的原因。如果一个类承担了太多职责,这个类就会变得越来越庞大,难以维护。 对象无法被直接操作
3个月前
开发模式
jaychen 于 3个月前发表 744 0 0
[http://7tszky.com1.z0.glb.clouddn.com/FrmeYH8QpSzTaDCZkd_77dWsucBJ] 一、变量 * 使用语义化的变量名称 Bad const yyyymmdstr = moment().format('YYYY/MM/DD'); Good const currentDate = moment().format('YYYY/MM/DD'); -------------------------------------------------------------------------------- * 使用可搜索的名称 通常我们读代码比写得多,所以代码都可读性以及可搜索性非常重要。如果对变量不负于语义化、易理解的名字,代码的阅读者将非常痛苦。buddy.js以及ESLint能够帮助我们定位未命名的常量。 Bad // 86400000 是什么鬼? setTimeout(blastOff, 86400000); Good
3个月前
javascript技术
moonye 于 3个月前发表 934 0 0
WEBPACK热更新配置 热更新,可以使开发的人在修改代码后,不用刷新浏览器即可以看到修改后的效果。而它的另一个好处则是可以只替换修改部分相关的代码,大大的缩短了构建的时间。 热更新一般会涉及到两种场景下面的使用,一个是项目属于纯前端资源的,另一种是node工程项目。 纯前端资源配置 完整工程项目可参考github上面 demo [https://github.com/moonye6/webpack-hot-test1] 配置或者 官方示例 [https://webpack.js.org/guides/hmr-react/] 配置过程内容比较多,这里大致描述下实现热更新能力需要做些什么。 首先安装相关的包,会发现热更新的能力主要是 webpack-dev-server 实现,它提供一个本地服务器,并且在内容发生变化时更新浏览器内容。而 react-hot-loader 主要作用是重刷react组件,非react项目中不要,这样配置又简化了。 然后在构建的配置文件中需要做一些配置,该配置作用是将热更新所需要的代码注入到入口js文件中
3个月前
构建工具
黎清龙 于 3个月前发表 554 2 0
DECORATOR 学习小结 1. DECORATOR 是什么 decorator 是装饰者,是 ES7 的语法。 decorator 本质是一个 wrapper,可以动态增强【类】,【实例方法】的能力 被装饰者对于装饰者是毫无感知的 读者如果感兴趣,可以深入学习【装饰者模式】 要注意的是,在 ES7 中,decorator 只是一个语法糖而已,和 class 这些一样 可以参考 babel 转换之后的 ES5 代码 2. DECORATOR 的用法 2.1. 作用在类方法上 decorator 可以在定义类的时候,作用在类方法上,见下面的例子: functionreadonly(target, key, descriptor) { descriptor.writable = false; return descriptor; } classPeople{ @readonly sayName() { console.log(this.name); } } var p = new People();
3个月前
javascript技术
aresnliang 于 3个月前发表 1841 0 2
[http://7tszky.com1.z0.glb.clouddn.com/FqtYuU--4FP-FRCrEdh0OtuRfBA1] 2016年工作中做过最自豪的两件事情: * 把 Vue.js 和 Webpack 技术栈引进公司并逐步成为前端规范; * 开源 iView [https://github.com/iview/iview] 项目。 初识 VUE 第一次接触 使用 Vue.js 已经有一年半时间了,在接触 Vue 之前,有写过半年多的 Angular,所以刚了解 Vue 时,与很多开发者一样,认为 Vue 是一个轻量级的或是移动端的 ng,就好比 zepto 之于 jQuery。直到 15 年 10 月,打算用 Vue 开发一个个人项目时,才开始认真地学习它,发现 Vue 的使用方法和 API 设计如此优美简洁,而且中文文档甚是详细,我觉得这也是 Vue 受很多中国开发者喜爱的原因,许多初中级开发者、英文不好的、jQ导向的,在刚接触 MVVM 时,这点很有价值,再者 Vue 的使用和学习门槛相比 ng 和 React 的要求都要低,概念理解起来也容易。
3个月前
javascript技术
zzbozheng 于 4个月前发表 854 4 0
前几天在群里看到小杜分享一篇文章,《html写法对gzip压缩率的影响》,为此我也对这点分析了一下。 不知道大家有没有看过这文章,作者是来自微博懒懒交流会,其内容我这里先简述一下。 Gzip算法主要由哈费曼和LZ77算法组成。 如果文件中有两块内容相同的话,那么只要知道前一块内容的位置和大小,通过特定的压缩标识符, 我们就可以确定后一块的内容。所以我们可以用位置长度这样一对信息,来替换后一块内容。 举例
4个月前
HTML&HTML5
结一 于 4个月前发表 877 0 0
在DOM操作时代,tabs的结构一般如下: div.tabs ul.tabs-hd li.hd-tt*n div.tabs-bd div.bd-con*n 然后通过判断 li.hd-tt 的索引值来控制对应的 div.bd-con 的显示隐藏,由此封装成一个非常高效率的组件。 到了以React为代表的数据变化引起UI更新的时代,基于上面方式实现的tabs组件还是非常多的,以Ant Design,IMUI为例,都是这种实现方式。 那么现在我的问题是:在React中,tabs组件是否真的还需要按照这种显示隐藏多个 div.bd-con 的方式? 关于这个问题,这里抛出两个支撑观点: * 在使用tabs组件的时候,需要维护一个state来控制各个tab的切换 * 一般来说各个tab的内容结构多半相似甚至相同,只是数据不同而已 基于这两点,简化版本的tabs其实只需要 ul.tabs-hd 部分,对于内容部分,根本不需要放到tabs里面去封装成组件
4个月前
javascript技术
吴浩麟 于 4个月前发表 4258 2 0
[http://7tszky.com1.z0.glb.clouddn.com/FnewH1hoBQjJKWzMazCkmSrPxOSb] webpack是当下最流行的js打包工具,这得益于网页应用日益复杂和js模块化的流行。 webpack2 [https://webpack.js.org] 增加了一些新特性也到了预发布阶段,是时候告诉大家如何用webpack2优化你的构建让它构建出更小的文件尺寸和更好的开发体验。 优化输出 打包结果更小可以让网页打开速度更快以及简约宽带。可以通过这以下几点做到 压缩CSS css-loader 在webpack2里默认是没有开启压缩的,最后生成的css文件里有很多空格和tab,通过配置 css-loader?minimize 参数可以开启压缩输出最小的css。css的压缩实际是是通过 cssnano [http://cssnano.co] 实现的。 TREE-SHAKING
4个月前
构建工具
coverguo 于 4个月前发表 1232 3 0
背景: 最近AR的话题很火,如前段时间pokemon Go游戏,和支付宝的AR红包,加上最近看到了一些关于前端运用webRTC技术实现WebAR的文章,这边就尝试结合下,实现一个简单版的pokeMon Go的游戏。由于有兼容性问题,目前demo只是跑在android的手Q中,具体效果如下: [http://7tszky.com1.z0.glb.clouddn.com/Fh_4pdBh52iGZWV2GCv82JgVL6WQ] 元旦后提供demo链接 WEBAR WebAR说白了就是通过web端的技术能力去实现AR的效果! 我们知道,AR最基础要实现的功能其实就是实时视频效果,然而帮助我们实现这种实时视频效果的技术基础是 WebRTC ; WEBRTC是什么? 那么,WebRTC是什么? 对前端来说,我们可以通过HTML5的新特性WebRTC(网页实时通信,Web Real-Time Communication 一个支持网页浏览器进行实时语音对话或视频对话的API),通过WebRTC,可以通过网页呼起用户的摄像头,并且实时获取用户摄像头的图像数据的。 WEBRTC API
4个月前
HTML&HTML5
刘志龙 于 4个月前发表 650 0 0
最近折腾脚手架相关的一些事情。说到脚手架,不得不谈的就是 yeoman 了。 是什么 yeoman 是一个脚手架生成工具。 yeoman generator 则是 yeoman 的精髓所在。 从我的理解来看。 yeoman 就是一个工具外壳,它定制了如何调用 generator ,给 generator 提供了运行环境。 yeoman generator 则是解耦出来的核心部分,负责完成一个脚手架应该做的事。 线上已经有很多 generator ,可以满足我们一大波需求。不过要做到真正灵活,完全符合自己的需求、业务中的需要就要自己自定义 generator 了。 怎么做 yeoman 的强大之处在于它提供了一套非常强大的编写自定义 generator 的 API ,而且上手非常容易。只要按照特定的约束,很快就可以定制一套自己的 generator 。话不多说,马上一起来看看怎么做。 目录结构 |- app |- index.js |- template |- 模板文件 |- package.json (主入口为app/index.js)
4个月前
工具建设