关于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 ...
随机推荐
- Javascript的函数直接量定义
在Javascript中允许函数通过直接量来定义.一般情况下,我们定义函数时,最常见的方式是通过function语句进行定义,例如: function sum(a,b){ return a+b ...
- Toast问题记录:This Toast was not created with Toast.makeText()
最近使用自己封装的Toast时,遇到一个问题 java.lang.RuntimeException: This Toast was not created with Toast.makeText() ...
- js-触屏滑动判断滑动方向(移动版)
var startx, starty; //获得角度 function getAngle(angx, angy) { return Math.atan2(angy, angx) * 180 / ...
- MySQL创建存储过程/函数需要的权限
alter routine---修改与删除存储过程/函数 create routine--创建存储过程/函数 execute--调用存储过程/函数 下面有一篇介绍MySQL所有权限的博文 http:/ ...
- 设计模式原来如此-策略模式(Strategy Pattern)
策略模式中体现了两个非常基本的面向对象设计的原则:1.封装变化的概念.2.编程中使用接口,而不是对接口的实现. 策略模式的定义:定义一组算法,将每个算法都封装起来,并使它们之间可以互换.策略模式使这些 ...
- MySQL通用编程
第一阶段:基础入门 第一章:关系模型 第二章:基本查询 第三章:复杂查询 第四章:权限控制 第五章:查询优化 第二阶段:模型设计 第六章:设计选择 第七章:函数依赖 第八章:分解算法 第九章:设计过程 ...
- 洛谷——P2404 自然数的拆分问题
题目背景 任何一个大于1的自然数n,总可以拆分成若干个小于n的自然数之和. 题目描述 任何一个大于1的自然数n,总可以拆分成若干个小于n的自然数之和. 输入输出格式 输入格式: 输入:待拆分的自然数n ...
- Java中判断String对象是否为空的方法
Java原生的方法: String对象中有一个isEmpty的方法判断是否为空,其实isEmpty完全等同于string.length()==0,注意如果String本身是null,那么使用strin ...
- Maven配置tomcat和jetty插件来运行项目
针对eclipse中的Run on Server有些情况下并不是那么好操作,比如配置maven下的springmvc插件,如果使用此方法运行会很容易出现组件缺少导致错误出现一大堆的问题. 那么针对这种 ...
- 随笔:Golang 时间Time
先了解下time类型: type Time struct { // sec gives the number of seconds elapsed since // January 1, year 1 ...