freedream520 / qmik Goto Github PK

2.手机性能比较低(iphone还好些,android就惨不忍睹(平台分裂,硬件相差太大)),
    解析模版源码的时长就变长

3. 以上两点就大大拖累了体验

$.define("demo",function(require, exports, module){
    module.exports = {name:"exports"};
    return {name:"leo"};//等于 module.exports = {name:"leo"}
});

    encode(value) :等同于encodeURIComponent
    decode(value) :decodeURIComponent ,
    isBool(value) : 布尔判断,
    isString(value) : 字符串判断,
    isFun(value) : 方法判断,
    isFunction(value) : 方法判断,
    isNum(value) :整形判断 ,
    isNumber(value) : 整形判断,
    isArray(value) : 数组判断,
    isNull(value) : 空指针判断,
    isRetinal() : 判断是否是高清屏,默认是高清屏
    likeArray(value) : 像数组,有length字段等一些属性,
    each(value,function(i,val){}) : 循环,
    stringify(value) : json转字符串,
    parseJSON(value) : 字符串转json,
    likeArray(value) : 像数组
    isDate(value) :是否是时间类型
    isObject(value) : 是否是对象
    isPlainObject(value) : 
    likeNull(value) : 像空值,如 "","null","undefined",null等会被认为True,
    inherit(subClass, superClass) : 继承类 子类subClass继承父类superClass的属性方法, 注:子类有父类的属性及方法时,不会被父类替换,
    trim(value) : 过滤前后不可见字符,
    toLower(value) :字符串小写,
    toUpper(value) : 大写,

    merge(arr1,arr2) : merge,   // 合并数组或对象
    array(array) : //合并成一个新数组,
    inArray(value, array) : 在数组里的索引位,
    unique(array) : 数组去重,
    map(array, callback) : //对数组里的内容,全部做一次数据映射转换,
    getScript(url, success, error) :  取得脚本
    getCss(url, success, error) :  取得css
    grep(array,callback):过滤

    param :  抽取数组里面每个元素的name和value属性,转换成一个url形式(a=b&name=g)的字符串,有做encode
    now([date]) :   当前时间
    delay(fun, time [arg1, arg2, arg3,...]) (https://github.com/leochen36/qmik/wiki/$.delay)  \<br>延迟执行,类似setTimeout,返回一个对象,对象有个 stop方法,用于停止执行,...表示要传输的参数,如:$.delay(function(a1,a2){},1000,1,2);//1 对应 a1,2对应 a2
    // 
    /**
     * fun:执行的方法
     * cycleTime:执行的周期时间
     * ttl:过期时间,执行时间>ttl时,停止执行,单位 ms(毫秒)
     * ,...表示要传输的参数 $.cycle(function(a1,a2){},1000,30000,1,2);//1 对应 a1,2对应 a2
     */
    cycle(fun, cycleTime, ttl,...) :  周期执行,类似于setInterval,会返回一个对象,对象有个 stop方法,用于停止执行

    log(msg, event) : 打日志
    isIphone() : 
    isAndroid() :
    isWP() : 
    isIE() : 
    isFF() : is Firefox
    isWK() : is Webkit
    isOpera() : isOpera
    config(opts, _config) : 
    url(_url) : 合并url,if 参数 _url为空,则

    ajax:function({
        dataType:'json'|'text'|'jsonp',
        async:bool,(default:true)
        type: 'get'|'post'
        success,function(data){},
        error:function(){}
    });
    render: function(struct), 
        //参数说明:
        struct:{
            tag:'div[name="testdiv" class="show" time="${time}"]',
            text:'显示的文件',//如果<div>显示的文件</div>
            data:{
                time:'haha'
            }, //这个参数在htmljson里通过  ${time} 来引用
            child:[//子节点,tag:是用来描述标签及属性的(如果有子节点child,则一定要有tag,text:输出innerText文本的)
                {
                    tag:'p[name="title"]',
                    text:'title',
                    child:[
                        {
                            tag:'span[class='remark']',
                            text:'remark'
                        },{
                            text:' xxxxxx'
                        }
                    ]
                }
            ]
        }
    
    series:function(tasks, callback)//串行执行任务列队,如果有输出参数,则前一个任务输出参数给下一个任务
            //例子,tasks:任务方法数组,callback:执行完任务后,回调
            $.series([
                function(callback){//callback:function(err, exports){}
                    var m = {};
                    callback(null, m);
                },
                function(callback, val){
                    callback(null, {name:"leo"});
                },
                function(callback, val){
                    callback(null, {name:"leo"});
                }
            ],function(err, exports){
                //全部执行完,回调
            });
    parallel:function(tasks, callback)//并行执行任务列队,当中有任务执行出错,不影响其它任务的执行
            //例子:tasks:任务方法数组, callback:执行完任务后,回调
            $.parallel([
                function(callback){//callback: function(){}
                    callback();
                },
                function(callback){
                    callback();
                }
            ],function(){
                //全部执行完,回调
            });
        execCatch:function(fun, args, error)
            //执行方法并捕获异常,不向外抛出异常,try{}catch(e){} 影响代码的美观性
            fun:执行方法
            args:数组,参数[]
            error:抛出异常回调,无异常不回调

    $("#id") 
    $(".class")
    $("ul")
    $("#id .class")
    $("#id > .class")
    $(".class div[flag=aaa]")   

    last : function() :最后一个
    eq : function(i)    :指定位置
    first : function()  :第一个
    filter : function(f) :过滤选择
    even : function()   :偶数个
    odd : function()    :奇数个
    gt : function(i) :
    lt : function(i) :
    find : function(s) 
    each : function(f)
    append : function(c)
    appendTo: function( c ):$('.wrap').appendTo("body"),$('.wrap').appendTo($("body"))
    remove : function()
    before : function(c) 
    beforeTo : function(c) 
    after : function(c)
    afterTo : function(c)
    html : function(v)
    empty : function() 
    text : function(v) 
    addClass : function(n) 
    rmClass : function(n)  == removeClass
    show : function()
    hide : function() 
    toggle : function()
    toggleClass : function(className)
    map : function(callback)
    css : function(k, v) 
    attr : function(k, v) 
    rmAttr : function(k)    == removeAttr
    removeAttr : function(k)
    data : function(k, v) 
    rmData : function(k) == removeData
    val : function(v)

    next : function(selector) //下一个指定元素
    prev : function(selector) //上一个指定元素
    clone : function(bool) 
    hasClass : function(c) 
    closest : function(selector) //查找最近的匹配的父(祖父)节点(从自身开始查找)
    parents : function(selector) //查找所有的匹配的父(祖父)节点
    parent : function(selector) //查找最接近的一个匹配的父(祖父)节点
    children : function(selector)//查找子节点

    width:function();//宽度
    height:function()//高度
    offset:function() //return {top:xx,left:xx} 获取匹配元素在当前视口的相对偏移
    position:function() //return {top:xx,left:xx}获取匹配元素相对父元素的偏移

    (function($) {

        $.config({
            context : "/",// 配置工程的访问路径,如果没有配置,默认= /
            debug:true//debug模式
        });

        // 定义模块名及请求路径
        $.sun.config({
            //别名系统,把路径抽象成一个key来表示,后续通过这个key来找到对应的url
            alias : {
                // qmik组件
                "Qmik.nav" : $.url("/assets/plugins/Qmik.nav.js"),//
                ///
                //业务模块
                "Home" : "module/home/Home.js",
            },
            preload : [//预加载,在加载其它模块前,最优先加载下面定义的模块
                "Qmik.nav"
            ]
        });
    })(Qmik);

    <!-- 加载框架 -->
    <script type="text/javascript" src="/xxxx/Qmik.js"></script>
    <!-- 加载配置文件 -->
    <script type="text/javascript" src="/xxxx/Config.js"></script>

(function($) {
    function Home(nav){
        this.nav=nav;
    }
    Home.prototype.showHome=function(){
            var me=this;
            var main = $("#main_module");
                $.get("module/home/home.html", function(data) {
                    main.html(data);//填充内容
                    me.doxxx();
                });
    }

        Q.sun.define(function(require, exports, module) {
            var nav = require("Nav");//依赖导航模块
            exports=new Home(nav);
        });
    })(Qmik);

    <script type="text/javascript">
        // 界面初始化 
        (function($) {
            //依赖3个模块初始化
            $.sun.use([
                "Nav", "Home"
            ], function(nav, home) {
                    nav.doxxx();//显示头部导航
                    home.showHome();//显示首页
            });
        })(Qmik);
    </script>

var list=[
    {id:'a3',title:'ww',price:100},
    {id:'a4',title:'nn',price:178}
];
$({
    tag:'div[class="bg"]',
    data:{
        price:96
    },
    child:[
        {
            tag:'span[class="tm" style="display:inline-block; padding:5px"]',
            text:'价格price: ${price}  '
        },{
            tag:'span[class="tm" style="display:inline-block padding:5px"]',
            text:'18很小呀 price: {{price}} 这个变量取法在1.6.1里开始支持'
        },{
            tag:'span[class="tm" style="display:inline-block padding:5px"]',
            text:'24'
        }
    ],
    exec: function(){
      var me = this;
        $.each(list, function(i, item){
            me.add({
                tag:'i[]',
                text:'价格:${price}'
            }, item);
        });
    }
}).on({
    click:function(e){
        console.log(e.target);
    }
}).appendTo($("body"))

1.安装github客户端,需要使用到git-shell  (http://windows.github.com/)
2.下载 nodejs ,安装 ,http://nodejs.org/
3. 把nodejs的bin配置到path里,(已经自带了npm)
4.运行Git Shell,进入下载下来的源码地址,如果d:/download/qmik/
        执行命令:
                npm uninstall -g grunt  卸载 
            npm install -g grunt-cli  (把安装完后的grunt指令添加到 path里 C:\Users\xxx\AppData\Roaming\npm)
                    npm install grunt-contrib-uglify  安装uglify 
                    npm install  grunt-contrib-cssmin  安装cssmin
                    npm install  grunt-contrib-qunit  安装cssmin
                    npm install  grunt-contrib-concat 安装cssmin
                    npm install  grunt-contrib-clean  安装cssmin

     安装完成后,进入目录,执行  grunt命令,开始自动构建,构建代码后的代码放在 assets 目录下