snowyYU

dream passionately

对象和原型

几种常见的创建对象方法##

1.通过对象字面量构造

var contact1={
    name:"zhao",
    sex:"male"
}

通过此方法构造的对象,其[[prototype]]指向Object.prototype

2.通过构造函数

function Contact(name,sex){
    this.name=name;
    this.sex=sex;
    this.getName=function(){
        return name;
    }
}
var contact1=new Contact()
contact1.__proto__==Contact.prototype //true

每个函数都有一个prototype属性,其所指向的对象带有constructor属性,这一属性指向函数自身,eg,本例中,Contact.prototype.constructor==Contact

3.通过函数Object.create构造

var contact={
    name:"zhao",
    sex:"male"
}
var contact1=Object.create(contact);

contact1的[[prototype]]指向contact

js中__proto__和prototype的区别和关系?

常说js中一切都是对象,但基本数据类型不是对象,基本数据类型没有方法和属性 ,当我们调用方法时候会封装出一个对象,(wrapper对象是什么)
首先,几乎所有对象都有[[prototype]]属性,在es5中这是个隐藏属性,指向此对象的原型。es5中用Object.getPrototypeOf函数获得一个对象的[[prototype]]。es6中,使用Object.setPrototypeOf可以直接修改一个对象的[[prototype]]

很多浏览器都给每个对象提供__proto__属性(不标准,不推荐用),我觉得可以理解为就是[[prototype]],

关系图

1.方法(Function)是对象,方法的原型(Function.prototype)是对象。因此,它们都会具有对象共有的特点。即:对象具有属性__proto__,可称为隐式原型,一个对象的隐式原型指向构造该对象的构造函数的原型,这也保证了实例能够访问在构造函数原型中定义的属性和方法。
2.方法(Function)方法这个特殊的对象,除了和其他对象一样有上述_proto_属性之外,还有自己特有的属性——原型属性(prototype),这个属性是一个指针,指向一个对象,这个对象的用途就是包含所有实例共享的属性和方法(我们把这个对象叫做原型对象)。原型对象也有一个属性,叫做constructor,这个属性包含了一个指针,指回原构造函数。好啦,知道了这两个基本点,我们来看看上面这副图。
1.构造函数Foo()构造函数的原型属性Foo.prototype指向了原型对象,在原型对象里有共有的方法,所有构造函数声明的实例(这里是f1,f2)都可以共享这个方法。
2.原型对象Foo.prototypeFoo.prototype保存着实例共享的方法,有一个指针constructor指回构造函数。
3.实例f1和f2是Foo这个对象的两个实例,这两个对象也有属性__proto__,指向构造函数的原型对象,这样子就可以像上面1所说的访问原型对象的所有方法啦。另外:构造函数Foo()除了是方法,也是对象啊,它也有__proto__属性,指向谁呢?指向它的构造函数的原型对象呗。函数的构造函数不就是Function嘛,因此这里的__proto__指向了Function.prototype。其实除了Foo(),Function(), Object()也是一样的道理。原型对象也是对象啊,它的__proto__属性,又指向谁呢?同理,指向它的构造函数的原型对象呗。这里是Object.prototype.最后,Object.prototype的__proto__属性指向null。
总结:
1.对象有属性__proto__,指向该对象的构造函数的原型对象。
2.方法除了有属性__proto__,还有属性prototype,prototype指向该方法的原型对象。

看一下几种常见构造一个对象的方法,决定了一个对象的[[prototype]]属性

参考

对象与原型

开始正式学习node,之前看过node即学即用,敲了遍书上的代码,有点晕晕的,之后很长时间没接触node了,现在下决心每天花些时间捣鼓下。

阅读全文 »

开年第一篇,前两周赶进度特别忙,基本重构了整个系统,也踩了不少的坑,其中就有angular指令ng-value和value这俩货

类似的还有ng-disabled和disabled等

ng-value&&value

ng-disabled&&disabled

上来先举个正确的例子

ng-disabled="!(address.selected&&filterOptions.filterText.endTime&&filterOptions.filterText.startTime)"

这个是账户系统中的原例,注意逻辑关系的书写

ng-disabled=”false“

上面一条是错的

注意disable存在时,表单不会对其校验,可使用visible属性

ng-if

这里要特别注意ng-if和ng-show的区别

ng-if = false 时,相应的标签元素在调试器里消失(不知道是否被移出了dom),且不占空间。而
ng-show = false 时 相应的的元素还是在dom中的,

如下

  • ng-if 在后面表达式为 true 的时候才创建这个 dom 节点,ng-show 是初始时就创建了,用 display:block 和 display:none 来控制显示和不显示。
  • ng-if 会(隐式地)产生新作用域,ng-switch 、 ng-include 等会动态创建一块界面的也是如此。

为了后来的开发维护方便,在此写下账户系统前端部分的概述,包括所用框架,依赖,管理工具,命名规范,项目结构等,后面有时间也会总结下前端开发的规范。

所用框架

系统所用框架为angular1.3版本,为2016年之前主流版本,前端这几年涌现了太多框架,自己熟悉了这个版本后也要跟上时代的步伐,学习angular2等

依赖

angular参照Java搞出了依赖注入和指令,系统的依赖注入和个部分功能解释如下

ui-router

angular1.x 本身有ng-router,但是满足不了复杂的应用,系统采用的
依赖为ui-router,ui-router具体用法配置和其自带的指令会单独讲一下。

管理工具

包管理工具用了gulp,主要执行如下功能

css压缩

js压缩

注意,为了避免压缩时注入的部分被误识别为变量部分,从而导致替换,应写成数组格式的依赖注入,特别是系统采用的angular-ui的modal服务,在实例化时也要写成数组格式的注入,分别如下

