一、面向对象-OOD

  虽然js面向对象的编程思想已经老话常谈了，但了为了文章的完整性，我还是把它加了进来，尽量以不太一样的方式讲述(虽然也没什么卵不一样的)。

  1、面向对象，首先得有类的概念，没有类造不出来对象，但是javascript中又没有类 只有函数的感念，把以大写字母命名的函数看成创建对象的构造函数,把函数名看成类，那么就可以new一个对象了

1 //1.1 无参的 2 function People() { 3   4 } 5 var p = new People(); 6 //javascript为解释性语言，运行时编译，所以我们点什么属性，就会有什么属性了。 7 p.name = 'hannimei'; 8 console.log(p.name); 9 //2.2 来个有参数的10 function Student(name, age) {11     this.name = name;12     this.age = age;13     this.say = function () {14         return saywhat();15     }
　　//私有函数
    function saywhat(){
        return this.name+':say what?';
    }16     return this;17 }18 var s = new Student('lily', 18);19 console.log(s.name);20 console.log(s.say());21 //2.3 来个factory22 function Factory(name,age) {23     var obj = new Object();24     obj.name = name;25     obj.age = age;26     obj.say = function () {27         return obj.name+ ':say what?';28     }29     return obj;30 }31 var o = new Factory('factory', 1);32 console.log(o.say());33  34 //2.4对象字面方式创建对象35 var ob = { Name: "字面量", Age: 18 };36 //当然也有字符串字面量、数组字面量这些37 var str = 'hello javascript!';38 var arr = [1, 2, 3, 4, 5];

2、那么有了类，面向对象同样不能少的特性就是继承；js中继承有各种方式的实现，通过函数原型链最常见不过了

      天生自带技能乃是命，如果后来想修炼技能怎么办，直接点出来就好了嘛；如果不想修炼就想天生自带，那就得说下prototype了。

1 function Teacher(schoolname) {2             this.schoolname = schoolname;3             return this;4         }5 var t = new Teacher('2b1中');

    创建Teacher函数对象t时，t的__proto__指向了一个object，这个的指向其实就是函数的原型（为什么呢？听我慢慢往下道），如图：这 个object又有两个属性，constructor定义了创建它的Teacher函数，__proto__继续向上指向Object，通过这种对象二叉 树的结构，就标识了这个对象怎么来的和出生都自带什么技能。

    那我们后台想自带技能就要通过增加t的__proto__指向的那个object默认技能了

  从Teacher的监视图我们看到两个关键的属性，一个是它的函数原型prototype，测试得知这个东西和上图的__proto__指向同一个 object，那么我们也就知道函数的另一个__proto__是指向它父级的Function的prototype,最终指向Object的 prototype

 

  经过上面的调理，我们终于明白了先天靠遗传，后天靠拼搏这句话的真谛；再试着回味一下这句话

1 //2.1 直接给prototype添加属性 2 function Teacher(schoolname) { 3     this.schoolname = schoolname; 4     return this; 5 } 6 Teacher.prototype.age = 18; 7 Teacher.prototype.jiangke = function () { 8     return '老师开始讲课了'; 9 }10 var t = new Teacher('2b1中');11 console.log(t.age);12 console.log(t.schoolname);13 console.log(t.jiangke());14  15 //2.2 通过prototype继承，prototype指向的是一个object，所以我们继承的话就指向父类new出来的对象就可以了16 //这一句代码引发的长篇大论17 function People(name) {18     this.name = name;19     this.say = function () {20         return this.name + ':say what?';21     }22     return this;23 }24 function Student(name) {25     this.name = name;26 }27 Student.prototype = new People(Student.name);28 var s = new Student('啊弥陀丸');29 console.log(s.say());

 

二、面向数据-DOP

  1、初探

  js面向数据编程这个概念是阿里什么论坛会上提出来的，简单的来说就是，大家懒得用js操作DOM元素了，通过直接对数据的赋值修改，然后替换到html模板中，最后直接调用innerHTML显；举个例子吧，虽然不够贴切 也不够完整，但话糙理不糙，它只是用来说明问题

  这就是我们简陋的购物车，有两种水果和要购买的个数，通过+/-修改个数

 

1 
     
      2     
      
橘子：
3     
      
苹果：
4 
     

 

  传统的方式，我们会操作DOM，然后修改它的value值；但面向数据编程的时候需要的是，得现有一个json model，然后有一个html view，把操作后的属性值relace到view中，最后innerHTML大功告成。那么这种通用的编程方式的好处自然不言而喻，而且以现在浏览器渲 染的速度，处理大数据时真是必备良品

1 var fruits = { orange: 1, apple: 1 };
//模板可以放入html中读取，此处为了方便 2 var tpl = '
橘子：
苹果：
'; 3 function changeEvent(name) { 4     //操作数据 5     fruits[name] += 1; 6     //替换值 7     var result = tpl.SetValue(fruits); 8     //innerHTML 9     document.getElementById('gwcid').innerHTML = result;10 }11  12 String.prototype.SetValue = function (json) {13     //regex replace14     return this.replace(/<%\w+%>?/gi, function (matchs) {15         var str = json[matchs.replace(/<%|%>/g, "")];16         return str == "undefined" ? "" : str;17     });18 }

