静态模板,Javascript解析URL方法详解

HTML5支持了Web
Worker这样的API,允许网页在安全的情况下执行多线程代码。不过Web
Worker实际上受到很多限制,因为它无法真正意义上共享内存数据,只能通过消息来做状态通知,所以甚至不能称之为真正意义上的“多线程”。

为了说明angularJS如何增强了标准HTML,我们先将创建一个静态HTML页面模板,然后把这个静态HTML页面模板转换成能动态显示的AngularJS模板。

URL : 统一资源定位符 (Uniform Resource Locator, URL)

Web
Worker的接口使用起来很不方便,它基本上自带一个sandbox,在沙箱中跑一个独立的js文件,通过
postMessage和 onMessge来和主线程通信:

在本步骤中,我们往HTML页面中添加两个手机的基本信息,用以下命令将工作目录重置到步骤1。

完整的URL由这几个部分构成:
scheme://host:port/path?query#fragment

复制代码 代码如下:

复制代码 代码如下:

scheme  = 通信协议 (常用的http,ftp,maito等)
host = 主机 (域名或IP)
port = 端口号
path = 路径

var worker = new Worker(“my.js”);
var bundle = {message:’Hello world’, id:1};
worker.postMessage(bundle); //postMessage可以传一个可序列化的对象过去
worker.onmessage = function(evt){
    console.log(evt.data);   
//比较worker中传回来的对象和主线程中的对象
    console.log(bundle);  //{message:’Hello world’, id:1}
}

git checkout -f step-1

query = 查询
可选,用于给动态网页(如使用CGI、ISAPI、PHP/JSP/ASP/ASP.NET等技术制作的网页)传递参数,可有多个参数,用”&”符号隔开,每个参数的名和值用”=”符号隔开。

复制代码 代码如下:

请编辑app/index.html文件,将下面的代码添加到index.html文件中,然后运行该应用查看效果。

fragment = 信息片断
字符串,用于指定网络资源中的片断。例如一个网页中有多个名词解释,可使用fragment直接定位到某一名词解释。(也称为锚点.)

//in my.js
onmessage = function(evt){
    var data = evt.data;
    data.id++;
    postMessage(data); //{message:’Hello world’, id:2}
}

app/index.html

对于这样一个URL

得到的结果可以发现,线程中得到的data的id增加了,但是传回来之后,并没有改变主线程的bundle中的id,因此,线程中传递的对象实际上copy了一份,这样的话,线程并没有共享数据,避免了读写冲突,所以是安全的。保证线程安全的代价就是限制了在线程中操作主线程对象的能力。

复制代码 代码如下:

我们可以用javascript获得其中的各个部分
1, window.location.href
整个URl字符串(在浏览器中就是完整的地址栏)

这样一个有限的多线程机制使用起来是很不方便的,我们当然希望Worker能够支持让代码看起来具有同时操作多线程的能力,例如,支持看起来像下面这个样子的代码:

<ul>
    <li>
        <span>Nexus S</span>
        <p>
        Fast just got faster with Nexus S.
        </p>
    </li>
    <li>
        <span>Motorola XOOM™ with Wi-Fi</span>
        <p>
        The Next, Next Generation tablet.
        </p>
    </li>
</ul>

2,window.location.protocol
URL 的协议部分
本例返回值:http:

复制代码 代码如下:

练习

3,window.location.host
URL 的主机部分
本例返回值:www.master8.net

var worker = new ThreadWorker(bundle /*shared obj*/);

尝试添加多个静态HTML代码到index.html, 例如:

4,window.location.port
URL 的端口部分
如果采用默认的80端口(update:即使添加了:80),那么返回值并不是默认的80而是空字符
本例返回值:””

worker.run(function(bundle){
    //do sth in worker thread…
    this.runOnUiThread(function(bundle /*shared obj*/){
        //do sth in main ui thread…
    });
    //…
});

复制代码 代码如下:

5,window.location.pathname
URL 的路径部分(就是文件地址)
本例返回值:/seo/

这段代码里面,我们启动一个worker之后,能够让任意代码跑在worker中,并且当需要操作ui线程(比如读写dom)时,可以通过this.runOnUiThread回到主线程执行。

<p>Total number of phones: 2</p>

6,window.location.search
查询(参数)部分
除了给动态语言赋值以外,我们同样可以给静态页面,并使用javascript来获得相信应的参数值
本例返回值:?ver=1.0&id=6

那么如何实现这个机制呢? 看下面的代码:

总结

7,window.location.hash
锚点
本例返回值:#imhere

发表评论

电子邮件地址不会被公开。 必填项已用*标注

标签:
网站地图xml地图