淡扯javascript編程思想
1、面向對象-OODjavascript
雖然js面向對象的編程思想已經老話常談了，但了爲了文章的完整性，我仍是把它加了進來，儘可能以不太同樣的方式講述(雖然也沒什麼卵不同的)。html
一、面向對象，首先得有類的概念，沒有類造不出來對象，可是javascript中又沒有類 只有函數的感念，把以大寫字母命名的函數當作建立對象的構造函數,把函數名當作類，那麼就能夠new一個對象了html5
//1.1 無參的
function People() {
}
var p = new People();
//javascript爲解釋性語言，運行時編譯，因此咱們點什麼屬性，就會有什麼屬性了。
p.name = 'hannimei';
console.log(p.name);
//2.2 來個有參數的
function Student(name, age) {
this.name = name;
this.age = age;
this.say = function () {
return saywhat();
}
//私有函數
function saywhat(){
return this.name+':say what?';
}
return this;
}
var s = new Student('lily', 18);
console.log(s.name);
console.log(s.say());
//2.3 來個factory
function Factory(name,age) {
var obj = new Object();
obj.name = name;
obj.age = age;
obj.say = function () {
return obj.name+ ':say what?';
}
return obj;
}
var o = new Factory('factory', 1);
console.log(o.say());
//2.4對象字面方式建立對象
var ob = { Name: "字面量", Age: 18 };
//固然也有字符串字面量、數組字面量這些
var str = 'hello javascript!';
var arr = [1, 2, 3, 4, 5];
二、那麼有了類，面向對象一樣不能少的特性就是繼承；js中繼承有各類方式的實現，經過函數原型鏈最多見不過了java
天生自帶技能乃是命，若是後來想修煉技能怎麼辦，直接點出來就行了嘛；若是不想修煉就想天生自帶，那就得說下prototype了。jquery
function Teacher(schoolname) {
this.schoolname = schoolname;
return this;
}
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
//2.1 直接給prototype添加屬性
function Teacher(schoolname) {
this.schoolname = schoolname;
return this;
}
Teacher.prototype.age = 18;
Teacher.prototype.jiangke = function () {
return '老師開始講課了';
}
var t = new Teacher('2b1中');
console.log(t.age);
console.log(t.schoolname);
console.log(t.jiangke());
//2.2 經過prototype繼承，prototype指向的是一個object，因此咱們繼承的話就指向父類new出來的對象就能夠了
//這一句代碼引起的長篇大論
function People(name) {
this.name = name;
this.say = function () {
return this.name + ':say what?';
}
return this;
}
function Student(name) {
this.name = name;
}
Student.prototype = new People(Student.name);
var s = new Student('啊彌陀丸');
console.log(s.say());
2、面向數據-DOPbootstrap
一、初探
js面向數據編程這個概念是阿里什麼論壇會上提出來的，簡單的來講就是，你們懶得用js操做DOM元素了，經過直接對數據的賦值修改，而後替換到html模板中，最後直接調用innerHTML顯；舉個例子吧，雖然不夠貼切 也不夠完整，但話糙理不糙，它只是用來講明問題
這就是咱們簡陋的購物車，有兩種水果和要購買的個數，經過+/-修改個數
<div id="gwcid">
<p>橘子：<input type="number" value="1" /><input type="button" value="+" onclick="changeEvent('orange');" /></p>
<p>蘋果：<input type="number" value="1" /><input type="button" value="+" onclick="changeEvent('apple');" /></p>
</div>
傳統的方式，咱們會操做DOM，而後修改它的value值；但面向數據編程的時候須要的是，得現有一個json model，而後有一個html view，把操做後的屬性值relace到view中，最後innerHTML大功告成。那麼這種通用的編程方式的好處天然不言而喻，並且以如今瀏覽器渲染的速度，處理大數據時真是必備良品
var fruits = { orange: 1, apple: 1 };
//模板能夠放入html中讀取，此處爲了方便
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>';
function changeEvent(name) {
//操做數據
fruits[name] += 1;
//替換值
var result = tpl.SetValue(fruits);
//innerHTML
document.getElementById('gwcid').innerHTML = result;
}
String.prototype.SetValue = function (json) {
//regex replace
return this.replace(/<%\w+%>?/gi, function (matchs) {
var str = json[matchs.replace(/<%|%>/g, "")];
return str == "undefined" ? "" : str;
});
}
二、開始及結束
通過上面的例子，相信js模板引擎啥的咱們也就一併結束了吧，至少如今各類的模板引擎我也沒太深刻用，那些官方介紹的話也懶得貼出來了
大勢所趨，如今後端許多核心的思想MVC、依賴注入、模塊化等都被應用到了前段，並且連native的mvvm思想都搬了過來，說到這裏，想必各位已經猜到接下來要說的東西--AngularJS，此處以文檔學習爲主，理論思想就懶得貼了。
2.1 Expression
<h3>表達式</h3>
<input type="number" ng-model="num1" />+<input type="number" ng-model="num2" />
<p>結果爲：{{num1+num2}}</p>
<hr />
<h3>字符串</h3>
<div ng-init="name='lily';age=18">
<p>姓名：{{name}}，年齡 {{age}}</p>
</div>
<hr />
<h3>對象</h3>
<div ng-init="student={name:'lucy',age:16}">
<p>姓名：{{student.name}}，年齡：{{student.age}}</p>
</div>
<hr />
<h3>數組</h3>
<div ng-init="nums=[1,2,3,4]">
<p>數組[1]：{{nums[1]}}</p>
<p>數組tostring：{{nums.toString()}}</p>
</div>
2.2 ng-
<!--ng-app：初始化AngularJS應用程序；ng-init：初始化應用程序數據。-->
<div ng-init="word='world'">
hello {{word}}
</div>
<!--ng-model：把元素值（好比輸入域的值）綁定到應用程序-->
請輸入：<input type="text" ng-model="input" />
你輸入的是：{{input}}
<!--ng-show：驗證不經過返回ture時顯示-->
<p ng-show="true">能夠看見</p>
<p ng-show="false">看不見</p>
<p ng-show="1=1">表達式成立能夠看見</p>
<form action="/" method="post" ng-app="" name="form1">
email：<input type="email" name="address" ng-model="email" />
<span ng-show="form1.address.$error.email">請輸入合法的郵箱</span>
<ul>
<li>字段內容是否合法：{{form1.address.$valid}}</li>
<li>表單是否有填寫記錄：{{form1.address.$dirty}}</li>
<li>字段內容是否非法：{{form1.address.$invalid}}</li>
<li>是否觸屏點擊：{{form1.address.$touched}}</li>
<li>是否沒有填寫記錄：{{form1.address.$pristine}}</li>
</ul>
</form>
<!--ng-disabled：是否不可用-->
<button ng-disabled="true">點我!</button>
<!--ng-hide：是否可見-->
<p ng-hide="false">能夠看見吧</p>
<!--ng-bind：綁定元素innerText的值-->
<div ng-init="quantity=3;cost=5">
價格：<span ng-bind="quantity*cost"></span>
</div>
<div ng-init="nums2=[10,20,30]">
<p ng-bind="nums2[1]"></p>
</div>
<!--ng-click：事件-->
<div ng-init="count=0;">
count:{{count}}
<br /><button ng-click="count=count+1">+1</button>
</div>
<!--ng-repeat：循環指令-->
<div ng-init="citys=[{name:'北京',val:1},{name:'上海',val:2},{name:'廣州',val:3}]">
<select>
<option ng-repeat="x in citys" ng-bind="x.name" value="{{x.val}}"></option>
</select>
</div>
<!--ng-include：包含html內容-->
<div ng-include="'05service.html'"></div>
<!--自定義指令-->
<!--標籤-->
<runoob-directive></runoob-directive>
<!--屬性-->
<div runoob-directive></div>
<!--類名-->
<div class="runoob-directive"></div>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.directive("runoobDirective", function () {
return {
//restrict: "E", E只限元素調用，A只限屬性調用，C只限類名調用，M只限註釋調用
//replace: true,當爲M爲註釋時，可見爲true
template: "<h1>自定義指令!</h1>"
};
});
</script>
2.3 Scope
<!--ng-controller 指令定義了應用程序控制器；在controller中給$scope添加屬性，view中就能夠傳遞過去使用了-->
<div ng-app="myApp">
<div ng-controller="ctrl">
{{name}}<br />
{{say();}}<br />
{{$root.genname}}
</div>
<div ng-controller="ctrl1">
{{$root.genname}}
</div>
</div>
<div id="div2" ng-app="myApp2" ng-controller="ctrl2">
{{name}}
</div>
<script type="text/javascript">
var app = angular.module('myApp', []); //'[]'用來建立依賴，沒有的話 表示繼續用以前建立的
app.controller('ctrl', function ($scope) {
$scope.name = 'scope';
$scope.say = function () { return 'hello,sister' };
});
//rootScope 根做用域，做用在整個app中，能夠在各個controller中使用
app.controller('ctrl1', function ($scope, $rootScope) {
$rootScope.genname = '根做用域';
})
var app2 = angular.module('myApp2', []);
app2.controller('ctrl2', function ($scope) {
$scope.name = '另外一個做用域了';
})
//手動啓動第二個app，記清做用域哦
angular.bootstrap(document.getElementById('div2'), ['myApp2'])
</script>
2.4 Filter
<!--currency 格式化數字爲貨幣格式。
filter 從數組項中選擇一個子集。
lowercase 格式化字符串爲小寫。
orderBy 根據某個表達式排列數組。
uppercase 格式化字符串爲大寫。-->
<div ng-app="" ng-init="name='lily';citys=[{name:'北京',val:1},{name:'上海',val:2},{name:'廣州',val:3}]">
{{name|uppercase}} <!--表達式中添加-->
<ul>
<li ng-repeat="c in citys|filter:inp|orderBy: 'val'">{{c.name}}</li> <!--指令中過濾-->
</ul>
<input type="text" ng-model="inp"> <!--輸入過濾li-->
</div>
2.5 Service
<div ng-app="myApp" ng-controller="ctrl">
當前url：{{currenturl}}<br />
get請求json數據：{{jsondata}}
自定義服務：{{myservice}}
</div>
<script type="text/javascript">
//自定義服務
angular.module('myApp', []).service('myservice', function () {
this.toStartUpper = function (str) {
return str.substring(0, 1).toUpperCase() + str.substring(1);
};
});
angular.module('myApp').controller('ctrl', function ($scope, $timeout, $location, $http, myservice) {
$scope.currenturl = $location.absUrl(); // $location 當前頁面的 URL 地址
$timeout(function () { //$timeout等同於window.setTimeout；$interval等同於window.setInterval
console.log('timeout 執行了');
}, 2000);
//http請求 XMLHttpRequest
$http.get('json.txt').success(function (response) { $scope.jsondata = response; });
$scope.myservice = myservice.toStartUpper('service');
});
</script>
2.6 api
<div ng-app="myapp" ng-controller="ctrl">
是不是字符串：{{isstr}}<br />
是不是數字：{{isnum}}<br />
轉爲大寫是：{{strtoupper}}<br />
</div>
<script type="text/javascript">
angular.module('myapp', []).controller('ctrl', function ($scope) {
$scope.str = 'sdfsdf';
$scope.isstr = angular.isString($scope.str);
$scope.strtoupper = angular.uppercase($scope.str);
$scope.isnum = angular.isNumber($scope.str);
});
</script>
2.7 animate
<!--ngAnimate 模型能夠添加或移除 class 。
ngAnimate 模型並不能使 HTML 元素產生動畫，可是 ngAnimate 會監測事件，相似隱藏顯示 HTML 元素 ，若是事件發生 ngAnimate 就會使用預約義的 class 來設置 HTML 元素的動畫。-->
<input type="checkbox" ng-model="mycheck">點我隱藏div
<!--添加/移除 class 的指令:
ng-show
ng-hide
ng-class
ng-view
ng-include
ng-repeat
ng-if
ng-switch
ng-show 和 ng-hide 指令用於添加或移除 ng-hide class 的值
其餘指令會在進入 DOM 會添加 ng-enter 類，移除 DOM 會添加 ng-leave 屬性
當 HTML 元素位置改變時，ng-repeat 指令一樣能夠添加 ng-move 類
-->
<div ng-hide="mycheck"></div>
<script type="text/javascript">
var app = angular.module('myApp', ['ngAnimate']);
</script>
2.8 DI
var app = angular.module('myapp', []);
//注入value
app.value('defaultval', 0);
//factory 注入service
app.factory('sumService', function () {
var factory = {};
factory.sum = function (a, b) {
return a + b
}
return factory;
});
//自定義computeServer服務
app.service('computeServer', function (sumService) {
this.sum = function (a, b) {
return sumService.sum(a, b);
};
});
//provider
app.config(function ($provider) {
$provider.provider('sumService', function () {
this.$get = function () {
var factory = {};
factory.sum = function (a, b) {
return a + b;
}
return factory;
};
});
});
//constant 常量配置
app.constant('save', 'false');
//注入的value
app.controller('ctrl', function ($scope, defaultval) {
$scope.defaultval = defaultval;
});
2.9 route
<body ng-app="myapp">
<ul>
<li><a href="#/">首頁</a></li>
<li><a href="#/product">產品</a></li>
<li><a href="#/about">關於</a></li>
</ul>
<div ng-view></div>
<script type="text/javascript">
//添加route依賴
angular.module('myapp', ['ngRoute'])
///$routeProvider.when(url, {
// template: string, 在 ng-view 中插入簡單的 HTML 內容
// templateUrl: string, templateUrl 插入html模板文件
// controller: string, function 或 array, function、string或數組類型，在當前模板上執行的controller函數，生成新的scope。
// controllerAs: string, string類型，爲controller指定別名。
//redirectTo: string, function, 重定向地址
// resolve: object<key, function> 指定當前controller所依賴的其餘模塊
// });
.config(['$routeProvider', function ($routeProvider) { //$routeProvider 用來定義路由規則
$routeProvider.when('/', { template: '這是首頁' }) //$routeProvider.when 函數的第一個參數是 URL 或者 URL 正則規則，第二個參數爲路由配置對象。
.when('/product', { template: '這是產品' })
.when('/about', { template: '這是關於咱們' })
.otherwise({ redirectTo: '/' });
}]);
</script>
</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就行了撒
思想已經出來了，但雛形還未跟上，雖然很簡單，可是我仍是厚着臉皮寫出來了
<input type="text" id="inputid" name="name" value="none" />
<script type="text/javascript">
if (!window.localStorage) {
document.write('<script src="xxx.js"><\/script>');
//document.write('<script src="jquery-1.9.1.js"><\/script>');
//(function (d) {
// d.query = function (selector) {
// return $(selector)[0];
// }
// Element.prototype.addEvent = function (types, fn) {
// return $(this).bind(types, fn);
// }
//})(document);
}
window.onload = function () {
var obj = document.query('#inputid');
console.log(obj.value);
obj.addEvent('change', function () {
console.log(this.value);
})
};
</script>
越寫越爛，請勿轉載：http://www.cnblogs.com/NotAnEmpty/p/5462268.html
相關文章
- 1. 淡扯javascript編程思想
- 2. javascript編程思想
- 3. 扯淡
- 4. 想你，淡淡的思念
- 5. 扯扯Java開發的淡
- 6. 閒扯淡
- 7. 扯淡 Spring BeanDefinition
- 8. Jenkins - 扯淡篇
- 9. js淡入淡出輪換思想（1）
- 10. 扯淡Monte-Carlo（一）
- 更多相關文章...
- • Rust 併發編程 - RUST 教程
- • JavaScript 指南 - 網站建設指南
- • Java 8 Stream 教程
- • YAML 入門教程
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章
- 1. 淡扯javascript編程思想
- 2. javascript編程思想
- 3. 扯淡
- 4. 想你，淡淡的思念
- 5. 扯扯Java開發的淡
- 6. 閒扯淡
- 7. 扯淡 Spring BeanDefinition
- 8. Jenkins - 扯淡篇
- 9. js淡入淡出輪換思想（1）
- 10. 扯淡Monte-Carlo（一）