1.Promise 实现红绿灯逻辑

2.

开发流程
1.尽早从设计师获取 交互稿、设计稿，了解业务需求，业务流程；以便尽早开发，免得时间不充裕；
2.搭建webpack构建工具(可以在github下载别人搭建好的，再稍加改之)，以便打包静态资源；

3.注册Git库，（外包员工没权限，需申请）拉取Git库 在库里面编写代码加调试。

4.在相应的项目上编写node层逻辑，编写接口；一般是在天猫精灵官网项目上，注册路由URL....

(一定要确保diamond 前端页面与接口在同一个域，编写后端逻辑时可参考 controller文件夹下的marketing.js)。

5.开发好后把图片放到tfs cdn上，把视频和音频放到OSS上，然后把前端静态资源(CSS、JS)用def来上传到CDN把HTML放到diamond上(一定要确保diamond和前端页面在同一个域)，发布之前得改下diamond页面静态资源的src，不然获取不到。

6.申请埋点、黄金令箭(可提前申请，无需阻塞开发流程)。后台业务逻辑可以先上线避免封网。

注意事项
1.根据业务需求选择合适的翻页框架库，大多都是SPA应用

外部链接：https://www.zybuluo.com/buoge/note/966161

2.页面适配：页面适配的时候，需跟UI设计师商订设计稿尺寸，如今的尺寸跟以往有所不同 为了兼容iPhone X等大屏，尺寸都是 7501624 为主，但内容区域还是7501206,为了在小尺寸的手机容器完全展示内容；

背景图片一般采用background-size:cover，（高度别设固定值）来实现；cover值是保持图片宽高比例，有可能会有图片多余的部分被裁；contain值也是保证图片宽高比例，有可能页面两边会有留白区域；还有 “100% 100%”值 虽铺满全屏但图片质量受到影响，有被压缩或拉长不便采用；

再说说代码适配，我一般采用rem为主，当然也有很多人采用vh、vw单位，两者都行；我用rem时为了跟设计稿尺寸单位相对应，所以在里添加了

 <meta name="viewport" content="width=device-width, initial-scale=1.0,minimun-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">

同时在页面引入flexible.js 即可，flexible.js设置的font-size为100px，我在webpack里引用了webpack-px2rem-loader 插件通过配置可以将CSS里的px单位编译成rem,减少人为计算;用起来还是挺方便的；
iPhone X的适配：https://aotu.io/notes/2017/11/27/iphonex/index.html

3.开发调试：

在不知道调试方法的时候，你要把项目发布预发甚至上线，还必须用真机调试 无论是人力物力还有时间都特别消耗；所以知道些调试方法是必需的：

1.打开本地服务器，保证手机与PC连接同一个内网，再用手机连接PC端的IP地址二维码扫描，手机可以看到效果;

2.vconsole 通过它可以检测JS 逻辑报错；

3.服务器代理 webpack-dev-server自带 很方便；

4.mock数据 我用的是webpack-api-mocker 还有利用charles 程序抓包 域名映射 等。

5..可以用磨刀石：http://mds.alibaba-inc.com/ 真机测试，无法测试IOS的，只能测试安卓；

6.用Xcode 模拟IOS设备

7.通过数据线将手机与电脑连接起来打开谷歌 Safari浏览器调试： https://developers.google.com/web/tools/chrome-devtools/remote-debugging/?utm_source=dcc&utm_medium=redirect&utm_campaign=2016q3

4.运用后端语言模板：ejs、pug，在此我推荐art-template 性能据说最优；运用渲染模板语法 有助于渲染 代码量减少，当然你也可以用Vue、react开发。

5.分享功能实现： 分享功能无外乎在微信、钉钉、微博这几大沟通工具里实现，所以实现它至关重要。分享一篇文章：frontend9/fe9-library#22

6.video标签

1.全屏处理，

2.自动播放，

3.播放控制，

4.隐藏播放控件

全屏处理：会涉及到几个属性 webkit-playsinline playsinline 加这两个属性表示视频在浏览器窗口内全屏，而非整个屏幕全屏。

