Git Product home page Git Product logo

pagurian's Issues

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.5版本开发计划

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

ehcarts渲染问题

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

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

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

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'

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.