你该如何选择技术方向,JS内存管理

当一个页面使用了iframe作为嵌套时,如何想要将父页面的数据传给iframe子页面,那iframe所指向的呢个子页面是怎么获取呢,又或者子页面的数据要给父页面使用,那么父页面又如何获取子页面的数据呢?下面根据这种情况作了一个简单的demo案例:

韦德国际官网 1

韦德国际官网 2

父页面是parentPage.html,子页面是childPage.html。

1、困惑的提问

前言

1、情况一:父页面获取子页面传入的数据

昨天,读者小何在微信上问了我这样一个问题:

像C语言这样的底层语言一般都有底层的内存管理接口,比如malloc()和free()。相反,JavaScript是在创建变量时自动进行了分配内存,并且在不使用它们时“自动”释放。
释放的过程称为垃圾回收。这个“自动”是混乱的根源,并让JavaScript开发者错误的感觉他们可以不关心内存管理。

父页面:

二哥,我刚参加工作一年,感觉什么也不精通。大学学的是 Java,但这一年来
Python 特别火,有几个转到 Python
的同学工资竟然比我高。我是不是也应该转呢?

内存的生命周期生命周期概念

//获取子页面传入的数据 function GetChildValue(obj){ document.getElementById('texts').innerText = obj; }

类似这样的问题还有一些,比如说阿坚:“我现在大一,学的是
C++,听说毕业后不太好找工作,二哥什么好的建议吗?”

无论是是使用什么编程语言,内存生命周期几乎都是一样的:

子页面:

对于初入职场或者在校的同学来说,选择哪一门语言意味着未来的收益可能会有显著的不同。

生命周期的概述:

//给父页面传数据var txt = '我是子界面主动传值给父界面的数值';parent.GetChildValue(txt); //GetValue是父界面的Js 方法

况且技术的更新迭代实在是太快了。你完全预料不到!如果选择错了,付出的代价也是沉重的。

内存分配:当我们申明变量、函数、对象的时候,系统会自动为他们分配内存内存使用:即读写内存,也就是使用变量、函数等内存释放:使用完毕,由垃圾回收机制自动回收不再使用的内存内存的概念

韦德国际官网,2、情况二:子页面获取父页面的数据

不知道你有没有这种感觉啊,前几年盛行的安卓,好像一下子就凉透了。背后的原因也很简单,就是微信公众号和小程序的推而广之,导致
APP 的需求量大幅降低。

在硬件层面,计算机内存是由大量的触发器)组成的。每一个触发器都包含有一些晶体管,能够存储1比特。单个触发器可通过一个唯一标识符来寻址,这样我们就可以读和写了。因此从概念上讲,我们可以把计算机内存看作是一个巨大的比特数组,我们可以对它进行读和写。

父页面:

就在去年这个时候,我还特意买了几本安卓的书,学习了一下,在 CSDN
上顺带分享了几篇学习笔记,阅读量还不错。但最近听朋友说,他在公号上推安卓方面的文章时,阅读量真的是惨不忍睹啊。

但是作为人类,我们并不善于用比特来思考和运算,因此我们将其组成更大些的分组,这样我们就可以用来表示数字。8个比特就是一个字节。比字节大的有字。

//给子页面传入数据function toChildValue(){ var txt = '这是父页面给子页面的数据'; return txt;}

2、技术方向

有很多东西都存储在内存中:

子页面:

从大的层面来看,技术方向可以分为两种:前端和后端。计算机“文盲”经常性会把后端误认为是“后台”——做外包这些年,我遇到过不少这样的甲方,每次我都需要耐心地给他们解释好一会儿。

所有被程序使用的变量和其他数据程序的代码,包括操作系统自身的代码

//获取父页面传来的数据var getParentVule = window.parent.toChildValue();console.log(getParentVule)

那接下来,我就要开始解释了。我们来谈谈前端和后端的一些趋势吧,大家可以作为参考。

当你编译你的代码时,编译器可以检查原始的数据类型并且提前计算出将会需要多少内存。然后把所需的容量分配给调用栈空间中的程序。这些变量因为函数被调用而分配到的空间被称为堆栈空间,它们的内存增加在现存的内存上面。如它们不再被需要就会按照
LIFO的顺序被移除。例如,参见如下声明:

具体传值的数据根据自己的项目要求修改,下面放上两个页面的完整代码:

1)前端

int n; // 4 bytesint x[4]; // array of 4 elements, each 4 bytesdouble m; // 8 bytes

父页面parentPage.htm

前端工程师近两年来非常吃香啊,尤其是前端前面加了一个“大”字之后,也就是现在非常流行的“大前端”,就好像“大数据”一样。

编译器可以立即清楚这段代码需要4 + 4 × 4 + 8 = 28字节。

!DOCTYPE htmlhtml head meta charset="UTF-8" title父页面/title style type="text/css" .box{ width: 600px; height: 400px; margin: 10px auto; } h3{ font-size: 16px; } .cont{ width: 100%; } .cont h4{ font-size: 14px; } .cont #texts{ width: 100%; line-height: 22px; font-size: 13px; color: #2E2D3C; } iframe{ /*只是隐藏,但任然保留DOM结构*/ visibility: hidden; } /style /head body div  h3这是父页面/h3 div  h4这是从子页面传入的数据:/h4 div /div iframe src="childPage.html" width="1px" height="1px" name="myIframe"/iframe /div /div script type="text/javascript" //获取子页面传入的数据 function GetChildValue(obj){ document.getElementById('texts').innerText = obj; } //给子页面传入数据 function toChildValue(){ var txt = '这是父页面给子页面的数据'; return txt; } /script /body/html