自动播放：属性：autoplay 或者通过 JS video.play(); autoplay 这个属性兼容性不是很好，在很多手机上没效果，一般用JS控制；

              微信里有WeixinJSBridgeReady事件可以利用它来实现自动播放，前提是引用微信开发者里面的weixin.min.js，其他的浏览器不行，建议引导客户点击触发。

播放控制：在移动端有一些坑需要注意，不要轻易使用媒体元素的除'ended','timeupdate'以外event事件，在不同的机子上可能有不同的情况产生。

隐藏播放控件： 大多数机型很难做到隐藏，但可以参考腾讯视频技术。
我找了篇文章大家可以好好看下，觉得讲解得很详细 https://segmentfault.com/a/1190000006857675

7.移动端的点击事件
移动端与PC端不同，click事件会有300ms延迟，交互体验的话会很差，点击的话就用touchstart、touchend事件代替 同时在里面加event.preventDefault();阻止冒泡；或者引用第三方库fastClick；click事件点击时会有灰影；解决办法：html,body{-webkit-text-size-adjust: 100%;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}

8.canvas生成图片
如果是简单的直接原生撸，如果复杂的话可以采用html2canvas 缺点是引的包过大；原生写的话注意尺寸的换算。

9.编写合适的JS语法，目前市场上对ES6、es7还不是所有兼容。所以尽量编写es5语法，否则有些手机运行时报错，比如华为。

目前所想到的就这些了，若有不足还请大家补充。
前端滚动翻页库： https://www.zybuluo.com/buoge/note/966161

web APP开发经验之谈 链接： frontend9/fe9-library#39
腾讯移动端开发：https://tgideas.qq.com/doc/frontend/spec/m/design.html

1. 减少webpack打包时间

优化loader

1. 因为babel将代码转换成字符串生成AST，再通过AST转换新代码，项目越大代码越多转换就越慢；缩小loader的文件搜索范围 在rules的loaders添加include 填写文件夹范围
2. 缓存已经编译过的代码在 loader: 'babel-loader?cacheDirectory=true'

HappyPack

1.HappyPack 可以将 Loader 的同步执行转换为并行的，这样就能充分利用系统资源来加快打包效率了
2.dllplugin 可以将特定的库提前打包然后引入，减少打包次数，当类库更新版本的时候才重新打包，并将公共文件抽离出来单独文件，同时DllReferencePlugin，将依赖文件引入项目中。
3.添加设置resolve属性，resolve.extensions、添加后缀名；resolve.alias添加别名，加快文件路径搜索；module.noParse:如果你确定一个文件下没有其他依赖，就可以使用该属性让 Webpack 不扫描该文件，这种方式对于大型的类库很有帮助。

减少打包后的文件体积

1.按需加载
2.tree shaking 删除文件为引用的代码
3.压缩js、CSS、图片，
4.抽离第三方库
5.使用Uglify插件，启动gzip
6.依赖分析，可以用webpack-bundle-analyzer插件分析打包好的模块，再考虑是否修改或替换此功能的库，或者引用外部cdn来减少打包体积以及优化性能

由于JS的number类型跟Java的double类型都是双精度浮点数的，所以计算是 比如： 0.1+0.2 === 0.3 会返回false，要比较的话可以用number. EPSILON属性验证： Math.abs(0.1+0.2) - 0.3 <= Number.EPSILON 来除去误差， number.EPSILON是 JS中1 与大于1的最小浮点数的差值。

1.数据类型
2.事件循环

3.双等于号的判断

1. 先判断两边是否为NaN，若是则直接返回false；
2. 判断两边是否为 undefined 和 null ，若是则 返回true；
3. 当两方是字符串 和 boolean值相比较时，两方都转换成数字相比较；
   4.当两方为字符串时，比较字符串的值；
   5.当两方为对象、数组时，先将对象数组装换为基本类型(通过valueOf、toString)再比较，[] 空数组双等于时会转换为 0

4.Git 操作指令

   git branch -a 查看分支

   Git merge —no-ff dev   把Dev分支合并到该支
   Git branch -d dev 删除本地分支 dev
   git push origin —delete dev 删除远程分支


 Git branch -m dev1 dev2 更改分支名 dev1改成dev2
Git push origin dev 把dev推向远程分支
Git remote add origin http://gitlab.alibaba-inc.com/ai-fe/boys_voice_vote.git 添加运程仓库