From eee63655334fd7295c0d85d7d9c2f50cc5e6837b Mon Sep 17 00:00:00 2001 From: Gaohaoyang Date: Mon, 25 May 2015 21:57:42 +0800 Subject: [PATCH] add design by and update post --- _includes/footer.html | 2 + _posts/2015-05-20-scope.md | 30 ++++++++++++-- static/css/index.css | 85 ++++++++------------------------------ 3 files changed, 47 insertions(+), 70 deletions(-) diff --git a/_includes/footer.html b/_includes/footer.html index d968e4aefcc..ddc80fc660d 100644 --- a/_includes/footer.html +++ b/_includes/footer.html @@ -23,6 +23,8 @@ {{ site.description }} · © 2015 Gaohaoyang + · + Designed by HyG diff --git a/_posts/2015-05-20-scope.md b/_posts/2015-05-20-scope.md index 9bc9bd0e978..92d863eff82 100644 --- a/_posts/2015-05-20-scope.md +++ b/_posts/2015-05-20-scope.md @@ -19,12 +19,36 @@ excerpt: JavaScript作用域和作用域链学习笔记。 在代码中任何地方都能访问到的对象拥有全局作用域，一般来说以下 3 种情形拥有全局作用域。 +1. 最外层函数和在最外层函数外面定义的变量拥有全局作用域 +2. 所有末定义直接赋值的变量自动声明为拥有全局作用域 +3. 所有window对象的属性拥有全局作用域 + window对象的内置属性都拥有全局作用域，例如window.name、window.location、window.top等。 +### 局部作用域(Local Scope) +和全局作用域相反，局部作用域一般只在固定的代码片段内可访问到，最常见的例如函数内部，所有在一些地方也会看到有人把这种作用域称为函数作用域 +。 -参考资料 +--- + +## 作用域链(Scope Chain) + +在 JavaScript 中，函数也是对象，实际上，JavaScript 里一切都是对象。函数对象和其它对象一样，拥有可以通过代码访问的属性和一系列仅供 JavaScript 引擎访问的内部属性。其中一个内部属性是 [[Scope]]，由 ECMA-262 标准第三版定义，该内部属性包含了函数被创建的作用域中对象的集合，这个集合被称为函数的作用域链，它决定了哪些数据能被函数访问。 + +1. 在函数创建时，它的作用域链中会填入一个全局对象，该全局对象包含了所有全局变量。 +2. 函数执行时会创建一个称为“运行期上下文(execution context)”的内部对象，运行期上下文定义了函数执行时的环境。每个运行期上下文都有自己的作用域链，用于标识符解析，当运行期上下文被创建时，而它的作用域链初始化为当前运行函数的[[Scope]]所包含的对象。 +3. 这些值按照它们出现在函数中的顺序被复制到运行期上下文的作用域链中。它们共同组成了一个新的对象，叫“活动对象(activation object)”，该对象包含了函数的所有局部变量、命名参数、参数集合以及this，然后此对象会被推入作用域链的前端。 +4. 当运行期上下文被销毁，活动对象也随之销毁。 + +在函数执行过程中，每遇到一个变量，都会经历一次标识符解析过程以决定从哪里获取和存储数据。该过程从作用域链头部，也就是从活动对象开始搜索，查找同名的标识符，如果找到了就使用这个标识符对应的变量，如果没找到继续搜索作用域链中的下一个对象，如果搜索完所有对象都未找到，则认为该标识符未定义。函数执行过程中，每个标识符都要经历这样的搜索过程。 + +### 代码优化 + +从作用域链的结构可以看出，在运行期上下文的作用域链中，标识符所在的位置越深，读写速度就会越慢。如上图所示，因为全局变量总是存在于运行期上下文作用域链的最末端，因此在标识符解析的时候，查找全局变量是最慢的。所以，在编写代码的时候应尽量少使用全局变量，尽可能使用局部变量。一个好的经验法则是：如果一个跨作用域的对象被引用了一次以上，则先把它存储到局部变量里再使用。 + +--- + +## 参考资料 * [鸟哥：Javascript作用域原理](http://www.laruence.com/2009/05/28/863.html) * [理解 JavaScript 作用域和作用域链](http://www.cnblogs.com/lhb25/archive/2011/09/06/javascript-scope-chain.html) - -未完待续！ \ No newline at end of file diff --git a/static/css/index.css b/static/css/index.css index 3837098f22a..3e7e781c4f9 100644 --- a/static/css/index.css +++ b/static/css/index.css @@ -6,7 +6,7 @@ body { background-image: url(http://7q5cdt.com1.z0.glb.clouddn.com/bg-canvas_bg.jpg); font-family: 'Microsoft YaHei', 'SimHei', sans-serif; } -p{ +article p{ /*text-indent: 2em;*/ } pre{ @@ -370,6 +370,23 @@ blockquote:last-child { -moz-box-shadow: 0 0 5px rgba(0,0,0,0.6),0 0 20px rgba(0,0,0,0.1) inset; -o-box-shadow: 0 0 5px rgba(0,0,0,0.6),0 0 20px rgba(0,0,0,0.1) inset; box-shadow: 0 0 5px rgba(0,0,0,0.6),0 0 20px rgba(0,0,0,0.1) inset; + + transition:0.1s ease-out; + -webkit-transition:0.1s ease-out; + -moz-transition:0.1s ease-out; + -o-transition:0.1s ease-out; +} +#fall li:hover{ + -webkit-box-shadow: 0 0 12px rgba(0,0,0,0.8),0 0 20px rgba(0,0,0,0.1) inset; + -moz-box-shadow: 0 0 12px rgba(0,0,0,0.8),0 0 20px rgba(0,0,0,0.1) inset; + -o-box-shadow: 0 0 12px rgba(0,0,0,0.8),0 0 20px rgba(0,0,0,0.1) inset; + box-shadow: 0 0 12px rgba(0,0,0,0.8),0 0 20px rgba(0,0,0,0.1) inset; + + -webkit-transform: scale(1.05); + -moz-transform: scale(1.05); + -o-transform: scale(1.05); + -ms-transform: scale(1.05); + transform: scale(1.05); } #fall li p{ margin: 0; @@ -387,77 +404,11 @@ blockquote:last-child { padding: 5px 10px 10px 10px; text-indent: 2em; } -/** - * ------------ - */ -/* #fall{ - -webkit-column-width:349px; - -moz-column-width:349px; - -o-column-width:349px; - -ms-column-width:349px; - - -moz-column-gap:10px; Firefox - -webkit-column-gap:10px; Safari 和 Chrome - column-gap:10px; -} */ #fall a:link {color: #7676AC} /* 未访问的链接 */ #fall a:visited {color: #715584} /* 已访问的链接 */ #fall a:hover {color: #5989AD;text-decoration: none;} /* 鼠标移动到链接上 */ #fall a:active {color: #91C3CF} /* 选定的链接 */ -/* #fall { - padding: 10px 0 15px 5px; - position: relative; - z-index: 1; -} - -#fall .block{ - margin: 2px 2px 20px 2px; - width: 342px; - position: relative; - z-index: 1; - border:1px solid #ccc; - -webkit-box-shadow: 0 0 5px rgba(0,0,0,0.6),0 0 20px rgba(0,0,0,0.1) inset; - -moz-box-shadow: 0 0 5px rgba(0,0,0,0.6),0 0 20px rgba(0,0,0,0.1) inset; - -o-box-shadow: 0 0 5px rgba(0,0,0,0.6),0 0 20px rgba(0,0,0,0.1) inset; - box-shadow: 0 0 5px rgba(0,0,0,0.6),0 0 20px rgba(0,0,0,0.1) inset; -} - -#fall .block img{ - display: block; - width: 342px; - height: auto; -} - -#fall .block .block-body{ - padding: 10px 14px; -} -#fall .block .block-body .head{ - font-size: 18px; - padding-bottom: 8px; -} -#fall .block .block-body .description { - border-top: 1px dotted #ccc; - padding-top: 6px; - font-size: 14px; -} */ - -/* #fall .block:after,#fall .block:after { - content: ''; - background-color: red; - position: absolute; - z-index: -1; - top: 50%; - bottom: 0; - left:10px; - right: 10px; - -webkit-box-shadow: 0 0 20px rgba(0,0,0,0.9); - -moz-box-shadow: 0 0 20px rgba(0,0,0,0.9); - -o-box-shadow: 0 0 20px rgba(0,0,0,0.9); - box-shadow: 0 0 20px rgba(0,0,0,0.9); - border-radius: 100px/10px; -} */ - /** * 文章目录相关 */