关于js开发的小问题
一、开发当中经常会动态拼接html,当然为了简便性好多人直接就是使用内联事件:
$('#td1').html( '<a href="#" onclick="app.showPostEdit('+aData+')"></a>');
$.Test = {
GetData: function () {
$.post("/Home/GetData", function (backdata) {
var strHtml = "";
$.each(backdata, function (itemIndex, item) {
strHtml += "<div class=\"row\">";
strHtml += " <div class=\"col-md-4\">";
strHtml += " " + item.Id;
strHtml += " </div>";
strHtml += " <div class=\"col-md-4\">";
strHtml += " " + item.Url;
strHtml += " </div>";
strHtml += " <div class=\"col-md-4\">";
strHtml += " <button class=\"btn btn-sm\" onclick=\"$.Test.AppendBtn(" + item + ")\">" + item.Name + "</button>";
strHtml += " </div>";
strHtml += "</div>";
});
$("#content").append(strHtml);
});
},
AppendBtn: function (str) {
console.log(str);
alert(str.Name);
}
};
浏览器会把它解析为:
<button class="btn btn-sm" onclick="$.Test.AppendBtn(eval([object Object]))">Name1</button>
毫无疑问,上面这种情况肯定是不对的;通常这种解决方案有两种:
1、使用全局变量,函数中传递对象索引,在具体的函数根据索引取出相应的对象
2、不使用内联事件,动态注册事件
当然还有一种方法,就是把对象的属性分别取出来进行传递;如果只有一两个还可以,否则.........你懂的!如果有更好的解决方案,请指教,多谢哦!
二、当业务比较复杂,一个页面中可能要写多个js文件,某个js文件可能使用common.js中的方法,而真正去写代码时会发现没有提示;
只需要把common.js拖到你当前的js文件中即可;
你的js文件会出现:/// <reference path="common.js" />
关于js开发的小问题的更多相关文章
- 用Vue.js开发微信小程序:开源框架mpvue解析
前言 mpvue 是一款使用 Vue.js 开发微信小程序的前端框架.使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力.如果想将 H5 项目改造为小程 ...
- 【转】利用 three.js 开发微信小游戏的尝试
前言 这是一次利用 three.js 开发微信小游戏的尝试,并不能算作是教程,只能算是一篇笔记吧. 微信 WeChat 6.6.1 开始引入了微信小游戏,初期上线了一批质量相当不错的小游戏.我在查阅各 ...
- MPVUE - 使用vue.js开发微信小程序
MPVUE - 使用vue.js开发微信小程序 什么是mpvue? mpvue 是美团点评前端团队开源的一款使用 Vue.js 开发微信小程序的前端框架.框架提供了完整的 Vue.js 开发体验,开发 ...
- 《Node入门》读书笔记——用Node.js开发一个小应用
Android APP的开发告一段落,一个稳定的.实现了基本功能的APP已经交付用户使用了!我和老板交流了下,接下来准备转战Node.js了,而且一部分前端的功能也要做进去!哈哈哈~~~接下来要朝一个 ...
- 尝试用Vue.js开发网页小游戏的过程
准备 首先去官方下载并安装VSCODE,下载地址 https://code.visualstudio.com/.安装后打开会发现是英文版的,需要去安装插件来汉化.具体是在扩展插件搜索chinese,选 ...
- JS开发页面小组件:table组件
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...
- node.js 开发简易的小爬虫
node.js 开发简易的小爬虫 最近公司开发一款医药类的软件,所以需要一些药品的基础数据,所以本人就用node.js写一个简易的小爬虫,并写记录这个Demo以供大家参考. 一.开发前的准备: 1, ...
- 支付宝小程序室内地图导航开发-支付宝小程序JS加载esmap地图
如果是微信小程序开发,请参考微信小程序室内地图导航开发-微信小程序JS加载esmap地图文章 一.在支付宝小程序里显示室内三维地图 需要满足的两个条件 调用ESMap室内地图需要用到小程序web-vi ...
- 从微信小程序到鸿蒙js开发【11】——页面路由
目录: 1.router.push()&wx.navigateTo() 2.router.replace()&wx.redirectTo() 3.router.back()&w ...
随机推荐
- 【CF1028C】Rectangles(线段树)
题意: n<=1e5,abs(x[i]),abs(y[i]<=1e9 思路:这是正解 离散后线段树强打,数据结构越学越傻 #include<cstdio> #include&l ...
- Codeforces663E. Binary Table
$n \leq 20,m \leq 100000$的01矩阵,可整行整列01翻转,问最少剩几个1. 一个暴力的做法是枚举$2^n$种行翻转然后$m$列扫一遍.但其实在行翻转情况确定的情况下我们只关心两 ...
- 通过OpenGL ES在iOS平台实践增强现实(二)
上一篇讲到如何使用OpenGL ES绘制一个3D场景,这一篇我们会配合使用iOS提供的CoreMotion框架把虚拟世界中的摄像机的位置朝向和设备实际的位置朝向绑定起来.本文还对防抖做了处理. 首先说 ...
- 不需 porting 就可充電的 charger ic。
Origin : 今天同事問我一個關於配有 RT9458 charger ic 的手機的問題, 這手機可能要送到廠商那, 需要 porting charger ic, 看了一下,跟他說這個充電部份不需 ...
- Mac 下安装Ant
转自:http://blog.csdn.net/crazybigfish/article/details/18215439 如果你不知道什么是ant,请不要浪费你的时间继续读下去了.或者你对ant是什 ...
- AC日记——Dishonest Sellers Codeforces 779c
C. Dishonest Sellers time limit per test 2 seconds memory limit per test 256 megabytes input standar ...
- git移除上一次的commit中误添加的文件
在使用git进行版本管理时,往往会出现一些误操作,比如将一些不加上传的文件放到了暂存区,即上传到了上一次commit中 比如: commit c134ab90ca7c4daf8bfa22e3ad706 ...
- Html中的 http-equiv="X-UA-Compatible" 解释
1.X-UA-Compatible X-UA-Compatible是自从IE8新加的一个设置,对于IE8以下的浏览器是不识别的. 通过在meta中设置X-UA-Compatible的值,可以指定网页的 ...
- MQTT协议介绍
http://docs.oasis-open.org/mqtt/mqtt/v3.1.1/os/mqtt-v3.1.1-os.pdf MQTT 文档 http://mqtt.org/new/wp-c ...
- openfire Android学习(六)----总结
Xmpp的一些方法整理到一个工具类中了 XmppConnection.java [java] view plaincopy [java] view plaincopy import java.io.B ...