标签:index 什么 js content header webpack sidebar 究竟
在很久很久以前,当我们写一个web网页的时候,js实现的逻辑相对是比较弱的。但随着前端技术的发展,前端能实现的内容越来越多。在js里面加了非常非常多的逻辑,于是呢,我们就发现我们通过这种面向过程的方式去写我们的代码。我们的代码就会变得非常的长。后面js里面的逻辑会被堆的越来越大,越来越大,最终变得不可维护。
这个时候我们出现了一种新的编程方式,叫做面向对象编程
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>这是最原始的网页开发</title> </head> <body> <p>这是我们的网页内容</p> <div id="root"></div> <script src='./index.js'></script> </body> </html>index.js
var dom = document.getElementById('root'); var header = document.createElement('div'); header.innerText = 'header'; dom.appendChild(header); var sidebar = document.createElement('div'); sidebar.innerText = 'sidebar'; dom.appendChild(sidebar); var content = document.createElement('div'); content.innerText = 'content'; dom.appendChild(content);
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>这是最原始的网页开发</title> </head> <body> <p>这是我们的网页内容</p> <div id="root"></div> <script src="./header.js"></script> <script src="./sidebar.js"></script> <script src="./content.js"></script> <script src="./index.js"></script> </body> </html>
header.js
function Header() { var header = document.createElement('div'); header.innerText = 'header'; dom.appendChild(header); }sidebar.js
function Sidebar() { var sidebar = document.createElement('div'); sidebar.innerText = 'sidebar'; dom.appendChild(sidebar); }content.js
function Content() { var content = document.createElement('div'); content.innerText = 'content'; dom.appendChild(content); }index.js
var dom = document.getElementById('root'); new Header(); new Sidebar(); new Content();
这样的话就通过面向对象改造了我们的代码。使用了面向对象使我们的代码更具有维护性。为什么呢?关于header的逻辑全部放到header这个对象里。siderbar的逻辑都放在siderbar这个对象里。这样的话,每一个对象他承载的职责是固定的。那么维护起来就方便的多。比如说如果header里面有问题,原来就需要在index.js里面整篇的去查找哪里有问题。现在如果header里面有问题,只需要打开header.js去查错就可以了。
但是,,,如果我们把代码拆成这个样子,他就带来了新的问题。大家会发现在index.js里面引用了多个js文件。这样的话就会带来几个问题。首先整个页面的加载速度会变慢。因为多出了三个http请求。页面的加载速度当然会变慢。第二点,在index里面看到三个构造函数的创建,但是你并不能知道这每个构造函数对应的文件在哪里,如果你想知道这个文件在哪里的话,你必须要再回头看html文件,你才会发现原来header跟index文件在同一个目录下。所以第二点,看不出代码跟文件之间的关系。第三点很难去查错。假设我这个content.js位置放错了,放在index下面。报错位置是new Content。很难联想到是js位置放错了。所以拆成这样。代码也是不容易维护到。那为了解决这个问题,有人想出了这样一种方式.把index.html,index.js改成这样
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>这是最原始的网页开发</title> </head> <body> <p>这是我们的网页内容</p> <div id="root"></div> <script src="./index.js"></script> </body> </html>index.js
import Header from './header'; import Sidebar from './sidebar'; import Content from './content'; var dom = document.getElementById('root'); new Header(); new Sidebar(); new Content();
那这样写是不是能解决之前的几个问题呢?首先,index.html里只引入了一个js文件。所以他的网页运行速度会很快。第二点,文件和文件之间的依赖关系非常的明确。上面的文件颠倒顺序也不要紧,因为确保了下面引用之前,前面都加载好了。这种引入方式就叫做ES Moudle模块引入方式,跟react,vue里面非常像。
以前写vue,react都能用啊,在这里怎么就报错了呢?其实是这样的,在浏览器里,压根就不认识这样的语句,所以我们想实现我们的代码,目前来看,根据是不可能的。这个时候,webpack就登场了。虽然原生浏览器不知道import是什么意思。但是我webpack知道。webpack知道import是引入模块的意思。他可以帮浏览器做一个翻译,告诉浏览器,这其实在引入一个模块。
所以这个时候,我们可以安装一下webpack,对当前的代码做一次翻译,首先怎么安装呢,首先在命令行里面进入项目目录,运行一下
npm init 项目名一路回车,然后
npm install webpack webpack-cli
现在在项目的根目录下已经安装好了webpack,那么接下来就是对webpack做一次翻译。怎么翻译呢? 运行一下
npx webpack index.js他的意思是用webpack去翻译index.js这个文件。翻译过后,根目录下出现了一个dist的文件夹,dist文件夹多了一个main.js文件。这个就是webpack帮你翻译好的文件
这个时候需要把引入的index.js改成dist下面main.js。main是index经过webpack翻译的js文件。这个时候会报错还是,是因为要在要引入的文件里面导出这些文件。export default xxx。
标签:index,什么,js,content,header,webpack,sidebar,究竟 来源: https://www.cnblogs.com/wzndkj/p/10703905.html
本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享; 2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关; 3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关; 4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除; 5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。