JavaScript教程

发表于 | 分类于 | 阅读数

javascript中{},[]中括号,大括号区别

{} 大括号，表示一个对象，大部分情况下要有成对的属性和值，或是函数

1
var jason = {"name" : "Jason", "age" : 18};

访问方式有jason.name,jason["name"]

1
2
3
4
5
6
7
8
var jason = {
    name = function() {
        return "jason";
    },
    age = function() {
        return 18;
    }
};

访问方式jason.name()

[]中括号，表示一个数组，也可以理解为一个数组对象

1
var jason = ["name" , "Jason", "age" , 18];

访问方式jason[0]

可以结合使用，通过下标访问

1
2
3
4
var jason = {
    "name" , "Jason", "age" , 18,
    "myCar" : [{"name" : "black Car"}]
    };

访问jason.myCar[0].name

JavaScript动态增加属性

1
2
3
4
5
6
7
8
9
var obj = {};

obj.name = "Lily";
obj.age = 18;

var key = "addr";//key 还可以是数字或者对象
var value = "china";
obj[key] = value;
console.log(obj)

文件上传

FormData

通过ajax实现，优先使用的方法

1
2
3
4
5
6
7
8
9
<form enctype="multipart/form-data" method="post" name="fileinfo">
  <label>Your email address:</label>
  <input type="email" autocomplete="on" autofocus name="userid" placeholder="email" required size="32" maxlength="64" /><br />
  <label>Custom file label:</label>
  <input type="text" name="filelabel" size="12" maxlength="32" /><br />
  <label>File to stash:</label>
  <input type="file" name="file" required />
  <input type="submit" value="Stash the file!" />
</form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var form = document.forms.namedItem("fileinfo");
form.addEventListener('submit', function(ev) {

  var oOutput = document.querySelector("div"),
  oData = new FormData(form);

  oData.append("CustomField", "This is some extra data");

  var oReq = new XMLHttpRequest();
  oReq.open("POST", "stash.cgi", true);
  oReq.onload = function(oEvent) {
    if (oReq.status == 200) {
      oOutput.innerHTML = "Uploaded!";
    } else {
      oOutput.innerHTML = "Error " + oReq.status + " occurred when trying to upload your file.<br \/>";
    }
  };

  oReq.send(oData);
  ev.preventDefault();
}, false);

Jquery ajaxSubmit

次选

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(function(){   
    var options = {  
      type: 'POST', 
      url: 'stash.cgi', 
      success: showResult, // 回调函数  
      dataType: 'json', // 返回信息格式
      error : function(xhr, status, err) {       
        alert("操作失败"); 
      } 
    };  
    $("#test").submit(function(){  
      $(this).ajaxSubmit(options);  
      return false;  // 防止表单自动提交 
    }); 
});

前端框架

Extjs

重点内容是页面布局、菜单树、Listener事件监听等

比如根据活动的TAB页做些页面控制

1
2
3
4
5
6
7
8
9
listeners: {
    'tabchange': function (t, n) {
        if (n.id=='queryTab') {
            Ext.getCmp('addBtn').enable();
    } else {
            Ext.getCmp('addBtn').disable();
        }
    }
}

国际化

  • Extjs国际化是通过引入不同js实现的(比如en.js,cn.js)，把需要进行中英文切换的页面参数定义成参数（比如a.b.c=’xxx’）把参数替换到文字对应的位置，请求后端页面的时候，后端通过切换不同js实现中英文切换，状态存储在redis或者session中，前端存储在cookies中。前端应该也是可以根据脚本构建出标签引入对应的库，或者中英文都引入前端根据对象层级关系或者子节点为不同语言的对应数据。
  • 对于页面使用vue国际化方案。
  • 对于后台Java代码使用java i18n方案
  • 对于数据库国际化，中文字拿到语言库中翻译。
  • 对于通用系统，数据尽量不要出现指定国家的信息。
  • 对于数据库中定制信息，根据需要对不同需求提供不同安装脚本进行数据切换

问题

长数字会被转换成字符串，如果部分又是短数字，导致部分是字符串部分是数字 可能某些情况赋值判断就出问题了。