2、开始及结束

    经过上面的例子，相信js模板引擎啥的我们也就一并结束了吧，至少现在各种的模板引擎我也没太深入用，那些官方介绍的话也懒得贴出来了

    大势所趋，现在后端许多核心的思想MVC、依赖注入、模块化等都被应用到了前段，而且连native的mvvm思想都搬了过来，说到这里，想必各位已经猜到接下来要说的东西--AngularJS，此处以文档学习为主，理论思想就懒得贴了。

  2.1 Expression

1 
表达式
 2 + 3 
结果为：{
   {num1+num2}}
 4 
     
 5 
字符串
 6 
     
       7     
      
姓名：{
   {name}}，年龄 {
   {age}}
 8 
     
 9 
     
10 
对象
11 
     
      12     
      
姓名：{
   {student.name}}，年龄：{
   {student.age}}
13 
     
14 
     
15 
数组
16 
     
      17     
      
数组[1]：{
   {nums[1]}}
18     
      
数组tostring：{
   {nums.toString()}}
19 
     

　　2.2 ng-

1 
      2 
     
       3     hello {
    {word}} 4 
     
 5   6 
      7 请输入： 8 你输入的是：{
    {input}} 9  10 
     11 
可以看见
12 
看不见
13 
表达式成立可以看见
14 
     
      15     email：
      16     
      请输入合法的邮箱17     
      
       18         
       
字段内容是否合法：{
   {form1.address.$valid}}
19         
       
表单是否有填写记录：{
   {form1.address.$dirty}}
20         
       
字段内容是否非法：{
   {form1.address.$invalid}}
21         
       
是否触屏点击：{
   {form1.address.$touched}}
22         
       
是否没有填写记录：{
   {form1.address.$pristine}}
23     
      
24 
     
25  26 
     27 点我!28  29 
     30 
可以看见吧
31  32 
     33 
     
      34     价格：
      35 
     
36 
     
      37     
      
38 
     
39  40 
     41 
     
      42     count:{
    {count}}43     
      
      +144 
     
45  46 
     47 
     
      48     
      49         50     51 
     
52  53 
     54 
     
55  56 
     57 
     58 
     59 
     60 
     
61 
     62 
     
63  64 

　　2.3 Scope

1 
      2 
     
       3     
      
        4         {
   {name}}
       
 5         {
   {say();}}
       
 6         {
    {$root.genname}} 7     
      
 8     
      
        9         {
    {$root.genname}}10     
      
11 
     
12  13 
     
      14     {
    {name}}15 
     
16 

　　2.4 Filter

1 !--currency 格式化数字为货币格式。 2 filter  从数组项中选择一个子集。 3 lowercase   格式化字符串为小写。 4 orderBy 根据某个表达式排列数组。 5 uppercase   格式化字符串为大写。--> 6 
     
       7     {
   {name|uppercase}}  
       8     
      
        9         
       
{
   {c.name}}
  
       10     
      
11     
        
      12 
     

　　2.5 Service

1 
     
       2     当前url：{
   {currenturl}}
      
 3     get请求json数据：{
    {jsondata}} 4     自定义服务：{
    {myservice}} 5 
     
 6 

　　2.6 api

1 
     
       2     是否是字符串：{
   {isstr}}
      
 3     是否是数字：{
   {isnum}}
      
 4     转为大写是：{
   {strtoupper}}
      
 5 
     
 6 

　　2.7 animate

 

1 
      3 点我隐藏div 4 
     17 
     
18 

　　2.8 DI

1 var app = angular.module('myapp', []); 2 //注入value 3 app.value('defaultval', 0); 4   5 //factory 注入service 6 app.factory('sumService', function () { 7     var factory = {}; 8   9     factory.sum = function (a, b) {10         return a + b11     }12     return factory;13 });14  15 //自定义computeServer服务16 app.service('computeServer', function (sumService) {17     this.sum = function (a, b) {18         return sumService.sum(a, b);19     };20 });21  22 //provider23 app.config(function ($provider) {24     $provider.provider('sumService', function () {25         this.$get = function () {26             var factory = {};27  28             factory.sum = function (a, b) {29                 return a + b;30             }31             return factory;32         };33     });34 });35  36 //constant 常量配置37 app.constant('save', 'false');38  39 //注入的value40 app.controller('ctrl', function ($scope, defaultval) {41     $scope.defaultval = defaultval;42 });

　　2.9 route

1  2 
     
       3     
      
首页
 4     
      
产品
 5     
      
关于
 6 
     
 7 
     
 8 26 

 

 

三、面向H5

  html5给力之处，无非是javascript大量的api；像以前想要修改url参数不跳转做标识用，只能用#，有了pushStata 呵呵呵；更或者做webim轮询服务器，现在windows server12+websocket直接搞起（还是用signalr实在点，装逼也没人信）；当然 不论是本地数据库还是websocket更或者是强大的canvas api等等等太多，其实都不如querySelector、querySelectorAll这类的api来的实在（用惯了jquery选择器的可能都这么想）

  那么问题来了，既想写一套代码，又想用h5新api的写法，跟着潮流 不然就out了；那么就需要兼容IE8及下，为他们实现h5这些个常用的api就好了撒

  思想已经出来了，但雏形还未跟上，虽然很简单，但是我还是厚着脸皮写出来了

1  2