我在一个前端项目中用js整理的一些通用方法,其中使用到的思想,主要就是约定了。

把名称和后台来的json数据约定起来,可以达到的效果就是可以将东西统一化,减少差异,提升模块等的通用性,此后就可以实现具体不同模块内容可以自动或拷贝赋值的方式

顺带,这个前端项目中用到的控件,一般是手写,其他类型,比如菜单是  accordion.js这个手风琴控件

/* File Created: 十二月 18, 2014 
*@Author iGO
*@LastModify 2014-12-19
**/
//使用闭包,为了增加开发效率而写的自动化赋值的类

//todo: string对象 添加公有format方法
(String.prototype.format = function(args) {
    var result = this;
    if (arguments.length > 0) {
        if (arguments.length == 1 && typeof (args) == "object") {
            for (var key in args) {
                if (args[key] != undefined) {
                    var reg = new RegExp("({" + key + "})", "g");
                    result = result.replace(reg, args[key]);
                }
            }
        } else {
            for (var i = 0; i < arguments.length; i++) {
                if (arguments[i] != undefined) {
                    //var reg = new RegExp("({[" + i + "]})", "g");//这个在索引大于9时会有问题,谢谢何以笙箫的指出
                    var regt = new RegExp("({)" + i + "(})", "g");
                    result = result.replace(regt, arguments[i]);
                }
            }
        }
    }
    return result;
})();

//todo:封装的一些公用的小方法
var commonHelper = (function ($, commonHelper) {
    var baseUrl = "http://51creator.vicp.net/cloudants/";

    var $id = function (id) { return document.getElementById(id); }
    commonHelper.doNothing = function () { };
    //暂不启用!通用赋值,将所有判断做明确,用一个统一的端口接入,实现所有代码共用一套操作,达到最大复用。减少不同具体模块方法的差异,增加通用性
        commonHelper.applyAlt= function(jsonObject) {
            for (var i in jsonObject) {
                var obj = $id(i);
                var objVal = jsonObject[i];
                //赋值text
                if (obj && !(objVal instanceof Array && obj.innerText)) {
                    $("#" + i).text(jsonObject[i]);
                }
                //赋值图片 图片判断
                if (obj.tagName == "img") {
                    $("#" + i).attr("src", objVal);
                }
                //赋值图表,类型为几种,canvas,内层判断为 按后缀,bar line 和pichart

                //赋值模板
            }
        }

    commonHelper.apply = function (jsonObject) {
        if (!jsonObject) return "";
        for (var i in jsonObject) {
            if (document.getElementById(i) && !(jsonObject[i] instanceof Array)) {
                $("#" + i).text(jsonObject[i]);
            }
        }
    }
    commonHelper.applySrc = function (jsonObject) {
        for (var i in jsonObject) {
            if (jsonObject[i].toString().indexOf(".") > -1)
                $("#" + i).attr("src", jsonObject[i]);
        }
    }
    commonHelper.applyChartBar = function (jsonObject) {
        for (var i in jsonObject) {
            if (i.toString().indexOf("_bar") != -1 && document.getElementById(i) != null) {
                var ctx3 = document.getElementById(i).getContext("2d");
                window.myBar3 = new Chart(ctx3).Bar(jsonObject[i], { responsive: true });
            }
        }
    }
    commonHelper.applyChartLine = function (jsonObject) {
        for (var i in jsonObject) {
            if (i.toString().indexOf("_line") != -1 && document.getElementById(i) != null) {
                var ctx2 = document.getElementById(i).getContext("2d");
                window.myLine2 = new Chart(ctx2).Line(jsonObject[i], { responsive: true });
            }
        }
    }
    commonHelper.applyPiChart = function (ret) {
        for (var i in ret) {
            if (document.getElementsByClassName(i).length > 0)
                $("." + i).attr("data-percent", ret[i]).easyPieChart({
                    animate: 1000,
                    size: 100,
                    lineCap: "square",
                    scaleColor: "#ccc",
                    trackColor: "#ddd",
                    barColor: "#0093dd",
                    lineWidth: "3"
                }); ;
        };
    }

    commonHelper.applyTemplate = function (el, template) {
        var text = "", args = arguments;
        if (arguments.length >= 2) {
            for (var i = 2; i < arguments.length; i++) {
                var reg = new RegExp("({)" + (i - 2) + "(})", "g");
                template = template.replace(reg, arguments[i]);
            }
        }
        text = template;
        $("#" + el).html(text);
    }

    commonHelper.applyTemplate = function (el, template, argArray) {

    }

    commonHelper.getUrl = function (token) {
        return baseUrl + token;
    }

    return commonHelper;
})(jQuery, commonHelper || {});

