xieyu33333 (xieyu)

iToolkit，推荐我们自己做的一套前端组件

xieyu33333 — Wed, 02 Mar 2016 14:47:28 +0800

现在前端界最火的框架非 React 莫属，很多公司和开发者等都推出了基于 React 开发的 UI 组件，比如蚂蚁金服的 ant.design，百度 FEX 的 FIT, AmazeUI 的AmazeUI React, 等等。

这些无疑都是非常优秀的作品，很多也都经受了生产环境的考验，但是它们都有一个问题，即都只适用于基于 React 框架的项目，但实际的情况却往往和社区的流行风潮存在差距，很多项目限于学习成本，技术方案继承性成本等角度考虑，或者一些历史项目，它们没有应用 React 技术方案。

针对这样的情况，我们开发了 iToolkit 系列组件，主要针对各种后台管理的场景，可以适用于任何技术方案，无论项目上使用 Angular 还是 React，亦或传统的 jQuery 方案，iToolkit 都可以加入使用，虽然我们集成了很多的功能，但体积非常 mini，目前只有不到 50KB。就跟一个过去一个单功能的插件差不多大。

由于我们在样式上没有过多定制，且严格区分了命名空间，不会和 Bootstrap 等流行样式框架冲突，所以可以放心配合使用。即使对于老项目，也可以即插即用。

当前版本支持分页、树结构、多选框、模态框、表单提交和验证、模板、轮播、文件上传、富文本等常用组件，基本没有跟 Bootstrap 插件重叠，方便配合使用，后续我们还会继续丰富内容。

Github 地址
 官方网站

目前我们已经在一些内部项目上进行了使用，不过既然是开源项目，也需要经受各种不同使用场景的考验，希望大家可以试用一下，给出一些使用意见，也欢迎大家提交 issues 和 pull request~

[北京] 百度流程信息管理部招聘前端开发工程师 (15~30K)

xieyu33333 — Fri, 22 May 2015 19:01:11 +0800

职位简介

招聘人数：4 名。公司比较出名，我就不介绍了，主要介绍一下部门的情况吧。流程信息管理部前端团队主要是针对公司内网、管理系统、人力、财务、大数据统计、IM 工具等进行支持。当然，不会有像搜索、贴吧这样海量用户带来的成就感，不过对于一个前端 er 来说，你可以只考虑 IE9 以上的浏览器，同时你有机会：

构建丰富多彩的数据图表
处理复杂的工具类 web 应用
开发 Hybrid App
使用 node.js 作为中间层处理
参加内部分享和各种前端的论坛&会议

团队 Github：BEFE 团队
我们的技术产出：

轻量高效的移动端滑动解决方案iSlider
数据直接生成视图的系列组件iToolkit
基于 Angular 的 UI 解决方案yt-ui-angular
JS 的二进制转换库Bit.js

工作地点在北京，西二旗百度总部。

职位要求

有独立完成工作的能力
较好的 JavaScript&CSS 基础
有任意一种前端 MVVM/MVC 框架的使用经验
1 年以上前端开发经验

加分项：

有 server 端开发经验
有移动端页面的开发经验
有自己维护的 github 项目

联系方式

简历请发送到：xieyu03@baidu.com

iSlider—可能是最流畅的移动端滑动组件

xieyu33333 — Wed, 05 Nov 2014 23:38:47 +0800

iSlider 是一个专为移动端设计的滑动组件，项目地址：https://github.com/BE-FE/iSlider

iSlider 是我参与的第二个比较正式的开源项目，主要编写了里面的动画部分，滚动图效果在 PC 上早已是个小儿科的问题，也有很多成熟的库可以用。刚听说这个项目的时候，我也觉得有点重复造轮子的感觉，不过后来听了作者的代码分享，感觉这个项目还是非常有价值的，最终我也加入到了代码贡献者的行列中了：

