淡扯javascript編程思想

時間 2019-11-20

原文原文鏈接

1、面向對象-OODjavascript

雖然js面向對象的編程思想已經老話常談了，但了爲了文章的完整性，我仍是把它加了進來，儘可能以不太同樣的方式講述(雖然也沒什麼卵不同的)。html

一、面向對象，首先得有類的概念，沒有類造不出來對象，可是javascript中又沒有類只有函數的感念，把以大寫字母命名的函數當作建立對象的構造函數,把函數名當作類，那麼就能夠new一個對象了html5

 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     }<br>　　//私有函數<br>    function saywhat(){<br>        return this.name+':say what?';<br>    }
16     return this;
17 }
18 var s = new Student('lily', 18);
19 console.log(s.name);
20 console.log(s.say());
21 //2.3 來個factory
22 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];

二、那麼有了類，面向對象一樣不能少的特性就是繼承；js中繼承有各類方式的實現，經過函數原型鏈最多見不過了java

天生自帶技能乃是命，若是後來想修煉技能怎麼辦，直接點出來就行了嘛；若是不想修煉就想天生自帶，那就得說下prototype了。jquery

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，經過這種對象二叉樹的結構，就標識了這個對象怎麼來的和出生都自帶什麼技能。web

那咱們後臺想自帶技能就要經過增長t的__proto__指向的那個object默認技能了數據庫

從Teacher的監視圖咱們看到兩個關鍵的屬性，一個是它的函數原型prototype，測試得知這個東西和上圖的__proto__指向同一個 object，那麼咱們也就知道函數的另外一個__proto__是指向它父級的Function的prototype,最終指向Object的 prototype編程

通過上面的調理，咱們終於明白了先天靠遺傳，後天靠拼搏這句話的真諦；再試着回味一下這句話json

 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());

2、面向數據-DOPbootstrap

一、初探

js面向數據編程這個概念是阿里什麼論壇會上提出來的，簡單的來講就是，你們懶得用js操做DOM元素了，經過直接對數據的賦值修改，而後替換到html模板中，最後直接調用innerHTML顯；舉個例子吧，雖然不夠貼切也不夠完整，但話糙理不糙，它只是用來講明問題

這就是咱們簡陋的購物車，有兩種水果和要購買的個數，經過+/-修改個數

1 <div id="gwcid">
2     <p>橘子：<input type="number" value="1" /><input type="button" value="+" onclick="changeEvent('orange');" /></p>
3     <p>蘋果：<input type="number" value="1" /><input type="button" value="+" onclick="changeEvent('apple');" /></p>
4 </div>

傳統的方式，咱們會操做DOM，而後修改它的value值；但面向數據編程的時候須要的是，得現有一個json model，而後有一個html view，把操做後的屬性值relace到view中，最後innerHTML大功告成。那麼這種通用的編程方式的好處天然不言而喻，並且以如今瀏覽器渲染的速度，處理大數據時真是必備良品

 1 var fruits = { orange: 1, apple: 1 };<br>//模板能夠放入html中讀取，此處爲了方便
 2 var tpl = '<p>橘子：<input type="number" value="<%orange%>" /><input type="button" value="+" onclick="changeEvent(\'orange\');"/></p><p>蘋果：<input type="number" value="<%apple%>" /><input type="button" value="+" onclick="changeEvent(\'apple\');"/></p>';
 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 replace
14     return this.replace(/<%\w+%>?/gi, function (matchs) {
15         var str = json[matchs.replace(/<%|%>/g, "")];
16         return str == "undefined" ? "" : str;
17     });
18 }

二、開始及結束

通過上面的例子，相信js模板引擎啥的咱們也就一併結束了吧，至少如今各類的模板引擎我也沒太深刻用，那些官方介紹的話也懶得貼出來了

