传统的Javascript模板实现方式
模块:
随着网站逐渐变成“互联网应用程序”,嵌入网页的 JavaScript 代码越来越庞大,越来越复杂。网页越来越像桌面程序,需要一个团队分工协作、进度管理、单元测试等等……开发者必须使用软件工程的方法,管理网页的业务逻辑。
JavaScript 模块化编程,已经成为一个迫切的需求。理想情况下,开发者只需要实现核心的业务逻辑,其他都可以加载别人已经写好的模块(别人造好的轮子你拿来用,比如现在的各种框架、ui框架,还是vue、react这些,其实就是声明式编程了)。
但是,JavaScript 不是一种模块化编程语言,ES6 才开始支持“类”和“模块”。下面介绍传统的做法,如何利用对象实现模块的效果。
终结:
目前我理解的是:模板是工程化,使模块之间的依赖关系变得明显。然后使外部不能调用以及直接改变模板内部的私有属性。保证模板的独立性。
目前实现模板最好的方式是:封装私有变量:立即执行函数的写法。其实也就是大家常说的闭包。
将相关的属性和方法封装在一个函数作用域里面,可以达到不暴露私有成员的目的。
var module1 = (function () { var _count = 0; var m1 = function () { //... }; var m2 = function () { //... }; return { m1 : m1, m2 : m2 }; })();
console.info(module1._count); //undefined
使用上面的写法,外部代码无法读取内部的_count
变量。
上面的module1
就是 JavaScript 模块的基本写法
然后还可以给立即执行函数加上参数,独立性是模块的重要特点,模块内部最好不与程序的其他部分直接交互
(function($, window, document) {
function go(num) {
}
function handleEvents() {
}
function initialize() {
}
function dieCarouselDie() {
}
//attach to the global scope
window.finalCarousel = {
init : initialize,
destroy : dieCarouselDie
}
})( jQuery, window, document );
上面代码中,finalCarousel
对象输出到全局,对外暴露init
和destroy
接口,内部方法go
、handleEvents
、initialize
、dieCarouselDie
都是外部无法调用的
参考链接:https://wangdoc.com/