尚学堂 老师好!

上海:15201841284

广州:020-2989 6995

深圳:0755-23061965

武汉:027-8798 9193

西安:029-8822 8155

H5模块化

  在看内容之前,我们需要来了解一下目前前端的形式。很久之前在一份简历中,看到这样一句话“推崇前端模块化及组件化”。而目前前端的需求也正如次。如果你有了解vue,react等前端流行框架,那么无论是那一个,都是组件为主。个人感觉vue会更舒服,包含了 template、script、css 的 *.vue文件用起来得心应手。说远了,我们接下来了解前端模块化。当然,如果你想学习更多H5相关知识,可以考虑H5培训

  1.模块

  我们先来看看什么是模块,谈起模块就要从最根本的作用域开始说起。js的作用域是“函数级作用域”

  function fn1() {

  var num = 10;

  }

  function fn2() {

  var num = 20;

  }

  window.fn1();

  window.fn2();

  上面的代码可以理解为最基本的模块,当然,这样的代码是不行,毕竟太污染全局变量了。

  那么如果修改呢?看下面代码

  var myModule = {

  num:10,

  str:"iwen",

  fn1:function () {

  console.log(this.num);

  },

  fn2:function () {

  console.log(this.str);

  }

  };

  myModule.num = 20;

  myModule.fn1();

  将属于一个模块的内容放入到一个对象中,这样很好解决了污染问题。当大家看到

  myModule.num = 20;

  的时候,发现外部可以随意修改内部成员。所以这样写不太合适。

  那么我们在看下面的代码:

  var myModule = (function () {

  var num = 10;

  var str = "iwen";

  function fn1() {

  console.log(num);

  }

  function fn2() {

  console.log(str);

  }

  return{

  fn1:fn1,

  fn2:fn2

  }

  })();

  myModule.fn1();

  看到这里,就解决了外部修改内部成员的问题。在进一步加强

  看下面代码:(放大模式)

  var module1 = (function () {

  var num =10;

  var str = "iwen";

  function getName() {

  return str;

  }

  return {

  getName:getName

  }

  })();

  var module2 = (function (module1) {

  module1.setName = function () {

  };

  return module1;

  })(module1);

  console.log(module2.getName());

  这样的好处是每一个module只处理当前相关的内容,我们来在进一步

  看下面代码:(宽放大模式)

  var module1 = {

  num:10,

  str:"iwen",

  fn1:function () {

  console.log(this.num);

  },

  fn2:function () {

  console.log(this.str);

  }

  };

  module1 = null;

  var module2 = (function (module1) {

  module1.getName = function () {

  };

  return module1;

  })(window.module1 || {});

  console.log(module2);

  与放大模式相比,宽放大模式可以传入空对象。如果我们需要引入第三方相关类库怎慢呢?

  看下面代码:

  var module = {

  num:10

  };

  var module1 = (function ($,module) {

  function getNum() {

  console.log(module.num);

  }

  function getJQ() {

  console.log($("div"));

  }

  return{

  getJQ:getJQ,

  getNum:getNum

  }

  })(jQuery,module);

  module1.getJQ();

  module1.getNum();

  下面我们在来研究一下私有与共有的问题:

  var module1 = (function () {

  var num =10;

  var str = "iwen";

  function getName() {

  return str;

  }

  return {

  getName:getName

  }

  })();

  var module2 = (function (module1) {

  module1.setName = function () {

  };

  return module1;

  })(module1);

  console.log(module2);

  上面的代码,大家好好思考一下。

  2.接下来了解一下“模块化”

  受到了NodeJS的Commonjs规范影响,在浏览器端也开始流行模块化,模块化单独说起来有点麻烦。我们还是来引入第三方吧,知名被常用到目前有一下

  (1)require.js

  (2)sea.js

  首先我们来看一下Commonjs规范,具体代码看下面:

  module.js:

  function demo() {

  console.log("demo");

  }

  function demo2() {

  console.log("demo2");

  }

  module.exports = {

  demo:demo,

  demo2:demo2

  }

  demo.js

  var module1 = require("./module1");

  module1.demo();

  module1.demo2();

  以上代码,需要Node环境来进行执行。关于Node并非本章内容,在这里不过多说明。

  接下来看一来require.js。

  AMD 是 RequireJS 在推⼴过程中对模块定义的规范化的产出

  requireJS主要解决问题:

  (1)实现js⽂件的异步加载,避免⽹⻚失去响应

  (2)管理模块之间的依赖性,便于代码的编写和维护

  具体实现:

  (1)引入

  

  • 北京校区
  • 西安校区
  • 山西校区
  • 武汉校区
  • 长沙校区
  • 深圳校区
  • 上海校区
  • 广州校区
  • 保定招生办
  • 黑龙江项目办

北京京南校区:北京亦庄经济开发区科创十四街6号院1号楼 赛蒂国际工业园
咨询电话:400-009-1906 / 010-56233821
面授课程: JavaEE+微服务+大数据     大数据+机器学习+平台架构     Python+数据分析+机器学习  人工智能+模式识别+强化学习   WEB前端+移动端+服务端渲染

地址:陕西省西安市高新区西安软件园西区创新信息大厦A座三层尚学堂

电话:029-88228155 / 18291433445

山西学区地址:山西省晋中市榆次区大学城大学生活广场万科商业A1座702

武汉学区地址:武汉市东湖高新区光谷金融港B22栋11楼
咨询电话:027-87989193

网址:http://www.cssxt.com/
咨询电话:0731-83072091

深圳校区地址:深圳市宝安区航城大道U8智造产业园U6栋3楼
咨询电话:0755-23061965 / 18898413781

上海尚学堂校区地址:上海市浦东新区城丰路650号
咨询电话:021-67690939

广州校区地址:广州市天河区车陂街道大岗路5号中侨广场2栋321室(四号线车陂站D出口,或brt车陂站)
咨询电话:18948349646

保定招生办公室

地址:河北省保定市竞秀区朝阳南大街777号鸿悦国际1101室

电话:15132423123

黑龙江项目办
地点:哈尔滨市松北区博文路青年部落孵化器1层
电话:15321415678
Copyright 2006-2021 北京尚学堂科技有限公司  京ICP备13018289号-19  京公网安备11010802015183  
网站维护:北京尚学堂科技有限公司昌平分公司