萍萍的JavaScript教程 其三 代码组织

javascript中代码组织的相关概念共有三种:函数模块

前两种在服务器与浏览器环境中基本完全一致,因此我们先行介绍前两种。

函数

在面向过程流行的年代,函数早已被用作程序功能划分,相应的功能被命名为不同的函数函数在现在这个面向对象的时代常常也被称做方法,其实二者表达的是同一件事。

javascript中函数的写法有两种,一种是关键字function,一种是箭头函数。二者唯一的区别是上下文环境不同,即this对象所指的对象不一样。这一点在函数与类介绍的末尾会详细说明。

无论function还是箭头函数,都有匿名函数和具名函数之分。

// 具名function函数
funcrion todo(fuc,arg){
    fuc(arg);
}
// 匿名fucntion函数
todo( function(arg){ console.log(arg); },'hello' );

// 具名箭头函数
const say = fc => fc();

// 匿名箭头函数
say( () => console.log('say') );

对于函数这种代码组织结构,从概念上分为最重要的三部分:形参返回值代码体

形参的传入方法有以下几种:

// 普通传参
function fuc1( a,b,c ){
    console.log(a,b,c);
}
fuc1(1,2,3);
// 结构传参
function fuc2({username,password}){
    console.log(username,password);
}
let userForm = {
    username:'zmp',
    password:'1314521'
};
fuc2(userForm); //输出zmp 与 1314521两段字符串
// 不定传参
function fuc3( ...args ){
    for( item of args )
        console.log(item);
}
fuc3(1,2,3,4);      //输出 1 2 3 4

// 部分不定传参
function fuc4(username,...foodLists){
    for( let item of foodLists)
        console.log(username,'like',item);
}
fuc4('zmp','Apple','Banana');//输出如下
/*
zmp like Apple
zmp like Banana
*/

而函数的返回值可以是任何东西。

function(){
    // 返回原始值
    return '123';   //字符串
    return 1;       //整数
    return 1.2;     //浮点数
    // 返回复杂对象
    return {
        username:'zmp',
        password:'1314521',
    };
    // 返回函数
    return function(){
        console.log('hello world');
    };
    // 返回数组
    return [1,2,3];
    // 返回类
    return class A{
        print(){
            console.log('hello world');
        }
    }
}

以上示例在箭头函数中同样成立。

简单类的写法

class Student{
    //构造方法
    constructor(name){
        this._name = name;
    }
    // 成员方法
    say(){
        console.log('hello world');
        console.log('My name is '+this._name);
    }
    // 静态方法
    static TODO(){
        console.log('TODO');
    }
}
let stu = new Student('zmp');
stu.say();      //输出
/*
hello world
My name is zmp
*/
Student.TODO(); //输出 TODO

注意javascript的类中没有成员变量这个概念和写法,通常情况下你也不需要有成员变量。所有希望挂载的成员变量都可以通过新增this对象上的属性完成。

类的继承

class I extends Student{
    constructor(name){
        super(name);
    }
    // 覆盖方法
    say(){
        // 调用父类方法
        super.say();
        // 扩展方法
        console.log('我是一个大学生');
    }
}
let i = new I(zmp);
i.say();      //输出
/*
hello world
My name is zmp
我是一个大学生
*/
Student.TODO(); //输出 TODO

类中的super指针的用法有两种,一种是在子类构造函数中,其意义为父类的构造方法,一种是在子类的成员方法中,其意义是指向父类this指针。

那么如果在类的成员方法中我们需要书写回调函数怎么做呢?

// cb表示回调函数
function todo(cb){
    console.log('我做了一些事');
    cb || cb();     //这是一种短路模式,指的是在cb的逻辑含义不为假时,才执行cb函数
}

class I extends Student{
    constructor(name){
        super(name);
    }
    // 覆盖方法
    say(){
        // 调用父类方法
        super.say();
        // 扩展方法
        console.log('我是一个大学生');
        todo( function(){
            console.log(this._username+' 完成了回调函数');     //此时会输出 undefined 完成了回调函数
        } );
    }
}

造成以上结果的原因是:this指针指向的方法的调用者,而以上代码中todo函数传入的作为参数的函数,其调用者早已不是类I的实例,转而指的是运行环境(node中是process,浏览器中是window)

解决方法如下

say(){
    // 调用父类方法
    super.say();
    // 扩展方法
    console.log('我是一个大学生');
    let that = this;
    todo( function(){
        console.log(that._username+' 完成了回调函数');     //此时会输出 undefined 完成了回调函数
    } );
}

这是在箭头函数未推出了时候的一种解决方法,用于处理大多数的ajax请求回调。以下介绍一种使用箭头函数的。

say(){
    // 调用父类方法
    super.say();
    // 扩展方法
    console.log('我是一个大学生');
    todo( () => {
        console.log(this._username+' 完成了回调函数');     //此时会输出 zmp 完成了回调函数
    } );
}

这里表现出的是箭头函数的一个重要特性,不改变调用者,即不改变this指针指向。所以在大多数代码中,若一个函数将一个函数作为参数,那么传入的多数是一个箭头函数,因为这样可以处理this指针变向的问题。

模块

模块是现在js项目较上层的代码组织方式,仅次于,多个模块组成了

浏览器中的模块通常是靠一堆script标签引入远程js文件实现的,文件及模块,且不使用闭包的话文件间的变量是会污染的。

在nodejs环境中,node使用CommonJS规范,同样也是文件及模块,但是文件间的变量是不会污染的。这归功于CommonJS规范要求每个模块中可被访问的东西是必须显示导出的。

CommonJS在浏览器中也有实现,sea.js就是一个很好的实现项目,但其原理和script标签差不多,都是采用网络请求的方式动态加载并运行模块。

模块的导出需要挂载module.exports对象,这个对象的表现就是这个模块文件的表现。而引用则是使用require方法。(这些都只适用于nodejs环境)

//a.js
module.exports.sqrt = s => x*x;
//b.js
const AModule = require('./a.js');
console.log(AModule.sqrt(2));   //输出4
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,463评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,868评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,213评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,666评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,759评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,725评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,716评论 3 415
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,484评论 0 270
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,928评论 1 307
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,233评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,393评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,073评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,718评论 3 324
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,308评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,538评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,338评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,260评论 2 352

推荐阅读更多精彩内容