代码拉取完成，页面将自动刷新
<?xml version="1.0" encoding="utf-8"?>
<feed xmlns="http://www.w3.org/2005/Atom">
<title>小黑铃铛</title>
<subtitle>把每句"我不会"都改成"我可以学"</subtitle>
<link href="https://huangwanling.gitee.io/ayla/atom.xml" rel="self"/>
<link href="https://huangwanling.gitee.io/ayla/"/>
<updated>2022-03-12T14:50:11.049Z</updated>
<id>https://huangwanling.gitee.io/ayla/</id>
<author>
<name>Ayla</name>
</author>
<generator uri="https://hexo.io/">Hexo</generator>
<entry>
<title>js版2048小游戏</title>
<link href="https://huangwanling.gitee.io/ayla/2022/03/12/js%E7%89%882048%E5%B0%8F%E6%B8%B8%E6%88%8F/"/>
<id>https://huangwanling.gitee.io/ayla/2022/03/12/js%E7%89%882048%E5%B0%8F%E6%B8%B8%E6%88%8F/</id>
<published>2022-03-12T09:48:35.000Z</published>
<updated>2022-03-12T14:50:11.049Z</updated>
<content type="html"><![CDATA[<h5 id="花了两天时间用JS做了一个2048小游戏，大体上不难实现，把每一步移动的逻辑理清即可，代码托管在本人的github账号上-https-gitee-com-huangwanling-js2048-，代码实现如下，有详细注释以便日后自己复习"><a href="#花了两天时间用JS做了一个2048小游戏，大体上不难实现，把每一步移动的逻辑理清即可，代码托管在本人的github账号上-https-gitee-com-huangwanling-js2048-，代码实现如下，有详细注释以便日后自己复习" class="headerlink" title="花了两天时间用JS做了一个2048小游戏，大体上不难实现，把每一步移动的逻辑理清即可，代码托管在本人的github账号上 https://gitee.com/huangwanling/js2048 ，代码实现如下，有详细注释以便日后自己复习"></a>花了两天时间用JS做了一个2048小游戏，大体上不难实现，把每一步移动的逻辑理清即可，代码托管在本人的github账号上 <a href="https://gitee.com/huangwanling/js2048">https://gitee.com/huangwanling/js2048</a> ，代码实现如下，有详细注释以便日后自己复习</h5><span id="more"></span><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><span class="line">//html页面代码</span><br><span class="line"><body></span><br><span class="line"> <p>2048小游戏</p></span><br><span class="line"> <!-- 存储分数 --></span><br><span class="line"> <div class="star">score:<span id="score01">0</span></div></span><br><span class="line"> <div class="big"></span><br><span class="line"> <!-- //第一行 --></span><br><span class="line"> <div class="cell " id="c00"></div></span><br><span class="line"> <div class="cell" id="c01"></div></span><br><span class="line"> <div class="cell" id="c02"></div></span><br><span class="line"> <div class="cell" id="c03"></div></span><br><span class="line"> <!-- //第二行 --></span><br><span class="line"> <div class="cell" id="c10"></div></span><br><span class="line"> <div class="cell" id="c11"></div></span><br><span class="line"> <div class="cell" id="c12"></div></span><br><span class="line"> <div class="cell" id="c13"></div></span><br><span class="line"> <!-- //第三行 --></span><br><span class="line"> <div class="cell" id="c20"></div></span><br><span class="line"> <div class="cell" id="c21"></div></span><br><span class="line"> <div class="cell" id="c22"></div></span><br><span class="line"> <div class="cell" id="c23"></div></span><br><span class="line"> <!-- //第四行 --></span><br><span class="line"> <div class="cell" id="c30"></div></span><br><span class="line"> <div class="cell" id="c31"></div></span><br><span class="line"> <div class="cell" id="c32"></div></span><br><span class="line"> <div class="cell" id="c33"></div></span><br><span class="line"> </div></span><br><span class="line"> <div class="aa" id="gameover"></span><br><span class="line"> <div class="over"></span><br><span class="line"> Game Over!!</span><br><span class="line"> <br>Score: <span id="score02">0</span></span><br><span class="line"> <br><br></span><br><span class="line"> <a href="#" onclick="sta()">重新开始</a></span><br><span class="line"> </div></span><br><span class="line"> </div></span><br><span class="line"> <script src="./2048.js"></script></span><br><span class="line"></body></span><br></pre></td></tr></table></figure><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br></pre></td><td class="code"><pre><span class="line">//css样式</span><br><span class="line">*{</span><br><span class="line"> margin: 0;</span><br><span class="line"> padding: 0;</span><br><span class="line"> font-size: 30px;</span><br><span class="line"> font-weight: bold;</span><br><span class="line"> text-decoration: none;</span><br><span class="line">}</span><br><span class="line">body{</span><br><span class="line"> background-image: url(./桌面1.jpg);</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">.big{</span><br><span class="line"> width: 500px;</span><br><span class="line"> height: 500px;</span><br><span class="line"> background-color: rgb(17, 117, 134);</span><br><span class="line"> border-radius: 10px;</span><br><span class="line"> margin: auto;</span><br><span class="line">}</span><br><span class="line">p{</span><br><span class="line"> font-size: 30px;</span><br><span class="line"> text-align: center;</span><br><span class="line">}</span><br><span class="line">.star{</span><br><span class="line"> margin-top: 20px;</span><br><span class="line"> font-size: 40px;</span><br><span class="line"> width: 500px;</span><br><span class="line"> margin: auto;</span><br><span class="line">}</span><br><span class="line">.cell{</span><br><span class="line"> width: 100px;</span><br><span class="line"> height: 100px;</span><br><span class="line"> margin-top: 20px;</span><br><span class="line"> margin-left: 20px;</span><br><span class="line"> border-radius: 5px;</span><br><span class="line"> background-color: honeydew;</span><br><span class="line"> float: left;</span><br><span class="line"> /* color: whitesmoke; */</span><br><span class="line"> text-align: center;</span><br><span class="line"> line-height: 110px;</span><br><span class="line">}</span><br><span class="line">.n2{</span><br><span class="line"> background-color: #eee3da;</span><br><span class="line">}</span><br><span class="line">.n4{</span><br><span class="line"> background-color: #ede0c8;</span><br><span class="line">}</span><br><span class="line">.n8{</span><br><span class="line"> background-color: #f2b179;</span><br><span class="line">}</span><br><span class="line">.n16{</span><br><span class="line"> background-color: #f59563;</span><br><span class="line">}</span><br><span class="line">.n32{</span><br><span class="line"> background-color: #f67c5f;</span><br><span class="line">}</span><br><span class="line">.n64{</span><br><span class="line"> background-color: #f65e3b;</span><br><span class="line">}</span><br><span class="line">.n128{</span><br><span class="line"> background-color: #edcf72;</span><br><span class="line">}</span><br><span class="line">.n256{</span><br><span class="line"> background-color: #edcc61;</span><br><span class="line">}</span><br><span class="line">.n512{</span><br><span class="line"> background-color: #9c0;</span><br><span class="line">}</span><br><span class="line">.n1024{</span><br><span class="line"> background-color: #33b5e5;</span><br><span class="line">}</span><br><span class="line">.n2048{</span><br><span class="line"> background-color: #09c;</span><br><span class="line">}</span><br><span class="line">.n4096{</span><br><span class="line"> background-color: #a6c;</span><br><span class="line">}</span><br><span class="line">.n8192{</span><br><span class="line"> background-color: #93c;</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">/* 游戏结束之和出来遮罩层 */</span><br><span class="line">.aa{</span><br><span class="line"> position: absolute;</span><br><span class="line"> top: 0;</span><br><span class="line"> left: 0;</span><br><span class="line"> bottom: 0;</span><br><span class="line"> right: 0;</span><br><span class="line"> background-color: rgba(0,0,0,0.3);</span><br><span class="line"> display: none;</span><br><span class="line">}</span><br><span class="line">/* 游戏结束框 */</span><br><span class="line">.over{</span><br><span class="line"> width: 300px;</span><br><span class="line"> height: 200px;</span><br><span class="line"> background-color: white;</span><br><span class="line"> border-radius: 10px;</span><br><span class="line"> top: 50%;</span><br><span class="line"> left: 50%;</span><br><span class="line"> margin-top: -100px;</span><br><span class="line"> margin-left: -150px;</span><br><span class="line"> position: absolute;</span><br><span class="line"> text-align: center;</span><br><span class="line">}</span><br><span class="line">/* 重新开始样式 */</span><br><span class="line">.over a{</span><br><span class="line"> background-color: #9f8d77;</span><br><span class="line"> border-radius: 5px;</span><br><span class="line"> color: #fff;</span><br><span class="line"> padding: 10px;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br><span class="line">100</span><br><span class="line">101</span><br><span class="line">102</span><br><span class="line">103</span><br><span class="line">104</span><br><span class="line">105</span><br><span class="line">106</span><br><span class="line">107</span><br><span class="line">108</span><br><span class="line">109</span><br><span class="line">110</span><br><span class="line">111</span><br><span class="line">112</span><br><span class="line">113</span><br><span class="line">114</span><br><span class="line">115</span><br><span class="line">116</span><br><span class="line">117</span><br><span class="line">118</span><br><span class="line">119</span><br><span class="line">120</span><br><span class="line">121</span><br><span class="line">122</span><br><span class="line">123</span><br><span class="line">124</span><br><span class="line">125</span><br><span class="line">126</span><br><span class="line">127</span><br><span class="line">128</span><br><span class="line">129</span><br><span class="line">130</span><br><span class="line">131</span><br><span class="line">132</span><br><span class="line">133</span><br><span class="line">134</span><br><span class="line">135</span><br><span class="line">136</span><br><span class="line">137</span><br><span class="line">138</span><br><span class="line">139</span><br><span class="line">140</span><br><span class="line">141</span><br><span class="line">142</span><br><span class="line">143</span><br><span class="line">144</span><br><span class="line">145</span><br><span class="line">146</span><br><span class="line">147</span><br><span class="line">148</span><br><span class="line">149</span><br><span class="line">150</span><br><span class="line">151</span><br><span class="line">152</span><br><span class="line">153</span><br><span class="line">154</span><br><span class="line">155</span><br><span class="line">156</span><br><span class="line">157</span><br><span class="line">158</span><br><span class="line">159</span><br><span class="line">160</span><br><span class="line">161</span><br><span class="line">162</span><br><span class="line">163</span><br><span class="line">164</span><br><span class="line">165</span><br><span class="line">166</span><br><span class="line">167</span><br><span class="line">168</span><br><span class="line">169</span><br><span class="line">170</span><br><span class="line">171</span><br><span class="line">172</span><br><span class="line">173</span><br><span class="line">174</span><br><span class="line">175</span><br><span class="line">176</span><br><span class="line">177</span><br><span class="line">178</span><br><span class="line">179</span><br><span class="line">180</span><br><span class="line">181</span><br><span class="line">182</span><br><span class="line">183</span><br><span class="line">184</span><br><span class="line">185</span><br><span class="line">186</span><br><span class="line">187</span><br><span class="line">188</span><br><span class="line">189</span><br><span class="line">190</span><br><span class="line">191</span><br><span class="line">192</span><br><span class="line">193</span><br><span class="line">194</span><br><span class="line">195</span><br><span class="line">196</span><br><span class="line">197</span><br><span class="line">198</span><br><span class="line">199</span><br><span class="line">200</span><br><span class="line">201</span><br><span class="line">202</span><br><span class="line">203</span><br><span class="line">204</span><br><span class="line">205</span><br><span class="line">206</span><br><span class="line">207</span><br><span class="line">208</span><br><span class="line">209</span><br><span class="line">210</span><br><span class="line">211</span><br><span class="line">212</span><br><span class="line">213</span><br><span class="line">214</span><br><span class="line">215</span><br><span class="line">216</span><br><span class="line">217</span><br><span class="line">218</span><br><span class="line">219</span><br><span class="line">220</span><br><span class="line">221</span><br><span class="line">222</span><br><span class="line">223</span><br><span class="line">224</span><br><span class="line">225</span><br><span class="line">226</span><br><span class="line">227</span><br><span class="line">228</span><br><span class="line">229</span><br><span class="line">230</span><br><span class="line">231</span><br><span class="line">232</span><br><span class="line">233</span><br><span class="line">234</span><br><span class="line">235</span><br><span class="line">236</span><br><span class="line">237</span><br><span class="line">238</span><br><span class="line">239</span><br><span class="line">240</span><br><span class="line">241</span><br><span class="line">242</span><br><span class="line">243</span><br><span class="line">244</span><br><span class="line">245</span><br><span class="line">246</span><br><span class="line">247</span><br><span class="line">248</span><br><span class="line">249</span><br><span class="line">250</span><br><span class="line">251</span><br><span class="line">252</span><br><span class="line">253</span><br><span class="line">254</span><br><span class="line">255</span><br><span class="line">256</span><br><span class="line">257</span><br><span class="line">258</span><br><span class="line">259</span><br><span class="line">260</span><br><span class="line">261</span><br><span class="line">262</span><br><span class="line">263</span><br><span class="line">264</span><br><span class="line">265</span><br><span class="line">266</span><br><span class="line">267</span><br><span class="line">268</span><br><span class="line">269</span><br><span class="line">270</span><br><span class="line">271</span><br><span class="line">272</span><br><span class="line">273</span><br><span class="line">274</span><br><span class="line">275</span><br><span class="line">276</span><br><span class="line">277</span><br><span class="line">278</span><br><span class="line">279</span><br><span class="line">280</span><br><span class="line">281</span><br><span class="line">282</span><br><span class="line">283</span><br><span class="line">284</span><br><span class="line">285</span><br><span class="line">286</span><br><span class="line">287</span><br><span class="line">288</span><br><span class="line">289</span><br><span class="line">290</span><br><span class="line">291</span><br><span class="line">292</span><br><span class="line">293</span><br><span class="line">294</span><br><span class="line">295</span><br><span class="line">296</span><br><span class="line">297</span><br><span class="line">298</span><br><span class="line">299</span><br><span class="line">300</span><br><span class="line">301</span><br><span class="line">302</span><br><span class="line">303</span><br><span class="line">304</span><br><span class="line">305</span><br><span class="line">306</span><br><span class="line">307</span><br><span class="line">308</span><br><span class="line">309</span><br><span class="line">310</span><br><span class="line">311</span><br><span class="line">312</span><br><span class="line">313</span><br><span class="line">314</span><br></pre></td><td class="code"><pre><span class="line">//js实现代码</span><br><span class="line">//以数组的形式存方法</span><br><span class="line">//先把游戏需要的准备工作做好，最后再写上下左右的操作</span><br><span class="line">var game={</span><br><span class="line"> data:[], //存放数据</span><br><span class="line"> score:0, //分数</span><br><span class="line"> status:0, //当前状态，时刻监听，时刻需要改变，下面两个元素就是用来改变status元素</span><br><span class="line"> gameover:0, //游戏结束时为0</span><br><span class="line"> gameruning:1,//游戏开始时为1</span><br><span class="line"></span><br><span class="line"> //开始游戏的方法</span><br><span class="line"> start:function(){</span><br><span class="line"> this.score=0;//游戏开始，当前分数是0</span><br><span class="line"> this.data = [//声明数组，放到2048的格子中去</span><br><span class="line"> [0,0,0,0],</span><br><span class="line"> [0,0,0,0],</span><br><span class="line"> [0,0,0,0],</span><br><span class="line"> [0,0,0,0]</span><br><span class="line"> ]</span><br><span class="line"> </span><br><span class="line"> this.status=this.gameruning; //游戏状态等于1时，表示游戏开始</span><br><span class="line"> this.randomNum()//调用随机数方法，下面有写到</span><br><span class="line"> this.randomNum()</span><br><span class="line"> this.dataView()//调用视图</span><br><span class="line"> },</span><br><span class="line"></span><br><span class="line"> //随机数的方法</span><br><span class="line"> randomNum: function(){</span><br><span class="line"> for(;;){</span><br><span class="line"> var a = Math.floor(Math.random()*4); //4行随机数</span><br><span class="line"> var b = Math.floor(Math.random()*4); //4列随机数</span><br><span class="line"> if(this.data[a][b]==0){//格子中还有0值时生成随机数</span><br><span class="line"> var num = Math.random()>0.3 ? 2:4//因为2比4出现的几率大，所以2被我设置了7层的概率</span><br><span class="line"> </span><br><span class="line"> //前面有写过，整个2048设置为一个二维数组，所以a和b是数组的下标，num就是随机下标中的随机数</span><br><span class="line"> this.data[a][b]=num;</span><br><span class="line"> break;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line"></span><br><span class="line"> //更新视图</span><br><span class="line"> dataView:function(){</span><br><span class="line"> //用for循环从行开始遍历</span><br><span class="line"> for(var a = 0;a<4;a++){</span><br><span class="line"> //当a=0时，b从0开始遍历，a=1时，b再遍历一遍，以此类推</span><br><span class="line"> for(var b = 0; b < 4;b++){</span><br><span class="line"> //获取每个格子里出现的数字，对应的css属性</span><br><span class="line"> var div = document.getElementById("c"+a+b);</span><br><span class="line"> if(this.data[a][b] != 0){//条件判断是否为空</span><br><span class="line"> div.innerHTML = this.data[a][b];</span><br><span class="line"> div.className = "cell n" + this.data[a][b]</span><br><span class="line"> }else{</span><br><span class="line"> //为空就保持原样</span><br><span class="line"> div.innerHTML=""</span><br><span class="line"> div.className = "cell"</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> document.getElementById("score01").innerHTML = this.score;//打印分数</span><br><span class="line"> document.getElementById("score02").innerHTML = this.score;</span><br><span class="line"> //监测游戏状态</span><br><span class="line"> //因为前面已经把status=1了，所以再次判断，当status=0时，触发以下条件</span><br><span class="line"> if(this.status == this.gameover ){</span><br><span class="line"> //游戏结束时结算分数和显示遮罩层</span><br><span class="line"> document.getElementById("score02").innerHTML = this.score;</span><br><span class="line"> document.getElementById("gameover").style.display='block';</span><br><span class="line"> }else{</span><br><span class="line"> //没结束则为none</span><br><span class="line"> document.getElementById("gameover").style.display="none"</span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line"></span><br><span class="line"> //判断游戏是否结束，没有结束返回false，结束返回true</span><br><span class="line"> isgameover:function(){</span><br><span class="line"> for(var a = 0;a < 4; a++){</span><br><span class="line"> for(var b = 0;b < 4;b++){</span><br><span class="line"> //没有结束的三种情况</span><br><span class="line"></span><br><span class="line"> //1.数组中还有0</span><br><span class="line"> if(this.data[a][b]==0){</span><br><span class="line"> return false</span><br><span class="line"> }</span><br><span class="line"> //2.上下相邻有相同数字</span><br><span class="line"> if(a<3){//行的判定范围小于3，因为后面要留最后一行比较，下面代码里有加1</span><br><span class="line"> if(this.data[a][b]==this.data[a+1][b]){</span><br><span class="line"> return false;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> //3.左右相邻有相同数字</span><br><span class="line"> if(b<3){//原理同上，行和列容易在脑海里搞混的，我下面有放画图</span><br><span class="line"> if(this.data[a][b] == this.data[a][b+1]){</span><br><span class="line"> return false</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> return true;</span><br><span class="line"> },</span><br><span class="line"></span><br><span class="line">//一切就绪，以下是移动操作</span><br><span class="line"> //左移动</span><br><span class="line"> moveLeft:function(){</span><br><span class="line"> var before = String(this.data) //移动之前</span><br><span class="line"> </span><br><span class="line"> //遍历行</span><br><span class="line"> for(var a = 0;a < 4;a++){</span><br><span class="line"> this.moveLeftInRow(a);//调用下面的移动方法,a只是一个形参，随便什么都可以，只要一致</span><br><span class="line"> }</span><br><span class="line"> var after = String(this.data) //移动之后</span><br><span class="line"> if(before != after){//移动前后比较，有改变就更新视图</span><br><span class="line"> this.randomNum()</span><br><span class="line"> if(this.isgameover()){//判断游戏是否结束，是则执行结束步骤</span><br><span class="line"> this.status = this.gameover;</span><br><span class="line"> }</span><br><span class="line"> this.dataView() //更新视图</span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line"> //开始移动</span><br><span class="line"> moveLeftInRow:function(a){</span><br><span class="line"> for(var b = 0;b < 3;b++){//遍历列</span><br><span class="line"> // 声明变量储存下一个随机值，getNextInRow函数在下面</span><br><span class="line"> var nextb = this.getNextInRow(a,b); </span><br><span class="line"> //-1只是一个判断条件，你可以写任意其他，但需要与下面调用的函数照应到</span><br><span class="line"> if(nextb != -1){</span><br><span class="line"> //如果该坐标上没有数，后面新出现的数就赋值给该坐标，然后新数值的坐标归零</span><br><span class="line"> if(this.data[a][b]==0){</span><br><span class="line"> this.data[a][b] = this.data[a][nextb];</span><br><span class="line"> this.data[a][nextb] = 0;</span><br><span class="line"> b--; </span><br><span class="line"> //如果该坐标和后面数值相同，该坐标分数就叠加，总分数被遍历16次计算相加过的分数，然后新数值坐标归零</span><br><span class="line"> }else if(this.data[a][b] == this.data[a][nextb]){</span><br><span class="line"> this.data[a][b] *= 2;</span><br><span class="line"> this.score += this.data[a][b]</span><br><span class="line"> this.data[a][nextb] = 0</span><br><span class="line"> }</span><br><span class="line"> }else{</span><br><span class="line"> break;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> }, </span><br><span class="line"> //遍历列，返回i，与上面左移动的数组同步</span><br><span class="line"> getNextInRow:function(a,b){</span><br><span class="line"> //b+1是因为左边第一列与后面的值做比较，所以第一列无需遍历</span><br><span class="line"> for(var i = b+1;i < 4;i ++){</span><br><span class="line"> //注意！b值为i，返回的是i值</span><br><span class="line"> if(this.data[a][i] != 0){</span><br><span class="line"> return i;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> return -1;</span><br><span class="line"> },</span><br><span class="line"></span><br><span class="line">//以下逻辑都一样的，只是按照移动方向换了对应的遍历方向，我就不一一赘述了</span><br><span class="line"> //右移动</span><br><span class="line"> moveRight:function(){</span><br><span class="line"> var before = String(this.data) //移动之前</span><br><span class="line"> </span><br><span class="line"> //遍历行</span><br><span class="line"> for(var a = 0;a < 4;a++){</span><br><span class="line"> this.moveRightInRow(a);</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> var after = String(this.data) //移动之后</span><br><span class="line"> if(before != after){ //相比较</span><br><span class="line"> this.randomNum()</span><br><span class="line"> if(this.isgameover()){</span><br><span class="line"> this.status = this.gameover;</span><br><span class="line"> }</span><br><span class="line"> this.dataView() //更新视图</span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line"> //开始移动</span><br><span class="line"> moveRightInRow:function(a){</span><br><span class="line"> for(var b = 3;b > 0;b--){</span><br><span class="line"> var nextb = this.moveNextRight(a,b)</span><br><span class="line"> if(nextb != -1){</span><br><span class="line"> </span><br><span class="line"> if(this.data[a][b]==0){</span><br><span class="line"> this.data[a][b] = this.data[a][nextb];</span><br><span class="line"> this.data[a][nextb] = 0;</span><br><span class="line"> b++; </span><br><span class="line"> }else if(this.data[a][b] == this.data[a][nextb]){</span><br><span class="line"> this.data[a][b] *= 2;</span><br><span class="line"> this.score += this.data[a][b]</span><br><span class="line"> this.data[a][nextb] = 0</span><br><span class="line"> }</span><br><span class="line"> }else{</span><br><span class="line"> break;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line"></span><br><span class="line"> moveNextRight:function(a,b){</span><br><span class="line"> for(var i = b-1;i>=0;i--){</span><br><span class="line"> if(this.data[a][i] != 0){</span><br><span class="line"> return i;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> return -1;</span><br><span class="line"> },</span><br><span class="line"></span><br><span class="line"> //上移动</span><br><span class="line"> moveTop:function(){</span><br><span class="line"> var before = String(this.data) </span><br><span class="line"> for(var b = 0;b < 4;b++){</span><br><span class="line"> this.moveTopInRow(b);</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> var after = String(this.data) </span><br><span class="line"> if(before != after){ </span><br><span class="line"> this.randomNum()</span><br><span class="line"> if(this.isgameover()){</span><br><span class="line"> this.status = this.gameover;</span><br><span class="line"> }</span><br><span class="line"> this.dataView() </span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line"> //开始移动</span><br><span class="line"> moveTopInRow:function(b){</span><br><span class="line"> for(var a = 0;a < 3;a ++){</span><br><span class="line"> var nexta = this.moveNextTop(a,b)</span><br><span class="line"> if(nexta != -1){</span><br><span class="line"></span><br><span class="line"> if(this.data[a][b]==0){</span><br><span class="line"> this.data[a][b] = this.data[nexta][b];</span><br><span class="line"> this.data[nexta][b] = 0;</span><br><span class="line"> a--; </span><br><span class="line"></span><br><span class="line"> }else if(this.data[a][b] == this.data[nexta][b]){</span><br><span class="line"> this.data[a][b] *= 2;</span><br><span class="line"> this.score += this.data[a][b]</span><br><span class="line"> this.data[nexta][b] = 0</span><br><span class="line"> }</span><br><span class="line"> }else{</span><br><span class="line"> break;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line"> moveNextTop:function(a,b){</span><br><span class="line"> for(var i = a+1;i<4;i++){</span><br><span class="line"> if(this.data[i][b] != 0){</span><br><span class="line"> return i;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> return -1;</span><br><span class="line"> },</span><br><span class="line"></span><br><span class="line"> //下移动</span><br><span class="line"> moveDown:function(){</span><br><span class="line"> var before = String(this.data) </span><br><span class="line"> </span><br><span class="line"> for(var b = 0;b < 4;b++){</span><br><span class="line"> </span><br><span class="line"> this.moveDownInRow(b);</span><br><span class="line"> }</span><br><span class="line"></span><br><span class="line"> var after = String(this.data) </span><br><span class="line"> if(before != after){ </span><br><span class="line"> this.randomNum()</span><br><span class="line"> if(this.isgameover()){</span><br><span class="line"> this.status = this.gameover;</span><br><span class="line"> }</span><br><span class="line"> this.dataView() </span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line"> //开始移动</span><br><span class="line"> moveDownInRow:function(b){</span><br><span class="line"> for(var a=3;a>0;a--){</span><br><span class="line"> var nexta = this.moveNextDown(a,b)</span><br><span class="line"> if(nexta != -1){</span><br><span class="line"></span><br><span class="line"> if(this.data[a][b]==0){</span><br><span class="line"> this.data[a][b] = this.data[nexta][b];</span><br><span class="line"> this.data[nexta][b] = 0;</span><br><span class="line"> a++; </span><br><span class="line"></span><br><span class="line"> }else if(this.data[a][b] == this.data[nexta][b]){</span><br><span class="line"> this.data[a][b] *= 2;</span><br><span class="line"> this.score += this.data[a][b]</span><br><span class="line"> this.data[nexta][b] = 0;</span><br><span class="line"> }</span><br><span class="line"> }else{</span><br><span class="line"> break;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> },</span><br><span class="line"> moveNextDown:function(a,b){</span><br><span class="line"> for(var i = a-1;i >= 0;i--){</span><br><span class="line"> if(this.data[i][b] != 0){</span><br><span class="line"> return i;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> return -1;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">game.start(); //最后调用开始方法</span><br><span class="line">//给键盘按钮绑定事件</span><br><span class="line">document.onkeydown=function(){</span><br><span class="line"> if(event.keyCode==37)//左</span><br><span class="line"> game.moveLeft();</span><br><span class="line"> if(event.keyCode==39)//右</span><br><span class="line"> game.moveRight();</span><br><span class="line"> if(event.keyCode==38)//上</span><br><span class="line"> game.moveTop();</span><br><span class="line"> if(event.keyCode==40)//下</span><br><span class="line"> game.moveDown();</span><br><span class="line">}</span><br><span class="line"></span><br><span class="line">//游戏结束后重新开始</span><br><span class="line">function sta(){</span><br><span class="line"> document.getElementById("gameover").style.display="none";</span><br><span class="line"> game.start();</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>运行结果页面：</p><p><img src="http://tva1.sinaimg.cn/large/6929716cly1h0790c8aq5j218i0oqh3g.jpg" alt="image.png"></p><p><img src="http://tva1.sinaimg.cn/large/6929716cly1h0793cx6wrj20ua0m3wr1.jpg" alt="image.png"></p>]]></content>
<summary type="html"><h5 id="花了两天时间用JS做了一个2048小游戏，大体上不难实现，把每一步移动的逻辑理清即可，代码托管在本人的github账号上-https-gitee-com-huangwanling-js2048-，代码实现如下，有详细注释以便日后自己复习"><a href="#花了两天时间用JS做了一个2048小游戏，大体上不难实现，把每一步移动的逻辑理清即可，代码托管在本人的github账号上-https-gitee-com-huangwanling-js2048-，代码实现如下，有详细注释以便日后自己复习" class="headerlink" title="花了两天时间用JS做了一个2048小游戏，大体上不难实现，把每一步移动的逻辑理清即可，代码托管在本人的github账号上 https://gitee.com/huangwanling/js2048 ，代码实现如下，有详细注释以便日后自己复习"></a>花了两天时间用JS做了一个2048小游戏，大体上不难实现，把每一步移动的逻辑理清即可，代码托管在本人的github账号上 <a href="https://gitee.com/huangwanling/js2048">https://gitee.com/huangwanling/js2048</a> ，代码实现如下，有详细注释以便日后自己复习</h5></summary>
</entry>
<entry>
<title>前端知识点JS（三）</title>
<link href="https://huangwanling.gitee.io/ayla/2022/03/10/%E5%89%8D%E7%AB%AF%E7%9F%A5%E8%AF%86%E7%82%B9JS%EF%BC%88%E4%B8%89%EF%BC%89/"/>
<id>https://huangwanling.gitee.io/ayla/2022/03/10/%E5%89%8D%E7%AB%AF%E7%9F%A5%E8%AF%86%E7%82%B9JS%EF%BC%88%E4%B8%89%EF%BC%89/</id>
<published>2022-03-10T07:06:42.000Z</published>
<updated>2022-03-13T04:19:43.613Z</updated>
<content type="html"><![CDATA[<h2 id="一、JS篇（一）"><a href="#一、JS篇（一）" class="headerlink" title="一、JS篇（一）"></a>一、JS篇（一）</h2><h5 id="1、堆栈内存"><a href="#1、堆栈内存" class="headerlink" title="1、堆栈内存"></a>1、堆栈内存</h5><p>堆：存储引用类型值的空间<br>栈：存储基本类型和指定代码的环境</p><span id="more"></span><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"> <span class="built_in">let</span> a = {},b = <span class="string">'0'</span>,c = 0;</span><br><span class="line"> a[b] = <span class="string">'woaaa'</span>;</span><br><span class="line"> a[c] = <span class="string">"asadc"</span>;</span><br><span class="line"> console.log(a[b]);</span><br><span class="line">//答案：培训,一个堆中属性名不能重复，且一般是字符串，数字属性名==字符串属性名 </span><br></pre></td></tr></table></figure><p><img src="http://tva1.sinaimg.cn/large/6929716cgy1h05bftns2rj20n109c0vy.jpg" alt="image.png"></p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">let</span> a = {},b = Symbol(<span class="string">'1'</span>),c = Symbol(<span class="string">'1'</span>);</span><br><span class="line">a[b] = <span class="string">'珠峰'</span>；</span><br><span class="line">a[c] = <span class="string">'培训'</span>；</span><br><span class="line">console.log(a[b]);</span><br><span class="line">//答案：珠峰，Symbol的特点，都是唯一的</span><br><span class="line">//一个对象的属性名可以是Symbol,undefined,null,boolean... </span><br><span class="line">//自己实现一个Symbol(深入问)</span><br></pre></td></tr></table></figure><p>不管对象里存的是什么，执行.toString方法后都是[object Object]<br><img src="http://tva1.sinaimg.cn/large/6929716cgy1h05bixxvw1j20d50h6dis.jpg" alt="image.png"></p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">let</span> a = {},</span><br><span class="line"> b = {</span><br><span class="line"> n: <span class="string">'1'</span></span><br><span class="line"> },</span><br><span class="line"> c = {</span><br><span class="line"> m: <span class="string">'2'</span></span><br><span class="line"> };</span><br><span class="line">a[b] = <span class="string">'珠峰'</span>;</span><br><span class="line">a[c] = <span class="string">'培训'</span>;</span><br><span class="line">console.log(a[b]);</span><br><span class="line">//培训，key会转化成字符串[Obejct object]</span><br><span class="line">//==> Object.protopyte.toString / valueOf</span><br></pre></td></tr></table></figure><h5 id="2、闭包作用域"><a href="#2、闭包作用域" class="headerlink" title="2、闭包作用域"></a>2、闭包作用域</h5><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">var <span class="built_in">test</span> = (<span class="keyword">function</span>(i){</span><br><span class="line"><span class="built_in">return</span> <span class="function"><span class="title">function</span></span>(){</span><br><span class="line">alert (i*=2)；</span><br><span class="line">}</span><br><span class="line">})(2);</span><br><span class="line"><span class="built_in">test</span>(5)</span><br><span class="line">//答案：‘4’，alert弹出的会转化成字符串</span><br><span class="line">//闭包：该销毁的不销毁才叫泄露</span><br></pre></td></tr></table></figure><p><img src="http://tva1.sinaimg.cn/large/6929716cgy1h05bjbtwhdj20xe0gktel.jpg" alt="image.png"></p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">var a = 0,b = 0;</span><br><span class="line"><span class="keyword">function</span> A(a){</span><br><span class="line">A = <span class="keyword">function</span> (b){</span><br><span class="line">alert(a + b++);</span><br><span class="line">};</span><br><span class="line">alert(a++);</span><br><span class="line">}</span><br><span class="line">A(1);</span><br><span class="line">A(2);</span><br><span class="line">//答案：‘1’ ‘4’</span><br></pre></td></tr></table></figure><p><img src="http://tva1.sinaimg.cn/large/6929716cgy1h05bjjpvwzj20jt0ag0vn.jpg" alt="image.png"></p><h5 id="3、浅拷贝-x2F-深拷贝"><a href="#3、浅拷贝-x2F-深拷贝" class="headerlink" title="3、浅拷贝/深拷贝"></a>3、浅拷贝/深拷贝</h5><ul><li>浅拷贝：只是拷贝一层，更深层次对象级别的只拷贝引用，如果被拷贝的对象里有另一个对象，拷贝的时候只拷贝地址，修改其中一个，另一个也会改变</li></ul><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br></pre></td><td class="code"><pre><span class="line">//pink老师课程</span><br><span class="line">var obj = {</span><br><span class="line"> <span class="built_in">id</span>: 1,</span><br><span class="line"> name: <span class="string">'张三'</span>,</span><br><span class="line"> msg: {</span><br><span class="line"> <span class="built_in">id</span>: 2,</span><br><span class="line"> name: <span class="string">'李四'</span></span><br><span class="line"> }</span><br><span class="line"> };</span><br><span class="line"> var o = {};</span><br><span class="line"> // 把obj里的内容拷贝到o对象里，遍历</span><br><span class="line"> <span class="keyword">for</span> (var k <span class="keyword">in</span> obj) {</span><br><span class="line"> o[k] = obj[k];</span><br><span class="line"> }</span><br><span class="line"> console.log(o);</span><br><span class="line"> // 修改o里msg对象的<span class="built_in">id</span>，结果obj里的msg对象的<span class="built_in">id</span>也改了</span><br><span class="line"> o.msg.id = 3;</span><br><span class="line"> console.log(obj.msg.id);</span><br><span class="line"> </span><br><span class="line"> </span><br><span class="line"> //ES6语法实现浅拷贝</span><br><span class="line"> <span class="built_in">let</span> o = {</span><br><span class="line"> ...obj</span><br><span class="line"> };</span><br></pre></td></tr></table></figure><p><img src="http://tva1.sinaimg.cn/large/6929716cly1h06c2ao5ecj20ar03vdg6.jpg" alt="image.png"></p><p> <img src="http://tva1.sinaimg.cn/large/6929716cly1h06dy0jw2vj20i10afabi.jpg" alt="image.png"></p><p>浅拷贝的语法糖：<code>Object.assign(o,obj);</code></p><ul><li><p>深拷贝：先遍历外面的数据，再遍历里面的数据，可以用函数递归的方式</p><p>判断某个值是否是数组或者是对象 </p><p>法1、用 instanceOf ,数组也属于对象: <code>var arr = []; console.log( arr instanceof Onject )</code>打印结果为true</p></li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><span class="line">//pink老师课程</span><br><span class="line">var obj = {</span><br><span class="line"> id : 1,</span><br><span class="line"> name:'andy',</span><br><span class="line"> msg:{</span><br><span class="line"> age:18,</span><br><span class="line"> weight:'88kg'</span><br><span class="line"> },</span><br><span class="line"> color:['pink','red']</span><br><span class="line"> };</span><br><span class="line"> var o = {};</span><br><span class="line"> function deepCopy(newObj,oldObj){</span><br><span class="line"> for( var k in oldObj){</span><br><span class="line"> //判断属性值属于哪种数据类型</span><br><span class="line"> //1、获取属性值 oldObj[k]</span><br><span class="line"> var item = oldObj[k];</span><br><span class="line"> //2、判断这个值是否是数组</span><br><span class="line"> if(item instanceof Array){</span><br><span class="line"> newObj[k] = [];</span><br><span class="line"> deepCopy(newObj[k],item)</span><br><span class="line"> }else if(item instanceof Object){</span><br><span class="line"> //3、判断这个值是否是对象</span><br><span class="line"> newObj[k] = {};</span><br><span class="line"> deepCopy(newObj[k],item)</span><br><span class="line"> }else{</span><br><span class="line"> //4、属于简单数据类型</span><br><span class="line"> newObj[k] = item;</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line"> }</span><br></pre></td></tr></table></figure><p>法2、<strong>我们可以使用 JSON.parse() 方法将数据转换为 JavaScript 对象，所以浅拷贝除了用递归函数还可以有另一种方法：先将对象转换为字符串，在将该字符串转换为对象得到新的对像，但如果原先的对象中有正则表达式，转换为字符串后正则表达式会变成空对象</strong></p><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">//oldObj:有基本数据类型，有对象，有数组，(不能有正则表达式，有函数，有事件对象)</span><br><span class="line">let obj2 = JSON.prase(JSON.stringify(obj));</span><br><span class="line">//弊端：对函数、正则、时间对象、数字对象的时候会不好用</span><br></pre></td></tr></table></figure><p>法3、<strong>obj.hasOwnProperty(prop)</strong></p><blockquote><p>这个方法可以用来检测一个对象是否含有特定的自身属性<br>语法：obj.hasOwnProperty(prop)<br>参数：要检测的属性 字符串 名称或者 Symbol<br>返回值： 用来判断某个对象是否含有指定的属性的 Boolean</p></blockquote><p><img src="http://tva1.sinaimg.cn/large/6929716cly1h06elf8x7zj20et0a741o.jpg" alt="image.png"></p><p><img src="http://tva1.sinaimg.cn/large/6929716cly1h06en2syv9j207x02zaao.jpg" alt="image.png"></p><p><img src="http://tva1.sinaimg.cn/large/6929716cly1h06enpd45fj20fd05hq3r.jpg" alt="image.png"></p><h5 id="4、一道面向对象的题（难）"><a href="#4、一道面向对象的题（难）" class="headerlink" title="4、一道面向对象的题（难）"></a>4、一道面向对象的题（难）</h5><p><strong>变量提升的概念</strong>：在js代码执行之前，将当前作用域，所有代码执行之前，把所有带var和function关键字的提前声明和定义</p><p>函数的prototype也属于一个引用类型值即对象，也存储在堆中</p><p><img src="http://tva1.sinaimg.cn/large/6929716cly1h07ih64xrnj20l40aatek.jpg" alt="image.png"></p><h5 id="5、Eventqueue（事件队列）-x2F-EventLoop-消息线程"><a href="#5、Eventqueue（事件队列）-x2F-EventLoop-消息线程" class="headerlink" title="5、Eventqueue（事件队列）/EventLoop(消息线程)"></a>5、Eventqueue（事件队列）/EventLoop(消息线程)</h5><p><strong>异步/同步/微任务/宏任务</strong></p><p><strong>js</strong>当中是怎么实现异步的：浏览器是多线程的，但JS是单线程的，浏览器只给了其一个线程来渲染，所以浏览器提供了事件队列，存放异步任务，事件队列分为微任务队列和宏任务队列，主线程里的任务执行完成之后再执行任务队列里的任务</p><p><img src="http://tva1.sinaimg.cn/large/6929716cly1h07ijpd2jwj20840ak77a.jpg" alt="image.png"></p><p><img src="https://imgconvert.csdnimg.cn/aHR0cHM6Ly9naXRlZS5jb20vbXVzLXovYmxvZ0ltYWdlL3Jhdy9tYXN0ZXIvaW1nLzIwMjAwNjAyMTMxMDMzLnBuZw?x-oss-process=image/format,png" alt="image-20200602131032718"><br>PS：箭头函数与普通函数的区别：箭头函数是没有原型链的，不能被new；箭头函数没有构造函数；箭头函数里的this指向执行上下文的this</p><h5 id="6、例题"><a href="#6、例题" class="headerlink" title="6、例题"></a>6、例题</h5><p><img src="http://tva1.sinaimg.cn/large/6929716cly1h07j7upwmnj208v036t8v.jpg" alt="image.png"><br>答案1：</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">var a={</span><br><span class="line"> i:0,</span><br><span class="line"> <span class="function"><span class="title">toString</span></span> (){</span><br><span class="line"> <span class="built_in">return</span> ++this.i;</span><br><span class="line"> }</span><br><span class="line">}</span><br><span class="line">//对象==字符串，对象.toString（）变为字符串</span><br><span class="line">//null == undefined 相等，但是和其它值比较就不再相等</span><br><span class="line">//NaN == NaN 不相等</span><br><span class="line">//剩下的跟数字比较都是转换为数字eg:[10] = 10,先执行[10].toString(),再Number（<span class="string">"10"</span>）,把数组的[10]转换为数字再判断相等，toString也可以换成valueOf</span><br></pre></td></tr></table></figure><p>答案2：</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line">var a = [1,2,3];</span><br><span class="line"><span class="keyword">if</span>(a == 1 && a == 2 && a == 3){</span><br><span class="line">console.log(<span class="string">'条件成立'</span>); </span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>答案3：数据劫持<br><img src="http://tva1.sinaimg.cn/large/6929716cly1h07jr3vwm8j20b705p75b.jpg" alt="image.png"><br>答案4：数据弹出<br><img src="http://tva1.sinaimg.cn/large/6929716cly1h07jr3vwm8j20b705p75b.jpg" alt="image.png"></p><h5 id="7、例题"><a href="#7、例题" class="headerlink" title="7、例题"></a>7、例题</h5><p><img src="http://tva1.sinaimg.cn/large/6929716cly1h07jvbmql1j20am09njss.jpg" alt="image.png"></p><p><img src="http://tva1.sinaimg.cn/large/6929716cly1h07k4bzeh1j204x0220sl.jpg" alt="image.png"></p><h5 id="8、Vue2-0-x2F-Vue3-0的双向绑定原理"><a href="#8、Vue2-0-x2F-Vue3-0的双向绑定原理" class="headerlink" title="8、Vue2.0/Vue3.0的双向绑定原理"></a>8、Vue2.0/Vue3.0的双向绑定原理</h5>]]></content>
<summary type="html"><h2 id="一、JS篇（一）"><a href="#一、JS篇（一）" class="headerlink" title="一、JS篇（一）"></a>一、JS篇（一）</h2><h5 id="1、堆栈内存"><a href="#1、堆栈内存" class="headerlink" title="1、堆栈内存"></a>1、堆栈内存</h5><p>堆：存储引用类型值的空间<br>栈：存储基本类型和指定代码的环境</p></summary>
</entry>
<entry>
<title>前端知识点CSS（二）</title>
<link href="https://huangwanling.gitee.io/ayla/2022/03/09/%E5%89%8D%E7%AB%AF%E7%9F%A5%E8%AF%86%E7%82%B9CSS%EF%BC%88%E4%BA%8C%EF%BC%89/"/>
<id>https://huangwanling.gitee.io/ayla/2022/03/09/%E5%89%8D%E7%AB%AF%E7%9F%A5%E8%AF%86%E7%82%B9CSS%EF%BC%88%E4%BA%8C%EF%BC%89/</id>
<published>2022-03-09T15:27:02.000Z</published>
<updated>2022-03-13T04:19:33.786Z</updated>
<content type="html"><![CDATA[<p>== 前端经典面试题，视频来源B站<a href="https://www.bilibili.com/video/BV1ek4y1r7GT?from=search&seid=3043085217816960051&spm_id_from=333.337.0.0%EF%BC%8C">https://www.bilibili.com/video/BV1ek4y1r7GT?from=search&seid=3043085217816960051&spm_id_from=333.337.0.0，</a> 参考博客<a href="https://blog.csdn.net/mus123/article/details/106499506">https://blog.csdn.net/mus123/article/details/106499506</a> ==</p><span id="more"></span><h2 id="一、CSS篇（一）"><a href="#一、CSS篇（一）" class="headerlink" title="一、CSS篇（一）"></a>一、CSS篇（一）</h2><h5 id="1、标签语义化：合理的标签干合适的事情"><a href="#1、标签语义化：合理的标签干合适的事情" class="headerlink" title="1、标签语义化：合理的标签干合适的事情"></a>1、标签语义化：合理的标签干合适的事情</h5><p><img src="http://tva1.sinaimg.cn/large/6929716cly1h042falydej20im0k67ak.jpg" alt="2022-03-09_234942.png"></p><blockquote><p>块级（display：block）：div 、p、h1~h6、hr、ul、ol、li、dl、dd、form、table、header、footer、main、nav、sector、arcitcle、pre、table、tbody、thead、th、tr、tfoot<br>行级（display：inline）：a、span、small、strong、em、i、code、<br>行内块（display：inline-block）：img、input</p></blockquote><blockquote><p>区别：<br>1.行内元素与块级元素可以相互转换，通过修改display属性值来切换块级元素和行内元素，行内元素display：inline，块级元素display：block。<br>2.行内元素和其他行内元素都会在一条水平线上排列，都是在同一行的；块级元素却总是会在新的一行开始排列，各个块级元素独占一行，垂直向下排列，若想使其水平方向排序，可使用左右浮动（float：left/right）让其水平方向排列。<br>3.行内元素不可以设置宽高，宽度高度随文本内容的变化而变化，但是可以设置行高（line-height），同时在设置外边距margin上下无效，左右有效，内填充padding上下无效，左右有效；块级元素可以设置宽高，并且宽度高度以及外边距，内填充都可随意控制。<br>4.块级元素可以包含行内元素和块级元素，还可以容纳内联元素和其他元素；行内元素不能包含块级元素，只能容纳文本或者其他行内元素。</p></blockquote><blockquote><p>display还有none（隐藏dom）、flex（弹性）、table（表）</p><p><img src="http://tva1.sinaimg.cn/large/6929716cly1h06ac1n3usj20kd0af766.jpg" alt="image.png"><br>让一个元素隐藏：display：none、visibility：hidden、ocpacity（透明度，取值从0.0~1.0）：0、兼容的filter :filter:alpha(opacity=number)<br>filter滤镜：对比度、饱和度、阴影、色相、透明度</p></blockquote><blockquote><p>display：flex 响应式、兼容性</p></blockquote><h5 id="2、盒子水平垂直居中方案（5种）"><a href="#2、盒子水平垂直居中方案（5种）" class="headerlink" title="2、盒子水平垂直居中方案（5种）"></a>2、盒子水平垂直居中方案（5种）</h5><p>（回答话术：项目中经常遇到这种需求，最开始xxx，喜欢用flex，后来发现xxx，在xx博客上突然发现xx更好，xx解决了兼容性）</p><p>1、定位1（需要知道父的宽高）</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">body {</span><br><span class="line"> position: relative;</span><br><span class="line"> }</span><br><span class="line"> .box {</span><br><span class="line"> position: absolute;</span><br><span class="line"> left: 50%;</span><br><span class="line"> bottom: 50%;</span><br><span class="line"> margin-left: -50px;</span><br><span class="line"> margin-top: -25px;</span><br><span class="line"> }</span><br></pre></td></tr></table></figure><p>2、定位2（需要父亲有宽高限定）</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">body {</span><br><span class="line"> position: relative;</span><br><span class="line">}</span><br><span class="line">.box {</span><br><span class="line"> position: absolute;</span><br><span class="line"> left: 0;</span><br><span class="line"> bottom: 0;</span><br><span class="line"> right: 0;</span><br><span class="line"> top: 0;</span><br><span class="line"> margin: auto;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>3、定位3：不需要父有具体宽高限制（兼容性不如定位1、2方法）</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">body {</span><br><span class="line"> position: relative;</span><br><span class="line">}</span><br><span class="line">.box {</span><br><span class="line"> position: absolute;</span><br><span class="line"> top: 50%;</span><br><span class="line"> left: 50%;</span><br><span class="line"> transform: translate(-50%, -50%);</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>4、display:flex(ie10+)：移动端常用</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line">body {</span><br><span class="line"> display: flex;</span><br><span class="line"> justify-content: center;</span><br><span class="line"> align-items: center;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>5、JS实现（获取当前屏幕、盒子宽高）</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">let</span> HTML = document.documentElement,</span><br><span class="line"> winW = HTML.clientWidth,</span><br><span class="line"> winH = HTML.clientHeight,</span><br><span class="line"> boxW = box.offsetWidth,</span><br><span class="line"> boxH = box.offsetHeight;</span><br><span class="line"> box.style.position = <span class="string">'absolute'</span>;</span><br><span class="line"> box.style.left = (winW - boxW) / 2 + <span class="string">'px'</span>;</span><br><span class="line"> box.style.top = (winH - boxH) / 2 + <span class="string">'px'</span>;</span><br></pre></td></tr></table></figure><p>6、固定宽高的父级 display：table-cell 子级inline-block</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br></pre></td><td class="code"><pre><span class="line">body {</span><br><span class="line"> display: table-cell;</span><br><span class="line"> text-align: center;</span><br><span class="line"> vertical-align: middle;</span><br><span class="line"> height: 600px;</span><br><span class="line"> width: 600px;</span><br><span class="line"> background-color: aquamarine;</span><br><span class="line">}</span><br><span class="line">.box{</span><br><span class="line"> display: inline-block;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h5 id="3、盒子模型（从里到外：content、padding、border、margin）"><a href="#3、盒子模型（从里到外：content、padding、border、margin）" class="headerlink" title="3、盒子模型（从里到外：content、padding、border、margin）"></a>3、盒子模型（从里到外：content、padding、border、margin）</h5><blockquote><p> 标准盒模型（content-box）、ie怪异盒模型（border-box）、flex弹性伸缩盒模型、column多列盒模型</p></blockquote><p>面试话术：其实我们最常用的是标准盒模型也就是boxing-sizing:content-box,width和height指的是内容的宽高而不是盒子的宽高，盒子的实际宽高还要加上margin、border和padding，但这种模型在实际中可能会存在一个问题就假设宽高设置100×100，但这时只要加上border盒子的宽高就会改变，导致总是要手动修改宽高或者调其他样式，后来css3提供了一种新的box-sizing:border-box,这个盒子模型有一个优点就是不管怎么调宽高盒子的大小就还是100*×100，不管怎么调border调padding盒子都会通过缩放内容使其宽高保持100×100，不用再手动调宽高，写样式就会比较方便</p><blockquote><p>标准盒模型：<img src="http://tva1.sinaimg.cn/large/6929716cgy1h05bqqutrtj20w70hkjyk.jpg" alt="image.png"></p></blockquote><blockquote><p>flex弹性伸缩盒模型:<img src="http://tva1.sinaimg.cn/large/6929716cgy1h05bnyaznlj20cz08kwg2.jpg" alt="image.png"><br>ie怪异盒模型:<img src="http://tva1.sinaimg.cn/large/6929716cgy1h05bqe7ylyj20x70jrtg1.jpg" alt="image.png"><br>column多列盒模型:<img src="http://tva1.sinaimg.cn/large/6929716cgy1h05bqxsocaj207m090wf1.jpg" alt="image.png"></p></blockquote><h5 id="4、几大经典布局-左右固定中间自适应"><a href="#4、几大经典布局-左右固定中间自适应" class="headerlink" title="4、几大经典布局(左右固定中间自适应)"></a>4、几大经典布局(左右固定中间自适应)</h5><p>圣杯布局<img src="http://tva1.sinaimg.cn/large/6929716cgy1h05br4zz2lj20lb0al75b.jpg" alt="image.png"></p><p><img src="http://tva1.sinaimg.cn/large/6929716cgy1h05brc0b6kj207e02uaag.jpg" alt="image.png"></p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br></pre></td><td class="code"><pre><span class="line">.container{</span><br><span class="line"> padding:0 200px;</span><br><span class="line"> height:100%;</span><br><span class="line">}</span><br><span class="line">html,body{</span><br><span class="line"> height:100%;</span><br><span class="line"> overflow:hidden;</span><br><span class="line">}</span><br><span class="line">.left,.right{</span><br><span class="line"> width:200px;</span><br><span class="line"> min-height:200px;</span><br><span class="line"> background:lightblue;</span><br><span class="line">}</span><br><span class="line">.center{</span><br><span class="line"> width:100%;</span><br><span class="line"> min-height:400px;</span><br><span class="line"> background:lightsalmon;</span><br><span class="line">}</span><br><span class="line">.left,.right,.center{ </span><br><span class="line"> <span class="built_in">float</span>:left;</span><br><span class="line">}</span><br><span class="line">.left{</span><br><span class="line"> margin-left:-100%;</span><br><span class="line"> position:relative;</span><br><span class="line"> left:-200px;</span><br><span class="line">}</span><br><span class="line">.right{</span><br><span class="line"> margin-right:-200px;</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>双飞翼布局:</p><p><img src="http://tva1.sinaimg.cn/large/6929716cgy1h05brkqnk9j20kz08pdgh.jpg" alt="image.png"></p><p><img src="http://tva1.sinaimg.cn/large/6929716cly1h06acksswdj207703p3z2.jpg" alt="image.png"></p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><span class="line">html,body{</span><br><span class="line"> height:100%;</span><br><span class="line"> overflow: hidden;</span><br><span class="line"> }</span><br><span class="line"> .container,.left,.right{</span><br><span class="line"> <span class="built_in">float</span>:left;</span><br><span class="line"> }</span><br><span class="line"> .container{</span><br><span class="line"> width:100%;</span><br><span class="line"> }</span><br><span class="line"> .container .center{</span><br><span class="line"> margin: 0 200px;</span><br><span class="line"> min-height: 400px;</span><br><span class="line"> background-color: lightblue;</span><br><span class="line"> }</span><br><span class="line"> .left,.right{</span><br><span class="line"> width: 200px;</span><br><span class="line"> min-height: 200px;</span><br><span class="line"> background-color: aqua;</span><br><span class="line"> /* display: inline-block; */</span><br><span class="line"> }</span><br><span class="line"> .left{</span><br><span class="line"> margin-left:-100%;</span><br><span class="line"> }</span><br><span class="line"> .right{</span><br><span class="line"> margin-left: -200px;</span><br><span class="line"> }</span><br></pre></td></tr></table></figure><p>另一种方法:flex<img src="http://tva1.sinaimg.cn/large/6929716cgy1h05brzv49sj20cj0bkwfv.jpg" alt="image.png"></p><p>另一种方法:定位</p><p><img src="http://tva1.sinaimg.cn/large/6929716cly1h06acsql4uj209h0cngn6.jpg" alt="image.png"><img src="http://tva1.sinaimg.cn/large/6929716cgy1h05bsf3ykfj207f02qaa8.jpg" alt="image.png"></p><h5 id="5、移动端响应式布局开发的三大方案"><a href="#5、移动端响应式布局开发的三大方案" class="headerlink" title="5、移动端响应式布局开发的三大方案"></a>5、移动端响应式布局开发的三大方案</h5><p>*媒体查询（一套） \ *rem（应用于两套 中的移动端）\ flex \ vh/vw</p><h5 id="6、课后作业"><a href="#6、课后作业" class="headerlink" title="6、课后作业"></a>6、课后作业</h5><p><img src="http://tva1.sinaimg.cn/large/6929716cgy1h05bt0unfzj20uu0e7n2k.jpg" alt="image.png"></p><p><img src="http://tva1.sinaimg.cn/large/6929716cgy1h05bt6k8m0j20jg0a8abf.jpg" alt="image.png"></p><blockquote><p>z-index:建立不同的文档流不同的层级,脱离文档流:浮动和定位(transform变形类似脱离文档流)</p><p>5、第二种渲染性能高, CSS 浏览器的渲染机制是选择器从右向左查询</p></blockquote>]]></content>
<summary type="html"><p>&#x3D;&#x3D; 前端经典面试题，视频来源B站<a href="https://www.bilibili.com/video/BV1ek4y1r7GT?from=search&amp;seid=3043085217816960051&amp;spm_id_from=333.337.0.0%EF%BC%8C">https://www.bilibili.com/video/BV1ek4y1r7GT?from=search&amp;seid=3043085217816960051&amp;spm_id_from=333.337.0.0，</a> 参考博客<a href="https://blog.csdn.net/mus123/article/details/106499506">https://blog.csdn.net/mus123/article/details/106499506</a> &#x3D;&#x3D;</p></summary>
</entry>
<entry>
<title>supermarket项目注意事项（二）</title>
<link href="https://huangwanling.gitee.io/ayla/2022/03/09/supermarket%E9%A1%B9%E7%9B%AE%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9%EF%BC%88%E4%BA%8C%EF%BC%89/"/>
<id>https://huangwanling.gitee.io/ayla/2022/03/09/supermarket%E9%A1%B9%E7%9B%AE%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9%EF%BC%88%E4%BA%8C%EF%BC%89/</id>
<published>2022-03-09T05:47:45.000Z</published>
<updated>2022-03-13T09:25:33.952Z</updated>
<content type="html"><![CDATA[<h5 id="1、上拉加载更多数据："><a href="#1、上拉加载更多数据：" class="headerlink" title="1、上拉加载更多数据："></a>1、上拉加载更多数据：</h5><p>①先监听什么时候滚动到底部，在scroll.vue中监听②监听到滚动到底部后用子传父组件通信办法将scroll中的自定义事件<code>this.$emit('pullingUp')</code>传到父组件中③父组件监听事件并创建一个loadMore()方法④<code>loadMore() { this.getHomeGoods(this.currentType); }</code>，getHomeGoods（）封装了tabControl三个按钮需要传输的数据</p><span id="more"></span><h5 id="2、tabControl的吸顶效果实现："><a href="#2、tabControl的吸顶效果实现：" class="headerlink" title="2、tabControl的吸顶效果实现："></a>2、tabControl的吸顶效果实现：</h5><p>1、必需知道滚动到多少时开始有吸顶效果：获取tabControl的offsetTop(获取当前元素定位的父元素位置 )<br>2、所有组件都有一个属性$el：用于获取组件里面的元素<br><img src="http://tva1.sinaimg.cn/large/6929716cly1h03nukatq4j20lh09eq5f.jpg" alt="offsetTop.png"></p><h5 id="3、监听滚动，动态的改变tabControl的样式"><a href="#3、监听滚动，动态的改变tabControl的样式" class="headerlink" title="3、监听滚动，动态的改变tabControl的样式"></a>3、监听滚动，动态的改变tabControl的样式</h5><p><img src="http://tva1.sinaimg.cn/large/6929716cly1h03nxab91fj20jq07d0va.jpg" alt="改变tabcontrol样式.png"></p><h5 id="4、在首页跳转到其他页面后再回去首页重新加载的问题"><a href="#4、在首页跳转到其他页面后再回去首页重新加载的问题" class="headerlink" title="4、在首页跳转到其他页面后再回去首页重新加载的问题"></a>4、在首页跳转到其他页面后再回去首页重新加载的问题</h5><p> 让home保持原有的状态，不随意销毁掉：keep-alive</p><h5 id="5、实际开发中的难点：代码的组织和业务逻辑的理清（不要立即动手写代码）、修复莫名的bug"><a href="#5、实际开发中的难点：代码的组织和业务逻辑的理清（不要立即动手写代码）、修复莫名的bug" class="headerlink" title="5、实际开发中的难点：代码的组织和业务逻辑的理清（不要立即动手写代码）、修复莫名的bug"></a>5、实际开发中的难点：代码的组织和业务逻辑的理清（不要立即动手写代码）、修复莫名的bug</h5><h5 id="6、时间过滤器（将时间戳转换为标准格式）-x2F-复杂数据封装成类放在构造函数里，后面面向对象取数据时可以获取类里封装的数据"><a href="#6、时间过滤器（将时间戳转换为标准格式）-x2F-复杂数据封装成类放在构造函数里，后面面向对象取数据时可以获取类里封装的数据" class="headerlink" title="6、时间过滤器（将时间戳转换为标准格式）/ 复杂数据封装成类放在构造函数里，后面面向对象取数据时可以获取类里封装的数据"></a>6、时间过滤器（将时间戳转换为标准格式）/ 复杂数据封装成类放在构造函数里，后面面向对象取数据时可以获取类里封装的数据</h5><h5 id="7、正则表达式：字符串匹配利器，但规则多"><a href="#7、正则表达式：字符串匹配利器，但规则多" class="headerlink" title="7、正则表达式：字符串匹配利器，但规则多"></a>7、正则表达式：字符串匹配利器，但规则多</h5>]]></content>
<summary type="html"><h5 id="1、上拉加载更多数据："><a href="#1、上拉加载更多数据：" class="headerlink" title="1、上拉加载更多数据："></a>1、上拉加载更多数据：</h5><p>①先监听什么时候滚动到底部，在scroll.vue中监听②监听到滚动到底部后用子传父组件通信办法将scroll中的自定义事件<code>this.$emit(&#39;pullingUp&#39;)</code>传到父组件中③父组件监听事件并创建一个loadMore()方法④<code>loadMore() &#123; this.getHomeGoods(this.currentType); &#125;</code>，getHomeGoods（）封装了tabControl三个按钮需要传输的数据</p></summary>
</entry>
<entry>
<title>前端知识点HTML（一）</title>
<link href="https://huangwanling.gitee.io/ayla/2022/03/08/%E5%89%8D%E7%AB%AF%E7%9F%A5%E8%AF%86%E7%82%B9HTML%EF%BC%88%E4%B8%80%EF%BC%89/"/>
<id>https://huangwanling.gitee.io/ayla/2022/03/08/%E5%89%8D%E7%AB%AF%E7%9F%A5%E8%AF%86%E7%82%B9HTML%EF%BC%88%E4%B8%80%EF%BC%89/</id>
<published>2022-03-08T04:50:27.000Z</published>
<updated>2022-03-13T04:19:21.674Z</updated>
<content type="html"><![CDATA[<p>==tips:自己学了快三个月的前端知识，前端三剑客和vue都学过了，但还没有做过系统的复习，金三银四正在开展中，目前正在加快速度复习基础知识点和准备简历==</p><span id="more"></span><h3 id="一、HTML篇（一）"><a href="#一、HTML篇（一）" class="headerlink" title="一、HTML篇（一）"></a>一、HTML篇（一）</h3><h4 id="1、说一下http和https"><a href="#1、说一下http和https" class="headerlink" title="1、说一下http和https"></a>1、说一下http和https</h4><p>http: 超文本传输协议，是互联网上应用最为广泛的一种网络协议，是一个客户端和服务器端请求和应答的标准（TCP），用于从 WWW 服务器传输超文本到本地浏览器的传 输协议，它可以使浏览器更加高效，使网络传输减少。 https: 是以安全为目标的 HTTP 通道，简单讲是 HTTP的安全版，即 HTTP 下加入 SSL层，HTTPS 的安全基础是 SSL，因此加密的详细内容就需要 SSL。https 协议的主要作用是：建立一个信息安全通道，来确保数组的传输，确保网站的真实性。</p><h4 id="2、说一下http和https的区别"><a href="#2、说一下http和https的区别" class="headerlink" title="2、说一下http和https的区别"></a>2、说一下http和https的区别</h4><p>http 传输的数据都是未加密的，也就是明文的，网景公司设置了 SSL 协议来对 http 协议 传输的数据进行加密处理，简单来说 https 协议是由 http 和 ssl 协议构建的可进行加密传 输和身份认证的网络协议，比 http 协议的安全性更高。 主要的区别如下： Https 协议需要 ca 证书，费用较高。 http 是超文本传输协议，信息是明文传输，https 则是具有安全性的 ssl 加密传输协议。 使用不同的链接方式，端口也不同，一般而言，http 协议的端口为 80，https 的端口为 443 http 的连接很简单，是无状态的；HTTPS 协议是由 SSL+HTTP 协议构建的可进行加密传 输、身份认证的网络协议，比 http 协议安全。</p><h4 id="3、src和href的区别"><a href="#3、src和href的区别" class="headerlink" title="3、src和href的区别"></a>3、src和href的区别</h4><p>src ⽤于替换当前元素，href ⽤于在当前⽂档和引⽤资源之间确⽴联系。<br>src 是 source 的缩写，指向外部资源的位置，指向的内容将会嵌⼊到⽂档中当前标签所在位置；在请求 src 资源时会将其指向的资源下载并应⽤到⽂档内，例如 js 脚本，img 图⽚和 frame 等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执⾏完毕，图⽚ 和框架等元素也如此，类似于将所指向资源嵌⼊当前标签内。这也是为什么将js 脚本放在底部⽽不是头部。<br>href 指向⽹络资源所在位置，建⽴和当前元素（锚点）或当前⽂档 （链接）之间的链接，在文档中添加href比如<link href="common.css" rel="stylesheet">,浏览器就会识别该文档为css文件然后并行下载资源但不会停止对当前文档的处理，这也是为 什么建议使⽤ link ⽅式来加载 css，⽽不是使⽤@import ⽅式。</p><h4 id="4、HTML语义化的理解"><a href="#4、HTML语义化的理解" class="headerlink" title="4、HTML语义化的理解"></a>4、HTML语义化的理解</h4><p>语义化是根据内容的结构化区选择合适的标签，像h5提供的语义化标签有<code><nav><header><fooyer><main><section></code>等等，对开发者友好，增强了代码的可读性，结构更加清晰，开发者能清晰的看出⽹⻚的结构， 便于团队的开发与维护。</p><h4 id="5、DOCTYPE-⽂档类型-的作⽤"><a href="#5、DOCTYPE-⽂档类型-的作⽤" class="headerlink" title="5、DOCTYPE(⽂档类型) 的作⽤"></a>5、DOCTYPE(⽂档类型) 的作⽤</h4><p>DOCTYPE是HTML5中⼀种标准通⽤标记语⾔的⽂档类型声明，它的⽬的是告诉浏览器（解析器）应该 以什么样（html或xhtml）的⽂档类型定义来解析⽂档，不同的渲染模式会影响浏览器对 CSS 代码甚 ⾄ JavaScript 脚本的解析。它必须声明在HTML⽂档的第⼀⾏。</p><h4 id="6、script标签中defer和async的区别"><a href="#6、script标签中defer和async的区别" class="headerlink" title="6、script标签中defer和async的区别"></a>6、script标签中defer和async的区别</h4><p>如果没有defer或async属性，浏览器会⽴即加载并执⾏相应的脚本。它不会等待后续加载的⽂档元素， 读取到就会开始加载和执⾏，这样就阻塞了后续⽂档的加载。defer 和 async属性都是去异步加载外部的JS脚本⽂件，它们都不会阻塞⻚⾯的解析，其区别如下： 执⾏顺序：多个带async属性的标签，不能保证加载的顺序；多个带defer属性的标签，按照加载顺 序执⾏； 脚本是否并⾏执⾏：async属性，表示后续⽂档的加载和执⾏与js脚本的加载和执⾏是并⾏进⾏的， 即异步执⾏；defer属性，加载后续⽂档的过程和js脚本的加载(此时仅加载不执⾏)是并⾏进⾏的(异 步)，js脚本需要等到⽂档所有元素解析完成之后才执⾏，DOMContentLoaded事件触发执⾏之 前。</p><h4 id="7、常用的meta标签"><a href="#7、常用的meta标签" class="headerlink" title="7、常用的meta标签"></a>7、常用的meta标签</h4><p>meta 标签由 name 和 content 属性定义，⽤来描述⽹⻚⽂档的属性<br>charset ，⽤来描述HTML⽂档的编码类型：<br>keywords ，⻚⾯关键词：<br>description ，⻚⾯描述<br>refresh ，⻚⾯重定向和刷新：<br>viewport ，适配移动端，可以控制视⼝的⼤⼩和⽐例：</p><h4 id="8、H5有哪些更新"><a href="#8、H5有哪些更新" class="headerlink" title="8、H5有哪些更新"></a>8、H5有哪些更新</h4><p>1、语义化标签（<code><nav><header><fooyer><main><section></code>）<br>2、媒体标签：<br> audio：⾳频、video：视频、source标签（因为浏览器对视频格式⽀持程度不⼀样，为了能够兼容不同的浏览器，可以通过source来指定视频源）<br> 3、dom查询操作：<br> document.querySelector() document.querySelectorAll() 它们选择的对象可以是标签，可以是类(需要加点)，可以是ID(需要加#)<br> 4、web存储：<br> HTML5 提供了两种在客户端存储数据的新⽅法： localStorage - 没有时间限制的数据存储 sessionStorage - 针对⼀个 session 的数据存储<br> 5、input标签新增了属性：placeholder、autocomplete、autofocus、required</p><h4 id="9、⾏内元素有哪些？块级元素有哪些？-空-void-元素有那些？"><a href="#9、⾏内元素有哪些？块级元素有哪些？-空-void-元素有那些？" class="headerlink" title="9、⾏内元素有哪些？块级元素有哪些？ 空(void)元素有那些？"></a>9、⾏内元素有哪些？块级元素有哪些？ 空(void)元素有那些？</h4><p> ⾏内元素有： a b span img input select strong ；<br> 块级元素有： div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p ；<br> 常⻅的空元素有：<code><br>、<hr> 、 <img> 、 <input> 、 <link> 、 <meta> </code></p>]]></content>
<summary type="html"><p>&#x3D;&#x3D;tips:自己学了快三个月的前端知识，前端三剑客和vue都学过了，但还没有做过系统的复习，金三银四正在开展中，目前正在加快速度复习基础知识点和准备简历&#x3D;&#x3D;</p></summary>
</entry>
<entry>
<title>supermarket项目注意事项</title>
<link href="https://huangwanling.gitee.io/ayla/2022/03/08/supermarket%E9%A1%B9%E7%9B%AE%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9/"/>
<id>https://huangwanling.gitee.io/ayla/2022/03/08/supermarket%E9%A1%B9%E7%9B%AE%E6%B3%A8%E6%84%8F%E4%BA%8B%E9%A1%B9/</id>
<published>2022-03-07T17:35:42.000Z</published>
<updated>2022-03-09T05:21:07.629Z</updated>
<content type="html"><![CDATA[<p>1、导入tabbar时一直不能显示下方导航栏和图标，路径问题，需要加@/<br>2、不可以对插槽做直接布局，eg：错误示范 <code><slot class = "布局"></slot></code>，正确示范 <code><div class = "布局"><slot></slot></div></code></p><span id="more"></span><p>3、首页请求数据时，不直接在Home.vue中封装，而是在network文件夹中新添一个home.js用来封装首页请求的数据，即不要在Home.vue中直接引用request,以下home.js代码示例：</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line">import { request } from <span class="string">"./request"</span>;</span><br><span class="line"> <span class="built_in">export</span> <span class="keyword">function</span> <span class="function"><span class="title">getHomeMultidata</span></span>() {</span><br><span class="line"> <span class="built_in">return</span> request({</span><br><span class="line"> url: <span class="string">'/home/multidata'</span></span><br><span class="line"> })</span><br><span class="line">}</span><br></pre></td></tr></table></figure><p>4、轮播图封装成组件，并用index.js导出组件，在HomeSwiper.vue中导入时只需写<code>import {Swiper, SwiperItem} from "@/components/common//swiper";</code><br>5、在对轮播图使用v-for时报错“Custom elements in iteration require ‘v-bind:key’ directives.”，原因时vue规定使用v-for条件渲染时必须设置一个key</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><swiper></span><br><span class="line"> <swiper-item v-for=<span class="string">"(item,key) in banners"</span> :key=<span class="string">"key"</span>></span><br><span class="line"> <a :href=<span class="string">"item.link"</span>></span><br><span class="line"> <img :src=<span class="string">"item.image"</span> alt=<span class="string">""</span>></span><br><span class="line"> </a></span><br><span class="line"> </swiper-item></span><br><span class="line"> </swiper></span><br></pre></td></tr></table></figure><p>6、项目中组件使用：导入、注册、使用（在template模板中）<br>7、组件如果要复用，只是在不同页面只是文字不同，样式都相同则不建议用插槽<br>8、tabcontrol下的数据比较复杂，点击不同按钮请求不同按钮对应的数据（流行、新款、精选），此时需要设计合理的数据结构，创建一个变量goods存储三个按钮对应的数据，当点击哪个按钮就想办法将对应的数据传到页面显示出来<br><img src="http://tva1.sinaimg.cn/large/6929716cly1h02dibkreoj20lh09njt1.jpg" alt="tabcontrol数据结构图.png"><br>9、vue脚手架原生的滚动：在页面内容超过可显示范围则可自动滚动，通过在Vue中封装一个scroll组件，并安装better-scroll<br>10、在Vue中想快速定位到某个标签，给标签添加一个ref属性，ref如果绑定在组件中，通过<strong>this.$refs.refname</strong>获取到的是一个组件对象，ref如果绑定在普通元素（标签)中，通过<strong>this.$refs.refname</strong>获取到的是一个元素对象。<br>11、不想让高度被内容撑开，高度单位可以设置为vh<br>12、组件不能直接监听原生事件，如果想监听必须加上一个原生修饰符native,eg:<code><back-top @click.native="backClick"></back-top></code><br>13、better-scroll中的position监听不到（为解决）<br>14、Vuex可以拿到程序的所有应用状态，事件总线跟Vuex的功能很像，但他不是管理状态的，而是用来监听事件的，在组件里<code>this.$bus.emit('aaa')</code>,这里的aaa事件就是发送到事件总线里的，组件里<code>this.$bus.on('aaa'，function)</code>,就是在组件里监听aaa事件,但程序里默认没有$bus,需要在main.js里声明<code>Vue.prototype.$bus = new Vue()</code><br>15、解决首页中Better-Scroll可滚动区域的问题：</p><h5 id="Better-Scroll在决定有多少区域可以滚动时是根据scrollerHeight属性决定"><a href="#Better-Scroll在决定有多少区域可以滚动时是根据scrollerHeight属性决定" class="headerlink" title="Better-Scroll在决定有多少区域可以滚动时是根据scrollerHeight属性决定"></a>Better-Scroll在决定有多少区域可以滚动时是根据scrollerHeight属性决定</h5><p> scrollerHeight属性是根据放在Better-Scroll的content中的子组件的高度<br> 但是我们的首页中，刚开始在计算scrollerHeight属性时是没有将图片计算在内的<br> 所以，计算出来的告诉是错误的<br> 后来图片加载进来之后有了新的高度但是scrollerHeight属性并没有进行更新<br> 所以滚动出现了问题</p><h5 id="如何解决这个问题了"><a href="#如何解决这个问题了" class="headerlink" title="如何解决这个问题了?"></a>如何解决这个问题了?</h5><p> 监听每一张图片是否加载完成，只要有一张图片加载完成了，执行一次refresh(）<br> 如何监听图片加载完成了?<br> 原生的js监听图片:img.onload=function(）<br> Vue中监听:@load=’方法‘<br> 调用scroll的refresh()</p><h5 id="如何将GoodsListltem-vue中的事件传入到Home-vue中"><a href="#如何将GoodsListltem-vue中的事件传入到Home-vue中" class="headerlink" title="如何将GoodsListltem.vue中的事件传入到Home.vue中"></a>如何将GoodsListltem.vue中的事件传入到Home.vue中</h5><p> 因为涉及到非父子组件的通信，所以这里我们选择了事件总线<br> bus->总线<br> Vue.prototype.$bus = new Vue()<br> this.bus.emit(‘事件名称’，参数)<br> this.bus.on(‘事件名称’，回调函数(参数))<br>16、对于refresh非常频繁的问题进行防抖操作<br> 防抖debounce/节流throttle<br> 防抖函数起作用的过程：<br> ①如果我们直接执行refresh那么refresh函数会被执行30次.<br> ②可以将refresh函数传入到debounce函数中，生成一个新的函数<br> ③之后在调用非常频的时候，就使用新生成的函数.<br> ④而新生成的函数，并不会非常频繁的调用，如果下一次执行来的非常快，那么会将上一次取消</p><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><span class="line">debounce(func,delay){</span><br><span class="line"> <span class="built_in">let</span> timer = null;</span><br><span class="line"> <span class="built_in">return</span> <span class="keyword">function</span>(...args){</span><br><span class="line"> <span class="keyword">if</span>(timer) clearTimeout(timer)</span><br><span class="line"> timer = setTimeout(() => {</span><br><span class="line"> func.apply(this,args)</span><br><span class="line"> },delay)</span><br><span class="line"> }</span><br><span class="line"> },</span><br></pre></td></tr></table></figure>]]></content>
<summary type="html"><p>1、导入tabbar时一直不能显示下方导航栏和图标，路径问题，需要加@&#x2F;<br>2、不可以对插槽做直接布局，eg：错误示范 <code>&lt;slot class = &quot;布局&quot;&gt;&lt;/slot&gt;</code>，正确示范 <code>&lt;div class = &quot;布局&quot;&gt;&lt;slot&gt;&lt;/slot&gt;&lt;/div&gt;</code></p></summary>
</entry>
<entry>
<title>Hello MyBlog</title>
<link href="https://huangwanling.gitee.io/ayla/2022/02/26/hello-world/"/>
<id>https://huangwanling.gitee.io/ayla/2022/02/26/hello-world/</id>
<published>2022-02-26T08:24:41.649Z</published>
<updated>2022-03-05T16:25:10.313Z</updated>
<content type="html"><![CDATA[<p>这是搭建博客后的第一篇文章，该博客主要分享和记录自己学习前端的心得，不定期更新。<br>保留下方hexo的相关命令，以防自己忘记的时候方便查看</p><span id="more"></span><h3 id="Create-new-blog"><a href="#Create-new-blog" class="headerlink" title="Create new blog"></a>Create new blog</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo new <span class="string">"My New Post"</span></span><br></pre></td></tr></table></figure><h3 id="Run-server"><a href="#Run-server" class="headerlink" title="Run server"></a>Run server</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo server</span><br></pre></td></tr></table></figure><h3 id="Generate-static-files"><a href="#Generate-static-files" class="headerlink" title="Generate static files"></a>Generate static files</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo generate</span><br></pre></td></tr></table></figure><h3 id="Deploy-to-remote-sites"><a href="#Deploy-to-remote-sites" class="headerlink" title="Deploy to remote sites"></a>Deploy to remote sites</h3><figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$ hexo deploy</span><br></pre></td></tr></table></figure>]]></content>
<summary type="html"><p>这是搭建博客后的第一篇文章，该博客主要分享和记录自己学习前端的心得，不定期更新。<br>保留下方hexo的相关命令，以防自己忘记的时候方便查看</p></summary>
</entry>
</feed>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手