模块写法,使用了js模块架构模式中的Module模式
/* File Created: 十二月 9, 2014 */

/*
*Latest Modify:2014-12-12
*Updator:iGO
*login logic 
*
**/

var page351Helper = (function ($, page351Helper, ajaxHelper, commonHelper) {
    "Use Strict";
    var applyStoreInfo_RT = function (ret) {
        ret = ret || { "success": true, "store_lunname": "lun1", "store_errors": "10", "store_alarms": "10" };
        commonHelper.apply(ret);
    }
    var applyStoreCapacity_RT = function (ret) {
        ret = ret || { "success": true, "store_total": "100G", "store_used": "50G", "store_health": "20%" };
        commonHelper.apply(ret);
        $("#store_used").height(ret.store_health);
    }
    var applyStoreFullInfo_RT = function (ret) {
        ret = ret || { "success": true, "store_id": "1", "store_name": "store1", "store_lunlocation": "XXX", "store_type": "XXX", "store_volumespace": "XXX", "store_linkhosts": "8", "store_linkvms": "4", "store_pathsmode": "XXX", "store_allpaths": "18" };
        commonHelper.apply(ret);
    }
    var applyStoreIODelay_RT = function (ret) {
        ret = ret || {};
        commonHelper.applyChartBar(ret);
        commonHelper.apply(ret);
    }
    var applyStoreEntity_RT = function (ret) {
        ret = ret || {};
        commonHelper.apply(ret);
    }

    page351Helper.initial = function () {
        //todo:接口:store!getStoreInfo_RT
        ajaxHelper.post({
            url: commonHelper.getUrl("store!getStoreInfo_RT"),
            data: { store_id: "" },
            success: applyStoreInfo_RT
        });
        //todo:接口:store!getStoreCapacity_RT
        ajaxHelper.post({
            url: commonHelper.getUrl("store!getStoreCapacity_RT"),
            data: { store_id: "" },
            success: applyStoreCapacity_RT
        });
        //todo:接口:getStoreFullInfo_RT
        ajaxHelper.post({
            url: commonHelper.getUrl("getStoreFullInfo_RT"),
            data: { store_id: "" },
            success: applyStoreFullInfo_RT
        });
        //todo:接口:store!getStoreIODelay_RT 
        ajaxHelper.post({
            url: commonHelper.getUrl("store!getStoreIODelay_RT"),
            data: { store_id: "" },
            success: applyStoreIODelay_RT
        });
        //todo:接口:store!getStoreEntity_RT
        ajaxHelper.post({
            url: commonHelper.getUrl("store!getStoreEntity_RT"),
            data: { store_id: "" },
            success: applyStoreEntity_RT
        });
    }

    return page351Helper;

})(jQuery, page351Helper || {}, AJAXHelper, commonHelper);
$(function () {
    page351Helper.initial();
});
时间: 2024-10-21 12:39:02

我在一个前端项目中用js整理的一些通用方法,其中使用到的思想,主要就是约定了。的相关文章

项目中用js隐藏身份证信息