应用场景丰富，在 PC 下，轮播图只是整个网站中的一个小组件，有时甚至可有可无，但是移动端往往会在页面的主要展示上采用滑动效果，尤其是微信深入大家的生活之后更是如此。
DOM 元素最小化，一般的轮播图都是有几幅图片，就会在页面中添加几个图片，可能还要包括外层的链接、容器等元素，而目前 iSlider 无论需要多少图片，在页面中永远不超过 3 个<li>容器，这在移动端是非常有意义的，不会出现越滚越卡的情况了。
小而美，压缩后只有 2kb，不依赖任何库或是框架，只针对移动端设计，滑动效果高效流畅。
功能强大，目前包括以下功能： 1. 图片和dom 两种类型滑动，图片的类型很适合读图类的app，dom类型则可以根据需要配置成各式各样的webapp 2. 自定义的事件回调，你可以在滑动中，滑动结束，或是滑动开始绑定自己的事件回调 3. 可配置的滑动动画，在获得高性能的同时，你仍然可以指定一些特殊的高级的动画效果来完成你的app，iSlider 提供3d，flip，depth等动画方式来丰富你的滑动效果。 4. iSlider 会帮你处理好屏幕旋转事件，你只要考虑的是，屏幕旋转后，你的dom 或是图片改如何显示。 5. iSlider 还有一些小功能，比如滑动边界递减，自动滑动，垂直水平滑动可配置.
后续我们计划增加手势缩放图片、页面内部 tab 切换等更强大的功能，希望有更多的人来使用，也欢迎大家提交 issues 和 pull request~争取打造最好用的移动端滑动组件。

才发现 36 氪使用 Ruby China 二次开发的呀

xieyu33333 — Fri, 22 Aug 2014 13:29:01 +0800

Angular 的 SEO 问题

xieyu33333 — Sat, 09 Nov 2013 16:48:13 +0800

之前和朋友们讨论过 Angular 的 SEO 的问题，后来在测试一个叫 angular-scafford 的 gem 的时候发现他的这个机制很有趣，不知道能否解决这个问题。后面的内容从我的 blog 直接搬运了，原地址 http://textlearn.org/blogs/96。
前提之一是服务端渲染的页面 layout 和 Angular 的 index 页面通用，例如：

<html>
  <head>
    <link href="http://test.css" media="screen" rel="stylesheet">
    <script type="text/javascript"  src="angular.js"></script>
    <script type="text/javascript"  src="angular-resource.js"></script>
  <head>
  <body>
    <div ng-view>
       .................
   </div>
  <body>
</html> 
/*服务端的模板和Angular的模板都加载在省略号的地方。*/

还需要的是在 angular 的路由中添加 $locationProvider.html5Mode true，来去除#符号，让 Angular 的 route 和服务端的 route 能够对应起来。

然后我们就可以正常编写服务端和 angular 的代码，当一个客户端 http 请求发送过来时，我们会返回给他服务端渲染的代码。加载页面的同时，angular-resource 这个插件会向服务端再发送一条 content-type=json 的请求。

一旦获取了 json 数据，angular 就开始执行代码，将......处原先将要加载的服务端渲染文档替换成 angular 生成的内容 (前提是前面提到的服务端和 angular 共用同一个 layout)。此时我们查看网页源代码，会发现只有一组 json 数据。因为查看源代码显示的是最近的一次请求得到的数据。

而如果刷新查看源代码这一页，由于查看源代码页只是发送一条对 html 的请求，而并不会执行 html 中的 js，因此刷新后就可以得到服务端渲染出的页面了。

也就是说，我们看到的内容和 js 能否执行是有关系的。如果 angular.js 能够执行，我们将看到 angular 的内容，整个网站相当于单页应用，除了刷新和第一次请求外，客户端和服务端的交互都是通过 json 来实现，如果不能，则看到的是服务端渲染的内容。

这样在兼容性方面也可以做到 IE9 以下用户走服务端渲染的页面，其它用户则走 angular 的逻辑。

如果是简单的 curl 地址，或者一些无法执行 js 的网络爬虫，无疑会抓取到服务端渲染的内容。不过对于百度和 Google 的抓取机制我就不清楚了，无法确定能否收录。