此文章仅作为给新人培训的内容，若有错误还原指正
基本语法
因为语言很多地方是相通的，所以特别基本的if else之类的就不讲了。
JS以简单灵活方便而出名，而这些所谓“灵活”的地方，却隐藏着很多坑
主要讲一下JS与其他语言不一样、且容易出bug的地方
JS的数据类型
JS是门弱类型语言，声明时不需要int、string之类的，只要var就可以了，至于变量的类型，JS内部会自动进行转化
基本数据类型包括 Number、String、Boolean、undefined、null
引用数据类型只有 Object
一、基本数据类型
弱语言类型，会隐式的自动转化数据类型，为我们带来很多方便，同样也带来一些坑
比如我们从接口那里拿到了一个计数变量 count="1";
我们运算时，想把count+2，怎么做呢
var count='1';
count+=2; //你会发现返回的是12，而不是3
count=2+count; //依然不对
上面的这种操作，字符串+数字，JS会自动把数字转字符串再相加
再比如，某种情况下，接口返给我们的count是空字符串
像是
""==0
[]==""
之类的隐式转换数据类型导致出bug的情况，在实际开发中也经常遇到
- 解决方案：判断时用===全等，运算时用强转 如Number('1')
引用数据类型
对象(Object)是属于引用数据类型的
所谓对象还包括数组(Array)、函数(Function)等扩展的对象
之所以叫引用数据类型，是因为它其实是一个指针，指向一个内存地址，每次取值和改变值时，会改变内存地址中的变量，而指针地址不改变。说下其中的坑
var a = {a:1};
var b = a;
b.a=2;
a.a //输出2
因为上面的赋值操作，只是将a的地址传递给了b，也就是a和b指向的同一个内存空间，b改变了a也会联动。
var a = {a:1};
var b = {a:1};
a == b; //false
a.a==b.a; //true
对象的比较，其实是指针地址的比较。a和b都是全新的对象，地址不同
解决方案：
尽量不要做对象的赋值，如果赋值了，尽量只读不写
尽量不要用对象做比较，可以比较对象里的value
二、变量与函数
变量比如var a = 1;
不过JS可以先使用(变量提升)，后定义，如
console.log(a); //打印 undefined
var a = 1;
非常不建议先使用再定义
但是要注意的是JS中，先使用后定义的都是返回undefined，而不会报错
函数定义，一般是
function a (){
//函数体
}
也可以
var a = function(){
//函数体
}
第二种写法不建议，见到了认识就好
函数在JS里几乎有着一等公民的待遇，
- 函数可以先调用再定义(函数提升)，函数提升和变量提升同时存在时，函数会覆盖变量
a();//弹出1
function a (){
alert(1)
}
var a = 2;
- 变量的作用域以函数为准，而不以花括号为准
if(true){
var a = 1;
}
alert(a);//弹出1
function b(){
var a = 1;
}
b();
alert(a);//error:a is not defined
三、异步与回调
JS是单线程非阻塞的，虽然ES6中已在逐步废弃回调这种写法了，可是目前的项目中还是十分依赖回调的，由于OC和Java也有回调的存在，就大概讲一下
一般，如果一个函数接收一个函数做为参数，那么这个参数通常是回调,最常见的回调是ajax
var a = 0;
setTimeout(function(){
a = 1;
},1000)
alert(a);
由于产生了异步，弹出的a是0
JS的API及原理还有很多，不过最特殊、最容易出坑的主要是这些了
工作相关
一般前端的工作包括
1、拿到设计稿样式(html/CSS)
2、调用数据、发送数据(ajax)
3、渲染数据与交互(DOM)
为了更方便的做ajax和DOM操作，我们引入了zepto这个库
一、获取/发送 数据
如果是在H5项目中，一般是用zepto的ajax方法获取数据
$.ajax({
type: 'GET',
url: 'http://app.t.ly.com/client/CircleLottery/GetLotteryBaseInfo',
data: {
lotterfId:'2',
memberId: '86b7070a5a6f4f3ec736f3bb98b92b65'
},
success: function(data){
alert(data)
},
error: function(xhr, type){
alert('Ajax error!')
}
})
混合项目中一般是使用bridge的
_tc_bridge_util.get_data({
param: {
"servicename": "expensesdetail",
"requrl": "http://tcmobileapi.17usoft.com/zhuanxian/IndianaHandler.ashx",
"reqbody": {
memberId: '86b7070a5a6f4f3ec736f3bb98b92b65',
expensesType:'1',
pageIndex: '0',
pageSize: '10',
}
},
callback: function (data) {
alert("callback:" + JSON.stringify(data));
}
})
JSON
我们知道，获得的数据是个JSON字符串，而在JS中，转换JSON字符串和对象是十分方便的
JSON.stringify(obj)//将一个JS对象转换成JSON
JSON.parse(str)//将一个JSON字符串解析成JS对象
二、dom操作
$获取一个html元素
var elem = $('h1')
和CSS的选择器一样强大
.html改变元素内的内容
可以简单粗暴的替换掉整个元素内的内容
elem.html('我更改了这个标题')
也可以只替换部分内容
elem.html(function(idx, html){
return html.replace('标题','部分内容')
})
.css动态操作元素的CSS样式
elem.css('color', 'red')
也可以同时操作多个CSS,操作多个CSS的时候，使用对象做为参数
elem.css({ color: 'orange', fontSize: 60 })
这里注意要使用驼峰原则，如font-size要写成fontSize
绑定事件
做交互离不开事件，zepto绑定事件的写法一般是用
elem.click(function(){
alert(1)
})
或者
elem.on('click',function(){
alert(1)
})
三、实际演练
先写html结构
<pre class="content"></pre>
<h1>点击展开</h1>
给点CSS样式
.content{
overflow: hidden;
height: 0;
}
一开始先获取这两个元素
var elem = $('h1'),
content = $('.content');
然后发送ajax请求
$.ajax({
type: 'GET',
url: 'http://app.t.ly.com/client/CircleLottery/GetLotteryBaseInfo',
data: {
lotterfId:'2',
memberId: '86b7070a5a6f4f3ec736f3bb98b92b65'
},
success: function(data){
content.html(JSON.parse(data).RuleText)//设置内容区的内容
},
error: function(xhr, type){
alert('Ajax error!')
}
})
写绑定事件
elem.click(function(){
if(content.height()==0){
content.css('height','auto');
elem.html('点击收起')
}else{
content.css('height','0');
elem.html('点击展开')
}
})
进阶：面向对象
JS可以面向过程也可以面向对象，如果封装组件或者封装工具类时，面向对象是非常好用的
一般的业务变现完全可以不使用面向对象，即使是做前端的，恐怕也有近一半的人不使用面向对象，所以这里只稍微讲一些
JS的面向对象与大多数语言不同，它是通过原型链进行继承的
var a = {a:1}
a.__proto__ = {a:2,b:3}
a.a //1
a.b //3
构造函数
function A(){
this.a = 1
}
A.prototype={
a:2,
b:3
}
var a = new A();
a //{a:1}
a.__proto__ //{a:2,b:3}
JS里所有复杂的继承、多态效果都是基于上面两条拓展的,
由于不推荐刚入门JS的同学学习，所以就不多拓展了
网友评论