Kuitos
## Angular1.x + ES6 开发风格指南 阅读本文之前，请确保自己已经读过民工叔的这篇blog [ Angular 1.x和ES6的结合](https://github.com/xufei/blog/issues/29) 大概年初开始在我的忽悠下我厂启动了Angular1.x + ES6的切换准备工作，第一个试点项目是公司内部的[组件库](https://github.com/ShuyunFF2E/ccms-components)(另有[seed项目](https://github.com/kuitos/angular-es6-seed))。目前已经实施了三个多月，期间也包括一些其它新开产品的试点。中间也经历的一些痛苦及反复(组件库代码经历过几次调整，现在还在重构ing)，总结了一些经验分享给大家。(实际上民工叔的文章中提到了大部分实践指南，我这里尝试作一定整理及补充，包括一些自己的思考及解决方案) 开始之前务必再次明确一件事情，就是我们使用ES6来开发Angular1.x的目的。总结一下大概三点： 1. 框架的选型在这几年是很头痛的事情，你无法肯定某个框架会是终极解决方案。但是有一点毫无疑问，就是使用ES6来写业务代码是势在必行的。 2. 我们可以借助ES6的一些新的语法特性，更清晰的划分我们应用的层级及结构。典型的就是module跟class语法。 3. 同样的，在ES6语法的帮助下，我们能较容易的将数据层跟业务模型层实现成框架无关的，这能有效的提升整个应用的可移植性及演化能力。从另一方面讲，数据层跟业务模型能脱离view独立测试，是一个纯数据驱动的web应用应该具备的基本素质。 其中第1点是技术投资需要，第2、3点是架构需要。 我们先来看看要达到这些要求，具体要如何一步步实现。 #### Module 在ES6 module的帮助下，ng的模块机制就变成了纯粹的迎合框架的语法了。 实践准则就是： 1. 各业务层及数据层代码理想状态下应该看不出框架痕迹。 2. ng...
# 老树发新芽—使用 mobx 加速你的 AngularJS 应用 1月底的时候，Angular 官方博客发布了一则消息： > **AngularJS** is planning one more significant release, version 1.7, and on July 1, 2018 it will enter a 3 year Long...
## 前端优化之js资源加载策略 原文写于 2014-08-13 阅读这篇blog之前，请先看下这本书：[高性能网站建设进阶指南](http://www.amazon.cn/%E9%AB%98%E6%80%A7%E8%83%BD%E7%BD%91%E7%AB%99%E5%BB%BA%E8%AE%BE%E8%BF%9B%E9%98%B6%E6%8C%87%E5%8D%97-Web%E5%BC%80%E5%8F%91%E8%80%85%E6%80%A7%E8%83%BD%E4%BC%98%E5%8C%96%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5-%E6%A1%91%E5%BE%B7%E6%96%AF/dp/B003FO0MEC)，里面详细的讲解了现今流行的几种异步脚本加载方案（不过里面一些结论不能盲目相信，实践之前请手动验证一下，毕竟浏览器实现日新月异） 不过还是先简单介绍下两种最常用的动态加载js资源的方案： - document.write方式 ``` js function outerHTML (node) { // if IE, Chrome take the internal method otherwise build one return node.outerHTML || (function (n)...
# ES规范解读之赋值操作符&属性访问器 事情起源于某天某妹子同事在看angular文档中关于Scope的说明[Understanding Scopes(原文)](https://github.com/angular/angular.js/wiki/Understanding-Scopes) [理解angular作用域(译文)](https://github.com/zensh/jsgen/blob/master/static/dist/md/UnderstandingScopes.md)时，对于文章中的例子有一点不理解，那个例子抽离细节之后大致是这样的： ``` js // 一个标准的构造函数 function Scope(){} Scope.prototype.array = [1,2,3]; Scope.prototype.string = 'Scope'; // 生成Scope实例 var scopeInstance = new Scope(); ``` **当我们访问scopeInstance上的属性时，假如scopeInstance上不存在该属性，则js解释器会从原型链上一层层往上找，直到找到有该属性，否则返回undefined。** ``` js // get对象上某一属性时会触发原型链查找...
# ES规范解读之自增操作符 几个月前，不知道什么缘由跟xx同学讨论了起js里自增操作符(i++)的问题，现将前因后果整理出来，传于世人😂 事情起源于这样一段代码 ``` js var i = 0; i = i++; console.log(i); ``` 来，都来说说答案是啥？ 结果是`0` 换一种形式，或许大家不会有多少疑问 ``` js var i = 0; var a = i++; console.log(a); //...
## SpringMVC注解之@ResponseBody 原文写于 2013-04-18 web项目中会大量用到ajax请求实现前后台交互，以前处理后台返回给前台的集合数据的方式是这样的： ``` java @RequestMapping("loadConfigUsers") public void loadConfigUsers(String domain, HttpServletResponse response) { response.setCharacterEncoding("UTF-8"); response.setContentType("text/html;charset=utf-8"); List list = userConfigService.loadConfigUsers(domain); PrintWriter out = null; try { out = response.getWriter();...
Web语义化标准解读
15年年末写了篇关于[BEM方法论(实践上内容并不是原BEM)](https://github.com/kuitos/kuitos.github.io/issues/30)的文章，文末给自己挖了个坑说要聊聊Web语义化，跳票至今😂。16年第一篇用来填坑好了！ ### 什么是语义化 > The Semantic Web provides a common framework that allows data to be shared and reused across application, enterprise, and community boundaries. --Wikipedia 语义化Web具备让数据跨终端共享／重用的能力。 > 对于HTML体系而言，Web语义化是指使用语义恰当的标签，使页面有良好的结构，页面元素有含义，能够让人和机器都容易理解。 **语义化说起来好像都懂，但是实际情况并不是那么乐观。**...
## Javascript单线程及定时器原理分析（1） 原文写于 2014-07-28 **Talk is cheap, code first.** 说出代码运行结果 ``` js var i,a=0; setTimeout(function(){ console.log("timeout"); }, 1000); for(i=0;i timeout 那么如果我们把timeout时间设为 0 呢，就像这样 ``` js // code1 setTimeout(function(){ console.log("timeout"); },...
## 组件设计之BEM法则 ### BEM定义 > Block Element Modifier is a methodology, that helps you to achieve reusable components and code sharing in the front-end ### BEM概念 原义:一个css编写规范 **B(block): 独立的页面及逻辑单元，我们通常意义上的component E(element):...
2015前端生态发展回顾
引用苏宁前端架构师(@xufei)的一个总结作为开篇 > #### 编程技术及生态发展的三个阶段 > - 最初的时候人们忙着补全各种API，代表着他们拥有的东西还很匮乏，需要在语言跟基础设施上继续完善 > - 然后就开始各种模式，标志他们做的东西逐渐变大变复杂，需要更好的组织了 > - 然后就是各类分层MVC，MVP，MVVM之类，可视化开发，自动化测试，团队协同系统等等，说明重视生产效率了，也就是所谓工程化 处在2015年这个时间段来看，前端生态已经进入了第三阶段。看上去好像已经走的挺远了，实则不然。如果再用人类历史上的三次工业革命来类比，前端发展其实不过刚刚迈入了蒸汽机时代，开始逐步用工具来替代过往相当一部分的人肉作业，但是离电气时代的自动化流水线作业还有很长一段路要走。回顾一下2015年前端的生态发展，我大致整理了几个我觉得比较有历史意义的事件。 按时间顺序： 1. 年初React Native的发布，引领React正式走上历史舞台。 2. 3月angular2.0第一个预览版发布 3. 5月 http/2.0标准正式发布，同月 iojs 与 nodejs合并。 4. 6月 ES6 和...