• JavaScript 模块(2):模块打包

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

    在第一部分中,我讲解了模块是什么、为何要使用模块和将程序整合为模块的各种方式。而在第二部分,我将会详细讲解模块“打包”:为什么要打包模块,以不同的方式进行打包和模块在 web 开发上的未来。 什么是模块打包? 总体上看,模块打包只是简单地将一组模块(和它们所依赖的模块)以正确的顺序整合为单一文件(或文件组)。我们也知道:对于 web 开发,细节才是可怕的地方。 :)。 究竟为什么需要打包模块? 当你将程序分为各个模块时,通常会将这些模块放到不同文件或文件夹

    阅读全文...

  • 入门 Webpack,看这篇就够了

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

    写在前面的话 阅读本文之前,先看下面这个webpack的配置文件,如果每一项你都懂,那本文能带给你的收获也许就比较有限,你可以快速浏览或直接跳过;如果你和十天前的我一样,对很多选项存在着疑惑,那花一段时间慢慢阅读本文,你的疑惑一定一个一个都会消失;如果你以前没怎么接触过Webpack,如果你对webpack感兴趣,本文中有一个贯穿始终的例子,如果你能把这个例子自己动手写一次,写完以后你会发现你已明明白白的走进了Webpack的大门。 //一个常见的Webp

    阅读全文...

  • 使用 Chrome Timeline 来优化页面性能

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

    有时候,我们就是会不由自主地写出一些低效的代码,严重影响页面运行的效率。或者我们接手的项目中,前人写出来的代码千奇百怪,比如为了一个 Canvas 特效需要同时绘制 600 个三角形,又比如 Coding.net 的任务中心需要同时 watch 上万个变量的变化等等。那么,如果我们遇到了一个比较低效的页面,应该如何去优化它呢? 优化前的准备:知己知彼 在一切开始之前,我们先打开 F12 面板,熟悉一下我们接下来要用到的工具:Timeline: 嗯没错就是它

    阅读全文...

  • 构建一个类jq的函数库

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

    jqfree 虽然团队里用上了vue,但是某些情况下可能仍然需要操作DOM,或者是需要一些诸如变量类型判断、时间解析函数、url解析函数、浮点数四舍五入小数位和获取随机位数字符串的辅助函数。而本篇就是教你怎么构建这样一个山寨版的库,只要400行代码,你就能体验写一个库函数畅快的感觉! jqfree core var $ = function(selector, context) { return new $.fn.init(selector, contex

    阅读全文...

  • Vue.js 60 分钟快速入门

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

    Vue.js介绍 Vue.js是当下很火的一个JavaScript MVVM库,它是以数据驱动和组件化的思想构建的。相比于Angular.js,Vue.js提供了更加简洁、更易于理解的API,使得我们能够快速地上手并使用Vue.js。 如果你之前已经习惯了用jQuery操作DOM,学习Vue.js时请先抛开手动操作DOM的思维,因为Vue.js是数据驱动的,你无需手动操作DOM。它通过一些特殊的HTML语法,将DOM和数据绑定起来。一旦你创建了绑定,DOM

    阅读全文...

  • 京东单品页前端开发那些不得不说的事儿

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

    简介 详情页也叫做单品页,域名以「item.jd.com/skuid.html」为格式的页面。是负责展示京东商品 SKU 的落地页面。主要任务是展示和商品相关的信息,如:价格、促销、库存、推荐,从而引导用户进入购买流程。同时单品页有很多版本。一般分为两类。一类我们通常看到的「通用类目详情页」—— 所有类目都可以使用,一类是不经常看到的「垂直属性详情页」—— 一些有特殊属性的商品集合 首先。由于详情页大量(sku上亿)、高并发(日 pv 约 5000 万)等

    阅读全文...

  • 九个Console命令,让js调试更简单

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

    一、显示信息的命令 常用console命令 最常用的就是console.log了。 二:占位符 console上述的集中度支持printf的占位符格式,支持的占位符有:字符(%s)、整数(%d或%i)、浮点数(%f)和对象(%o) 效果: 三、信息分组 常用console命令 效果: 四、查看对象的信息 console.dir()可以显示一个对象所有的属性和方法。 效果: 五、显示某个节点的内容 console.dirxml()用来显示网页的某个节点(no

    阅读全文...

  • underscore 源码解读之 bind 方法的实现

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

    自从进入七月以来,我的 underscore 源码解读系列 更新缓慢,再这样下去,今年更完的目标似乎要落空,赶紧写一篇压压惊。 前文 跟大家简单介绍了下 ES5 中的 bind 方法以及使用场景(没读过的同学建议先看看),毕竟 bind 是 ES5 的东西,低版本 IE 不支持。今天就根据 underscore 的实现,来聊一聊如何实现一个 bind 的 polyfill。 之前在 ECMAScript 5(ES5) 中 bind 方法简介备忘 一文中,给

    阅读全文...

  • 在JavaScript中借用方法

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

    在JavaScript中,有时可以重用其它对象的函数或方法,而不一定非得是对象本身或原型上定义的。通过 call()、apply() 和 bind() 方法,我们可轻易地借用其它对象的方法,而无须继承这些对象。这是专业 JavaScript 开发者常用的手段。 前提 本文假设你已经掌握使用 call()、apply() 和 bind() 的相关知识和它们之间的区别。 原型方法 在 JavaScript 中,除了不可更改的原始数据类型,如 string、nu

    阅读全文...

  • JavaScript设计模式与开发实践 – 观察者模式

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

    概述 观察者模式又叫发布 – 订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个目标对象(为了方便理解,以下将观察者对象叫做订阅者,将目标对象叫做发布者)。发布者的状态发生变化时就会通知所有的订阅者,使得它们能够自动更新自己。 观察者模式的使用场合就是:当一个对象的改变需要同时改变其它对象,并且它不知道具体有多少对象需要改变的时候,就应该考虑使用观察者模式。 观察者模式的中心思想就是促进松散耦合,一为时

    阅读全文...