js面向对象，有利于复用
生活随笔
收集整理的這篇文章主要介紹了
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(':')+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>
寫下來，以后方便使用，和大家分享一下。
總結
以上是生活随笔為你收集整理的js面向对象，有利于复用的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 男人为什么会肾虚
- 下一篇： 士不可不弘毅（士不可以不弘毅的意思）