javascript範例 - javascript超連結語法




如何使一個JavaScript像Disqus或IntenseDebate (2)

我想創建一個應用程序,可以顯示在任何網頁,就像Disqus或IntenseDebate在文章和網頁上呈現。

它將顯示一個迷你電子商務店面。

我不知道如何開始。 有沒有這些“小部件”的示例代碼,框架或設計模式?

例如,我想展示產品。 我應該首先創建一個web服務或RSS列出所有這些? 或者,其中一個Ajax腳本可以簡單地消化一個XHTML網頁並顯示它?

感謝任何提示,我真的很感激它。


對於Disqus或IntenseDebate,我沒有做太多的工作,但是我知道如何去做這樣一個小部件。 小部件的實際顯示部分將使用JavaScript生成。 所以說,你有一個ID為commerce_store的div標籤。 您的JavaScript代碼將在文檔第一次加載(或者當一個Ajax請求改變頁面)時搜索文檔,並查找是否存在commerce_store div。 找到這樣的容器後,它會自動生成所有必要的HTML。 如果你還不知道如何做到這一點,你可以穀歌動態添加JavaScript元素。 我建議為你的小部件製作一個自定義的JavaScript庫。 這不需要太瘋狂。 像這樣的東西:

window.onload = init(){
    widget.load();
}
var widget = function(){
    this.load = function(){
        //search for the commerce_store div
        //get some data from the sql database
        var dat = ajax('actions/getData.php',{type:'get',params:{page:123}});
        //display HTML for data
        for (var i in dat){
            this.addDatNode(dat[i]);
        }
    }
    this.addDatNode = function(stuff){
        //make a node
        var n = document.createElement('div');
        //style the node, and add content
        n.innerHTML = stuff;
        document.getElementById('commerce_store').appendNode(n);
    }
}

當然,你需要設置一些類型的AJAX框架來獲取數據庫信息和事物。 但是這不應該太難。

對於Disqus和IntenseDebate,我相信評論形式和一切都只是HTML(通過JavaScript生成)。 腳本的實際“插件”部分將是ASP,PHP,SQL等的後台框架。最簡單的方法可能只是一些PHP和SQL代碼。 SQL將用於將所有註釋或銷售信息存儲到數據庫中,而PHP將用於操作數據。 像這樣的東西:

