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

　　以前总是在需要执行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(':')+;

                str = "[{\"formateDate\":\""+GetCurrentDate()+"\","+readStr.Substring(startIndex, readStr.Length - startIndex-)+"]";

            }

            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>

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

js面向对象，有利于复用的更多相关文章

  1. 浅谈JS面向对象之创建对象

    hello,everybody,今天要探讨的问题是JS面向对象,其实面向对象呢呢,一般是在大型项目上会采用,不过了解它对我们理解JS语言有很大的意义. 首先什么是面向对象编程(oop),就是用对象的思 ...

  2. js面向对象继承

    前言 最近看到js面向对象这章节了,主要学习了原型和面向对象继承关系,为了梳理自己的知识逻辑,特此记录. js的面向对象 先说说我目前了解的js创建对象方法 1.写一个函数,然后通过new创建对象 2 ...

  3. 【JavaScript】 JS面向对象的模式与实践 （重点整治原型这个熊孩子 (/= _ =)/~┴┴ ）

    参考书籍 <JavaScript高级语言程序设计>—— Nicholas C.Zakas <你不知道的JavaScript>  —— KYLE SIMPSON   在JS的面向 ...

  4. 浅谈JS面向对象

    浅谈JS面向对象 一 .什么是面向过程 就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候一个一个依次调用就可以了.注重代码的过程部分. 二.什么是面向对象 最先出现在管理学 ...

  5. js面向对象、创建对象的工厂模式、构造函数模式、原型链模式

    JS面向对象编程(转载) 什么是面向对象编程(OOP)?用对象的思想去写代码,就是面向对象编程. 面向对象编程的特点 抽象:抓住核心问题 封装:只能通过对象来访问方法 继承:从已有对象上继承出新的对象 ...

  6. JS面向对象编程：对象

    一般面向过程的写法都是写很多function,坏处:1.代码复用不好 2.函数名称容易重复冲突 下面介绍面向对象的写法: 在JS中每个函数function都是一个对象. 比如,下面这个就是一个对象,我 ...

  7. JS面向对象（封装，继承）

    在六月份找工作中,被问的最多的问题就是: js面向对象,继承,封装,原型链这些,你了解多少? 额,,,我怎么回答呢, 只能说,了解一些,不多不少,哈哈哈哈,当然,这是玩笑话. 不过之前学过java,来 ...

  8. JavaScript---正则使用,日期Date的使用,Math的使用,JS面向对象(工厂模式,元模型创建对象,Object添加方法)

    JavaScript---正则使用,日期Date的使用,Math的使用,JS面向对象(工厂模式,元模型创建对象,Object添加方法) 一丶正则的用法 创建正则对象: 方式一: var reg=new ...

  9. js面向对象学习 - 对象概念及创建对象

    原文地址:js面向对象学习笔记 一.对象概念 对象是什么?对象是“无序属性的集合,其属性可以包括基本值,对象或者函数”.也就是一组名值对的无序集合. 对象的特性(不可直接访问),也就是属性包含两种,数 ...

随机推荐

  1. C#利用最新版的WPS实现导入导出

    微软的EXCEl操作相信大家也知道,不方便,安装包太大,而且表格的数据量也只有6000多(是6000多还是60000多我就忘记了),在导出导入大量数据的就没办法,而wsp表格则实现了百万数据的容量,而 ...

  2. 数组排序,字符串math,replace练习

    1. 关于数组排序     排序一直是程序设计中的热门话题.在js中,数组有个sort()方法.在不传参数默认情况下,数组的sort()方法原理是:对数每项调用toString()方法,比较字符串按升 ...

  3. 使用RoboCopy 命令

    经常进行文件管理操作的朋友们,不满意于Windows系统内置的复制功能,因为它太龟速了.于是大家就使用FastCopy.TeraCopy之类的软件来加速复制,但是你是否知道Windows 7已经内置快 ...

  4. [再寄小读者之数学篇](2014-11-19 $\tan x/x$ 在 $(0,\pi/2)$ 上递增)

    $$\bex \frac{\tan x}{x}\nearrow. \eex$$ Ref. [Proof Without Words: Monotonicity of $\tan x/x$ on $(0 ...

  5. loadrunner11录制不成功解决方法

    问题一:loadrunner11录制时events为0的解决办法  刚安装好的11.0,系统环境是:WIN7+IE11+LR11 1.ie去掉工具—internet选项中->高级—>去掉“ ...

  6. 五种情况会导致Session 丢失

    1.Session到期自定丢失.2.当修改web.config 系统会重启  SESSION 会丢失.3.Bin目录有变化时候系统会重启 SESSION会丢失 (这里变化指的是,创建新文件.修改文件名 ...

  7. iOS学习笔记之Category

    iOS学习笔记之Category 写在前面 Category是类别(也称为类目或范畴),使用Category,程序员可以为任何已有的类添加方法.使用类别可以对框架提供的类(无法获取源码,不能直接修改) ...

  8. 彻底弄懂css中单位px和em的区别(转)

    国内的设计师大都喜欢用px,而国外的网站大都喜欢用em,那么两者有什么区别,又各自有什么优劣呢? 1. IE无法调整那些使用px作为单位的字体大小: 2. 国外的大部分网站能够调整的原因在于其使用了e ...

  9. 【原创译文】基于Docker和Rancher的超融合容器云架构

    基于Docker和Rancher的超融合容器云架构 ---来自Rancher和Redapt 超融合架构在现代数据中心是一项巨大的变革.Nutanix公司发明了超融合架构理论,自从我听说他们的“iPho ...

  10. Hadoop 集群常见错误

    这里将自己在初识hadoop过程中遇到的一些错误做一个简单总结: (一)启动hadoop集群时易出现的错误: 错误现象:java.net.NoRouteToHostException: No rout ...