jerytang 于 4个月前发表 1329 1 1
代码压缩的现状 下面是一个使用 react 的业务的代码依赖,但是实际上业务代码中并没有对依赖图中标识的模块,也就是说构建工具将不需要的代码打包到了最终的代码当中。显然,这是很不合理的。 unneed_deps [http://pub.idqqimg.com/pc/misc/files/20161230/31607a2f657c4086adbf1bfd98063934.png] $webpack--profile--json--configwebpack/config.common.js > stats.json$#将stats.json上传到http://alexkuz.github.io/webpack-chart/可视化entry的依赖 随着 es6 的普及使用,由于 es6 的 模块是语言层面支持的,方便做静态分析,让进一步的代码优化成为可能,也就是我们今天要讨论的 tree-shaking。
4个月前
构建工具
json 于 4个月前发表 804 1 0
WHISTLE介绍 whistle是一款用Node实现的跨平台的Web调试代理工具,支持查看修改http(s)、Websocket连接的请求和响应内容。IMWEB团队avenwu作品。github地址: https://github.com/avwo/whistle [https://github.com/avwo/whistle] WHISTLE安装启动 1、安装whistle npm install -g whistle 2、 启动whistle w2 start // 启动whistle w2 restart // 重启whsitle w2 run // 调试模式启动whistle 3、 在浏览器中访问 (1)域名访问 http://local.whistlejs.com/ [http://local.whistlejs.com/] (2)通过ip+端口来访问,例如: http://127.0.0.1:8899 [http://127.0.0.1:8899] WHISTLE插件开发
4个月前
工具建设
张颖 ,认真认真 于 4个月前发表 992 1 0
CSS MODULES CSS 模块化 不管是用jquery还是react开发,都会遇到的一系列 CSS 的问题: 1. 全局污染 2. 命名混乱 3. 依赖引入复杂 4. 无法共享变量 5. 代码冗余 通过 JS 来管理 CSS 就很好解决上述列举的问题。CSS 模块化的解决方案有很多,但主要有两类。 一类是彻底抛弃 CSS,使用 JS 或 JSON 来写样式。Radium, jsxstyle ,react-style 属于这一类。优点是能给 CSS 提供 JS 同样强大的模块化能力;缺点是不能利用成熟的 CSS 预处理器(或后处理器) Sass/Less/PostCSS, :hover 和 :active 伪类处理起来复杂。 另一类是依旧使用 CSS,但使用 JS 来管理样式依赖,代表是CSS Modules。CSS Modules 能最大化地结合现有 CSS 生态和 JS 模块化能力。发布时依旧编译出单独的 JS 和 CSS。它并不依赖于 React,只要你使用 Webpack,可以在 Vue/Angular/jQuery 中使用。 启用 CSS MODULES
4个月前
CSS/重构
ouven ,https://ouvens.github.io/ 于 4个月前发表 1786 0 0
2016年结束了,前端技术的发展也将进入到一个新的阶段,那么未来又会给我们带来什么呢?这里就个人发表下意见,欢迎点评。 就前端主流技术框架的发展而言,过去的几年里发展极快,在填补原有技术框架空白和不足的同时也渐渐趋于成熟。未来前端在已经趋向成熟的技术方向上面将会慢慢稳定下来,并进入技术迭代优化阶段,例如语言标准、前端框架等。但这并不代表前端领域技术就此稳定了,因为新的技术方向已经出现,并在等待着下一个风口的到来。那么什么是下一个风口?虚拟现实?人工智能?或者其它的?不管未来如何,就前端应用开发方向来讲,MVVM、Virtual DOM和同构的技术解决方案依然会延续发展一段时间。而且这段时间内前端框架技术的变化将不会像原来一样具有颠覆性。 当 MVVM、Virtual DOM或同构等技术实践都有很成熟高效的框架和方案去实现了。那么对于移动端应用,前端要重点发展的下一步可能就是MNV 的原生NativeView开发,例如使用通用的MNV
4个月前
javascript技术
黄龙 于 4个月前发表 625 0 0
不清楚fis3是什么的可以先看这个链接 http://fis.baidu.com/ [http://fis.baidu.com/] 背景 从fis的官方文档上看,fis 除了deploy 插件是支持异步的其它都不支持。但是有好多node包 都是异步,怎么才能让fis支持异步插件呢? 举个例子 最近看到有一个 gulp-lzmajs [https://github.com/andot/gulp-lzmajs] 的插件,我尝试把它改成fis3插件。 接下来我们要思考下面几个问题 1. 做什么阶段的插件? 2. lzma库是异步调用的,怎么处理? 第一个问题:fis3把构建分成了三个阶段【编译】【打包】【发布】,当然我们只希望所有文件打包好之后再做js文件的lama压缩,所以做打包阶段的插件,扩展postpackager 第二个问题:我们需要一个很神奇的包 deasync DEASYNC github: https://github.com/abbr/deasync [https://github.com/abbr/deasync] 用法:
4个月前
构建工具
孙世吉 于 4个月前发表 809 1 0
1. 尾递归 说起 尾递归 就不能不提一下 尾调用(Tail Call) 。 尾调用:在函数的最后一步调用另外一个函数。 functionfunc(){ // ... other codereturn otherFunc();// 尾调用 } 尾递归:在函数的最后一步调用自身 functionfunc(){ // ... other codereturn func();// 尾递归 } 2. 尾调用和非尾调用 说到递归,那就必然要以斐波那契数列为例子 [http://7tszky.com1.z0.glb.clouddn.com/FnBilj1jvdqTOG8EkuDnazoeLKZg] 斐波那契数列(Fibonacci sequence),又称黄金分割数列、因数学家列昂纳多·斐波那契(Leonardoda Fibonacci)以兔子繁殖为例子而引入,故又称为“兔子数列”,指的是这样一个数列:1、1、2、3、5、8、13、21、34、…… 简单的说,斐波那契数列中的每一项都是前两项的和。
4个月前
javascript技术
coolriver 于 4个月前发表 1585 0 2
1. 背景 产品需求来啦:点击页面上某个东西,要在新窗口中打开一个页面,注意!要在新窗口中打开。你呵呵一笑,太简单了: 1. 打开的页面地址是固定的?直接a标签加上 target="_blank" 属性搞定。 2. 打开的页面地址是动态计算的?使用js进行 window.open(url) 搞定。 如果你人品比较好,你的页面可以顺利地运行到下线为止。但如果你脸比较黑,可能会遇到以下问题: 1. 用户投诉:我在你们页面上进行的操作,怎么账号被盗了!! 2. 用户吐槽:页面卡得不行了。。。 WTF? 2. 来两个例子 2.1 例子1: 步骤: 1. 进入这个微博帖子页面: http://blog.sina.com.cn/s/blog_c3a321040102wdq4.html [http://blog.sina.com.cn/s/blog_c3a321040102wdq4.html] 2. 点击正文的”点击有惊喜哦“链接。 3. 看了下新打开的页面,什么惊喜都没有啊。。。回到上一个刚才的页面窗口。 4. 嗯?登录态丢了,重新登录一下吧。 5. 靠,中招了!
4个月前
浏览器
黎清龙 于 5个月前发表 820 0 0
代码覆盖率工具 ISTANBUL 1. 代码覆盖率 在测试时,我们的用例把所有代码都覆盖了吗? 对于这个问题引出了代码覆盖率的测试指标,一共有以下4种: * 行覆盖率(line coverage):是否每一行都执行了? * 函数覆盖率(function coverage):是否每个函数都调用了? * 分支覆盖率(branch coverage):是否每个if代码块都执行了? * 语句覆盖率(statement coverage):是否每个语句都执行了? istanbul 是一个代码覆盖工具 它可以帮助我们检查代码的覆盖率 在一个项目中,可以通过 istanbul 设定某些覆盖率阈值来保证测试用例的齐全完整程度,用来保证代码质量 下面是对 istanbul 的使用&学习所得 2. 安装 需要安装 mocha,should,istanbul $ npm install mocha $ npm install should $ npm install istanbul mocha 是测试框架,should 是断言库 3. 初探代码覆盖 先来看看我们的测试文件:
5个月前
nodeJS全栈
孙世吉 于 5个月前发表 1091 2 0
1. GRAPHQL来啦! 当Facebook构建移动应用的时候,它需要的是一个强大的数据获取API: * 足够强大,满足Facebook自身复杂业务的需求; * 足够简单,对开发者和使用者来说很容易上手与使用; [http://7tszky.com1.z0.glb.clouddn.com/FoB9iZ8vEeqLToGG_Yky-0-Duljt] GraphQL就是为了满足这一个需求而产生的,Facebook从2012年开始完善,与2015年展开GraphQL的开源的进程,并形成一个 围绕GraphQL的社区 [http://graphql.org] 。 GraphQL每天都为Fackbook接收、处理着上百亿的请求,为Fackbook提供了强大的基础数据平台的支持,滋养大量业务与产品。 2. 为什么是GRAPHQL?
5个月前
基础库
kinkahuang 于 5个月前发表 630 0 0
MQTT是一个物联网传输协议,它被设计用于轻量级的发布/订阅式消息传输,旨在为低带宽和不稳定的网络环境中的物联网设备提供可靠的网络服务。MQTT是专门针对物联网开发的轻量级传输协议。MQTT协议针对低带宽网络,低计算能力的设备,做了特殊的优化,使得其能适应各种物联网应用场景。 而我却拿MQTT来做实时日志系统。 主要基于这几个点,轻量,实现简单,支持QoS,支持TLS,是个发布/订阅协议,支持消息推送。 其实公司日志系统那么多,像ULS,nlog什么的,为什么又又又要造轮子呀?因为要么接入麻烦,要么语言不支持,要么需要资源,要么支持不到位,要么丢消息等。而我的需求背景是,有几台服务器,目前的日志是打印到本地文件中,每次要查日志都要登录运营机器,而且还要登录两台,不大方便。因此,我想要的就是,只在一处地方统一实时查看所有日志,而且对现有系统最小的改动。 而了解到MQTT也实在是偶然,在一个ruff的群里有人基于MQTT对物联设备做实时控制,而线上的机器完全也可以当作一个物联设备,我用MQTT来做远程控制,控制内容就是把写到文件的日志直接转发到中心服务器就可以了。架构图长这样子:
5个月前
工具建设
kinkahuang 于 5个月前发表 1160 0 0
我们有个内部运营系统,是基于keenthemes的一个主题进行开发的,而这个主题就是基于jQuery+bootstrap+jQueryPlugins 进行的定制主题,用于显示各种图表和曲线。所以,这个系统的特点就是,加载了一堆js和css进行堆砌组合,以及内容被一层层的标签和样式包围。长这个样子: 混乱重复的演示 [http://7tszky.com1.z0.glb.clouddn.com/Fp4hlPNcE8G4nKobqt46vaJv6wUS]混乱重复的演示 [http://7tszky.com1.z0.glb.clouddn.com/FotxjNSUG9qMZMMZm7r_GyXob7ZM]混乱重复的演示 [http://7tszky.com1.z0.glb.clouddn.com/FhkJMXtTuF-OX9iguBcEBQb8qfNU] 这种写多了确实就是体力活,一般的开发过程也就是复制粘贴,而且为了不出意外的问题,有用的没用的js script和css link都是直接复制的,反正放内部用一般忽略加载的延迟。
5个月前
开发模式
陈映平 于 5个月前发表 770 0 0
本文摘录自个人总结《Nodejs学习笔记》,更多章节及更新,请访问 github主页地址 [https://github.com/chyingp/nodejs-learning-guide] 。欢迎加群交流,群号 197339705 [http://shang.qq.com/wpa/qunwpa?idkey=7e4f670e1cd9278f30003965a1cc068a4f30d8c73aa071c8da189f4842dbbee6] 。 模块概览 在node中,child_process这个模块非常重要。掌握了它,等于在node的世界开启了一扇新的大门。熟悉shell脚本的同学,可以用它来完成很多有意思的事情,比如文件压缩、增量部署等,感兴趣的同学,看文本文后可以尝试下。 举个简单的例子: const spawn = require('child_process').spawn; const ls = spawn('ls', ['-lh', '/usr']); ls.stdout.on('data', (data) => {
5个月前
nodeJS全栈