function addSale(){ //MySQL code here };
function deleteSale(){ //MySQL code here };
function editSale(){ //MySQL code here };
//...

而且你的大PHP文件將會擁有你的小部件所需要做的所有動作(關於改變數據庫),但是,即使有了這個大的PHP文件,仍然需要用你的ajax框架來調用單獨的函數。回顧一下JavaScript框架的actions/getData.php請求,Actions指的是一個PHP文件夾,每個方法一個,例如addSale.php:

include("../db_connect.php");
db_connect();
//make sure the user is logged in
include("../authenticate.php");
authenticate();
//Get any data that AJAX sent to us
var dat = $_GET['sale_num'];
//Run the method
include("../PHP_methods.php");
addSale(dat);

你想為PHP_methods和運行文件分開文件的原因是,你可能有多個PHP_methods文件。 您可以使用三種方法API,一種用於顯示內容,一種用於請求內容,另一種用於更改內容。 一旦你開始重複使用你的方法,最好把它們放在一個地方。 重寫一次,到處改寫。

所以,真的,這就是所有你需要的部件。 當然,你會想要一個安裝腳本,設置商業數據庫和所有。 但是實際的小部件只是一個包含上述腳本文件的文件夾:

  1. install.php :獲取數據庫設置
  2. JavaScript庫 :加載HTML內容和表單並執行ajax請求
  3. CSS文件 :用於設置HTML內容和表單的樣式
  4. db_connect :一個用於連接數據庫的通用php腳本
  5. 驗證 :一個PHP腳本來檢查用戶是否登錄; 這可能會有所不同,具體取決於您是否擁有自己的用戶系統,或正在使用gravitars / facebook / twitter /等。
  6. PHP_methods :一個包含所有數據庫操作方法的大型php文件
  7. actions文件夾 :一堆調用必要PHP方法的單個php文件; 用AJAX調用每個這些php文件

理論上,你所要做的就是把這個文件夾複製到任何網站上,然後運行install.php來建立它。 你想要運行的小部件的任何頁面,你只需包括.js文件,它將完成所有的工作。

當然,這就是我如何設置它。 我假定編程語言的變化或者設置細節會有所不同。 但是,基本的想法對於大多數網站插件來說都是相似的。

哦,還有一件事。 如果您打算銷售這個小部件,那麼嘗試並保證所有這些腳本不會再分發是非常困難的。 你最好的選擇是將PHP文件放在你自己的服務器上。 客戶端需要有自己的db_connect.php,連接到自己的數據庫和全部。 但是,實際的ajax請求需要引用遠程服務器上的文件。 請求將需要發送有效的db_connect的URL,以及某種類型的密碼或其他東西。 其實,想一想,我不認為有可能做遠程服務器文件共享。 你必須多研究一下,“因為我當然不知道你會怎麼做。


基本上你有兩個選擇 - 使用iframe來包裝你的內容或使用DOM注入風格。

IFRAMES

Iframes是容易的 - 主機網站包括一個iframe,其中的url包括所有nessessary params。

<p>Check out this cool webstore:</p>
<iframe src="http://yourdomain.com/store?site_id=123"></iframe>

但是,這帶來了成本 - 考慮到內容,沒有簡單的方法來調整iframe的大小。 初始維度幾乎是固定的。 你可以想出一些跨框架腳本來測量iframe內容的大小,並根據腳本中的數字將其轉發到調整iframe大小的主機站點。 但是這真的很糟糕。

DOM注入

第二種方法是直接將自己的HTML“注入”主頁面。 主機站點從您的服務器加載一個<script>標記,腳本包括所有的信息添加到頁面的HTML。 有兩種方法 - 第一種是在服務器中生成所有的HTML,並使用document.write來注入它。

<p>Check out this cool webstore:</p>
<script src="http://yourdomain.com/store?site_id=123"></script>

而腳本源將是類似的

document.write('<h1>Amazing products</h1>');
document.write('<ul>');
document.write('<li><a href="http://yourdomain.com/?id=1">green car</a></li>');
document.write('<li><a href="http://yourdomain.com/?id=2">blue van</a></li>');
document.write('</ul>');

這將原來的<script>標籤替換為document.write調用中的HTML,並且注入的HTML也是原始頁面的一部分,因此不會像調用iframe那樣調整大小等問題。

<p>Check out this cool webstore:</p>
<h1>Amazing products</h1>
<ul>
<li><a href="http://yourdomain.com/?id=1">green car</a></li>
<li><a href="http://yourdomain.com/?id=2">blue van</a></li>
</ul>

同樣的事情的另一種方法是從HTML中分離數據。 包含的腳本將由兩部分組成 - 繪圖邏輯和序列化形式的數據(即JSON)。 與那種僵硬的document.write方法相比,這為腳本提供了很大的靈活性。 您不需要直接在頁面上直接輸出HTML,而是可以即時生成所需的DOM節點,並將其附加到特定元素。

<p>Check out this cool webstore:</p>
<div id="store"></div>
<script src="http://yourdomain.com/store_data?site_id=123"></script>
<script src="http://yourdomain.com/generate_store"></script>

第一個腳本由數據組成,第二個腳本由繪圖邏輯組成。

var store_data = [
    {title: "green car", id:1},
    {title: "blue van", id:2}
];

腳本會是這樣的

var store_elm = document.getElementById("store");
for(var i=0; i< store_data.length; i++){
    var link = document.createElement("a");
    link.href = "http://yourdomain.com/?id=" + store_elmi[i].id;
    link.innerHTML = store_elmi[i].title;
    store_elm.appendChild(link);
}

雖然比document.write稍微複雜一些,但這種方法是最靈活的。

發送數據

如果你想發送一些數據回你的服務器,那麼你可以使用腳本注入(你不能使用AJAX,因為相同的來源策略,但沒有腳本注入的限制)。 這包括把所​​有的數據放到腳本url(記住,IE的URL長度限制為4kB),服務器響應所需的數據。

var message = "message to the server";
var header = document.getElementsByTagName('head')[0];
var script_tag = document.createElement("script");
var url = "http://yourserver.com/msg";

script_tag.src = url+"?msg="+encodeURIComponent(message)+"&callback=alert";
header.appendChild(script_tag);

現在你的服務器獲取GET PARAMSMSG msg=message to the servercallback=alert做了一些事情,並用

<?
    $l = strlen($_GET["msg"]);
    echo $_GET["callback"].'("request was $l chars");';
?>

這將彌補

警報(“請求是21個字符”);

如果你改變了某種你自己的功能的alert ,那麼你可以在網頁和服務器之間傳遞消息。





widget