大勢所趨，如今後端許多核心的思想MVC、依賴注入、模塊化等都被應用到了前段，並且連native的mvvm思想都搬了過來，說到這裏，想必各位已經猜到接下來要說的東西--AngularJS，此處以文檔學習爲主，理論思想就懶得貼了。

2.1 Expression

 1 <h3>表達式</h3>
 2 <input type="number" ng-model="num1" />+<input type="number" ng-model="num2" />
 3 <p>結果爲：{{num1+num2}}</p>
 4 <hr />
 5 <h3>字符串</h3>
 6 <div ng-init="name='lily';age=18">
 7     <p>姓名：{{name}}，年齡 {{age}}</p>
 8 </div>
 9 <hr />
10 <h3>對象</h3>
11 <div ng-init="student={name:'lucy',age:16}">
12     <p>姓名：{{student.name}}，年齡：{{student.age}}</p>
13 </div>
14 <hr />
15 <h3>數組</h3>
16 <div ng-init="nums=[1,2,3,4]">
17     <p>數組[1]：{{nums[1]}}</p>
18     <p>數組tostring：{{nums.toString()}}</p>
19 </div>

　　2.2 ng-

 1 <!--ng-app：初始化AngularJS應用程序；ng-init：初始化應用程序數據。-->
 2 <div ng-init="word='world'">
 3     hello {{word}}
 4 </div>
 5  
 6 <!--ng-model：把元素值（好比輸入域的值）綁定到應用程序-->
 7 請輸入：<input type="text" ng-model="input" />
 8 你輸入的是：{{input}}
 9  
10 <!--ng-show：驗證不經過返回ture時顯示-->
11 <p ng-show="true">能夠看見</p>
12 <p ng-show="false">看不見</p>
13 <p ng-show="1=1">表達式成立能夠看見</p>
14 <form action="/" method="post" ng-app="" name="form1">
15     email：<input type="email" name="address" ng-model="email" />
16     <span ng-show="form1.address.$error.email">請輸入合法的郵箱</span>
17     <ul>
18         <li>字段內容是否合法：{{form1.address.$valid}}</li>
19         <li>表單是否有填寫記錄：{{form1.address.$dirty}}</li>
20         <li>字段內容是否非法：{{form1.address.$invalid}}</li>
21         <li>是否觸屏點擊：{{form1.address.$touched}}</li>
22         <li>是否沒有填寫記錄：{{form1.address.$pristine}}</li>
23     </ul>
24 </form>
25  
26 <!--ng-disabled：是否不可用-->
27 <button ng-disabled="true">點我!</button>
28  
29 <!--ng-hide：是否可見-->
30 <p ng-hide="false">能夠看見吧</p>
31  
32 <!--ng-bind：綁定元素innerText的值-->
33 <div ng-init="quantity=3;cost=5">
34     價格：<span ng-bind="quantity*cost"></span>
35 </div>
36 <div ng-init="nums2=[10,20,30]">
37     <p ng-bind="nums2[1]"></p>
38 </div>
39  
40 <!--ng-click：事件-->
41 <div ng-init="count=0;">
42     count:{{count}}
43     <br /><button ng-click="count=count+1">+1</button>
44 </div>
45  
46 <!--ng-repeat：循環指令-->
47 <div ng-init="citys=[{name:'北京',val:1},{name:'上海',val:2},{name:'廣州',val:3}]">
48     <select>
49         <option ng-repeat="x in citys" ng-bind="x.name" value="{{x.val}}"></option>
50     </select>
51 </div>
52  
53 <!--ng-include：包含html內容-->
54 <div ng-include="'05service.html'"></div>
55  
56 <!--自定義指令-->
57 <!--標籤-->
58 <runoob-directive></runoob-directive>
59 <!--屬性-->
60 <div runoob-directive></div>
61 <!--類名-->
62 <div class="runoob-directive"></div>
63  
64 <script type="text/javascript">
65     var app = angular.module("myApp", []);
66     app.directive("runoobDirective", function () {
67         return {
68             //restrict: "E", E只限元素調用，A只限屬性調用，C只限類名調用，M只限註釋調用
69             //replace: true,當爲M爲註釋時，可見爲true
70             template: "<h1>自定義指令!</h1>"
71         };
72     });
73 </script>

