js面向对象,有利于复用
需求:在网页上添加个天气预报。
以前总是在需要执行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面向对象,有利于复用的更多相关文章
- 浅谈JS面向对象之创建对象
hello,everybody,今天要探讨的问题是JS面向对象,其实面向对象呢呢,一般是在大型项目上会采用,不过了解它对我们理解JS语言有很大的意义. 首先什么是面向对象编程(oop),就是用对象的思 ...
- js面向对象继承
前言 最近看到js面向对象这章节了,主要学习了原型和面向对象继承关系,为了梳理自己的知识逻辑,特此记录. js的面向对象 先说说我目前了解的js创建对象方法 1.写一个函数,然后通过new创建对象 2 ...
- 【JavaScript】 JS面向对象的模式与实践 (重点整治原型这个熊孩子 (/= _ =)/~┴┴ )
参考书籍 <JavaScript高级语言程序设计>—— Nicholas C.Zakas <你不知道的JavaScript> —— KYLE SIMPSON 在JS的面向 ...
- 浅谈JS面向对象
浅谈JS面向对象 一 .什么是面向过程 就是分析出解决问题所需要的步骤,然后用函数把这些步骤一步一步实现,使用的时候一个一个依次调用就可以了.注重代码的过程部分. 二.什么是面向对象 最先出现在管理学 ...
- js面向对象、创建对象的工厂模式、构造函数模式、原型链模式
JS面向对象编程(转载) 什么是面向对象编程(OOP)?用对象的思想去写代码,就是面向对象编程. 面向对象编程的特点 抽象:抓住核心问题 封装:只能通过对象来访问方法 继承:从已有对象上继承出新的对象 ...
- JS面向对象编程:对象
一般面向过程的写法都是写很多function,坏处:1.代码复用不好 2.函数名称容易重复冲突 下面介绍面向对象的写法: 在JS中每个函数function都是一个对象. 比如,下面这个就是一个对象,我 ...
- JS面向对象(封装,继承)
在六月份找工作中,被问的最多的问题就是: js面向对象,继承,封装,原型链这些,你了解多少? 额,,,我怎么回答呢, 只能说,了解一些,不多不少,哈哈哈哈,当然,这是玩笑话. 不过之前学过java,来 ...
- JavaScript---正则使用,日期Date的使用,Math的使用,JS面向对象(工厂模式,元模型创建对象,Object添加方法)
JavaScript---正则使用,日期Date的使用,Math的使用,JS面向对象(工厂模式,元模型创建对象,Object添加方法) 一丶正则的用法 创建正则对象: 方式一: var reg=new ...
- js面向对象学习 - 对象概念及创建对象
原文地址:js面向对象学习笔记 一.对象概念 对象是什么?对象是“无序属性的集合,其属性可以包括基本值,对象或者函数”.也就是一组名值对的无序集合. 对象的特性(不可直接访问),也就是属性包含两种,数 ...
随机推荐
- 学好Javascript是有方法的
先声明下噢,这篇文章不是自个儿写的,看着好,希望前端小孩们可以和我一起加油,大家都来借鉴借鉴吧- 首先要说明的是,咱现在不是高手,最多还是一个半桶水,算是入了JS的门. 谈不上经验,都是一些教训. 这 ...
- mysql 添加索引后 在查询的时候是mysql就自动从索引里面查询了。还是查询的时候有单 独的参数查询索引?
MYSQL在创建索引后对索引的使用方式分为两种:1 由数据库的查询优化器自动判断是否使用索引:2 用户可在写SQL语句时强制使用索引 下面就两种索引使用方式进行说明第一种,自动使用索引.数据库在收到查 ...
- 参考:iPhone OS 3.0中的字体列表
字体是我们在iPhone开发中经常需要用到的.但是iPhone里面到底内置了哪些字体呢?下面就是一个常用的列表. Family name: AppleGothic Font name: AppleGo ...
- 利用命令控制台cmd进入某个硬盘的某个文件夹的命令是什么?
在命令行窗口中输入F:后回车就可以切换到F盘,如果想查看F盘的内容,可以再输入dir后回车 (输入“F”后要再输入一个“ :”再回车才行哦)
- T-SQL:SQL Server-数据库查询语句基本查询
ylbtech-SQL Server-Basic:SQL Server-数据库查询语句基本查询 SQL Server 数据库查询语句基本查询. 1,数据库查询语句基本查询 数据库 SQL Serv ...
- PHP开发规范
十.开发规范下面我们讲解 Yii 编程中推荐的开发规范.为简单起见,我们假设 WebRoot 是 Yii 应用安装的目录.1.URL默认情况下,Yii 识别如下格式的 URL: http://host ...
- 如何查看python selenium的api
1. 打开命令行: command+R2. 输入: python -m pydoc -p 4567,然后:Enter3. 然后在浏览器中访问http://localhost:45674. 按ctrl+ ...
- 判断CString字符串中各位是数字,大小写字母,符号,汉字.xml
pre{ line-height:1; color:#1e1e1e; background-color:#e9e9ff; font-size:16px;}.sysFunc{color:#627cf6; ...
- javascript注意点(1)
1.void运算符 ECMAScript 262规范,关于void说明如下: The void Operator The production UnaryExpression : void Unary ...
- 把一个序列转换成非严格递增序列的最小花费 POJ 3666
//把一个序列转换成非严格递增序列的最小花费 POJ 3666 //dp[i][j]:把第i个数转成第j小的数,最小花费 #include <iostream> #include < ...