• 「微信小程序」入坑总结

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

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

    所以得到的解决方案是:

    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 中有一个函数,其作用是将数组乱序排序,实现如下:

    // 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 的事件给移除了。

  • CSS 实现垂直居中

    我们有这样一个结构的 HTML:

    <div class="parent">
      <div class="children"></div>
    </div>
    

    如果我们要实现 .children.parent 中垂直居中。

    通常第一印象会想起给父元素设置相对定位,给子元素设置绝对定位。这样子元素就相对于父元素定位,再通过 topleft 各偏移 50% 父元素宽度,使用 margin-* 来修正子元素的位置。