js面向对象，有利于复用

最新推荐文章于 2022-09-10 13:12:23 发布

diao348697428

最新推荐文章于 2022-09-10 13:12:23 发布

阅读量144

点赞数

文章标签： json javascript ViewUI

原文链接：http://www.cnblogs.com/ancient-sir/p/js.html

版权

需求：在网页上添加个天气预报。

　　以前总是在需要执行js的地方，直接写function(){}。在需要同样功能的地方直接copy，或者稍微修改。

　　然后在网上看看有没有好点的方法，然后就看到js面向对象编程，看了一些代码，感觉真不错。这些代码在以前做项目时也有看到过。当时只要能实现就忙于交差。没有多点的留意。

　　于是，就想整理一下，以便以后提醒自己。

js文件：

　 AutoWeather.js

AutoWeather = function (config) {
    this.renderTo = config.renderTo || $(document.body); /*content*/
    this.render = typeof (this.renderTo) == "string" ? $("#" + this.renderTo) : $(this.renderTo); //渲染的控件
    this.city = config.city; //属性
    this.init();  //初始化
};

AutoWeather.prototype = {
    init: function () {
        var autoEntity = this;
        this.autoDate = $("<span id='autow-date'></span>");  //创建控件
        this.render.append(this.autoDate);
        this.autoWeather = $("<span id='autow-weather'></span>");
        this.render.append(this.autoWeather);
        $.ajax({
            type: 'post',
            url: 'PostWeather.ashx', //部署时，要虚拟路径 从网站根目录开始
            data: { city: autoEntity.city },
            dataType: "text",
            async: true, //true:异步 false:同步
            success: function (data) {
                var json = $.parseJSON(data);
                alert(data);
                $("#autow-date").text(json[0].formateDate);
                var s = json[0].weather + getNumberFromStr(json[0].temp1) + "-" + json[0].temp2;
                $("#autow-weather").text(s);
            }
        });
    }
    
};

function getNumberFromStr(value) {
    var reg = /\d+/;
    var res = value.match(reg);
    return res;
}

Handler文件：

//数据来自 中国气象网站的天气信息

public void ProcessRequest(HttpContext context)
        {
            context.Response.ContentType = "text/plain";
            string str = "";
            string city = context.Request["city"];//城市编号
            WebClient _client = new WebClient();
            try
            {
                Stream objStream = _client.OpenRead("http://www.weather.com.cn/data/cityinfo/"+city+".html");
                StreamReader _read = new System.IO.StreamReader(objStream, System.Text.Encoding.UTF8);
                string readStr = _read.ReadToEnd();
                int startIndex = readStr.IndexOf(':')+2;
                str = "[{\"formateDate\":\""+GetCurrentDate()+"\","+readStr.Substring(startIndex, readStr.Length - startIndex-1)+"]";
            }
            catch (Exception ex)
            {

            }
            context.Response.Write(str);
        }

        public string GetCurrentDate() {
            string[] Day = new string[] { "星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六" };
            string preStr = DateTime.Now.ToString("yyyy年MM月dd日");
            string endStr = Day[Convert.ToInt32(DateTime.Now.DayOfWeek.ToString("d"))].ToString();
            return preStr + " " + endStr;
        }

　　　Html文件：

<head runat="server">
    <title></title>
    <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="AutoWeather.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(function () {
            var _weather = new AutoWeather({
                renderTo: "info",
                city: "101190201"  //无锡的编号
            });
        });
    </script>
</head>
<body>
    <form id="form1" runat="server">
   <!--显示天气的地方-->

    <div id="info">
    </div>
    </form>
</body>
</html>

写下来，以后方便使用，和大家分享一下。

转载于:https://www.cnblogs.com/ancient-sir/p/js.html

diao348697428

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js面向对象，有利于复用

需求：在网页上添加个天气预报。　　以前总是在需要执行js的地方，直接写function(){}。在需要同样功能的地方直接copy，或者稍微修改。　　然后在网上看看有没有好点的方法，然后就看到js面向对象编程，看了一些代码，感觉真不错。这些代码在以前做项目时也有看到过。当时只要能实现就忙于交差。没有多点的留意。　　于是，就想整理一下，以便以后提醒自己。 js文件：...
复制链接

扫一扫