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

  以前总是在需要执行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. web app 页面旋转整体样式问题

    $(window).bind("orientationchange", function (event) { if (event.orientation) { //portrait ...

  2. js处理日期的一些整理(js获取给定日期前一天的日期)

    var date = new Date(); alert(date);//获取当前时间 alert(date.getFullYear());//获取当前年分 alert(date.getMonth() ...

  3. Suse linux 11 SP2 nginx 使用笔记

    1. 下载源代码 http://nginx.org/en/download.html   2. DAV模块缺省没有编译,要加入编译选项 # ./configure --with-http_dav_mo ...

  4. 关于div居中

    margin : 100px; margin-left: auto; margin-right: auto; 这样子设置css样式就可以实现一个div居中

  5. SVN中检出(check out) 和 导出(export) 的区别

    SVN是常用的一种常见的版本控制软件.SVN中检出(check out) 和 导出(export) 的区别主要有如下几条: check out跟check in对应,export跟import对应. ...

  6. rand.Read() 和 io.ReadFull(rand.Reader) 的区别?

    golang的随机包 rand.go 中我们可以看到 rand.Read 其实是调用的io.Reader.Read() 1: // Package rand implements a cryptogr ...

  7. linux 如何让程序在开机时启动,关机前关闭

    可以将自己所写的script的文件名写入/etc/rc.d/rc.local(用户自定义开机启动程序) 中,在/etc/rc.d/init.d 中貌似也可以

  8. Pregel: A System for Large-Scale Graph Processing(译)

    [说明:Pregel这篇是发表在2010年的SIGMOD上,Pregel这个名称是为了纪念欧拉,在他提出的格尼斯堡七桥问题中,那些桥所在的河就叫Pregel.最初是为了解决PageRank计算问题,由 ...

  9. JavaScript之Object

    两种简单的JavaScript中定义对象的方式: 在JavaScript中,可以动态添加对象的属性,也可以动态删除对象的属性. var object=new object(); //alert(obj ...

  10. 淘宝的ruby镜像已无人维护,使用ruby-china的RubyGems镜像

    淘宝的镜像已经无人维护了,参考 https://ruby-china.org/topics/29250 https://gems.ruby-china.org/ 使用新的镜像 $ gem source ...