　　2.3 Scope

 1 <!--ng-controller 指令定義了應用程序控制器；在controller中給$scope添加屬性，view中就能夠傳遞過去使用了-->
 2 <div ng-app="myApp">
 3     <div ng-controller="ctrl">
 4         {{name}}<br />
 5         {{say();}}<br />
 6         {{$root.genname}}
 7     </div>
 8     <div ng-controller="ctrl1">
 9         {{$root.genname}}
10     </div>
11 </div>
12  
13 <div id="div2" ng-app="myApp2" ng-controller="ctrl2">
14     {{name}}
15 </div>
16 <script type="text/javascript">
17     var app = angular.module('myApp', []); //'[]'用來建立依賴，沒有的話 表示繼續用以前建立的
18     app.controller('ctrl', function ($scope) {
19         $scope.name = 'scope';
20         $scope.say = function () { return 'hello,sister' };
21     });
22     //rootScope 根做用域，做用在整個app中，能夠在各個controller中使用
23     app.controller('ctrl1', function ($scope, $rootScope) {
24         $rootScope.genname = '根做用域';
25     })
26     var app2 = angular.module('myApp2', []);
27     app2.controller('ctrl2', function ($scope) {
28         $scope.name = '另外一個做用域了';
29     })
30     //手動啓動第二個app，記清做用域哦
31     angular.bootstrap(document.getElementById('div2'), ['myApp2'])
32 </script>

　　2.4 Filter

 1 !--currency 格式化數字爲貨幣格式。
 2 filter  從數組項中選擇一個子集。
 3 lowercase   格式化字符串爲小寫。
 4 orderBy 根據某個表達式排列數組。
 5 uppercase   格式化字符串爲大寫。-->
 6 <div ng-app="" ng-init="name='lily';citys=[{name:'北京',val:1},{name:'上海',val:2},{name:'廣州',val:3}]">
 7     {{name|uppercase}}  <!--表達式中添加-->
 8     <ul>
 9         <li ng-repeat="c in citys|filter:inp|orderBy: 'val'">{{c.name}}</li>  <!--指令中過濾-->
10     </ul>
11     <input type="text" ng-model="inp">  <!--輸入過濾li-->
12 </div>

　　2.5 Service

 1 <div ng-app="myApp" ng-controller="ctrl">
 2     當前url：{{currenturl}}<br />
 3     get請求json數據：{{jsondata}}
 4     自定義服務：{{myservice}}
 5 </div>
 6 <script type="text/javascript">
 7     //自定義服務
 8     angular.module('myApp', []).service('myservice', function () {
 9         this.toStartUpper = function (str) {
10             return str.substring(0, 1).toUpperCase() + str.substring(1);
11         };
12     });
13  
14     angular.module('myApp').controller('ctrl', function ($scope, $timeout, $location, $http, myservice) {
15         $scope.currenturl = $location.absUrl();  // $location 當前頁面的 URL 地址
16         $timeout(function () {  //$timeout等同於window.setTimeout；$interval等同於window.setInterval
17             console.log('timeout 執行了');
18         }, 2000);<br>　　　　　//http請求 XMLHttpRequest
19         $http.get('json.txt').success(function (response) { $scope.jsondata = response; });
20         $scope.myservice = myservice.toStartUpper('service');
21     });
22 </script>

