master

分支 (2)

管理

管理

master

dev

uetjs
/
index.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<title>uetjs</title>
<!--加载js骨架文件-->
<script src="uet.js"></script>
<script>
/* 加载样式文件 */
loadStyle({
    Style:{
        name: 'style'
    },
    shCore:{
        path: './syntax/styles/',
        name: 'shCore'
    },
    shThemeDefault:{
        path: './syntax/styles/',
        name: 'shThemeDefault'
    }
})
/* 加载JS文件 */
loadScript({
    jQuery: {
        version: "?v=1.8",
        name: 'jquery-1.8.3.min'
    },
    syntax:{
        path: './syntax/scripts/',
        name: 'brush'
    },
    Common:{
        path: './Home/',
        name: 'Common'
    }
});

uetjs.snippets = function(){
    $(function(){
        $("h1").append('\<span style="color:#FF0000">这是后面加进来的</span>');
    })
}
</script>
</head>
<body>
<div id="main">
    <div id="main-inner">
        <div id="article-title">
            <a href="/">Uetjs</a>
        </div>
        <div id="article-meta">
            当前版本 1.2 | 发布于 2014-03-15 | 作者 lazyphp | 页面模板来源 <a href="https://github.com/ericzhang-cn/papery" target="_blank">GIT</a>
        </div>
        <div id="article-content">
            <h1>前言</h1>
            <h2>这是什么?</h2>
            <p>Uetjs是一款用于统一加载和管理 CSS文件/JS文件的JavaScript库。<br />
                经测试，兼容目前市面上所有浏览器：IE6-IE11，Chrome，Firefox, Opear。且不依赖任何第三方JavaScript库，纯原生态，下载即可马上使用。</p>
            <h2 >为什么要写?</h2>
            <p>日常工作中，我经常与前端打交道。发现公司前端给出的页面代码，CSS文件和JS文件混乱不堪。平时自己做开发时，也经常为JS代码片段混乱而感到头痛。为此我一直在思考，可不可以把PHP的框架思想沿用到JS去呢？这就是Uetjs诞生的原因。</p>
            <h1>传统开发 与 Uetjs开发</h1>
            <p>目前有一个项目，用到一下文件。 jQuery库，slideshow.js, slideshow调用的代码片段。分别在A页面和B页面</p>
            <h2>传统开发</h2>
            <p>A-Html代码</p>
            <pre class="brush:html">
                &lt;head&gt;
                    &lt;script src="jQuery.js"&gt;&lt;/script&gt;
                    &lt;script src="slideshow.js"&gt;&lt;/script&gt;
                    &lt;script&gt;
                    $("#slideshow").show({
                        &lt;!--这里要实现一个反转切换--&gt;
                    })
                    &lt;/script&gt;
                &lt;/head&gt;

                &lt;div id="slideshow"&gt;
                &lt;!--忽略基础代码--&gt;
                &lt;/div&gt;
            </pre>
            <p>B-Html代码</p>
            <pre class="brush:html">
                &lt;head&gt;
                    &lt;script src="jQuery.js"&gt;&lt;/script&gt;
                    &lt;script src="slideshow.js"&gt;&lt;/script&gt;
                    &lt;script&gt;
                    $("#slideshow").show({
                        &lt;!--这里要实现一个鼠标移动切换--&gt;
                    })
                    &lt;/script&gt;
                &lt;/head&gt;

                &lt;div id="slideshow"&gt;
                &lt;!--忽略基础代码--&gt;
                &lt;/div&gt;
            </pre>
            <p>上面的代码片段是许多公司前端都会给出的典型示例(目前我就职过3家公司都是这样)。当代码交到后端(PHP)处理时，通常作如何处理：</p>
            <ol>
                <li>保留页面的布局，不作任何优化。若有变化再翻查对应的模板进行修正</li>
                <li>将JS的代码片段保存于名为common.js的文件。再调整HTML的标签结构</li>
            </ol>
            <p>针对上面两种选择:<br />
                第一种方案，随着项目的壮大。模板文件越来越多，这时候每个模板文件，不仅仅只有HTML+JS两种语言，还有PHP/其他语言代码夹在里面，维护的成本变得巨大了。更致命的是，原本负责的同事离职了，接手的同事短时间很难把项目每一块消化下去<br/>
                第二种方案，相对第一种来说，提高了代码的可维护性。但难以避免的是，每次加入新的代码片段，都得确保common.js中没有重复绑定事件的标签或者方法存在。其次，还要调整页面的元素标签，这会涉及到样式文件的调整。时间一来一回难免消耗不少。
            </p>
            <h2>Uetjs开发</h2>
            <p>使用Uetjs开发，页面开发将变得非常轻松。下面给出的是结合了后端处理的代码片段。</p>
            <p>提出出来的公用模板: Head.html</p>
            <pre class="brush:html">
                &lt;head&gt;
                &lt;script src="uet.js"&gt;&lt;/script&gt;
                &lt;script&gt;
                loadScript({
                    &lt;!--加载jQuery库--&gt;
                    jQuery: {
                        version: "?v=1.8",
                        path: './js/',
                        name: 'jquery-1.8.3.min'
                    },
                    &lt;!--加载Slideshow库--&gt;
                    Slideshow:{
                        path: './js/',
                        name: 'Slideshow'
                    },
                    &lt;!--加载对应页面的JS代码片段--&gt;
                    File:{
                        path: './Theme/Home/js/<&lt;?=$theme;?&gt;',
                        name: '&lt;?=$model?&gt;_&lt;?=$action;?&gt;'
                    }
                });
                &lt;/script&gt;
                &lt;/head&gt;
            </pre>
            <p>根据PHP处理，会在/Theme/Home/js/主题名称/ 目录下存放对应的JS代码片段： </p>
            <p>Index_index.js</p>
            <pre class="brush:js">
                $("#slideshow").show({
                    /* 这里要实现一个反转切换 */;
                })
            </pre>
            <p>Product_list.js</p>
            <pre class="brush:js">
                $("#slideshow").show({
                    /* 这里要实现一个鼠标移动切换 */;
                })
            </pre>
            <p>使用Uetjs后，不需要对页面的元素标签作任何处理，仅需将对应的JS代码片段存放于对应的目录。</p>
            <h1>使用Uetjs</h1>
            <p>友情提示：由于作者能力有限，目前Uetjs无法使用异步加载。若开启异步加载，可能会导致JS的依赖关系出问题。</p>
            <h2>下载Uetjs</h2>
            <p>本地下载地址:<a href="/uetjs.zip" target="_blank">下载</a></p>
            <p>GIT地址: <a href="http://git.oschina.net/fallBirds/uetjs" target="_blank">开源中国</a> </p>
            <h2>快速入门</h2>
            <p>uetjs函数仅有三个！分别是:loadScript (加载JS) ,loadStyle (加载css) ,require(手动加载),示例代码如下:</p>
            <pre class="brush:js">
                /* 引入uetjs库 */
                &lt;script src="uet.js"&gt;&lt;/script&gt;
                &lt;script&gt;
                /* 加载样式文件 */
                loadStyle({
                    Style:{
                        name: 'style'
                    },
                    shCore:{
                        path: './syntax/styles/',
                        name: 'shCore'
                    },
                    shThemeDefault:{
                        path: './syntax/styles/',
                        name: 'shThemeDefault'
                    }
                })
                /* 加载JS文件 */
                loadScript({
                    jQuery: {
                        version: "?v=1.8",
                        name: 'jquery-1.8.3.min'
                    },
                    syntax:{
                        path: './syntax/scripts/',
                        name: 'brush'
                    },
                    Common:{
                        path: './Home/',
                        name: 'Common'
                    },
                    File:{
                        path: './Home/',
                        name: 'Test_index'
                    }
                });
                &lt;/script&gt;
            </pre>
            <p>示例中，loadScript和loadStyle 函数传参必须为<font color="red">二维数组</font>！具体细节将在下面作说明。</p>
            <h2>函数loadScript和loadStyle</h2>
            <p>函数loadScript和loadStyle两者的代码基本相同，传参必须为二维数组。其中，二维数组的值，请按照一下的进行填写调用：</p>
            <pre class="brush:js">
                loadScript/loadStyle({
                    /* 数组名称，必须唯一。建议以调用文件名称作为键值。 */
                    array:{

                        /* 加载文件的版本号。| 缺省值为 uet 默认版本号 | 选填 */
                        version: '',

                        /* 加载文件所在的目录。 | 缺省值为 '' | 选填 */
                        path: '',

                        /* 加载文件的名称，不带后缀。 | 必填项 */
                        name: ''
                    }
                })
            </pre>
            <h2>函数require</h2>
            <p>函数require用于加载文件，有两个参数,具体说明如下：</p>
            <pre class="brush:js">
                /* url: 加载的文件地址 */
                /* type: 加载文件的类型 | 缺省值: script; 必须为 link(CSS Style) 或者 script(JavaScript) */
                require(url, type);
            </pre>
        </div>
    </div>
</div>
<div id="footer">
    <div id="footer-inner">
        <p id="copyright">Copyright (c) 2014 Uetjs </p>
    </div>
</div>
</body>
</html>