Examples of modular understanding in Javascript-JS Tutorial-php.cn

Examples of modular understanding in Javascript

黄舟

Release： 2017-10-31 09:42:34

Original

1553 people have browsed it

Original era: The script tag introduces javascriptfiles

-------- html -------
<p id="result"></p>
<script type="text/javascript" src="add.js"></script>
<script type="text/javascript" src="sum.js"></script>
<script type="text/javascript" src="main.js"></script>
-------add.js------
function add(a, b){ return a + b ;}
------ sum.js -----
function sum(n){
   return n + add(1, 2);
}
----- main.js ----
document.getElementById(&#39;result&#39;).innerHTML = sum(3);

Copy after login

This method lacks dependency analysis, pollutes the global variable space, and must ensure the order in which files are introduced. Management is confusing

Original era: Module objects and IIFE patterns

By using module objects and immediately called function expressions(IIFE), We can reduce pollution of the global scope. In this approach, we only expose an object to the global scope. This object contains all the methods and values we need in our application.

例如只向全局作用域公开了 App 对象
-------- html -------
<p id="result"></p>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="add.js"></script>
<script type="text/javascript" src="sum.js"></script>
<script type="text/javascript" src="main.js"></script>
------- app.js -------
var App = {};
------- add.js -------
(function(){
    App.add = function(a, b){
       return a + b;
   }
})();
------- sum.js -------
(function(){
    App.sum= function(n){
       return App.add(1, 2) + n;
   }
})();
------- main.js -------
(function(app){
   document.getElementById(&#39;result&#39;).innerHTML = app.sum(3);
})(App);

Copy after login

You can see that except app.js, every other file is encapsulated into IIFE format

There is still a lack of dependency parsing problem, there is still 1 global variable, and Instead of getting rid of all global variables

Transition Era: CommonJS

##CommonJS is not a JavaScript library. It is a standards organization. It's like ECMA or W3C. ECMA defines the JavaScript language specification. W3C defines JavaScript web APIs such as DOM or DOM events. The goal of CommonJS is to define a common set of APIs for web servers, desktops, and command line applications.

CommonJS also defines a module API. Since there are no HTML pages and

Copy after login

// UMD 风格编写的 sum 模块 //sum.umd.js (function (root, factory) { if (typeof define === 'function' && define.amd) { // AMD define(['add'], factory); } else if (typeof exports === 'object') { // Node, CommonJS-like module.exports = factory(require('add')); } else { // Browser globals (root is window) root.sum = factory(root.add); } }(this, function (add) { // private methods // exposed public methods return function(n) { return add(1,2) + n; } }));

---------------- main.js --------------- import sum from './sum'; document.getElementById('result').innerHTML = sum(3); ---------------- sum.js --------------- import add from './add'; export default function sum(n){ return add(1, 2) + n; }; ---------------- add.js --------------- export default function add(a, b){ return a + b; };

虽然gulp、grunt都号称是工程化开发工具，，但个人感觉他们处理的东西还是比较基础，对于模块依赖打包来说，支持不是非常好，反正我是不喜欢gulp.

Webpack 是一个模块打包器，就像 Browserify 一样，它会遍历依赖树，然后将其打包到一到多个文件。

它与Browserify 不同之处就是可以处理 CommonJS 、 AMD 和 ES6 模块，并且 Webpack 还有更多实用的东西，比如代码分离、加载器、插件

rollup 只会将需要的函数包含到打包文件中，从而显著减少打包文件大小

--------------- add.js ----------------- let add = (a,b) => a + b; let sub = (a,b) => a - b; export { add, sub }; --------------- sum.js ----------------- import { add } from './add'; export default (n) => {return add(1, 2) + n}; --------------- main.js ---------------- import sum from './sum'; document.getElementById('result').innerHTML = sum(3); 命令: rollup main.js -o bundle.js --------------- boundle.js ---------------- // bundle.js let add = (a,b) => a + b; var sum = (n) => {return add(1, 2) + n}; document.getElementById("answer").innerHTML = sum(3);

发现 add.js的 sub() 函数并没有包含在这个打包文件中，因为没有引用它。

The above is the detailed content of Examples of modular understanding in Javascript. For more information, please follow other related articles on the PHP Chinese website!