　　2.6 api

 1 <div ng-app="myapp" ng-controller="ctrl">
 2     是不是字符串：{{isstr}}<br />
 3     是不是數字：{{isnum}}<br />
 4     轉爲大寫是：{{strtoupper}}<br />
 5 </div>
 6 <script type="text/javascript">
 7     angular.module('myapp', []).controller('ctrl', function ($scope) {
 8         $scope.str = 'sdfsdf';
 9         $scope.isstr = angular.isString($scope.str);
10         $scope.strtoupper = angular.uppercase($scope.str);
11         $scope.isnum = angular.isNumber($scope.str);
12     });
13 </script>

　　2.7 animate

 1 <!--ngAnimate 模型能夠添加或移除 class 。
 2 ngAnimate 模型並不能使 HTML 元素產生動畫，可是 ngAnimate 會監測事件，相似隱藏顯示 HTML 元素 ，若是事件發生 ngAnimate 就會使用預約義的 class 來設置 HTML 元素的動畫。-->
 3 <input type="checkbox" ng-model="mycheck">點我隱藏div
 4 <!--添加/移除 class 的指令:
 5         ng-show
 6         ng-hide
 7         ng-class
 8         ng-view
 9         ng-include
10         ng-repeat
11         ng-if
12         ng-switch
13     ng-show 和 ng-hide 指令用於添加或移除 ng-hide class 的值
14     其餘指令會在進入 DOM 會添加 ng-enter 類，移除 DOM 會添加 ng-leave 屬性
15     當 HTML 元素位置改變時，ng-repeat 指令一樣能夠添加 ng-move 類
16     -->
17 <div ng-hide="mycheck"></div>
18 <script type="text/javascript">
19     var app = angular.module('myApp', ['ngAnimate']);
20 </script>

　　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 + b
11     }
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 //provider
23 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 //注入的value
40 app.controller('ctrl', function ($scope, defaultval) {
41     $scope.defaultval = defaultval;
42 });

　　2.9 route

 1 <body ng-app="myapp">
 2 <ul>
 3     <li><a href="#/">首頁</a></li>
 4     <li><a href="#/product">產品</a></li>
 5     <li><a href="#/about">關於</a></li>
 6 </ul>
 7 <div ng-view></div>
 8 <script type="text/javascript">
 9     //添加route依賴
10     angular.module('myapp', ['ngRoute'])
11     ///$routeProvider.when(url, {
12     //    template: string,   在 ng-view 中插入簡單的 HTML 內容
13     //    templateUrl: string, templateUrl 插入html模板文件
14     //    controller: string, function 或 array,  function、string或數組類型，在當前模板上執行的controller函數，生成新的scope。
15     //    controllerAs: string,   string類型，爲controller指定別名。
16     //redirectTo: string, function, 重定向地址
17     //    resolve: object<key, function>  指定當前controller所依賴的其餘模塊
18     //    });
19     .config(['$routeProvider', function ($routeProvider) {  //$routeProvider 用來定義路由規則
20         $routeProvider.when('/', { template: '這是首頁' })  //$routeProvider.when 函數的第一個參數是 URL 或者 URL 正則規則，第二個參數爲路由配置對象。
21                       .when('/product', { template: '這是產品' })
22                       .when('/about', { template: '這是關於咱們' })
23                       .otherwise({ redirectTo: '/' });
24     }]);
25 </script>
26 </body>

3、面向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 <input type="text" id="inputid" name="name" value="none" />
 2 <script type="text/javascript">
 3     if (!window.localStorage) {
 4         document.write('<script src="xxx.js"><\/script>');
 5         //document.write('<script src="jquery-1.9.1.js"><\/script>');
 6         //(function (d) {
 7         //    d.query = function (selector) {
 8         //        return $(selector)[0];
 9         //    }
10         //    Element.prototype.addEvent = function (types, fn) {
11         //        return $(this).bind(types, fn);
12         //    }
13         //})(document);
14     }
15     window.onload = function () {
16         var obj = document.query('#inputid');
17         console.log(obj.value);
18         obj.addEvent('change', function () {
19             console.log(this.value);
20         })
21     };
22 </script>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。