zoukankan      html  css  js  c++  java
  • 从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的特性决定的。

    <script type="text/javascript">document.getElementById('loading-msg').innerHTML = 'Loading UI Components...';</script>

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

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

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

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

    Top
    收藏
    关注
    评论
  • 相关阅读:
    使用comet架构实现了一个基于网页的视频监控prototype!!!!哇哈哈庆祝一下
    Pixysoft.Framework.Noebe.Datamining 数据挖掘开发实录
    论创业成功!让大家的青春充满着无限美好的回忆
    新年第一篇 数据库备份恢复系统上线的挫折
    .Net FrameWork 4.0中使用EF向数据库插入数据报datatime2类型错误的解决办法
    RoRoWoBlog 开源博客系统介绍
    第一次偶然出现的“System.Data.Entity.dll”类型的异常
    序列化类型 System.Data.Entity.DynamicProxies 的对象时检测到循环引用
    我也来说说Entity Frame Work 4中的数据库优先和代码优先两种方式(2)
    Asp.net MVC 2 + Castle + NHibernate 项目实战(1)
  • 原文地址:https://www.cnblogs.com/liuyu7177/p/3552358.html
Copyright © 2011-2022 走看看