我想,前端技术里面最不会过时的就是 HTML + CSS + JavaScript
了吧。为什么这么说呢?因为它们是前端开发的基础,并且标准也在逐年更新。如果你用开发者模式观察一下的话,你会发现,所有网站的源代码里面都少不了这老三样。

这就是它怎样工作于当前的 integers 和 doubles
型的大小。约20年前,integers通常2字节,double占4字节。你的代码不应该依赖于此时刻的基本数据类型的大小。

子页面childPage.html

排名第二的应该是
Node.js,它逐渐成为了前端开发的基础技术,正在变得越来越重要。上个月,我在使用
Jekyll + GitHub Pages 配置个人网站的时,它就要求我要先安装 Node.js
环境。

编译器将插入些会互相作用于操作系统在堆栈上去请求必要的字节数来存储变量代码。

!DOCTYPE htmlhtml head meta charset="UTF-8" title子页面/title style type="text/css" .box{ width: 600px; height: 400px; margin: 10px auto; } h3{ font-size: 16px; } /style /head body div  h3这是子页面/h3 /div script type="text/javascript" //给父页面传数据 var txt = '我是子界面主动传值给父界面的数值'; parent.GetChildValue(txt); //GetValue是父界面的Js 方法 //获取父页面传来的数据 var getParentVule = window.parent.toChildValue(); console.log(getParentVule) /script /body/html

排名第三的应该是 Vue.js / Angular / React.js,它们在 2018
年的时候已经成为趋势,2019 年也没有呈现出任何的颓势。尤其是
Vue.js,其作者尤雨溪因为长得帅,成为了广大前端程序员心目中的大神。

在以上例子中,编译器知道每个变量精确的内存地址。事实上,无论我们何时写入变量n,而本质上这会被翻译为如“内存地址
4127963 ”。

排名第四的应该是 Stencil,其官方的介绍如下:

JS内存分配

Stencil is a toolchain for building reusable, scalable Design Systems. Generate small, blazing fast, and 100% standards based Web Components that run in every browser.

为了不让程序员费心分配内存,JavaScript 在定义变量时就完成了内存分配。

我先蹩脚地翻译一下,大家将就看看。Stencil
是一个工具链,用于构建可重用的、可扩展的设计系统。可以生成小巧的、快速的、
100% 的基于标准的 Web 组件,关键的是可以在所有的浏览器中运行。

//给数值分配内存空间var num = 1; //给字符串分配内存var str = "hehe";//给对象及其包含的值分配内存var obj = { a: 1, b: "str", c: null}// 给数组及其包含的值分配内存var a = [1, null, "abra"]; // 给函数分配内存function f(a){ return a + 2;} // 函数表达式也能分配一个对象someElement.addEventListener('click', function(){ someElement.style.backgroundColor = 'blue';}, false);

这就厉害了,不需要考虑浏览器的兼容性,还能够和任何主流的框架搭配使用。

有些函数调用结果是分配对象内存 如下:

排名第五的应该是 PWA,渐进式 Web
应用程序,快速、可靠,还能够让用户感觉像原生应用一样,体验非常棒。Google
提出的概念,应该不会差。

var d = new Date(); // 分配一个 Date 对象var e = document.createElement('div'); // 分配一个 DOM 元素

好了,前端就说这五个吧。

有些方法是分配新变量或者新对象 如下:

2)后端

var s = "azerty";var s2 = s.substr(0, 3); // s2 是一个新的字符串// 因为字符串是不变量,// JavaScript 可能决定不分配内存,// 只是存储了 [0-3] 的范围。var a = ["ouais ouais", "nan nan"];var a2 = ["generation", "nan nan"];var a3 = a.concat(a2); // 新数组有四个元素,是 a 连接 a2 的结果

说到后端,可能会有人开玩笑说:“主流不一直是 PHP
吗?
”虽然说这是一句玩笑话,但是,我并不怎么敢反驳。

JS使用内存

从读者群体里了解一下,洛阳做 PHP 的程序员真的蛮多的,尽管开源 PHP
的官方团队已经解散了。不管怎样,一个铁打的事实是,PHP 语言在过去的 20
年里给许许多多的人带去了工作机会。

基本上在 JavaScript 中使用分配的内存,就是对它进行读和写操作。

在我们继续聊下去之前,请允许我骄傲地宣称一件事:我是一名 Java
程序员。Java
到底有多牛逼,已经不需要我再吹了,反正我已经靠它吃饭了许多年,未来还要再吃几年。

可以读写变量的值或某个对象的属性,甚至是给某个函数传递一个参数。

Java 是一门以 Class 为单位,高度面向对象的高级编程语言。Java
的设计初衷是“写一次代码,在哪里都可以用” 。Java
可以完成任何规模的任务,所以它是很多公司在做商业级项目的时候的首选。

var a = 10; // 分配内存console.log(a); // 对内存的使用

Jame Gosling 在 1995 年的时候设计了Java,似乎 Java
一出生就有做老大的气质。事实上,确实做了好多好多年。

JS内存回收

那 Python 呢?

当内存不再需要的时候要释放掉

Python 是一门拥有简洁语法的高级编程语言。一位名叫 Guido van Rossum
的荷兰大佬在 1991 年就设计了它。Rossum 设计 Python
的初衷是为了让代码读起来更轻松,并且让程序员写更少的代码。

大部分的内存管理问题出现在这个阶段。

曾经有一位 Python 的粉丝写过一首名为 The Zen of Python
的赞美诗,我们来欣赏一下。

这里面最难的任务是指出,在什么时候分配的内存不再被需要。这通常需要开发者来决定程序中的那一块内存不再需要了,并释放。

发表评论

电子邮件地址不会被公开。 必填项已用*标注