1.控制器初始化

 var appModule=angular.module("app",[])
     appModule.controller("controllerName",
                 ["dev1","dev2",function(dev1,dev2){
   //controller body here
}])

2.举例modal模态框的

 var modalInstance =$modal.open({
//配置部分,只显示modal控制器配置,我懒
controller:modalController
})
//by the way 这里可以写modalInstance的promise
//初始化modal的控制器,采用数组格式的依赖注入
var modalController =["dev1","dev2",function(dev1,dev2){
}]

扯远了,那个modal的作用域独立,要resolve进来数据或方法

去注释去空格

图片压缩

命名规范

这里只针对本系统给出一定的规范

控制器js文件和模板html名字相同,参照ui-router的命名结构,并相应的将点替换为下短横,ui-sref指令的值命名如下
在如总模板页为app,其下的一级菜单为app.Level1NavName,一级菜单下的二级菜单为app.Level1NavName.level2NavName,可参考config.router.js文件的配置,三级相同命名。
相应的文件命名Level1NavName_level2NavName.js/html

其中Level1NavName和Level2NavName全系统唯一,注意路由配置的url属性,表现为URL层级

madal弹出框的templete命名为触发事件函数的名称,controller属性的名称命名为函数名加Ctrl,例如

 $scope.appRegisterEdit=function(row){
   var myrow=row.entity;
   console.log(myrow);
   var modalInstance = $modal.open({
   templateUrl: 'appRegisterEdit.html',
   controller: appRegisterEditCtrl,
   resolve: {
    items: function () {
      return myrow;
    },
    shuaxing: function(){
      return $scope.shuaxing;
    },
    pop:function(){
      return $scope.pop;
    }
   }
 });
    modalInstance.result.then(function () {
}, function () {
  $scope.shuaxing();
});
}

项目结构

2016年结束了,回头看来这年经历可真是丰富啊,没去考研,感觉整年都在弥补我的过错,现在想想都觉得我真是太废了,1月6号开始决定敲代码,翻开人生第一本代码书–超简单的headfirst-html。过年因为家庭问题也没有回家,初二便跑回学校,记得当时贝岗只有M记开门(而且还只有我最讨厌的香辣堡卖),真是对自己的惩罚,希望自己能多多记住这种感觉

学习部分

总结下今年看的书

技术上

1.headfirst-html和css,自己看完的第一本代码书,按照示例敲出了第一个静态页面,现在想想真是挺适合入门的,讲的简单生动
2.headfirst-html5,这个看了一半,倒是对html5有了比较浅的了解
3.javascript高级程序设计,这个看了一半,必读书籍,新的一年准备和犀牛书再啃一遍
4.css权威教程,读了大半,也是当做工具书,需要就去查,很详细
5.jq基础,挑着读了些,很多时候需要用到时跑去查找

others

1.中国缺了一味药,感觉有些心酸
2.时间简史,看了一点点,感觉还是值得一看,全民科普类书籍
3.相对论并非遥不可及,写的相当赞,我竟然看懂啦
4.常识,托马斯潘恩的,据说是美国独立战争的反动小册子,感觉看着翻译的版本有点怪
5.知乎上收藏了一大把的东西

学到的技术

1.前端基础html,css相比较看的较多,js和jq就不够了,自己明白js很重要,
2.bootstrap,这个也只能算了解,其核心网格系统也只是勉强会用
3.angular,想想听到老大说用angular搭建项目时的一脸懵逼,只能硬着头皮上了,现在也只能说是刚入门,框架自身变化也快,此外第三方的库,angular-ui,ui-router,oclazyload,ng-grid也多少了解些
4.ui-grid这个拿出来单独说,因为这个要替代ng-grid了,而且其功能更强大,我也打算将angular项目中的表格替换为ui-grid
5.Git,只会些简单的命令,倒是对其了解了些
6.gulp,倒是自己尝试配了些简单的命令,

这一年接触的东西不少,深究起来真正懂的一个都没有,这也是下年需要改进的地方

生活部分

啊哈,还是单身单身,欣慰的是毕业后能和大学好盆友暂时住在一起,延续了些大学的味道,嗯,尝试做了很多次饭(虽然是最简单的烤面包片加鸡蛋),把自己的房间认真装了下,拍死了不少小强,开始独立自己买衣服,年末开始锻炼身体了

当然,这一年还有个大事件就是我毕业啦,感觉吧,不开心

工作部分

在安正实习了下,跑到海豚啦,氛围很好,师兄很赞,还有一堆大学的小伙伴

吸取的教训

最大的教训就是最后没去考研,一直以来觉得自己可以坦然面对一些事,现在发现还真是高估了自己,发觉自己还是太容易受环境影响,内心对未知有种惧怕,自己很多时候是准备不足。这种挫败感真是太大了,自己远不如想象的成熟

新一年给自己

js很重要,新的一年要重新弄下,
1.身体很重要,多跑跑步,可以的话,去健身房吧
2.英语
3.php,体验下世界上最好的语言

接触angular已经近半年了,一直在用别人的指令改改,遇到了很多自己解决不了的坑,其实自己对angular的各部分了解并不多,现在回头来弄清其中的用法原理,打好自己的基础。

阅读全文 »

sublime 3

sublime大家都知道啦,用了近一年了,感情颇深。之前用了sublime2,感觉最大的不同是sublime3的启动速度飞快,之后一直在用别人放出来装了各种插件的3,结果近几个月想要下载新的插件时发现竟然装不了,哈,值此一周年之际,自己重新捣鼓下3.

阅读全文 »
0%