为什么javascript没有include,require或import函数?

时间:2016-10-20 21:19:43

标签: javascript jquery html refactoring structure

坚持分离html的概念,从php和javascript中按照最佳编码实践,我发现包含我的javascript文件非常不方便:<script src="../../lib/javascript/jquery.min.js"></script>

原因是我正在重构一个目前不易维护的大型项目。部分原因包括将大量分成更多可管理的块:

enter image description here

这是关注的主要文件夹:

enter image description here

长话短说,我很难弄清楚如何包含和排序我的javascript,例如以类似于php导入的方式。例如,我的登录页面使用users.js来运行一个函数来检查用户凭据;和users.js使用alerts.js来显示任何问题。问题是,目前,我只知道如何在登录页面中使用html包含和链接所有这些文件,如下所示:

<script src="../../lib/javascript/jquery.min.js"></script>
<script src="../../lib_bh/javascript/alerts.js"></script>
<script src="../../lib_bh/javascript/users.js"></script>

但这似乎不正确,因为警报仅由本页面上的users.js函数使用,而不是页面本身。我可以在user.js中使用上面的脚本标签来解决这个问题,但后来我把想要成为js库的东西变成了一个html文件,这看起来似乎不对。我一直在研究ES6语法,它看起来很有前途,但是没有太多关于它的讨论,所以我担心(并且很困惑)如何使用它。基本上,我如何嵌套我的JavaScript,以便我可以分离不同类型的函数和代码,以动态的方式在我的所有页面中使用。哎呀,我宁愿包括jquery而不是使用脚本标签......阅读这样做引起了关注(https://github.com/DefinitelyTyped/DefinitelyTyped/issues/6315)所以我觉得我在一堵砖墙。感谢。

2 个答案:

答案 0 :(得分:0)

我想我回答了自己的问题。如果您使用回调并将数据传回,则会修复此编程问题。这样做可以直接在页面中包含所有javascript代码引用。由于回调函数,一个js文件永远不需要依赖另一个。

答案 1 :(得分:0)

您可以使用HTML Imports:

package com.gbfs.algorithm;

import java.util.ArrayList;
import java.util.Collections;
import java.util.Comparator;
import java.util.HashSet;
import java.util.List;
import java.util.PriorityQueue;
import java.util.Set;

class Node{
    public final String numeNod;
    public final int hNod;
    public Node parent;
    public Edge[] adjacencies = new Edge[]{};
    public int temp_hNod;

    public Node(String numeNod, int hNod){
            this.numeNod = numeNod;
            this.hNod = hNod;
    }

    public String toString(){
            return numeNod;
    }    
}

class Edge{
    public Node target;

    public Edge[] adjacencies = new Edge[]{};

    public Edge(Node target){
            this.target = target;
    }
}

public class GreedyBFS {

    public static void main(String[] args){


        Node s = new Node("S", 12);
        Node a = new Node("A", 5);
        Node b = new Node("B", 5);
        Node c = new Node("C", 5);
        Node d = new Node("D", 2);
        Node e = new Node("E", 2);
        Node f = new Node("F", 1);
        Node h = new Node("H", 1);
        Node g = new Node("G", 0);

        s.adjacencies = new Edge[]{
                new Edge(b),
                new Edge(a)
        };

        b.adjacencies = new Edge[]{
                new Edge(g),
                new Edge(d)
        };

        d.adjacencies = new Edge[]{
                new Edge(g),
                new Edge(h)
        };

        h.adjacencies = new Edge[]{
                new Edge(f)
        };

        a.adjacencies = new Edge[]{
                new Edge(g),
                new Edge(c)
        };

        c.adjacencies = new Edge[]{
                new Edge(e)
        };

        e.adjacencies = new Edge[]{
                new Edge(g)
        };

        GreedySearch(s, g);

        List<Node> path = printPath(g);

        System.out.println("Path: " + path);
}

    public static void GreedySearch(Node source, Node goal) {

        Set<Node> explored = new HashSet<Node>();

        PriorityQueue<Node> queue = new PriorityQueue<Node>(8, new Comparator<Node>() {

            @Override
            public int compare(Node o1, Node o2) {

                if(o1.hNod > o2.hNod) {
                    return 1;
                }

                else if(o1.hNod <o2.hNod){

                    return -1;
                }

                else
                    return 0;
            }
        });

        queue.add(source);

        boolean found = false;

        while( !queue.isEmpty() && !found ) {

            Node current = (Node) queue.poll();

            explored.add(current);

            if(current.numeNod.equals(goal.numeNod)){
                found = true;
            }

            for(Edge o : current.adjacencies) {

                **Node child = o.target;**

                if(explored.contains(child) && (**child.hNod >= child.hNod**)) {
                    continue;
                }

                else if(!(queue.contains(child)) || (**child.hNod < child.hNod**)) {

                    child.parent = current;

                    if( queue.contains(child) ) {
                        queue.remove(child);
                    }

                    queue.add(child);

                }
            }
        }        
    }

    public static List<Node> printPath(Node target){

        List<Node> path = new ArrayList<Node>();

        for(Node node = target; node!=null; node = node.parent){
            path.add(node);
        }

        Collections.reverse(path);

        return path;
    }

}

然后在引用的文件中(此处: include.html ),放入您需要的所有Javascript和CSS文件。