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

旧城等待， 2021-07-25 00:18 376阅读 0赞

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70][]

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 1][]

**三 借鉴一下别人的代码**

1 找到借鉴点

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 2][]

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][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文档中，观察效果如下

![2020050408515529.png][]

**四 head中可以学到什么**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 3][]

**五 从source中可以学到什么**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 4][]

**六 格式化功能**

1 格式化前

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 5][]

2 格式化后

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 6][]

**七 小结**

1 Chrome的Elements里查看DOM结构。

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70]: /images/20210724/4bce6e4d216841a68ae0b76a180eceb1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20200504085013726.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200504085047249.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw==,size_16,color_FFFFFF,t_70
[http_tool.chinaz.com_Tools_jsformat.aspx]: http://tool.chinaz.com/Tools/jsformat.aspx
[2020050408515529.png]: https://img-blog.csdnimg.cn/2020050408515529.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200504085210732.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200504085234738.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/2020050408525663.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/20200504085316564.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NoZW5ncWl1bWluZw==,size_16,color_FFFFFF,t_70