JavaScript 数据类型判断

最近开始读之前没有读完的 underscore 的源码,刚把 Object 部分读完。对 JavaScript 中类型判断部分的总结。

Object.prototype.toString()

在进行类型判断时,使用到最多的当属 Object.prototype.toString()

toString() 方法返回一个代表该对象的字符串。每个对象都会继承 Object 上的 toString 方法,如果该方法没有被同名方法覆盖的话。使用 toString() 方法将会返回字符串 "[object type]"。其中 type 根据对象的类型的不同而不同。

关于 Object.prototype.toString() 的详细描述可以查看:Object.prototype.toString() - JavaScript | MDN

「微信小程序」入坑总结

前段时间去了广州参加了关于「微信小程序」的技术沙龙,整场下来收获颇多。实际上微信小程序刚刚发布出来的时候就关注,弄了破解了的开发工具,跑了个官方的 Demo。

听完回来之后就想着挖个相关的坑,正好看到手机上的 「ONE · 一个」。上网找到了 ONE 的接口,打算搞一个仿照 ONE 官方 APP 的小程序,最后就有了 weapp-one 这个项目。

关于小程序

微信小程序不是 Web 也不是 Native,尝试之后给我的感觉有点像是 weex。因为之前尝试 weex 的时候是下载一个 APP,然后通过应用内扫码来运行对应的应用。这一点上小程序类似。

在沙龙上有位分享嘉宾有提到,小程序实际上是在 Webview 之上再加上一层原生的组件。例如底部的 tabbar 以及顶部的 navbar 就是原生的。还有小程序的 map 组件,是调用原生的 map 组件。

React 路由跳转后回到页面顶部

在 React 组件间进行页面跳转后,发现页面的位置并不在页面顶部,而是在页面跳转前的位置。就是说浏览器的滚动条并没有回到顶部的位置。

经过搜索之后找到了解决方案:Scroll to the top of the page after render in react.js

可以使用下面这种解决,但是这种方式不是一种很好的解决方法。而且 scrollIntoView() 方法并不回到页面的顶部,应该使用 scrollTop = 0 的方式。

1
componentDidUpdate = () => { ReactDom.findDOMNode(this).scrollIntoView(); }

所以得到的解决方案是:

1
2
3
componentDidUpdate() {
ReactDOM.findDOMNode(this).scrollTop = 0
}

React 生命周期函数小结

生命周期函数是指,在组件生命周期上的特定点上执行的各个函数。
React 的组件声明周期函数分为三种:挂载,更新以及卸载。

挂载

组件挂载的生命周期函数都在初始化渲染前后被调用。

componentWillMount

只调用一次,在客户端与服务端都执行。在初始化渲染之前被调用。

正则表达式备忘录

JavaScript 创建正则表达式有两种方式:

  • 使用正则表达式字面量:var re = /abc/;
  • 调用 RegExp 对象的构造函数:var re = new RegExp("abc");

什么时候使用构造函数?

当正则表达式的模式会变发生改变,或者需要从其他地方得到时(例如用户输入),适合使用构造函数的方式。

JavaScript 最佳实践:提升代码质量的建议和技巧

翻译自:JavaScript Best Practices: Tips & Tricks to Level Up Your Code
没有严格的按照原文翻译,删减修改了部分内容。

在这个教程中,会列出一些重要的 JavaScript 的最佳实践,学习这些并不会很困难。

避免污染全局作用域

声明变量是很有趣的,有时候你会在你不知情的情况下声明了全局变量。在现在的浏览器中,全局变量将会存储在 window 变量中。在全局作用域中的变量可能在不经意间被覆盖。

如何减少浏览器回流

什么是浏览器回流

浏览器在显示网页时,需要计算每一个元素应该放置的位置,这个计算过程就称为浏览器回流(browser reflow)。回流会重新计算页面的布局,在回流中会重新计算元素的尺寸与位置,并且也会触发对子元素的回流。

触发浏览器回流的操作:

  • 在 DOM 中插入,移除或者更新元素
  • 修改页面上的内容
  • 移动 DOM 元素
  • 修改元素 CSS 样式
  • 修改元素的类名
  • 调整窗口的大小

数组乱序的正确姿势

underscore 中有一个函数,其作用是将数组乱序排序,实现如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
// Shuffle a collection, using the modern version of the
// [Fisher-Yates shuffle](http://en.wikipedia.org/wiki/Fisher–Yates_shuffle).
// `shuffle` 函数。
_.shuffle = function(obj) {
var set = isArrayLike(obj) ? obj : _.values(obj);
var length = set.length;
var shuffled = Array(length);
for (var index = 0, rand; index < length; index++) {
rand = _.random(0, index);
if (rand !== index) shuffled[index] = shuffled[rand];
shuffled[rand] = set[index];
}
return shuffled;
};

浪矢杂货店

解忧杂货店,零零散散的在地铁上看完了这本之前一直听到却没有去看的小说。其实几天前想写这篇读书笔记的,一直被拖延至今。

爱情公寓中有一集曾小贤说了这样一句话。当面对两个选择时,抛硬币总能奏效,并不是因为它总能给出对的答案,而是在你把它抛在空中的那一秒里,你突然知道你希望它是什么。就像是那些向浪矢杂货店投递烦恼信件一样,其实真正来向浪矢爷爷咨询的人大多心里已经有了答案。只是自己没有发现,当杂货店回信中的建议并不像所期望的回答的时候,咨询者就发现自己想要的那个答案。

Vue 中使用 highlight.js

今天遇到一个问题:在使用 vue 的练手项目中,渲染的 HTML 里 <code> 标签中的代码没有代码高亮。

遂想到用 highlight.js 来解决,按照平常那样在 HTML 文件中引入 jscss 文件,然后在<header> 中加上一句 <script>hljs.initHighlightingOnLoad();</script>。但是却没有效果。

在 Vue.js 的论坛上找到了解决方案 Getting highlightjs to work with vue-router。highlight.js 没有效果是因为使用了 vue-route,在 route 改变时,页面将会重新渲染并且会移除事件,这里就把 highlight 的事件给移除了。