囧克斯
这里是勾三股四的家
Code Review for Vue 2.0 Preview
是的!Vue 2.0 发布了! 源代码仓库在此
首先,当我第一次看到 Vue 2.0 的真面目的时候,我的内心是非常激动的
Demo ​
来个简单的 demo,首先把
dist/vue.js
导入到一个空白的网页里,然后写:当然,在大家阅读下面所有的内容之前,先想象一下,这是一个运行时 min+gzip 后只有 12kb 大小的库
<script src="./dist/vue.js"></script> <div id="app"> Hello {{who}} </div> <script> new Vue({ el: '#app', data: {who: 'Vue'} }) </script>
你将看到 "Hello Vue"
然后再看一个神奇的:
<script src="./dist/vue.js"></script> <div id="app"></div> <script> new Vue({ el: '#app', render: function () { with (this) { __h__('div', {staticAttrs:{"id":"app"}}, [("\n Hello "+__toString__(who)+"\n")], '' ) } } data: {who: 'Vue'} }) </script>
这个是 compile 过后的格式,大家会发现首先
#app
下不需要写模板了,然后<script>
里多了一个render
字段,Vue 在运行时其实是会把模板内容先转换成渲染方法存入render
字段,然后再执行,如果发现render
已经存在,就跳过模板解析过程直接渲染。所以在 Vue 2.0 中写一段模板和写一个render
option 是等价的。为什么要这样设计,稍后会我们会涉及到。Vue 2.0 发布啦!
原文:https://medium.com/the-vue-point/announcing-vue-js-2-0-8af1bde7ab9#.cyoou0ivk
今天我们非常激动的首发 Vue 2.0 preview 版本,这个版本带来了很多激动人心的改进和新特性。我们来看看这里面都有些什么!
Vue.js 1.0.0 发布了!
作为“打入敌人内部”的第一件事,转载一下 Vue.js 1.0.0 新世纪福音战士 (其实发这篇文章的时候已经 1.0.3 了) 正式发布的博文 ^_^
Hi HN (Hacker News)! 如果你还不熟悉 Vue.js 的话,可以通过这篇文章 (英文)对其有个总体印象。
在经历了 300+ 次提交、8 次 alpha、4 次 beta 和 2 次 rc 之后,今天我很荣幸的向大家宣布 Vue.js 1.0.0 Evangelion 正式发布了!非常感谢所有参与 API 重设计的同学们——没有来自社区的贡献这是不可能完成的。
手机淘宝前端的图片相关工作流程梳理
本文首发自阿里无线前端博客
注:本文摘自阿里内网的无线前端博客《无线前端的图片相关工作流程梳理》。其实是一个月前写的,鉴于团队在中国第二届 CSS Conf 上做了《手机淘宝 CSS 实践启示录》的分享,而图片工作流程梳理是其中的一个子话题,故在此一并分享出来,希望仍可以给大家一些经验和启发。另外,考虑到这是一篇公开分享,原版内容有部分删节和调整,里面有一些经验和产出是和我们的工作环境相关的,不完全具有普遍性,还请见谅。
今天很荣幸的跟大家分享一件事情,就是经过差不多半年多的努力,尤其是最近 2 周的“突击扫尾”,无线前端团队又在工具流程方面有了一个不小的突破:我们暂且称其为“图片工作流”梳理。
图片!图片!图片! ​
要说最近 1 年里,无线前端开发的一线同学最“难搞”的几件事,图片处理绝对可以排在前三。
- 首先,我们首先要从视觉稿 (绝大部分出自 photoshop) 里把图片合理的分解、测量、切割、导出——俗称“切图”
- 然后,我们要把切好的图放入页面代码中,完成相关的本地调试
- 第三步,把本地图片通过一个内部网站 (名叫 TPS) 上传到我们的图片 CDN 上,并复制图片的 CDN 地址,把本地调试用的相对路径替换掉
- 第四步,不同的图片、不同的外部环境下 (比如 3g 还是 wifi),我们需要给图片不一样的尺寸、画质展现,并有一系列的配置需要遵循
- 如果视觉稿有更改 (不要小看这件事,微观上还是很频繁的哦),不好意思,从第一步开始再重新走一遍……
这里面“难搞”在哪些地方呢?我们逐一分析一下:
- “切图”的效率并不高,而且每一步都很容易出现返工或再沟通
- 打开 TPS 网站上传图片放到前端开发流程中并不是一个连贯流畅的步骤,而且 GUI 相比于命令行工具的缺陷在于无法和其它工具更好的集成
- 替换 CDN 图片路径的工作机械而繁琐,并且代码中替换后的图片地址失去了原本的可读性,非常容易造成后期的维护困惑甚至混乱
- 适配工作异常繁杂和辛苦,也很容易漏掉其中的某个环节
- 视觉变更的成本高,web 的快速响应的特点在丧失
所以可能把这些东西画成一张图表的话:
团队的单点突破 ​
在最近半年的一段时间里,无线前端团队先后发起了下面几项工作,从某个点上尝试解决这些问题:
[译]如何成为一名卓越的前端工程师
看过之后非常有感触,很多观点都是自己长期非常坚持和认同的,所以翻译出来分享给更多的前端同学!
最近我收到一封读者来信让我陷入了思考,信是这么写的:
Hi Philip,您是否介意我问您是如何成为一名卓越 (great) 的前端工程师的?对此您有什么建议吗?
我不得不承认,我很惊讶被问这样的问题,因为我从来不觉得自己是个很卓越的前端工程师。甚至我入行头几年时并不认为自己可以做好这一行。我只确定自己比自己想象中还才疏学浅,而且大家面试我的时候都不知道从何问起
话虽这么说,我到现在做得还算不错,而且成为了团队中有价值的一员。但我最终离开 (去寻求新的挑战——即我还不能够胜任的工作) 的时候,我经常会被要求招聘我的继任者。现在回看这些面试,我不禁感叹当我刚开始的时候自己在这方面的知识是多么的匮乏。我现在或许不会按照我自己的模型进行招聘,即便我个人的这种经历也有可能成功。
我在 web 领域工作越长时间,我就越意识到区分人才和顶尖人才的并不是他们的知识——而是他们思考问题的方式。很显然,知识在很多情况下是非常重要而且关键的——但是在一个快速发展的领域,你前进和获取知识的方式 (至少在相当长的一段时间里) 会比你已经掌握的知识显得更加重要。更重要的是:你是如何运用这些知识解决每天的问题的。
这里有许许多多的文章谈论你工作中需要的语言、框架、工具等等。我希望给一些不一样的建议。在这篇文章里,我想谈一谈一个前端工程师的心态,希望可以帮助大家找到通往卓越的道路。
[译]如何让办公室政治最小化
来来来,看看办公室政治是个什么东西,以及如何将其最小化
翻译如有疏漏还请指正译自:How to Minimize Politics in Your Company via www.bhorowitz.com
更新:跟身边一些朋友讨论之后,觉得之前翻译的标题“杜绝”言过了,还是规规矩矩翻译成了“最小化”
Who the f@#k you think you f$&kin’ with
I’m the f%*kin’ boss—Rick Ross, Hustlin'
在我所有的从商经历中,我从没听过有人说:“我喜欢办公室政治”。但在我们的周围,令人深恶痛绝的政治又到处都是,甚至自己的公司就是如此。既然大家都不喜欢政治,那为什么它无处不在呢?
政治行为几乎都源自 CEO。也许你会觉得:“我讨厌政治,我也不关心政治,但是我的周围充满了政治气味。这显然不是我造成的。”很遗憾,你并不需要怎么关心政治就会让你的周围充斥政治手段。实际上,很少关心政治的 CEO 才会让办公室充斥政治手段。不关心政治的 CEO 们往往会直接助涨政治行为。
我这里说的政治,就是指员工追求自我职业发展多于价值产出和贡献。也许还有别样的政治类型,但是这类政治行为真的很烦。
Vue.js 源码学习笔记
最近饶有兴致的又把最新版 Vue.js 的源码学习了一下,觉得真心不错,个人觉得 Vue.js 的代码非常之优雅而且精辟,作者本身可能无 (bu) 意 (xie) 提及这些。那么,就让我来吧:)
程序结构梳理 ​
Vue.js 是一个非常典型的 MVVM 的程序结构,整个程序从最上层大概分为
- 全局设计:包括全局接口、默认选项等
- vm 实例设计:包括接口设计 (vm 原型)、实例初始化过程设计 (vm 构造函数)
这里面大部分内容可以直接跟 Vue.js 的官方 API 参考文档对应起来,但文档里面没有且值得一提的是构造函数的设计,下面是我摘出的构造函数最核心的工作内容。
整个实例初始化的过程中,重中之重就是把数据 (Model) 和视图 (View) 建立起关联关系。Vue.js 和诸多 MVVM 的思路是类似的,主要做了三件事:
- 通过 observer 对 data 进行了监听,并且提供订阅某个数据项的变化的能力
- 把 template 解析成一段 document fragment,然后解析其中的 directive,得到每一个 directive 所依赖的数据项及其更新方法。比如
v-text="message"
被解析之后 (这里仅作示意,实际程序逻辑会更严谨而复杂):- 所依赖的数据项
this.$data.message
,以及 - 相应的视图更新方法
node.textContent = this.$data.message
- 所依赖的数据项
- 通过 watcher 把上述两部分结合起来,即把 directive 中的数据依赖订阅在对应数据的 observer 上,这样当数据变化的时候,就会触发 observer,进而触发相关依赖对应的视图更新方法,最后达到模板原本的关联效果。
所以整个 vm 的核心,就是如何实现 observer, directive (parser), watcher 这三样东西
从原型到发布——“团队时间线” 1.0 开发心得
这篇文章将会记录我自己最近一周时间里,从产生“团队时间线”这个想法,到产品设计、交互设计、开发、迭代、再到 1.0 发布的整个过程。整件事情跨越了多个分工职能,所以这件事情虽然并不大,但对我来说是一种不一样的做事方式和经历,所以觉得应该记录下来。
“团队时间线”是个可视化展示团队所有同学时间分配/管理的平台。每个人都可以在“我的时间管理”页面极简的记录自己的时间,比如从某天到另外一天做了一个项目、或者昨天开了一个重要的会等等。