从Ext.js examplesindex.html 看到代码时的小感想

首先先贴代码看上述的代码注释的1,2,3,4

<div id="loading">
    <div class="loading-indicator"><img src="shared/extjs/images/extanim32.gif" width="32" height="32" 
style="margin-right:8px;float:left;vertical-align:top;"/>Ext JS 3.4 - <a href="http://www.sencha.com">sencha.com</a><br />
<span id="loading-msg">Loading styles and images...</span></div>
                      <!--1.看上面那一句-->
</div>

<div id="viewport">

<div id="hd">
    <a href="/" id="logo"><img src="../welcome/images/logo-sencha-sm.png" alt="Sencha" width="120" height="50" /></a>

</div>

<div id="bd">
    <h1 id="pagetitle">Ext JS 3.4 Samples <a href="../docs/">View Documentation</a></h1>
    <div class="left-column">
        <div id="sample-spacer" style="height:800px;"></div>

        <link rel="stylesheet" type="text/css" href="../resources/css/ext-all.css" />
        <link rel="stylesheet" type="text/css" href="shared/extjs/css/extjs.css" />

        <script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Loading Core API...';</script>
                                                                                         <!--2.看上面那一句--> 
        <script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
        <script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Loading UI Components...';</script>
                                                                                         <!--3.看上面那一句-->
         <script type="text/javascript" src="../ext-all-debug.js"></script>
        <script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Initializing...';</script>
                                                                                         <!--4.看上面那一句-->
        <!-- App.js contains Ext.App, a simple, re-usable Application component -->
        <script type="text/javascript" src="shared/extjs/App.js"></script>
        <script type="text/javascript" src="shared/extjs/site.js"></script>
        <script type="text/javascript" src="data.js"></script>
        <script type="text/javascript" src="init.js"></script>

        <div id="all-demos">
        </div>
    </div>

examplesindex.html的代码

从上面的代码可以看到，这个页面每引入一种类型的文件时，就会修改一下前端界面的提示语言。

初次看到，忽然想起老大说的一句话。写代码要严谨。

从上面可以看出，Ext.js的作者对细节的把握，对前端界面的考虑确实有自己独到的理解。

因为加载不同的js文件，需要时间，因为js文件可能较大，用户的网速可能较慢。下载成功一种类型的js文件，修改一下前端的提示，告诉用户资源已经加载到哪个程度，这样用户就不会认为

我们的程序不理他，反而可能会从自己身上找原因，认为自己网速太慢。

从以下几句代码，实现了我说的效果

        <script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Loading Core API...';</script>
        <script type="text/javascript" src="../adapter/ext/ext-base.js"></script>
        <script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Loading UI Components...';</script>
        <script type="text/javascript" src="../ext-all-debug.js"></script>
        <script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Initializing...';</script>

那为什么可以实现每下载一种类型的js文件就修改提示呢？不会忽然就把代码执行完呢？

这就要从浏览器执行js文件的特性考虑。

因为浏览器执行js代码时，从上到下加载完js代码之后，才会继续从上到下执行html页面的内容。

也就是说在没有加载完“ext-base.js”这个文件时，是不可能执行，下面那个代码的。这是由浏览器解析js的特性决定的。

不要以为事情小，就忽略他。不要以为事情小，就不做。

做好一个个细节，不但会让自己进步，而且当用户看到效果时也会认为你做的很专业。

阅读源代码，从中吸取前辈或者牛人们的优点，见识不同的代码组织方式，宽展自己的眼界，从现在开始。

2014.2.17 新的一年，第一篇博客。还要修改

顶

Top

关注