如何学习别人的APP前端代码

一 移动端和网页版调试切换

二 DOM结构中网页元素和代码的对应关系

三 借鉴一下别人的代码

1 找到借鉴点

2 将拷贝出的内容临时保存到一个文件中

<div class="course-path-container">                <a target="_blank" href="//coding.imooc.com/learningpath/route?mc_marking=e1d9f7b53647cb62eaf73388bb97f0f4&mc_channel=syxxlx&pathId=31">                    <div class="course-banner">                        <div class="img-up" style="background-image: url(//img3.mukewang.com/szimg/5da9a00d09eeecba01400140-140-140.png);"></div>                        <div class="img-mid" style="background-image: url(//img3.mukewang.com/szimg/5da9a00d09eeecba01400140-140-140.png);"></div>                        <div class="img-down" style="background-image: url(//img3.mukewang.com/szimg/5da9a00d09eeecba01400140-140-140.png);"></div>                    </div>                    <h4>微信小程序从0基础到精通</h4>                    <p>一站式掌握小程序生态，打造站内零基础精通小程序的最佳路径</p>                    <div class="course-path-info">                        <span>4步骤 · 5门课</span><span><i class="imv2-star2"></i>21924人收藏</span>                    </div>                </a>            </div>

3 格式化一下代码

格式化网站： http://tool.chinaz.com/Tools/jsformat.aspx

<div class="course-path-container">
  <a target="_blank" href="//coding.imooc.com/learningpath/route?mc_marking=e1d9f7b53647cb62eaf73388bb97f0f4&mc_channel=syxxlx&pathId=31">
    <div class="course-banner">
      <div class="img-up" style="background-image: url(//img3.mukewang.com/szimg/5da9a00d09eeecba01400140-140-140.png);"></div>
      <div class="img-mid" style="background-image: url(//img3.mukewang.com/szimg/5da9a00d09eeecba01400140-140-140.png);"></div>
      <div class="img-down" style="background-image: url(//img3.mukewang.com/szimg/5da9a00d09eeecba01400140-140-140.png);"></div>
    </div>
    <h4>微信小程序从0基础到精通</h4>
    <p>一站式掌握小程序生态，打造站内零基础精通小程序的最佳路径</p>
    <div class="course-path-info">
      <span>4步骤 · 5门课</span>
      <span>
        <i class="imv2-star2"></i>21924人收藏</span>
    </div>
  </a>
</div>

4 将上面这段代码拷贝到一个HTML文档中，观察效果如下

四 head中可以学到什么

五 从source中可以学到什么

六 格式化功能

1 格式化前

2 格式化后

七 小结

1 Chrome的Elements里查看DOM结构。

2 Chrome的Elements里查 Head，body里面看js/css引用，搜索相应的js库学习。

3 查看source和network中的js，使用反编译和断点进行调试。