码迷,mamicode.com
首页 > Web开发 > 详细

Hui 2.x.js 官方文档

时间:2016-08-24 19:19:24      阅读:1368      评论:0      收藏:0      [点我收藏+]

标签:

基础方法

 

 // 判断值是否是指定数据类型
        var result = hui.isTargetType("白签软件", "string");  //=>true
        var result = hui.isTargetType(123, "number");   // =>true
        var result = hui.isTargetType("false", "boolean");  // =>false

 

// 判断数据类型是否是undefined类型
        var result = hui.isUndefined(undefined);    // =>true
        var result = hui.isUndefined(null); // =>false

 

// 判断值是否是有效值,非undefined和非null
        var result = hui.isValid("百签软件");   //=>true
        var result = hui.isValid(null); // =>false

  

// 判断是否是数值类型,包括字符串数值
        var result = hui.isNumber("123");   //=>true
        var result = hui.isNumber(456); //=>true
        var result = hui.isNumber("123a");  // false

  

// 判断是否是function类型
        var result = hui.isFunction(function () { });   // =>true

        function get() {
        };
        var result = hui.isFunction(get);   // =>true

        var result = hui.isFunction("abc"); // =>false

  

// 判断是否是boolean类型
        var result = hui.isBoolean(false);  //=>true
        var result = hui.isBoolean(true);   //=>true
        var result = hui.isBoolean("true");    //=>false

  

 // 判断是否是字符串类型
        var result = hui.isString("");  //=>true
        var result = hui.isString("百签软件");  //=>true
        var result = hui.isString(123); // =>false
        var result = hui.isString(null);    // =>false

  

// 判断是否是日期类型
        var result = hui.isDate("2016-08-24");  //=>true
        var result = hui.isDate("2016/08/24");  //=>true
        var result = hui.isDate("2016-2-1");    //=>true
        var result = hui.isDate("2016-08-24 18:06");    //=>true
        var result = hui.isDate("2016-08-24 18:06:25");    //=>true
        var result = hui.isDate("2016/08/24 18:06:25");    //=>true
        var result = hui.isDate("16/08/24");    // =>false
        var result = hui.isDate("08-24");   //=>false

  

  // 判断是否是正数
        var result = hui.isPlusDecimal(1);  //=>true
        var result = hui.isPlusDecimal(-1);  //=>false
        var result = hui.isPlusDecimal(+1);  //=>true
        var result = hui.isPlusDecimal("10");  //=>true

  

// 判断是否是json类型
        var obj = "string";
        var result = hui.isJson(obj);   // =>false

        var obj1 = new String("abc");
        var result = hui.isJson(obj1);   // =>false

        var obj3 = {
            name: "百签软件",
            autor: "百小僧"
        };
        var result = hui.isJson(obj3);   // =>true

        var obj4 = ["百签软件", "百小僧"];
        var result = hui.isJson(obj4);   // =>false

        var obj5 = [{ name: "百签软件", autor: "百小僧" }];
        var result = hui.isJson(obj5);   // =>false

  

 // 判断是否是数组类型
        var arr = ["百签软件", "百小僧"];
        var result = hui.isArray(arr);  //=>true

        var arr1 = new Array(1, 3, 4);
        var result = hui.isArray(arr1); //=>true

        var arr2 = [{ name: "百签软件", autor: "百小僧" }];
        var result = hui.isArray(arr2); //=>true

        var arr3 = [];
        var result = hui.isArray(arr3); //=>true

  

// 判断是否是HTML元素
        var result = hui.isElement(document.body);  //=>true
        var result = hui.isElement(document.getElementById("nav"));  // =>false,如果找到该元素就返回 true

  

// 获取自定义类名称
        function Persion(name, age) {
            this.name = name;
            this.age = age;
        }
        var p = new Persion("百小僧", 23);
        var result = hui.getCustomType(p);  // =>Persion

  

// 获取方法名称,非匿名方法,需传入方法字符串
        var result = hui.getFunctionName("function getName() {}");  // =>getName

  

// 去掉前后空格
        var result = hui.trim(" 百小僧 "); // =>百小僧
        var result = hui.trim(" 百 小僧 ");    // =>百 小僧

  

