淡扯javascript编程思想

一、面向对象-OOD

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

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

//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];

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

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

function Teacher(schoolname) {
            this.schoolname = schoolname;
            return this;
        }
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

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

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

二、面向数据-DOP

1、初探

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

2、开始及结束

经过上面的例子，相信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>

三、面向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

时间： 2024-11-10 01:06:59

淡扯javascript编程思想的相关文章

面向对象编程思想(前传)--你必须知道的javascript（转载）

原文地址:http://www.cnblogs.com/zhaopei/p/6623460.html阅读目录 什么是鸭子类型 javascript的面向对象 封装 继承 多态 原型 this指向 call apply band js中的闭包 什么是高阶函数 在写面向对象编程思想-设计模式中的js部分的时候发现很多基础知识不了解的话,是很难真正理解和读懂js面向对象的代码.为此,在这里先快速补上.然后继续我们的面向对象编程思想-设计模式. 什么是鸭子类型 javascript是一门典型的动态类型语

[Javascript] 面向对象编程思想

1.创建对象 1.1 new 用new进行创建对象: var user = new Object(); user.age = 12;//同时为对象添加属性 user.name = 'ajun'; 1.2{} 用{}创建对象,如: var user = { 'name':'ajun, 'age':12 } 这里同时候为user添加了两个属性分别为:name,age 在以上代码稍加改造,你还可以为一个对象添加一个方法,如: var user = { 'name':'ajun', 'age':12 '

《Java编程思想》学习笔记（序言）：从机电男到程序猿

为什么要写该篇? 那是我计划把这个写成一个系列,所以这是序言.Java编程还差两个月就两年了,我希望在这之前读完<Java编程思想>,对自己的知识的一个总结.该系列主要叙述我在读<Java编程思想>这本书的过程中的一些理解,我希望用最通俗易懂的语言,最真实的生活场景来表达我个人世界里的Java.如果你是初学者,可以跟随我一起阅读,我想一定会有些帮助. 话说在前头,这篇大部分纯属扯淡,没有所谓的干货!如果你实在无聊的蛋疼,可以瞅瞅,一个机电男变身程序猿的故事.大学学的机械专业,平时有

编程思想之迭代器

原文:http://blog.csdn.net/luoweifu/article/details/42472303 什么是迭代器? 迭代器(Iterator)是按照一定的顺序对一个或多个容器中的元素从前往遍历的一种机制,比如for循环就是一种最简单的迭代器,对一个数组的遍历也是一种的迭代遍历的过程.GOF给出的定义为:提供一种方法访问一个容器(container)对象中各个元素,而又不需暴露该对象的内部细节.迭代器有时也称为枚举器(Enumerator),其结构图如下: 迭代器结构图 迭代器其实

编程思想之回调

原文:http://blog.csdn.net/luoweifu/article/details/41465289 <回调的原理.实现与应用>一文中已经初步讲了回调的原理和应用,并就一个实际需求用函数的方式实现了回调应用.但回调并不仅限于回调函数,可以有很多不同的现实方式.回调与其说是一种技术,不如说是一种编程思想,我们在各种计算机语言中都能看到它的踪影.我们以<回调的原理.实现与应用>一文中提到的需求为例,看看C++.JavaScript.Java等各种语言下回调的实现方式. 有

1.JAVA 编程思想——对象入门

对象入门 欢迎转载,转载请标明出处:    http://blog.csdn.net/notbaron/article/details/51040219 如果学JAVA,没有读透<JAVA 编程思想>这本书,实在不好意思和别人说自己学过JAVA.鉴于此,蛤蟆忙里偷闲,偷偷翻看这本传说中的牛书. 面向对象编程OOP具有多方面吸引力.实现了更快和更廉价的开发与维护过程.对分析与设计人员,建模处理变得更加简单,能生成清晰.已于维护的设计方案. 这些描述看上去非常吸引人的,不过蛤蟆还是没啥印象(至少到

[技术] 谈谈编程思想

https://zhuanlan.zhihu.com/p/19736530?columnSlug=prattle 作者:陈天链接:https://zhuanlan.zhihu.com/p/19736530来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 这段时间又攒了很多答应了,但还未动手的文章.大概一两周前,有个读者留言:「程序君,能发篇文章有关编程思想的吗?我是编程初学者,对编程思想没啥概念,求传授点经验!」 今天就讲讲编程思想.编程思想是个宏大的主题,我不敢保

【转】编程思想之正则表达式

什么是正则表达式? 正则表达式(Regular Expression)就是用某种模式去匹配一类字符串的公式.如你要在一篇文章中查找第一个字是"罗"最后一个字是"浩"的三个字的姓名,即"罗*浩":那么"罗*浩"就是公式,也称作模式(Pattern),这篇文章就是要匹配的串(或叫文本text).再如,你要检查输入的一个字符串是否是126邮箱的格式,你得制定一个规则去查检,这种规则就是正则表达式. 从入门开始 我们从上面提到的一个例

回调之编程思想

<回调的原理.实现与应用>一文中已经初步讲了回调的原理和应用,并就一个实际需求用函数的方式实现了回调应用.但回调并不仅限于回调函数,可以有很多不同的现实方式.回调与其说是一种技术,不如说是一种编程思想,我们在各种计算机语言中都能看到它的踪影.我们以<回调的原理.实现与应用>一文中提到的需求为例,看看C++.JavaScript.Java等各种语言下回调的实现方式. 有一Person类,有年龄(age),体重(weight),身高(height)三个属性.现要对Person的一组对象