Boilerplate

javascript

Boilerplate

1. 3g-boilerplate
2. angular-boilerplate
3. react-boilerplate

TODOS

1. Upload files to sftp by gulp
2. Redesign 3g & angular
3. Optimize react with Reduxjs

Workflow

1. 采用npm作为包管理工具
2. 使用browerify和webpack进行打包
3. 对可重用模块进行单元测试
4. 尽量不适用原生javascript，而使用typeScript、coffeeScript、ES2015。

Newsapp-react

新闻客户端react版接口

客户端开发注意要点

• viewport 采用width=750
• 登录相关的接口可在PC上模拟(COOKIE中存在S_INFO)
• 跨域的请求处理
  
  • 启动浏览器时增加参数 --disable-web-security
  • 安装跨域插件
  • 使用fiddler代理
  • 后端增加CORS支持

ES2015

• 学习资料
• babeljs.io

ES6要点

1. 块级作用于

2. 变量结构

   let {a, b} = {foo: foo, bar: bar}
   let [a, b, c]  = [1, 2, 3]
   return {a, b}

3. 原始数据类型的方法扩展，String Array Object

   let a = `${a} whatever ${b}`
   Array.from();
   Object.assign();
   let specialMethod = Symbol();
   let obj = {
     [specialMethod]: function(){
         .....
     }
   }
   Object.observe() Object.unobserve()

4. 新增的原始类型

   • Symbol 每个Symbol的值都不相等
   • Proxy 在目标对象之前，增加一层拦截

5. 函数

   • 参数默认值 function Point(x=0, y=0){...}
   • rest参数 function add(...value){}
   • Arrow Function [1, 2, 3].map(x => x * x)
6. SET && MAP
7. Iterator && for of
8. Generator && Promise

9. Class && Module

   class Person{
       constructor(name, age){
           this.name = name;
           this.age = age;
       }
       say(words){
           console.log(`${this.name} said ${words}`)
       }
   }
   class Student extends Person{
       constructor(name, age, grade){
           super(name, age);
           this.grade = grade
       }
   }
   // a.js
   export var str = 'hello'
   export function func(){}
   export class Person{}
   //b.js
   import {str, func, Person as P} from './a'
   // c.js
   export default class Student{}
   // d.js
   import Student from './c'