Giter VIP home page Giter VIP logo

pagurian's Introduction

Pagurian

npm version Build Status devDependency Status License Built with Grunt

一个管理系统的前端框架

Pagurian早期是Hypers前端团队为 服务于公司的产品搭建的一套前端框架, 已经在多个产品中使用,逐渐成熟,并开源出来。

Pagurian

快速开始

以下是一段演示代码,页面引入一个 pagurian.js 文件,然后载入 modules/user/app 模块, 最后初始化改模块下 index 页面的内容。

<script src="pagurian.js" ></script>
<script type="text/javascript">
    pagurian.call("modules/user/app",function(app) {
        app.page.index();
    });
</script>

开发及构建

开发者可以在 Pagrian 的基础上进行二次开发, Pagurian由Grunt构建及发布, 你需要安装Grunt以及所依赖的Node.js环境。

首先安装 Grunt

npm install -g grunt-cli

Clone 项目文件:

git clone https://github.com/hypers/pagurian.git

安装grunt插件:

cd pagurian
npm install

接下来,执行 grunt

grunt

目录结构

Pagurian
├── [.] .build
├── dist/                   //发布目录
│   ├── lib/
│   ├── modules/
│   ├── plugins/
│   ├── resources/
│   └── templates/
├── docs/                   //开发文档
│   ├── api-datatable.md
│   └── api-*.md
├── [.] node_modules/           //Grunt依赖的NodeJs 模块
├── src/                    //开发目录
│   ├── lib/                //框架依赖的基础库
│   ├── modules/            //业务模块
│   ├── plugins/            //插件
│   ├── widgets/            //组件
│   ├── resources/          //css,images,fonts
│   └── templates/          //handlebars 模版文件
├── test/                   //测试
├── Gruntfile.js
├── package.json
└── pagurian.js

谁在用?

参考、使用的项目

pagurian's People

Contributors

cjex avatar godferyyoung avatar hiyangguo avatar simonguo avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

pagurian's Issues

ehcarts渲染问题

1.echatrs update的时候如果数据多次为空则会多次创建

<div class="chart-message">
    <h3><i class="icon icon-info icon-big"></i> 查询结果为空</h3>
</div>

2.查询数据为空时调用showLoading方法不能显示loading动画

src/templates下的优化

{{>fixtures/doctype}}
<head>
    <title>{{data.page.dialog}}</title>
    {{>fixtures/head}}
</head>
<body>

{{>fixtures/header}}

<!-- BEGIN CONTAINER -->
<div class="page-container">

    {{>fixtures/sidebar}}

    <!-- BEGIN CONTENT -->

是否能简化这种模块化方式呢?比如提供个template.hbs,每个子页面只需定制content内容;类似jekyII搭建github静态博客那种思路,提供个template.html

Review little issues

这个 Issue 用于收集一些零碎的代码改进问题。这些问题的优先级较低,可以推迟讨论。


alert可以考虑不同的message type分成不同的方法,就像console.errorconsole.info 一样,我觉得这样更好一些:
https://github.com/hypers/pagurian/blob/dev/src/lib/com/alert.js#L3

alert(msg,"info"); 
// 换成 
alert.info(msg)  // 之类的


alert(msg,"sucess"); // 这样type拼写错了并没有检查机制,换成 alert.success(msg) 拼错方法名可以触发显式报错,节省debug时间

可以保留原来的接口,只增加:

const MSG_TYPES = ["success","info","error","warning"];
MSG_TYPES.forEach((t) => {
  alert[t]= (msg) => alert(msg,t);
});

当然可能名称要变一下,alert即是警告的意思,感觉$p.warn(msg)alert.warning(msg)更顺口一点


可以省略一些不必要的或不恰当的new Class

https://github.com/hypers/pagurian/blob/dev/src/lib/tool/str.js

https://github.com/hypers/pagurian/blob/dev/src/lib/tool/tool.js

https://github.com/hypers/pagurian/blob/dev/src/lib/tool/url.js

作为模块对象不需要有多个实例的,直接这样更好:

var tool = {
   log: function () {/*....*/},
   getQueryString: function () {/*....*/}
};

尤其是 new URL 那个会造成误解( window.URL )。

另外在未来是否应该考虑利用模块加载器提供的 exports 机制?

define(function(require, exports, module) {
    exports.log = function () {/*....*/};
});

利用 CoC 原则/约定胜于配置 ,约定一个模块命名空间为 /lib/tool/str,就自动注册到$PagurianAlias.tool.str上,当然这个点要推迟讨论,现在的不好改。


https://github.com/hypers/pagurian/blob/dev/src/widgets/sizer/module.js
widgets/sizer 的 options 中 callbackXXX 之类的选项考虑是否适合定义成事件。


另外 core/tpl 不知功能是否足够,sea.js好像支持import html模板文件,可以考虑将像Sizer这样的widgets中的大段HTML放到外部文件,然后用 tpl 填充数据得到 _sizerSelectPanel。

1.6 版本开发计划

  • 增加图表的图例
  • 添加Tree 组件
  • 修复上个版本中存在的bug
  • 添加Number Spinner 插件

建议tool/url.js添加一个解析url的方法

原理:

利用 标签自动解析 url
开发当中一个很常见的场景是,需要从 URL 中提取一些需要的元素,譬如 host 、 请求参数等等。

通常的做法是写正则去匹配相应的字段,当然,这里要安利下述这种方法,来自 James 的 blog,原理是动态创建一个 a 标签,利用浏览器的一些原生方法及一些正则(为了健壮性正则还是要的),完美解析 URL ,获取我们想要的任意一个部分。

代码:

// This function creates a new anchor element and uses location
// properties (inherent) to get the desired URL data. Some String
// operations are used (to normalize results across browsers).

function parseURL(url) {
    var a =  document.createElement('a');
    a.href = url;
    return {
        source: url,
        protocol: a.protocol.replace(':',''),
        host: a.hostname,
        port: a.port,
        query: a.search,
        params: (function(){
            var ret = {},
                seg = a.search.replace(/^\?/,'').split('&'),
                len = seg.length, i = 0, s;
            for (;i<len;i++) {
                if (!seg[i]) { continue; }
                s = seg[i].split('=');
                ret[s[0]] = s[1];
            }
            return ret;
        })(),
        file: (a.pathname.match(/([^/?#]+)$/i) || [,''])[1],
        hash: a.hash.replace('#',''),
        path: a.pathname.replace(/^([^/])/,'/$1'),
        relative: (a.href.match(/tps?:\/[^/]+(.+)/) || [,''])[1],
        segments: a.pathname.replace(/^\//,'').split('/')
    };
}

实例

var myURL = parseURL('http://abc.com:8080/dir/index.html?id=255&m=hello#top');

myURL.file;     // = 'index.html'
myURL.hash;     // = 'top'
myURL.host;     // = 'abc.com'
myURL.query;    // = '?id=255&m=hello'
myURL.params;   // = Object = { id: 255, m: hello }
myURL.path;     // = '/dir/index.html'
myURL.segments; // = Array = ['dir', 'index.html']
myURL.port;     // = '8080'
myURL.protocol; // = 'http'
myURL.source;   // = 'http://abc.com:8080/dir/index.html?id=255&m=hello#top'

1.5版本开发计划

  • 新增插件Range Slider
  • Echarts从2.0.0 升级至2.2.0
  • 新增插件 DateTime Picker
  • DataTables 新增表头显示汇总信息
  • 各个组件api文档更新

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.