今天找到了一个很nice的js网站 ,不!是两个 一个博客,一个网站

本文深入探讨JavaScript中的变量声明提升、作用域、闭包等高级特性,并解析如何利用自执行匿名函数进行模块化开发及跨文件共享私有对象的方法。

http://bonsaiden.github.com/JavaScript-Garden/zh/

 

// 译者注:来自 Nettuts+ 的一段代码,生动的阐述了 JavaScript 中变量声明提升规则
var myvar ='my value'; 

(function(){ 
    alert
(myvar);// undefined 
   
var myvar ='local value'; 
})(); 

这个不理解

 

匿名包装器是个好东西:

推荐使用匿名包装器译者注也就是自执行的匿名函数)来创建命名空间。这样不仅可以防止命名冲突, 而且有利于程序的模块化。

 eval 只在被直接调用并且调用函数就是 eval 本身时,才在当前作用域中执行

博客:

http://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html

 

第三篇:全面解析Module模式 有一块不懂

跨文件共享私有对象

通过上面的例子,我们知道,如果一个module分割到多个文件的话,每个文件需要保证一样的结构,也就是说每个文件匿名函数里的私有对象都不能交叉访问,那如果我们非要使用,那怎么办呢? 我们先看一段代码:

复制代码
var blogModule = (function (my) {
    var _private = my._private = my._private || {},
        
        _seal = my._seal = my._seal || function () {
            delete my._private;
            delete my._seal;
            delete my._unseal;
            
        },
        
        _unseal = my._unseal = my._unseal || function () {
            my._private = _private;
            my._seal = _seal;
            my._unseal = _unseal;
        };
        
    return my;
} (blogModule || {}));
复制代码

任何文件都可以对他们的局部变量_private设属性,并且设置对其他的文件也立即生效。一旦这个模块加载结束,应用会调用 blogModule._seal()"上锁",这会阻止外部接入内部的_private。如果这个模块需要再次增生,应用的生命周期内,任何文件都可以调用_unseal() ”开锁”,然后再加载新文件。加载后再次调用 _seal()”上锁”。

完全没看懂

 

5.强大的原型与原型链

// 使用{}对象的 hasOwnProperty,并将其上下为设置为foo
{}.hasOwnProperty.call(foo, 'bar'); // true

可以避免hasOwnProerty 被非法占用

 

http://www.mollypages.org/misc/js.mp这个地址有原型链的图,研究一下啊

 

全局上下文的变量对象是从“Object.prototype”中继承的,所以我们可以得到没有声明的全局变量,从原型链中获取;(在sprider Monkey中)

with的作用域链:优先从Object.protoype中查找,如下图所示



汤姆大叔的javascript的闭包描述的很好,自己写一个


几个函数可能含有相同的父级作用域(这是一个很普遍的情况,例如有好几个内部或者全局的函数)。在这种情况下,在[[Scope]]中存在的变量是会共享的。一个闭包中变量的变化,也会影响另一个闭包的

function baz() {
  var x = 1;
  return {
    foo: function foo() { return ++x; },
    bar: function bar() { return --x; }
  };
}
 
var closures = baz();
 
console.log(
  closures.foo(), // 2
  closures.bar()  // 1
);

如图所示:


第十二章:变量对象

只有全局上下文的变量对象允许通过VO的属性名称来间接访问(因为在全局上下文里,全局对象自身就是变量对象,稍后会详细介绍),在其它上下文中是不能直接访问VO对象的,因为它只是内部机制的一个实现。


第十五章:

不理解下面这个分组操作符

// "foo" 是一个函数声明,在进入上下文的时候创建
 
alert(foo); // 函数
 
function foo(x) {
  alert(x);
}(1); // 这只是一个分组操作符,不是函数调用!
 
foo(10); // 这才是一个真正的函数调用,结果是10


注意,下面一个立即执行的函数,周围的括号不是必须的,因为函数已经处在表达式的位置,解析器知道它处理的是在函数执行阶段应该被创建的FE,这样在函数创建后立即调用了函数。

var foo = {
 
  bar: function (x) {
    return x % 2 != 0 ? 'yes' : 'no';
  }(1)
 
};
 
alert(foo.bar); // 'yes'

尝试一下

很不错,慢慢啃

如果您想在 G2 Plot 中展示另一个数字的 y 轴,可以使用 `dual-axes`(双轴)模式。以下是一个简单的示例代码: ```javascript import { Chart } from '@antv/g2'; const data = [ { year: '1991', value: 15468, count: 110 }, { year: '1992', value: 16100, count: 90 }, { year: '1993', value: 15900, count: 120 }, { year: '1994', value: 17409, count: 150 }, { year: '1995', value: 17000, count: 170 }, { year: '1996', value: 31056, count: 200 }, { year: '1997', value: 31982, count: 250 }, { year: '1998', value: 32040, count: 300 }, { year: '1999', value: 33233, count: 350 }, { year: '2000', value: 34241, count: 400 }, { year: '2001', value: 34368, count: 450 }, { year: '2002', value: 32961, count: 500 }, { year: '2003', value: 34434, count: 550 }, { year: '2004', value: 35521, count: 600 }, { year: '2005', value: 35415, count: 650 }, { year: '2006', value: 37790, count: 700 }, { year: '2007', value: 41000, count: 750 }, { year: '2008', value: 40603, count: 800 }, { year: '2009', value: 50000, count: 850 }, { year: '2010', value: 55000, count: 900 }, { year: '2011', value: 55200, count: 950 }, { year: '2012', value: 58400, count: 1000 }, { year: '2013', value: 60000, count: 1050 }, { year: '2014', value: 60200, count: 1100 }, { year: '2015', value: 62000, count: 1150 }, { year: '2016', value: 65000, count: 1200 }, { year: '2017', value: 66000, count: 1250 }, { year: '2018', value: 67600, count: 1300 }, { year: '2019', value: 68700, count: 1350 }, ]; const chart = new Chart({ container: 'container', autoFit: true, height: 500, }); chart.data(data); // 配置 value 轴 chart.scale('value', { nice: true, }); // 配置 count 轴 chart.scale('count', { nice: true, }); // 绘制 value 系列数据 chart .line() .position('year*value') .color('red'); // 绘制 count 系列数据 chart .line() .position('year*count') .color('blue') .axis('count', { label: { formatter: (val) => `${val} 个`, }, }); // 开启双轴模式 chart.axis('count', { grid: null, line: null, tickLine: null, }); chart.axis('value', { label: { formatter: (val) => `$${val}`, }, }); chart.render(); ``` 在这个示例中,我们使用了 `dual-axes` 模式来同时展示 `value` 和 `count` 两个数字的 y 轴。其中 `value` 轴使用了默认的设置,而 `count` 轴则进行了定制化,例如添加了单位(个),并且取消了其网格、线条和刻度线。 希望能对您有所帮助!
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值