转载地址: http://www.3q2008.com/soft/search.asp?keyword=
| 概要：
1 函数声明
function 函数名(){}
2 匿名函数表达式
var x=function(){}
x()
3 对象中的属性和函数方法
var x={ msg:function(){ 函数内容 }}
x.msg()
x['msg']() 4 函数不指定参数接受参数
关键字 arguments
5 回调函数
匿名函数表达式回调
var $=function(callback){}
$(function(){})
jquery 框架结构 已经出来 6 jquery框架调用函数结构分析 7 Vue调用结构分析 |
1：函数声明
function msg(v) {
//执行的代码
alert(v)
}
调用:
msg(123) |
2：函数表达式 匿名函数表达式
JavaScript 函数可以通过一个表达式定义。
函数表达式可以存储在变量中：
var x=function(v){
alert(v)
} 调用:
x(123)
以上函数实际上是一个 匿名函数 (函数没有名称)。
函数存储在变量中，不需要函数名称，通常通过变量名来调用。 |
x(123) 可以理解为
重点：
(function (v){alert(v)})(123) 这样是有效运行 |
| 错误示例： function (v){alert(v)}(123)
被解析为两条语句： function (v){alert(v)};
(123) ; 详见 :https://segmentfault.com/q/1010000003028413 在 ECMAScript 中，函数声明 （Function declaration, FD）与 具名函数表达式（Named function expresson, NFE）具有相同的语法：
FunctionDeclaration :
function Identifier ( FormalParameterListopt ) { FunctionBody }
FunctionExpression :
function Identifieropt ( FormalParameterListopt ) { FunctionBody }
function a(b) {alert(b)} 到底是一个 FD 还是一个 NFE 取决于它所处的位置，例如在 IIFE 结构(function a(b) {alert(b)})() 中，函数被包裹在分组运算符 ()中，此时该函数就是一个 NFE，因为分组运算符只接受表达式。把函数放在 !, +, !, void 等运算符后面也是同理，明确地表示该函数是一个 NFE。
相反，当 function a(b) {alert(b)} 出现在语句开头的时候，它就被解析为一个 FD，而不是 NFE。因此，function a(b){alert(b)}(1) 被解析为两条语句： function a(b) {alert(b)} // FD
(1) // 表达式语句
console 显示的 1 是 (1) 求值的结果。（你可以把 function a(b){alert(b)}(1) 复制到JavaScript AST visualizer 查看生成的抽象语法树） alert(a)会对 a 进行隐式的类型转换，以 String 为 hint 调用 a 的 [[toPrimitive]] 内部方法，实际就是调用 a.toString，然后再 alert，所以在模态对话框中显示 a 函数的字符串表示。
备注: (function (v){alert(v)})(445566)
(function (v){alert(v)}(445566)) 均可以运行 其他写法
(function () { /* code */ } ());
!function () { /* code */ } ();
~function () { /* code */ } ();
-function () { /* code */ } ();
+function () { /* code */ } (); |
|
| 3：将方法作为对象中的一个属性值! 对象中的{属性:属性值} 此处的属性值为 函数 var x={
msg:function(v){
alert(v)
},
msg1:function(v){
alert(v+"对象")
}
}
x.msg(123) //调用 1
x.msg1(123) //调用 msg1
var M = {
a : {
b : function() {}
}
};
调用方法
M.a.b(); |
4 函数不指定参数接受参数
利用arguments，可以获得调用者传入的所有参数，也就是函数定义时可以不指定任何参数
f(arguments.length === 0) {
return 0;
}
var x = arguments[0];
return x >= 0 ? x : -x;
5 回调函数
将函数 以参数的方式传递到其他函数内部
<script>
//回调函数 将函数 以参数的方式传递到其他函数内部
var x=function (callback){
alert(1)
var r=callback();
alert(r);
}
//
x(function(){
//回调函数重新传入函数的过程
alert(2)
return 100;
})
//提示 顺序 依次 1 2 100
</script>
匿名函数变量 x 调用时候 传递的是一个函数 匿名函数变量 的参数 是callback
但匿名函数变量x 为 $ 时 就完全呈现出 jquery 框架的结构
时间函数的回调
setTimeout(function(){
alert ("setTimeout函数的回调")
},100)
6 jquery调用 结构分析
//方法1
$(function(){
// jquery框架作用域
$("#button1").click(function(){ //ID为button1 单击响应
} );
});
//方法2
$(document).ready(function(){
// jquery框架作用域
})
//网上很多资料 说 两种写法是一样的,
$(function(){});// 应该理解 是匿名函数的 回调 jquery的匿名函数 对应的默认回调函数 是否是 jquery(document)ready 当前未知
$(document).ready() //是 jquery(document)ready函数的 回到操作
| 7 Vue调用 结构分析 及比对 jquery
$(function(){......})
jquery 为匿名函数$ 回调函数方式 传入代码
调用方式 也是回调
$("#button1").click(function(){ //ID为button1 单击响应 } )
//-----------------------此处 在回调 $("#button1").click(方法) jquery hide方法的回调
$("p").hide("slow",function(){ alert("使用回调函数，先隐藏再弹出对话框!");
})
重点：
Vue
var app=new Vue({....})
Vue 为 对象实例化时候 传入 代码 传入的是一组对象 |
分析 Vue结构 重点：
var app=new Vue({
el: ’#app’,
data: {
message: ’Hello ’
}
,
methods: {//3
selectall:function(){
this.books.forEach(function(itme){
itme.select=!itme.select
})
},
}, computed: {//4 hj: function() { // 合计计算找到 项 合计
var hh = 0;
this.books.forEach(function(item) {
hh += item.price * item.count;
});
return hh;
},
},
template:’#demo2’//5
, components:{//6
"panda":{
template:`<div style="color:red;"> {{ test}}</div>`,
props:[’test’]
}
}
})
定义一个 对象 app 实例化 对象 vue 传入 对象参数 这个对象 参数 是JSON 结构 , 第一个键值 el 值是 #app 第二个键值 data 值 是 json 对象 第三个键值 methods 值是 json 对象 json对象中 包含 一个 属性 为 selectall 值为函数的 json集合 第四个键值 computed 值是 json 对象 json对象中 包含 一个 属性 为 hj 值为 有返回值函数的 json集合 第五个键值 template 值是 字符串 第六个键值 components 值是 json对象 json对象中 又包含了 键值 json 对象 |
转载地址: http://www.3q2008.com/soft/search.asp?keyword=
