原生JS开发手机端H5项目总结（FamilyChallenge）手机开发「原生JS开发手机端H5项目总结（FamilyChallenge）」

1. （操作dom）
2. （播放动效）
3. （资源预加载）
4. （h5跳转微信小程序）
5. （动画插件）
6. （生成二维码）
7. （用于移动端调试）
8. （css动画）
9. (css 初始化文件)
10. VSCode插件 (移动端适配)

1. – lottie所需动效

2. – 存放点击音效和背景音乐等

3. – 存放所需字体

4. – 存放图片

5. – 样式文件 包括animate.min.css

6. – 脚本文件
   （1） – 自己定义的文件

   • – 主js文件
   • – lottie动效代码
   • – preloadjs 所需代码
   • – 接口方法 和 接口地址对象

   （2） – 引入的js插件

7. – 入口文件（类似单页应用）

目的：便于维护、升级和优化

（1）标签内引入css 和配置meta

（2） 内为了清楚的看清文档结构 需要每个模块之间要有空行，并且每个模块都要有注释，模块内的代码功能不同也要注释并设置空行。

（3） 后引入脚本文件

（1） 每个页面或弹层 都用注释分割；
（2） 公共样式在前 模块样式在后 （或者拆分为两个css文件）；
（3）样式表之间要有空行；
（4）

（1）每个方法前都要有注释；
（2）方法体之间要有空行；
（3）方法内部 涉及到方法调用的代码所在行 上下要有空行；
（4）循环语句、条件语句上下要有空行；
（5） 比较复杂的代码要注释；
（6）return 语句与上一行代码之间要有空行；

1. 和 操作系统 调试 ios上经常会出现问题，所以代码在运行时要保证
2. 
   我们要把播放音效代码放入到（事件队列）中；如果一个点击按钮要同时播放两个音效 那要把其中一个音效放入setTimeout中还可以设置延时; 避免出现不可控问题。

3. 
   
   （1）通过css设置一个背景 然后添加固定定位（这是大致的思路 围绕着固定定位即可）

（2）如果想让用户禁止下拉 需要写 jq的和 监听事件判断是否是下拉状态 如果是则判断当前dom的属性是否等于0 等于0则return false; 。

4. 
   要做资源的压缩（ 压缩png图片）
5. 
   注意预加载资源的url 要根据当前项目环境切换（容易遗忘）。
6. 
   （1）接口数据缓存：有的接口数据我们只需要调用一次，比如：获取用户的奖品接口，所以在调用接口之前要先判断缓存中是否有数据，如果有则直接使用缓存的数据，没有或者你能够判断出数据变化了 则可以清空缓存再次请求接口数据。
   （2）防抖：用户频繁点击一个按钮，我们可以做简单防抖：设置一个对象有多个属性，每个属性控制不同方法的防抖，进入方法时

• a. 判断当前方法是否在执行 是则直接return；
• b. 设置防抖；
• c. 当接口调用完毕在回调方法中设置防抖属性为true 恢复方法可执行；

吐鲁番版权声明：本网信息来自于互联网，目的在于传递更多信息，并不代表本网赞同其观点。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，并请自行核实相关内容。本站不承担此类作品侵权行为的直接责任及连带责任。如若本网有任何内容侵犯您的权益，请及时联系我们，本站将会在24小时内处理完毕，E-mail：xinmeigg88@163.com