在项目中通过js来隐藏身份证的某些字符,电脑版的实现是在页面截取,现在做手机版,想把截取字符串放在后台来操作,但为了保证手机版和电脑版显示一致,所以希望截取规则也能一致,ftl页面的js写法如下: <html> <body> <script type="text/javascript"> var html = '123456789abcdefghi'; var uw = html.replace(/(\w)/g,function(a,b,c,d){r

JAVA Web项目中用到Redis的代码调试

JAVA Web项目中用到Redis的代码调试方法 在项目开发中用到了Redis,需要调试输出数据的正确性, 方法一:修改代码,暂时不从Redis取数据 方法二:清除Redis数据库中的所有key 登录Redis服务器,切换目录到Redis的目录: cd /opt/redis-2.8.13/src/ 清除Redis数据库中的所有key ./redis-cli flushall

之前项目中用到的简单的自定义弹出提示框的实现,整理整理,当然开源的插件很多,但自己写的可以随意发挥

效果如下: html代码: <div class="container"> <div class="wrapper" style="background-color:white; position:relative;"> <div class="box" style="background-color:red; position:absolute; left:100px; top:300

前后端分离——前端项目使用Mock.js 模拟数据

一.简单介绍一下Mock.js 众所周知Mock.js因为两个重要的特性风靡前端: 数据类型丰富支持生成随机的文本.数字.布尔值.日期.邮箱.链接.图片.颜色等.(详情见官网) 拦截 Ajax 请求不需要修改既有代码,就可以拦截 Ajax 请求,返回模拟的响应数据.安全又便捷 文章会用到的API(也是Mock经常使用的API): Mock.mock(url, type, data) 参数名 参数需求 参数描述 例子 url 可选: URL 字符串或 URL 正则 拦截请求的地址 /mock ty

为什么 ReactJS 不适合复杂的前端项目?

问题一:ReactJS组件难以在复杂交互页面中复用 ReactJS中的最小复用单位是组件.ReactJS的组件比AngularJS的Controller和View 要轻量些. 每个组件只需要前端开发者提供一个 render 函数,把 props 和 state 映射成网页元素. 这样的轻量级组件在渲染简单静态页面时很好用, 但是如果页面有交互,就必须在组件间传递回调函数来处理事件. 我将在<More than React(二)组件对复用性有害?>中用原生DHTML API.ReactJS和Bi

gulp + webpack 构建多页面前端项目

修改增加了demo地址 gulp-webpack-demo 之前在使用gulp和webpack对项目进行构建的时候遇到了一些问题,最终算是搭建了一套比较完整的解决方案,接下来这篇文章以一个实际项目为例子,讲解多页面项目中如何利用gulp和webpack进行工程化构建.本文是自己的实践经验,所以有些解决方案并不是最优的,仍在探索优化中.所以有什么错误疏漏请随时指出. 使用gulp过程中的一些问题,我已经在另外一篇文章讲到了 grunt or gulp 前言 现在为什么又整了一个webpack进来呢

前端项目

前端学习还是很有趣的,可以较快的上手然后自己开发一些好玩的项目来练手,网上也可以一抓一大把关于前端开发的小项目,可是还是有新手在学习的时候不知道可以做什么,以及怎么做,因此,就整理了一些前端项目教程,希望可以帮助正在学习前端的小伙伴.为了方便阅读,大概把前端可以做的项目分为三类: 游戏类 实用类 好玩类 然后依次推荐一些项目教程,想要学习的小伙伴可以看看~ 游戏类 其实很多常见的小游戏都是纯前端开发出来的,比如曾经风靡的2048.别踩白块啊等等,简单有趣,对于初学者来说,这些小游戏是非常不错的练

前端项目模块化的实践2:使用 Webpack 打包基础设施代码

以下是关于前端项目模块化的实践,包含以下内容: 搭建 NPM 私有仓库管理源码及依赖: 使用 Webpack 打包基础设施代码: 使用 TypeScript 编写可靠类库 (实现中) 本文是关于前端项目模板化的第2部分 现状 实际项目远远比示例使用的 myGreeting 复杂,比如 为了提高可维护性我们将项目折成了许多功能模板: 我们希望使用 Promise 等语法等,但是顾忌目标环境的支持能力: 可能依赖了多个第三方类库: 为了提高加载速度我们打包时需要进行很多额外工作: 代码压缩: Tre

前端项目自动化构建工具——Webpack入门教程

参考资料:https://www.webpackjs.com/(中文文档)   https://www.webpackjs.com/(官方文档) 首先有必要说明一下,本文侧重讲解webpack基本配置属性,不附带实例,将会以通俗易懂的形式地讲解:如若需要实例进行相关练习,可将本文作为理论基础: Webpack是前端项目自动化构建工具,本质上,webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler).当 webpack 处理应用程序时,它会递归地构