webpack开发总结

[zhan2016]

webpack是啥

使用webpack以前，编写前端代码的烦恼之处:

• js文件全部包含在index.html中，而且包含顺序要小心维护
• css文件要在js之前包含在特定的位置
• 模块之间的复用性依靠全局性的记忆

使用webpack之后解决了以下问题:

• js文件之间互相引用，依赖关系由webpack维护，开发人员不需要在意模块的顺序.使用es6的语法，在模块中export任意变量，函数，在使用的模块中import任意变量，函数.
• 可以打包/加载很多类型的文件，在js中可以import css文件!
• 模块之间在使用的时候import一下，复用性独立
• 有很多的插件可以支持从开发到运行时的各种脏活，累活

总结:
webpack是一套工程管理工具，他首先从entry入手，构建一个依赖图。然后，使用loader逐个的转换对应的各种类型的文件。然后使用plugin对打包的文件进行一个整体的处理。最后生成一个bundle.js.
ps:
使用npm管理包，安装的所有包在package.json中都会有对应的依赖添加，在上传到git的时候，我们应该在.gitignore中忽略./node_modules文件夹.

fanctryTreeView

一个树形控件

$("#tree").fancytree({
        extensions: ["glyph"],
        checkbox: false,
        selectMode: 3,
        glyph: {
            preset: "awesome4",
            map: {}
        },
        source: datasource,
        lazyLoad: function(event, ctx) {
            ctx.result = {url: "ajax-sub2.json", debugDelay: 1000};
        },
        click: function(event, data) {
            var node = data.node;
            if (node.title === "标本查询")
            {
                setupTableViewer();
                loadData();
                return false;
            }
            if(node.title === "导出png")
            {
                exportPng();
                return false;
            }

            //if
            // return false to prevent default behavior (i.e. activation, ...)
            //return false;
        }
    });

datatables

一个表格控件

$('#viewer').append(html);
    var language = {
        "processing": "<img src='loading-spinner-grey.gif'/><span>&nbsp;&nbsp;"+"处理中..."+"</span>",
        "lengthMenu": "每页 _MENU_ 条结果",
        "zeroRecords": "没有匹配结果",
        "info": "<span class='seperator'>  </span>" + "总共找到 _TOTAL_ 条结果",
        "infoFiltered": " (从所有 _MAX_ 条记录中得到)",
        "infoEmpty": "共 0 项",
        "emptyTable": "表中数据为空",
        "paginate": {
            "previous": "前页",
            "next": "下页",
            "first": "第一页  ",
            "last": "  尾页"
        }
    };
    var columns=[];
    tablesFileds.forEach(function (table) {
        var column = {};
        column["data"] = table.FieldName;    //指定表格的某列对应的后面添加json数组中每项的name
        column["name"] = table.FieldName; 
        column["orderable"] = true;
        columns.push(column);

    });
    $('#specimens').DataTable({
        pageLength: 10,
        language:language,
        paging: true,
        searching: true,
        order: [[0, "asc"]],
        columns: columns,
        columnDefs: [{ orderable: false, targets: [5] }], // 6 was the highest index, not 7
        dom: 'Bfrtip',
        buttons: [
            {
                extend: 'excel',
                text: 'Save current page',
                exportOptions: {
                    modifier: {
                        page: 'all'
                    }
                }
            }
        ]
    });