雨夜带刀's Blog

美团点评北京侧招Web前端工程师

工作职责

为美团点评的大数据业务平台提供各种 web 前端解决方案和服务支持。

工作要求

  • 不限工作经验,只需要有长期的 coding 经验;
  • Javascript/CSS/HTML/Node.js 至少有一个方向有深入的了解;
  • 熟悉模块化开发、了解前端组件化概念、了解相关web规范标准;
  • 至少了解一门服务器端相关技术;
  • 对数据结构与算法有一定了解;
  • 对代码有极致要求、开源项目作者、高质量技术博客博主优先;
  • 有 React 或数据可视化图表(Canvas/SVG)开发的经验优先;

职位吸引

  • 团队发展空间较大,个人会随着团队的成长、公司的成长而成长;
  • 有良好的技术氛围,团队和公司内部常有各类技术方向的分享;
  • 有良好的工作环境,入职即配工程椅和高配rMBP,还有弹性的工作时间;

待遇

比你现在高,能力不错的还可以更高。

工作地点

北京市朝阳区望京(上下班公司有班车)。

有兴趣的同学请发简历到 chenmnkken#gmail.com(#号需替换成@)

从 React 的组件更新谈 Immutable 的应用

在上一篇文章《Immutable 在 JavaScript 中的应用》 中主要介绍了 Immutable 之于 JavaScript。而基于 Immutable 的特性,将其应用在 React 项目的开发中非常合适,解决了 React 中的一些痛点,能进一步提升 React 组件的性能以及更好的管理组件的状态。

在介绍 Immutable 如何在 React 中应用之前,先来谈谈 React 组件是如何更新的。

React 是基于状态驱动的开发,可以将一个组件看成是一个有限状态机,组件要更新,必须更新状态。

通常说的组件的状态就是组件的 state 对象,state 是可以由当前组件自行修改更新的,这种自更新的状态的为了便于理解区分可以称之为“动态”的状态。但除了更新 state 外,组件还可以通过 props 来更新,props 属性不能由组件自行修改,必须由父组件来修改,然后再传递给当前组件,更新组件的 props 也能引起组件的更新,可以将 props 称之为“静态”的状态。这样的状态区分是广义上的,如果你不认可 props 也是状态也没关系,这里可以不用拘泥于文字。

谈谈 external 模式的打包

模块化在前端日新月异的工程化工具的推动下已经摆脱了前端模块加载器(SeaJS、RequireJS)的束缚,现在通常的方案是使用 browserify 或 webpack 来将模块化的文件打包,然后直接在浏览器端使用。

但是通常的打包策略是将整个项目打包成一个文件 bundle.js,默认情况下 bundle.js 中囊括了所有的依赖,包括第三方的从 node_modules 中加载的文件,这会造成 bundle.js 非常臃肿,而且在生产环境中不能很好的利用静态资源的缓存策略。这些打包技术在国外非常火,生产环境提供一个 bundle.js 的做法在国外的网络环境下毫无压力,但是国内的网络环境和国外的没法比,为了下载的性能还是建议分开打包。

分开打包还有一个好处就是,目前的前端开发环境现在都流行使用监测文件的变化而使用 livereload 技术,这也意味着会存在实时动态打包的需求,分开打包对于实时打包的速度有质的影响,对于基本不会变化的第三方模块没有必要每次做实时动态打包的时候都包含进去。

Immutable 在 JavaScript 中的应用

Mutable 对象

在 JavaScript 中,对象是引用类型的数据,其优点在于频繁的修改对象时都是在原对象的基础上修改,并不需要重新创建,这样可以有效的利用内存,不会造成内存空间的浪费,对象的这种特性可以称之为 Mutable,中文的字面意思是「可变」。

对于 Mutable 的对象,其灵活多变的优点有时可能会成为其缺点,越是灵活多变的数据越是不好控制,对于一个复杂结构的对象来说,一不小心就在某个不经意间修改了数据,假如该对象又在多个作用域中用到,此时很难预见到数据是否改变以及何时改变的。

var obj = { /* 一个复杂结构的对象 */ };

doSomething(obj);
// 上面的函数之行完后,此时的 obj 还是最初的那个 obj 吗?

针对这种问题,常规的解决办法可以通过将对象进行深拷贝的形式复制出一个新的对象,再在新对象上做修改的操作,这样能确保数据的可控性,但是频繁的复制会造成内存空间的大量浪费。

var obj = { /* 一个复杂结构的对象 */ };

// copy 出一个新的 obj2
// 但是 copy 操作会浪费内存空间
var obj2 = deepClone(obj);

doSomething(obj2);
// 上面的函数之行完后,无论 obj2 是否变化,obj 肯定还是原来那个 obj

2015 年度个人总结

2015 年又划上了句号,于我来说,又老了一岁,已经到了那个不再张口闭口“我还年轻”的年龄段,年龄对于我来说已经有所忌讳了,相信很多同龄人都会有同样复杂而又微妙的心情。时间对于每个人都很公平,一年 365 天,一天 24 小时,不会因为人的身份地位而有所偏颇,在时间面前,人非常渺小。

工作

上半年怀着无奈和遗憾,从聚美离职了,这么快离开聚美是我始料未及的。在聚美,个人能力得到了较大的磨练,因为所面临的问题是我职业生涯中从前未有过的。第一次带团队,团队从最初的一盘散沙,没有方向,到慢慢走上正轨,再到团队对整个大环境失去信心。在整个过程中,我都尽力做了我该做的,但我也无力回天,不得不接受事实,在这里有必要在团队管理方面做下总结。

头像

雨夜带刀

前端开发工程师,技术宅,现居北京。

雨夜带刀的开源项目

easy.js
一个简洁的 JavaScript 类库,集成了模块加载器,同时也有包含了常见的的组件库,可访问项目网站
seed
符合 AMD 规范的 JavaScript 模块加载器。
ecope
从 easy.js 组件库中移值过来的基于 jQuery 的组件库,简单实用,API 风格统一。
第 1 页,共 17 页12345...10...最旧 »