Director.js melaksanakan kemahiran contoh_javascript penggunaan penghalaan hadapan-tutorial js-php.cn

Director.js melaksanakan kemahiran contoh_javascript penggunaan penghalaan hadapan

WBOY

Lepaskan： 2016-05-16 16:16:11

asal

1816 orang telah melayarinya

Setelah melakukan pembangunan bahagian belakang, terutamanya jika anda telah menggunakan Django atau Express, anda harus biasa dengan fungsi penghalaan sisi pelayan WordPress, sistem blog asing yang popular, juga merupakan kes pelaksanaan penghalaan yang sangat klasik. Jadi, apakah penghalaan itu? Mari kita bincangkan secara ringkas melalui wordpress.

Semua orang yang memahami peraturan penulisan semula WordPress tahu bahawa sebenarnya, akses kepada mana-mana URL adalah berdasarkan index.php dalam direktori pemasangan WordPress (kecuali akses kepada fail yang telah wujud pada pelayan Apabila pautan tetap WordPress ialah a corak Tetapan akan jelas Sebagai contoh, URL artikel ialah index.php?p=id, dan URL halaman kategori ialah index.php?cat=id.

Di sini, index.php bertindak sebagai penghala, sila lihat gambar di bawah:

Dengan kata lain, tidak kira alamat yang anda lawati, semua permintaan akhirnya akan diubah hala ke index.php Program ini akan menentukan jenis halaman yang anda perlukan berdasarkan ciri-ciri URL yang diakses, dan kemudian membuat pertanyaan pangkalan data , dan akhirnya mengembalikan kandungan html ke penyemak imbas.

Perkara di atas adalah mengenai penghalaan hujung belakang web, jadi apakah penghalaan hujung hadapan? Malah, teknologi penghalaan bahagian hadapan kini digunakan secara meluas Terdapat banyak perpustakaan js sumber terbuka yang menyokong penghalaan bahagian hadapan, seperti angularJS, ember.js, director.js, dsb. Prinsip penghalaan bahagian hadapan adalah sama seperti penghalaan bahagian belakang, iaitu menjalankan semua interaksi dan paparan pada satu halaman untuk mengurangkan permintaan pelayan dan meningkatkan pengalaman pelanggan Semakin banyak laman web, terutamanya aplikasi web, menggunakan bahagian hadapan. penghalaan tamat.

Director.js ialah pendaftaran/penghurai laluan paling tulen Ia menggunakan simbol "#" untuk mengatur laluan URL yang berbeza tanpa memuat semula halaman dan memadankan kaedah panggil balik yang berbeza mengikut laluan URL yang berbeza. Director.js bukan sahaja boleh digunakan pada klien, tetapi juga boleh melaksanakan fungsi penghalaan bahagian belakang yang dinyatakan di atas di latar belakang menggunakan node.js. Lihat contoh pelaksanaan penghalaan bahagian hadapan berikut
Anda perlu mereka bentuk aplikasi desktop web yang serupa dengan web QQ Terdapat banyak ikon kecil pada desktop Setiap ikon kecil adalah aplikasi berfungsi, serupa dengan desktop komputer. Terdapat butang Berita Baidu pada desktop Klik padanya untuk muncul tetingkap pada halaman semasa untuk melihat Berita Baidu Klik pada ikon lain untuk melihat masa semasa

<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://rawgit.com/flatiron/director/master/build/director.min.js"></script>
<style>
 * {margin:0;padding:0}
 body {width:100%;height:100%;background:#3d72b8}
 #baidunews {width:40px;height:40px;background:url("./du.png") no-repeat;display:block;margin:50px;}
 #tweibo {width:40px;height:40px;background:url("./du.png") no-repeat;display:block;margin:50px;}
</style>
</head>
<body>
 <a href="#/baidunews" id="baidunews" title="百度新闻"></a>
 <a href="#/time" id="tweibo" title="当前时间"></a>
<script>
 //定义路由
 var route = {
 "/time":nowtime,
 "/baidunews":[showframe,getbaidunew]
 }
 
 //初始化路由
 var router = Router(route)
 router.init();
 //定义显示当前时间的回调函数
 function nowtime(){
 var now=new Date();
 var y=now.getFullYear();
 var m=now.getMonth()+1;
 var d=now.getDate();
 var h=now.getHours();
 var mi=now.getMinutes();
 var s=now.getSeconds();
 alert("现在时间\n"+y+"年"+m+"月"+d+"日 "+h+"时"+mi+"分"+s+"秒");
 
 }
 //定义显示浏览器框架的函数
 function showframe(){
 var f=document.createElement("div");
 f.style.width="985px";
 f.style.height="500px";
 f.style.position="absolute";
 f.style.top="50px";
 f.style.left="200px";
 f.style.background="white";
 f.style.border="2px solid #ccc";
 //关闭按钮
 var close=document.createElement("span");
 close.style.position="absolute";
 close.style.right="5px";
 close.style.cursor="pointer";
 close.style.marginRight="5px";
 close.onclick=function(){
  document.body.removeChild(f);
 }
 close.innerHTML="X";
 //加载站外的iframe
 var win=document.createElement("iframe");
 win.id="myiframe";
 win.frameBorder=0;
 win.style.width="100%";
 win.style.height="100%";
 f.appendChild(close);
 f.appendChild(win);
 document.body.appendChild(f);
 }
 //定义加载百度新闻网页的函数
 function getbaidunew(){
 document.getElementById("myiframe").src="http://news.baidu.com/";
 }
</script>
</body>
</html>

Salin selepas log masuk

Seperti yang dapat dilihat daripada kod di atas, director.js menggunakan "#" dalam halaman untuk penghalaan dan pemajuan. Contoh di atas hanyalah satu yang sangat mudah. Director.js boleh melaksanakan fungsi yang lebih kompleks dan besar. Ia boleh berinteraksi dengan data bahagian pelayan melalui ajax dan boleh wujud bersama perpustakaan js yang lain.

Adakah director.js mempunyai sebarang kesan ke atas SEO?

Director.js pada bahagian pelanggan mempunyai kesan pada SEO, kerana semua data hanya pada satu halaman, dan kaedah penyimpanan beberapa data tidak sesuai untuk merangkak oleh labah-labah enjin carian Jika anda perlu mesra SEO , ini bermakna anda perlu membina "halaman web" dan bukannya "aplikasi web", director.js tidak digunakan lagi.

Rujukan:

director.js