如何制作像Disqus或者这样的javascript

Question

我想创建一个可以在任何网页上显示的应用程序,就像Disqus或者Disqus在文章和网页上呈现一样.

它将显示一个迷你电子商务店面.

我不知道如何开始.这些"小部件"是否有任何示例代码,框架或设计模式？

例如,我想展示产品.我应该首先创建列出所有这些服务的Web服务或RSS吗？或者这些Ajax脚本中的一个可以简单地消化XHTML网页并显示它？

感谢任何提示,我真的很感激.

Answer 1

基本上你有两个选择 - 使用iframe来包装你的内容或使用DOM注入风格.

IFRAMES

iframe很容易 - 主机站点包含一个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>标记替换为HTML内部document.write调用,并且注入的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方法相比,这为脚本提供了很大的灵活性.您可以动态生成所需的DOM节点并将其附加到特定元素,而不是直接将HTML直接打印到页面.

<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参数获取请求msg=message to the server并对其callback=alert执行某些操作,并进行响应

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

哪个会弥补

警报("请求是21个字符");

如果您更改了alert某种类型的自己的功能,那么您可以在网页和服务器之间传递消息.

Answer 2

我对Disqus或者Disqus都做了很多,但我确实知道如何制作这样的小部件.小部件的实际显示部分将使用JavaScript生成.所以,假设你有一个id为的div标签commerce_store.您的JavaScript代码将在首次加载时(或当ajax请求更改页面时)搜索文档,并查找commerce_storediv是否存在.找到这样的容器后,它将自动生成所有必需的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和Disqus,我相信评论表格和一切都只是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框架调用各个函数.回顾一下actions/getData.php示例JavaScript框架的请求.Action,是指包含一堆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. authenticate:用于检查用户是否已登录的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.实际上,想到它,我认为它不可能做远程服务器文件共享.你必须多研究一下,"因为我当然不知道你是怎么做的.