• 从 webpack v1 迁移到 webpack v2

    Posted by : lon.y@qq.com on 2017年7月4日

    resolve.root, resolve.fallback,resolve.modulesDirectories 上述配置项被一个单独的配置项 resolve.modules 取代。详见 resolving。 resolve: { - root: path.join(__dirname, "src") + modules: [ + path.join(__dirname, "src"), + "node_modules" + ] } resolve.ex

    阅读全文...

  • 使用vue.js构建一个知乎日报

    Posted by : lon.y@qq.com on 2017年7月4日

    Vue.js是我所喜爱的,知乎也是我喜爱的,突发奇想使用vue做了一个知乎日报 项目地址: Github地址 在线预览demo 设计: 1.设计上没有按照知乎日报客户端的交互及UI设计来做,本渣亲自捏了一个,颜色以黑白灰为主,本来想加入知乎的蓝色,但是本渣设计功力实在太差,故舍弃掉了蓝色,只采用黑白灰三色。 2.日报条目采用无边界设计,只添加淡灰色的分割线来区分。 3.整个网页是一个单页应用(Single Page Web App),所有的数据使用vuex

    阅读全文...

  • JavaScript 错误处理和堆栈追踪浅析

    Posted by : lon.y@qq.com on 2017年7月4日

    有时我们会忽略错误处理和堆栈追踪的一些细节, 但是这些细节对于写与测试或错误处理相关的库来说是非常有用的. 例如这周, 对于 Chai 就有一个非常棒的PR, 该PR极大地改善了我们处理堆栈的方式, 当用户的断言失败的时候, 我们会给予更多的提示信息(帮助用户进行定位). 合理地处理堆栈信息能使你清除无用的数据, 而只专注于有用的数据. 同时, 当更好地理解 Errors 对象及其相关属性之后, 能有助于你更充分地利用 Errors. (函数的)调用栈是怎

    阅读全文...

  • JS 中国象棋(1):校验棋子走法

    Posted by : lon.y@qq.com on 2017年7月4日

    “JavaScript中国象棋程序” 这一系列教程将带你从头使用JavaScript编写一个中国象棋程序。这是教程的第2节。 程序的最终效果点击这里查看。 这一节介绍棋子的走法。改进之后的程序,可以连续走动红方棋子,但要符合象棋规则。黑方(电脑方)暂时还不能回应。 2.1、走法表示 一个走法包括起点和终点,分别用sqSrc和pcDst表示一维棋局数组中的起点和终点。很容易想到,使用数组[sqSrc, pcDst]表示一个走法。但程序将来会处理大量的走法,使

    阅读全文...

  • 如何编写同时用于 Node 和浏览器的 JavaScript 包

    Posted by : lon.y@qq.com on 2017年7月4日

    我多次看到大家在这个问题上产生困惑,甚至经验丰富的 JavaScript 开发者都可能错过它的一些微妙之处。所以我认为应该写这么一个简短的教程。 假设有一个 JavaScript 模块想发布在 npm 中,它既能在 Node 中运行,又能在浏览器中运行。这会产生一个问题!这个特定的模块对于 Node 和浏览器的运行,会有一点不同的实现。 这种情况相当常见,因为这 Node 和浏览器之间存在许多微小的环境差异。如何正确实现相当棘手,尤其是想在针对浏览的实现中

    阅读全文...

  • 写一个网页进度loading

    Posted by : lon.y@qq.com on 2017年7月4日

    loading随处可见,比如一个app经常会有下拉刷新,上拉加载的功能,在刷新和加载的过程中为了让用户感知到 load 的过程,我们会使用一些过渡动画来表达。最常见的比如“转圈圈”,“省略号”等等。 网页loading有很多用处,比如页面的加载进度,数据的加载过程等等,数据的加载loading很好做,只需要在加载数据之前(before ajax)显示loading效果,在数据返回之后(ajax completed)结束loading效果,就可以了。 但是页

    阅读全文...

  • 高性能移动端开发

    Posted by : lon.y@qq.com on 2017年7月4日

    众所周知,网页不仅应该被快速加载,同时还应该流畅运行,比如快速响应的交互,如丝般顺滑的动画…… 在实际开发中如何做到上面所说的效果呢? 1. 确认渲染性能的分析标准 2. 准备尺子去衡量渲染性能标准 3. 对耗时多的地方进行优化 我们可以粗略的得到下面的优化目标 第一个是 首屏呈现时间,网上的资料已经非常非常多了,压缩代码,使用webp图片,使用sprite,按需加载,“直出”,CDN…… 第二个是 16ms 优化,本篇重点讲16ms的优化。 一. 浏览器

    阅读全文...

  • JavaScript 的 this 指向问题深度解析

    Posted by : lon.y@qq.com on 2017年7月4日

    JavaScript 中的 this 指向问题有很多博客在解释,仍然有很多人问。上周我们的开发团队连续两个人遇到相关问题,所以我不得不将关于前端构建技术的交流会延长了半个时候讨论 this 的问题。 与我们常见的很多语言不同,JavaScript 函数中的 this 指向并不是在函数定义的时候确定的,而是在调用的时候确定的。换句话说,函数的调用方式决定了 this 指向。 JavaScript 中,普通的函数调用方式有三种:直接调用、方法调用和 new 调

    阅读全文...