对象属性的理解

var person = {name:"jie",age:18};
如果只是这样定义一个object,那么configurable:true,Enumerable:true,writable:true;
要改变这些属性类型,需要显式的调用Object.defineProperty
Object.defineProperty(person,"name",{
    configurable:false, //能否被删除,能否修改访问属性,默认true,如果在false重设defineProperty会报错
    Enumerable:false,//能否被for-in,默认为true
    writable:false, //能否修改,默认为true
    value:"gax"
})
console.log(person); //{name: "gax",age:18}
person.name = "abc";
console.log(person); //{name: "gax",age:18}
[configurable]
Object.defineProperty(person,"name",{
    configurable:false,
	value:"jie"
})
delete person.name; //报错
Object.defineProperty(person,"name",{
    value:"jie2"
})//报错
configurable如果被设置false,那么如果delete会报错,
如果configurable,Enumerable,writable,value中,任意一项于初始值不一致,都会报错
[Enumerable]
var person = {name:"jie"};
Object.defineProperty(person,"age",{
    Enumerable:false,
	value:"18"
})
for(var x in person){
	console.log(x);
}
//只有name
[writable]
var person = {};
Object.defineProperty(person,"age",{
    writable:false,
    value:"18"
})
person.age = 21;//依然是 18
如果
var person = {};
Object.defineProperty(person,"age",{
    value:"18"
})
那么Object.getOwnPropertyDescriptor(person,"age")//{value: 18, writable: false, enumerable: false, configurable: false}
全部未定义的默认全部false
同理适用于new出来的实例:
function person(){
	Object.defineProperty(this,"age",{
		writable:false,
		value:"18"
	})
}
var son = new person();
这样就能做到对象中的权限控制。

当变量提升遇到作用块

function aaa(){
    a();
    if(true){
        function a(){
            console.log(1);
        }
    }
    if(false){
        function b(){
            console.log(2)
        }
    }
    function a(){
        console.log(3);
    }
}
与
function aaa(){
    a();
    function a(){
        console.log(3);
    }
    if(true){
        function a(){
            console.log(1);
        }
    }
    if(false){
        function b(){
            console.log(2)
        }
    }
}
结果都是3,证明fuction的变量提升是只在当前作用块内。

关于JS页面阻塞的实验

问题1:如果遇到JS阻塞,那么它的阻塞是指阻塞DOM建立,还是阻塞显示(渲染),如果是阻塞DOM建立,那么是全部DOM都阻塞还是部分阻塞?

[DEMO]

现象:先出现红色,3秒后出现蓝色。

结论:说明JS只是阻塞JS脚本下面的DOM。

问题2:如果这个JS阻塞不是因为外链下载消耗的阻塞,而是<script>内部js的计算运行造成的阻塞,那么<script>上面的DOM会被渲染吗?

[DEMO]

现象:红色蓝色一起出现。

结论:说明JS脚本的阻塞如果是[网络原因],就会部分阻塞,如果是[运行原因],就会全部阻塞。

关于Angular 2.0 的探索

2015年,由于React Native发布异常火爆,引出了她背后的框架ReactJS,ReactJS,在前端届也因此变得非常火爆。
目前很多人拿React和Angular2作比较。我资历尚浅,不作过多评论。今天在这里写一下这几天对Angular的研究一些总结。
Angular 2.0 分为 TypeScript,JavaScript,和Dart版本,目前都是beta版。 继续阅读

深入理解 AngularJS 的 Scope

一、遇到的问题

问题发生在使用 AngularJS 嵌套 Controller 的时候。因为每个 Controller 都有它对应的 Scope(相当于作用域、控制范围),所以 Controller 的嵌套,也就意味着 Scope 的嵌套。这个时候如果两个 Scope 内都有同名的 Model 会发生什么呢?从子 Scope 怎样更新父 Scope 里的 Model 呢?
这个问题很典型,比方说当前页面是一个产品列表,那么就需要定义一个 ProductListController

function ProductListController($scope, $http) {
    $http.get('/api/products.json')
        .success(function(data){
            $scope.productList = data;
        });
    $scope.selectedProduct = {};
}

你大概看到了在 Scope 里还定义了一个 selectedProduct 的 Model,表示选中了某一个产品。这时会获取该产品详情,而页面通过 AngularJS 中的 $routeProvider 自动更新,拉取新的详情页模板,模板中有一个 继续阅读

Think in AngularJS:对比jQuery和AngularJS的不同思维模式

导言

stackoverflow上有一个人问了一个问题:如果我有jQuery背景,我应该如何切换到AngularJS的思维模式?
有一个回复非常经典,获得了两千多票。
为了让国内开发者也能领略到其中的核心思想,现把这个问题和答案翻译出来供大家参考。
 

Question

假设我已经熟悉了如何使用jQuery来开发客户端应用,我现在打算使用AngularJS。请描述一下有那些思维模式方面的东西需要转变吗?下面是举出一些具体的问题,用来帮助你回答我的这个问题: 继续阅读