// 去掉所有空格
        var result = hui.trimAll(" 百 小 僧 ");    // =>百小僧

  

// 判断是api对象是否存在,通常用来判断是否是APICloud的开发环境
        var result = hui.apiExit(); //=>false

        apiready = function () {
            var result = hui.apiExit(); // =>true
        };

        hui.ready = function () {
            var result = hui.apiExit(); // =>true
        };

  

// 将对象序列化成字符串,也就是可以看到内部结构
        var obj = { name: "百签软件", autor: "百小僧" };
        var result = hui.objParse(obj); // =>" { name: "百签软件", autor: "百小僧" }"

  

// 生成唯一 GUID字符串,32位唯一码
        var guid = hui.guid();  // =>abf9a9a2-8ef9-b291-e557-579f8271f3cf

  

// 序列化json对象为url格式
        var obj = { name: "百签软件", autor: "百小僧" };
        var result = hui.serialize(obj);    // =>&name=百签软件&autor=百小僧

  

// 获取变量值对应的格式类型,方法eval调用
        var val = "123";
        var reslut = hui.getValueTypeFormat(val);   // => "123"

  

// 对象拷贝,继承,并返回新的对象,支持深度拷贝
        var a = { name: "百签软件" };
        var b = { autor: "百小僧" };
        var result = hui.deepAssign({}, a, b);  // =>{name:"百签软件",autor:"百小僧"}

        var c = { name: "百签软件", autor: "新生帝" };
        var d = { autor: "百小僧", age: 23 };
        var result = hui.deepAssign({}, c, d);  // =>{name:"百签软件",autor:"百小僧",age:23}

  

DOM操作方法

 

 // 根据ID名称获取DOM节点
        var header = hui.byId("header");

  

// 根据class属性名称获取DOM节点
        var footers = hui.byClassName("hui-footer");

  

// 根据标签名称获取DOM节点
        var elements = hui.byTagName("<div>");

  

 // 模仿jQuery $ 选择器语法,不同的是,hui.js总是返回数组类型
        var header = hui.$("header")[0];
        var divs = hui.$("div");
        var txt = hui.$("input[type=‘text‘]");

  

 // 获取单个DOM节点
        var header = hui.single("header");

  

// 获取第一个DOM节点
        var div = hui.first("div.nav");

  

// 获取最后一个DOM节点
        var li = hui.last("ul li");

  

// 查找指定DOM元素
        var header = hui.find(document.body, ".nav");

  

// 获取css属性的值
        var val = hui.getCss(document.body, "margin-left");   // =>0px

  

// 获取DOM元素的偏移量
        var offsetObj = hui.offset(hui.single("header"));   // => { t:0,l:0,w:320,h:44}

  

载入Link import 标签定义的模板

 

 /*
         * 载入link import模板
         * 输入参数:
         * templateSelectors:link 模板内容选择器
         * targetSelectors:载入模板之后追加到指定DOM元素中
         */
        hui.LoadLinkTppl(".tppl", document.body);

  

Javascript模板引擎

 

<!--定义模板,<% %> 包裹Javascript代码,<%= %> 输出变量 -->
    <script type="text/html" id="tppl">
        <% for(var i=0; i < list.length;i++){ %>
        <li>名称:<%=list[i].name %></li>
        <%} %>
    </script>

    <script type="text/javascript">
        // 定义数据集合,必须是json类型
        var data = {
            list: [
                {
                    name: "百签软件",
                    autor: "百小僧",
                    age: 23
                }
            ]
        };
        // 调用hui.tppl(tpl,data); 返回渲染之后的HTML,不能重复渲染多个数据集合
        var html = hui.tppl(document.getElementById("tppl"), data);

        // 同时也可以这样调用
        var render = hui.tppl(document.getElementById("tppl"));
        var html = render(data);
        // 可以载入不同的数据渲染同一套模板
        var html2 = render({
            list: [
                {
                    name: "Hui 2.x",
                    autor: "百小僧"
                }
            ]
        });
    </script>

  

Hui 2.x.js 官方文档

标签:

原文地址:http://www.cnblogs.com/baisoft/p/5804168.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!