全国咨询热线:400-009-1906

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)引入