Sun
# 班会第 24 期 - 技术 - [backend-api](https://github.com/ufologist/backend-api) > 一个用于与后端交互的数据层, 即统一地调用后端接口. > > 为什么需要统一调用后端接口 > > 这样做的好处在于对前端架构做初略的(MVC)分层: 展现层(View) -> 业务层(Controller) -> 数据层(Model) > > 展现层只需要知道自己要做什么事(这个所谓的事就是业务了)就可以了, 业务层来处理这个事情涉及到的业务流程. 例如展现层做注册, 那么展现层只要调用业务层提供的注册业务就好了, 不需要关心注册涉及到的业务逻辑. 这样各层做的事情就会职责分明,...
- 技术 - jQuery 数字渐增动画 > ``` javascript > // 借用 jQuery 让自定义属性有动画, 可以实现一个简单的数字递增动画 > // as well as custom properties, can be animated. > var $el = $('.js-anim-num'); >...
- 技术 - [puer-mock](https://github.com/ufologist/puer-mock) > 一个简单易用 mock server, 为你提供可配置的接口和随机数据. > > [为什么你需要一个 mock server](https://github.com/ufologist/puer-mock/blob/master/why-your-need-a-mock-server.md) - [聊一聊移动web分辨率的那些事儿](https://segmentfault.com/a/1190000005884985) > 苹果发布ios的时候，肯定会想到成千上万的PC网页，没法在自己的IOS系统上运行起来时间多么蛋疼的事情啊。但是呢，这些网页都是按照PC屏幕的大小写的呀。 > > 动不动就出现两个500多px的宽的div并列。这在当时640*960屏幕大小的iphone4上显示的话，简直是毁灭性的。(会各种折行，样式错乱)，那么细致如苹果肯定不允许这种事情发生。 > > 于是苹果公司的攻城狮们想出了一个歪招，那就是告诉浏览器，“你在一个980宽的大屏幕下在渲染呢”，**浏览器就按照了980宽的方式，渲染出来页面图像**。可是到了浏览器这边，其实是拿到了一张渲染好的、比屏幕大的网页图像。此时，**苹果再把这张图像，缩放一下，缩为屏幕大小**。(我们平时也经常这样干，把一张大图片用双指放大缩小) > > **可以更改的布局宽度: viewport** > >...
班会主题: 那些年我们手机上用过的 App --- - 技术 - [有用的 CSS 代码片段](https://segmentfault.com/a/1190000002773955) > - 垂直对齐 > - 伸展一个元素到窗口高度 > - 基于文件格式使用不同的样式 > - 创建跨浏览器的图像灰度 > - 背景渐变动画 > - CSS：表格列宽自适用 > -...
- 技术 - [Load Awesome](https://github.com/danielcardoso/load-awesome) > An awesome collection of — Pure CSS — Loaders and Spinners - [HTML5 跨域通信 API - window.postMessage()](https://monine.github.io/2016/08/06/postMessage/) - [跨域页面消息通信的坑与填](https://www.douban.com/note/574973171/) - [逐渐去掌握 React（作为一名 Angular 开发者）](https://segmentfault.com/a/1190000006032997)...
结合我自己的经验和体会, 总结了一些大方向上的指导意见, 主要是考虑一个页面做好后, 要方便以后的开发和维护工作 - 命名 主要是文件命名, class 命名, 变量命名, 可以先**根据他们的职责, 取中文名, 再翻译成英文** 例如: 图片的取名最好不要用什么 `img_09.png`, 应该取个更有意义的名字, 不然以后连自己都不知道这个图片是用来做什么的了 class 命名最好也不要用什么 `div1 div2`, 这样的名字太萌了, 会让人懵掉的 - 模块 应该将页面多个部分的样式分别写在多个 css 中, js...
# 班会第 18 期 - 技术 - [解读ThoughtWorks技术雷达](http://www.infoq.com/cn/articles/interpretation-of-thoughtworks-technology-radar) > ThoughtWorks在每年都会出品两期[技术雷达](https://www.thoughtworks.com/radar)，这是一份关于技术趋势的报告，它比起一些我们能在市面上见到的其他各种技术行情和预测报告，更加具体，更具可操作性，因为它不仅涉及到新技术大趋势，比如云平台和大数据，更有细致到类库和工具的推介和评论，从而更容易落地。 > > 技术雷达在四个象限（技术，工具，平台，语言和框架）中, 不管你是个人开发者，对于新工具和技术有执着的追求，寄希望于从新工具和技术那里获取改进每日工作的灵感，或者你是技术领导者需要针对自己的系统做技术选型，以及对未来技术趋势的把握，技术雷达都会是一份很好的参考。 > - 手持一份技术雷达，更新技能和工具 > - 停止对不推荐技术的过度投资 > - 看技术演进动态 - [两端对齐](http://www.cnblogs.com/coco1s/p/5667853.html) > [别想多了，只不过是两端对齐而已](http://mp.weixin.qq.com/s?__biz=MzI1MTA2MDcyOQ==&mid=2649567067&idx=1&sn=8c9602c305026c55f412fe3d398cbf58&scene=0#wechat_redirect) > > ...
- 技术 - [javascript实用代码片段](http://brizer.github.io/2016/05/02/javascript%E5%AE%9E%E7%94%A8%E4%BB%A3%E7%A0%81%E7%89%87%E6%AE%B5/) > - 元素是否位于当前视窗 > - 转义 > - 按字节截取字符串 > - 删除数组中指定值的项 > - for循环简写 > - 构造函数 > - 面向模块 > - 单例模式 > -...
- 技术 - [node-website-scraper](https://github.com/s0ph1e/node-website-scraper) > Download website to a local directory (including all css, images, js, etc.), You can try it in [demo app](https://scraper.nepochataya.pp.ua/) > > ``` javascript > var...
- 技术 - [JavaScript 被忽视的细节](http://www.barretlee.com/blog/2016/04/18/javascript-detail/) > ``` javascript > 1234567890..toLocaleString(); // 1,234,567,890 > 1234567890..toLocaleString('zh-Hans-CN-u-nu-hanidec', {useGrouping: false}); // 一二三四五六七八九〇 > new Date().toLocaleString(); // 2016/6/20 下午1:30:53 > ``` > > JSON.stringify 接受三个参数，很多人都知道第三个参数可以设置空白字符来美化输出，但是你可能不知道第二个参数的作用，它为...