Web前端----Javascript模块化

概述

一提到模块化,也许我们首先想到的是做项目的时候进行模块设计,按照功能划分不同的模块,最后通过模块的选择和组合组成最终的产品;那把模块化的思想放到前端页面,js上来是不是也适用?当然,而且也能很好的提高我们项目的开发效率。

开发过前端界面的同志们都知道,最一开始的时候,让你用CSS写界面的样式,初入职场的程序员一般都这么写:从上到下依次编写,有新的样式需要添加,就在下面接着写,从来不去考虑是否有公共样式,着重在样式的实现上,怎么实现的无所谓;稍微有点经验的程序员就会开始注意到公共样式的问题,把一些公共的样式抽出来,从而来达到复用的结果,比如:按钮,颜色,图标等,这样节省时间,也提高了开发效率;这还不是终极的,高级的程序员一般会把一些公共的功能模块提取出来,比如说导航,版权信息等,实现部分公共模块的复用。

Javascript模块化


面向过程

2005年以前,JavaScript没人重视,只作为表单验证等少量应用。那时一个网页上写不了几行JS代码,1000行算很复杂了。这时组织代码的方式是过程式,几十行的代码甚至连一个函数都不用写。稍多的需要提取抽象出一个函数,更复杂一些则需要更多函数,函数间互相调用。

/*面向过程*/
//说
function sayHello(){
    return "hello";
}
//读
function readBook(){
    return "readBook!";
}
//听
function listenSong(){
    return "Good Time!";
}
//写
function writeName(){
    return "zhangling";
}

如果说开发一个大型项目,按照面向过程的方式写了一大堆js代码,组长过来说:你把XXX的js代码找出来咱一块看看!这时你的表情一定是这样的:

面向对象

2006年,Ajax席卷全球。JavaScript被重视了,越来越多的后端逻辑放到了前端。网页中的JS代码量急剧增加。这时写函数方式组织大量代码显得力不从心。有时调试一个小功能,从一个函数可能会跳到第N个函数去。为了解决上面的缺点,可以把模块写成一个对象,所有的模块成员都放到这个对象里面。

/*面向对象*/
//听说读写
function person(){
    return{
        count:0,
        say:function(){return "saying";},
        read:function(){return "reading";},
        listen:function(){return "listening"},
        write:function(){return "writting"}
    }

};

使用的时候直接person().say()就行了! 不过这样使用的话也有一定的缺陷:

这样的写法会暴露所有模块成员,内部状态可以被外部改写。比如,外部代码可以直接改变内部计数器的值。

Person().count=4

模块化开发

首先我们要搞明白为什么要用模块化开发?前面的内容也大致的讲了讲,对于具体的为什么要用模块化开发,大家可以去看看前端模块化开发的价值,主要是两个问题:

其一、恼人的命名冲突 其二、烦琐的文件依赖

在网上查了写资料,Javascript中近来用的模块化开发用SeaJsRequireJs比较多,但是具体他们两个有什么区别,还有怎么使用?在项目中用哪个更合适?后续博客中会说明,正在研究中……

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏守候书阁

用vue一个计算属性,实现一个常见表单交互效果

vue.js是现在用的非常火热的一个前端框架,表单又是网站基本不会缺少的一环。用vue操作表单。表单的操作方式也是多种多样。今天我说的,就是我项目那里做的这一种...

10610
来自专栏JarvanMo的IT专栏

Fluwx:微信SDK在Flutter上的实现

随着 Flutter越来越火热,我相信越来越多的小伙伴都跃跃欲试。但是一个很重要的问题是,很多第三方 SDK,如微信SDK,都无法在Flutter上直接使用。...

59620
来自专栏Android 开发者

开发者也是用户 - 第二部分:改善 UI 和 API 可用性的五条指导原则

20130
来自专栏小程序之家

如何在小程序中实现拍照功能

在小程序使用的过程中,难免会用到相机组件,本文将教大家配置入门小程序camera组件的使用,并自己制作一个小程序相机的demo出来。

2.9K40
来自专栏前端桃园

Javascript 是最好的语言,不服来辩

25130
来自专栏微信终端开发团队的专栏

聊聊苹果的Bug - iOS 10 nano_free Crash

背景 iOS 10.0-10.1.1上,新出现了一类堆栈为nano_free字样的crash问题,困扰了我们一段时间,这里主要分享解决这个问题的思路,最后尝试...

65290
来自专栏JarvanMo的IT专栏

Fluwx:微信SDK在Flutter上的实现

随着 Flutter越来越火热,我相信越来越多的小伙伴都跃跃欲试。但是一个很重要的问题是,很多第三方

26030
来自专栏美团技术团队

基于 Appium 的 Android UI 自动化测试

自动化测试是研发人员进行质量保障的重要一环,良好的自动化测试机制能够让开发者及早发现编码中的逻辑缺陷,将风险前置。日常研发中,由于快速迭代的原因,我们经常需要在...

60440
来自专栏Java技术栈

12 个非常有趣的 Linux 命令!

-a An accident seems to happen. You'll feel pity for people who cry for help.

19740
来自专栏后端技术探索

后端前端恩仇录

其实应该更多的是互相的磨合与学习,希望身边的人可以有自己的经验分享,与理解,互相进步才是大家需要的,作为一个 "年老" (我也是90后) 的开发者,我觉得一代胜...

9930

扫码关注云+社区

领取腾讯云代金券