分类 框架入門 下的文章

svg入門

<h2>.svg文件架子</h2>

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg">
    <circle cx="100" cy="100" r="40" fill="red"></circle>
</svg>

//html页面引用方式
图片: <img src="svg.svg" alt=""/>
DIV: <div style="background:url(svg.svg);height: 200px;width: 200px;"></div>
IFRAME: <iframe src="svg.svg" frameborder="0"></iframe>

//直接引用到html
<svg  xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
    <circle cx="100" cy="100" r="40" fill="red"></circle>
</svg>

<h2>circle</h2>

<circle cx="100" cy="100" r="40" style="fill:white;stroke:black;stroke-width:5"></circle>

cx:中心點到x的距離 ;
cy:中心點到y的距離 ;
r:半徑
fill:顏色/transparent/none;
stroke:邊框顏色
stroke-width:邊框粗細
可分開寫=,也可在style裏寫;

<h2>rect</h2>

<rect width="200" height="200" x="100" y="100" fill="red" rx="30" ry="50"></rect>

x:中心點到x的距離 ;
y:中心點到y的距離 ;
rx:矩形產生圓角
ry:矩形產生圓角
<h2>line</h2>

<line x1="50" y1="50" x2="200" y2="300" stroke="black" stroke-opacity="0.5"></line>

stroke-opacity:設置透明度
fill-opacity:設置透明度
<h2>g</h2>
g標籤表示分組,組可,可對整體元素操作共有屬性設置,也可加id屬性,移動需使用transform = 'translate(0,0)'這種

<g stroke-width="3" stroke="red" transform="translate(200,200)"> <!--移到中心点 -->
<circle r="30" ></circle>
<circle r="40" ></circle>
<circle r="50" ></circle>
<circle r="60" ></circle>
<circle r="70" ></circle>
</g>

<h2>text</h2>

<text x="200" y="208" font-size="20" text-anchor="middle">科科科</text>

text-anchor:(start | middle | end) middle即把基準中心點由左邊移動中間;
文字默認y軸方向會有2px下沉,所以垂直居中時需要+(fontSize/2 - 2);

<h2>image</h2>

<image x="150" y="148" width="100" height="103" xlink:href="img/main.png">

<h2>创建标签</h2>
createElementNS 表示必须指定创建的命名空间,接收2参数 document.createElementNS(命名空间,标签)

var svgNS = "http://www.w3.org/2000/svg"
function createTag(tag,objAttr){
    var _tag = document.createElementNS(svgNS,tag)
    for(var attr in objAttr){
        _tag.setAttribute(attr,objAttr[attr]);
    }
    return _tag;
}

<h2>实例:百度图谱</h2>

思路:1、創建中心圓,方法addTag;
2、創建周邊圖,方法addOtherTag;
3、外部獲取數據data = {[中心節點數據,text文本],[其他節點數據:位置x/y值,text文本]}
4、其他位置假設繞中心點360平均分配:則個數是circleNum = 9;每個角度是:angleNum = 360/circleNum;通過三角函數即可算出;5、最後sMove方法做彈性運動,屬性值是:r半徑

var svgNS = "http://www.w3.org/2000/svg"/*命名空间*/
var _parent = document.getElementById('div1')
var _centerX = _parent.offsetWidth / 2; //中心点 注意此处不是offsetLeft与top
var _centerY = _parent.offsetHeight / 2; //中心点

var circleNum = 9; //其他circle個數
var angleNum = 360/circleNum; //每個的角度
var centerR = 150;

var otherData = [];

for(var i=0;i<circleNum;i++){
    var x = Math.cos(i * angleNum * Math.PI / 180) * centerR + _centerX; //郵角度算弧度:* Math.PI /180
    var y = Math.sin(i * angleNum * Math.PI / 180) * centerR + _centerY;
    otherData.push({x: x, y: y, text: i}); //放到數組
}

var data = { //外部獲取數據
    centerNode: {
        text: '斯巴鲁'
    },
    otherNode: otherData
}

function createTag(tag, objAttr) {
    var _tag = document.createElementNS(svgNS, tag)
    for (var attr in objAttr) {
        _tag.setAttribute(attr, objAttr[attr]);
    }
    return _tag;
}
function addTag() { //中心圓
var _svg = createTag('svg', {'xmlns': svgNS, 'height': '100%', 'width': '100%'})

for (var i = 0; i < data.otherNode.length; i++) {
addOtherTag(data.otherNode[i], _svg)
}

var _g = createTag('g', {'style': 'cursor: pointer'})
var _circle = createTag('circle', {
'cx': _centerX,
'cy': _centerY,
'r': 40,
'fill': '#fff',
'stroke': 'red',
'stroke-width': 1
})
var _text = createTag('text', {'x': _centerX, 'y': _centerY + 7, 'text-anchor': 'middle', 'font-size': 18})
_text.innerHTML = data.centerNode.text

_g.appendChild(_circle)
_g.appendChild(_text)
_svg.appendChild(_g)
_parent.appendChild(_svg)
}

function addOtherTag(otherAttr, _svg) { //其他圓

    var _g = createTag('g', {'style': 'cursor: pointer','class':'lineStyle'})
    var _line1 = createTag('line', {
        'x1': otherAttr.x,
        'y1': otherAttr.y,
        'x2': _centerX,
        'y2': _centerY,
        'stroke': '#ccc'
    })
    var _line2 = createTag('line', {
        'x1': otherAttr.x,
        'y1': otherAttr.y,
        'x2': _centerX,
        'y2': _centerY,
        'stroke': 'transparent',
        'stroke-width': 5
    })
    var _rect = createTag('rect', {
        'x': (otherAttr.x + _centerX) / 2 - 10,
        'y': (otherAttr.y + _centerY) / 2 - 10,
        'fill': '#999',
        'height': 20,
        'width': 20,
        'rx': 5
    })
    var _text = createTag('text', {
        'x': (otherAttr.x + _centerX) / 2,
        'y': (otherAttr.y + _centerY) / 2 + 8,
        'fill': '#fff',
        'text-anchor': 'middle',
        'font-size': 18
    })

    _text.innerHTML = "?"

    _g.appendChild(_line1)
    _g.appendChild(_line2)
    _g.appendChild(_rect)
    _g.appendChild(_text)
    _svg.appendChild(_g)

    var _g = createTag('g', {'style': 'cursor: pointer','class':'circleStyle'})
    var _circle = createTag('circle', {
        'cx': otherAttr.x,
        'cy': otherAttr.y,
        'r': 30,
        'fill': '#fff',
        'stroke': 'red',
        'stroke-width': 1
    })
    var _text = createTag('text', {
        'x': otherAttr.x,
        'y': otherAttr.y + 7,
        'text-anchor': 'middle',
        'font-size': 18
    })
    _text.innerHTML = otherAttr.text

    _g.appendChild(_circle)
    _g.appendChild(_text)
    _svg.appendChild(_g)

}/* addOtherTag */

function bindTag(){ //方法
    var __line = document.getElementsByClassName('lineStyle')
    var __circle = document.getElementsByClassName('circleStyle')
    for(var i=0;i<__circle.length;i++){
        __circle[i].onmouseenter = function () {
            sMove(this.getElementsByTagName('circle')[0],30,40) /*thid指g标签*/
            var pervLine = this.previousElementSibling;/*上一节点*/
            pervLine.getElementsByTagName('line')[0].setAttribute('stroke','blue')
            pervLine.getElementsByTagName('rect')[0].setAttribute('fill','red')
        }
        __circle[i].onmouseleave = function () {
            sMove(this.getElementsByTagName('circle')[0],40,30)
            var pervLine = this.previousElementSibling;/*上一节点*/
            pervLine.getElementsByTagName('line')[0].setAttribute('stroke','#ccc')
            pervLine.getElementsByTagName('rect')[0].setAttribute('fill','#999')

        }
    }
    for(var i=0;i<__line.length;i++){
        __line[i].onmouseenter = function () {
            this.getElementsByTagName('line')[0].setAttribute('stroke','blue')
            this.getElementsByTagName('rect')[0].setAttribute('fill','red')

            var nextCircle = this.nextElementSibling; /*下一个节点*/
            sMove(nextCircle.getElementsByTagName('circle')[0],30,40)
        }
        __line[i].onmouseleave = function () {
            this.getElementsByTagName('line')[0].setAttribute('stroke','#ccc')
            this.getElementsByTagName('rect')[0].setAttribute('fill','#999')
            var nextCircle = this.nextElementSibling; /*下一个节点*/
            sMove(nextCircle.getElementsByTagName('circle')[0],40,30)
        }
    }

}/*bindTag*/

See the Pen JGRqGX by elmok (@elmok) on CodePen.


<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

<h2>polyline & polygon</h2>

<polyline stroke="#000" stroke-width="1" fill="none" points="50 50,200 300,300 230,250 200"></polyline>

<polygon stroke="#000" stroke-width="1" fill="none" points="50 50,200 300,300 230,250 200"></polygon>

折線,points = '第1座標,第2,第3....',以空格或,隔開,polygon會自動閉合末端

<h2>实例:百度測量</h2>

window.onload = function () {
    var svgNS = "http://www.w3.org/2000/svg"
    var _parent = document.getElementById('div1')

    var _svg = document.getElementById('svg1')
    var _polyline = null;
    var pointsNum = '';

    function createTag(tag, objAttr) {
        var _tag = document.createElementNS(svgNS, tag)
        for (var attr in objAttr) {
            _tag.setAttribute(attr, objAttr[attr]);
        }
        return _tag;
    }

    _svg.onmousedown = function (ev) { //鼠標按下
        var ev = ev || event;
        if (!_polyline) {
            _polyline = createTag('polyline', {
                'fill': 'none',
                'stroke': 'red',
                'stroke-width': '1'
            })
            _svg.appendChild(_polyline);
        }
        var x = ev.clientX - _parent.offsetLeft;
        var y = ev.clientY - _parent.offsetTop;
        if (pointsNum == '') {
            pointsNum = x + ',' + y
        }
        else {
            pointsNum += ',' + x + ',' + y
        }
        _polyline.setAttribute('points', pointsNum)

        var _circle = createTag('circle', {'cx': x, 'cy': y, 'r': 5, 'fill': '#fff', 'stroke': 'red'})
        _svg.appendChild(_circle);
    }
    _svg.onmousemove = function (ev) { //移動時實時改變polyline值
        var ev = ev || event;
        if (_polyline) {
            var x = ev.clientX - _parent.offsetLeft;
            var y = ev.clientY - _parent.offsetTop;
            _polyline.setAttribute('points', pointsNum + ',' + x + ',' + y)
        }
    }
    _svg.oncontextmenu = function () { //右健取消
        _svg.onmousemove = null;
        return false
    }
}

See the Pen yeaWMd by elmok (@elmok) on CodePen.


<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
<h2>Path</h2>

<path d="M50 100L200 200L100 100ZL300 100" stroke="red" fill="none"></path>
<path d="M50 100H200V-200" stroke="red" fill="none"></path>
<path d="M50 100h200v200" stroke="red" fill="none"></path>
<path d="M100 100 A150 100 00 0 1 200 200" stroke="red" fill="none"></path>

d:所有屬性都在d裏設置
M = moveto(M X,Y):起始,一個M表示一組折線
L = lineto(L X,Y):結束,可以多個連接
Z = closepath() :Z前面的即為一組,自動閉合
H = horizontal lineto(H X):水平绘制,指定x坐标 如H200 == L - 负 值往上
V = vertical lineto(V Y):垂直绘制,指定Y坐标
A = elliptical Arc(A RX,RY,XROTATION,FLAG1,FLAG2,X,Y):弧线
A:繪製弧形,必須寫7個參數
'A x半徑rx,y半徑ry 角度,弧長(0小1大),方向(0逆1順) 終點x,終點y'


坐标轴为以(0,0)为中心,X轴水平向右,Y轴水平向下。
所有指令大小写均可。大写绝对定位,参照全局坐标系;小写相对定位,参照父容器坐标系
指令和数据间的空格可以省略
同一指令出现多次可以只用一个

<h2>实例:友盟占比图</h2>
http://umindex.com/social
要点:画静态图,分清哪些是外部数据如:arrNum,设置内外两层半径,设置中心点位置,初始化内外坐标点,后期可push进来;设置每块颜色arrColor,注意,圆形设置好基点后,各角度需要使用累加,总360度;

//先写静态,
<path d="M150 150 A100 150 0 0 1 250 150 L225 175A50 50 0 0 0 175 175Z" stroke="red" fill="none"></path>
//再按静态生成动态
    for (var i = 0; i < outerXY.length; i++) {
        var _path = createTag('path', {
            'fill': arrColor[i],
            'd': "M" + outerXY[i].x + " " + outerXY[i].y + ' ' + 'A' + outerR + ' ' + outerR + ' 0 0 1 ' + outerXY[i + 1].x + ' ' + outerXY[i + 1].y + 'L' + interXY[i + 1].x + ' ' + interXY[i + 1].y + 'A' + interR + ' ' + interR + ' 0 0 0 ' + interXY[i].x + ' ' + interXY[i].y
        })
        _svg.appendChild(_path)
    }
}

See the Pen rxMgoL by elmok (@elmok) on CodePen.


<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

JQ 运动要点 animate(step:function(a,b){ console.log(b.pos) }); b.pos表示在一个运动内,此值由0-1变化,可以当基数实现元素运动效果;

#('xxx').animate({
    move:'auto' //可任意填写
},{
    duration:1000,
    easing:swing
    step:function(a,b){
        //b.pos表示运动从0-1基数的变化,可以起到平均分配的一半
    }
})

See the Pen BjLebb by elmok (@elmok) on CodePen.


<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
<h2>animate</h2>

<svg id="svg1" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">

    <rect width="50" height="200" x="100" y="100" fill="red">
        <animate attributeName="width" dur="1" from="50" to="200" fill="freeze"></animate>
    </rect>

</svg>

attributeName:指定运动属性
dur:时间
form:从..
to:到..
fill = freeze:表示保持运动过后的状态;默认会自动跳回初始状态

See the Pen WrGqJx by elmok (@elmok) on CodePen.


<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

Angularjs入門

angularJs资源
http://www.angularjs.org/
https://www.github.com/angular/
http://www.angularjs.cn/
http://www.ngnice.com/
http://woxx.sinaapp.com/
angularJs下载
http://www.bootcdn.cn/angular.js/
npm install angular

以下走示例仅基于angular1.3.0,高版本不兼容

架子

function Aaa($scope,$rootScope){ //$rootScope全局 ,函数的形参
    $scope.name = 'hello' /* M */
    $rootScope.age = 20; //$scope,只会有Aaa起作用
}}            
<div ng-controller="Aaa" ng-app>
    <p>{{name}}</p>
    <p>{{age}}</p>
</div>

angularJs的MVC方式

数据的挂载
ng-controller
双大括号表达式

angularJs的作用域

$scope
$rootScope
依赖注入
服务

angularJs的指令系统

ng- 指令; ng-app:初始化;,不写则不会执行;初始化可以写到任何位置,按标签来启动 ; ng-controller :控制器连接桥梁;

angular双向数据绑定

MVVM; 当M(数据)发生改变时,会自动让视图改变,而视图改变,可以让相关的数据改变,
$timeout
ng-click
ng-model

数据影响视图

function Aaa($scope,$timeout){ //注入$timeout
    $scope.name = 'hello' /* M */
    $timeout(function(){
        $scope.name = 'hi' /* M */
    },2000)//改变后视图也改 ;

    $scope.show = function () {
        $scope.name = 'hahahas'
    }
}
<div ng-controller="Aaa" ng-click="show()">  <!-- C -->  <
    <p>
        {{name}}  <!-- V -->
    </p>
</div>

视图影响数据

function Aaa($scope,$timeout){ //注入$timeout
    $scope.name = 'hello' /* M */
    $timeout(function(){
        $scope.name = 'hi' /* M */
    },2000)//改变后视图也改 ;

    $scope.show = function () {
        $scope.name = 'hahahas'
    }
}
<div ng-controller="Aaa">  <!-- C -->
    <input type="text" name="" id="" ng-model="name"/>  <!-- 输入框改东西会影响到p标签里的name,ng-model指的即为数据 ; -->
    <p>
        {{name}}  <!-- V -->
    </p>
</div>

过滤器

currency

$watch

监听数据变化
三个参数
function Aaa($scope,$timeout){ //注入$timeout
    $scope.iphone = {
        money:50,
        num:1,
        fre:10
    }
    $scope.sum = function(){
        return $scope.iphone.money * $scope.iphone.num
    }
    $scope.$watch('iphone.money',function(newVal,oldVal){ 
    //  ('字符串(不加$scope)',function(){} ,true) //第三个参数针对集合监听,注意字符串也必须是集合;
    //  console.log(newVal); //监听时iphone.money改变时触发 ;
    //  console.log(oldVal); //监听时iphone.money改变时触发 ;
    // newVal :新值,
    // oldVal:  旧值
    },true) 


    $scope.$watch($scope.sum,function(newVal,oldVal){
        console.log(newVal); //监听时iphone.money改变时触发 ;
        console.log(oldVal); //监听时iphone.money改变时触发 ;
        $scope.iphone.fre =   newVal>=100?0:10; //当大于100时运费免费
    })
}
<div ng-controller="Aaa">  <!-- C -->
    <input type="text" name="" id="" ng-model="name"/>  <!-- 输入框改东西会影响到p标签里的name,ng-model指的即为数据 ; -->
    <p>
       价格:<input type="text" name="" id="" ng-model="iphone.money"/>
    </p>
    <p>个数:<input type="text" name="" id="" ng-model="iphone.num"/></p>
    <p>费用:<span>{{sum()| currency:'¥' }}</span></p>
    <p>运费:<span>{{iphone.fre | currency:'¥'}}</span></p>  <!-- html里的代码不需要写$scope -->
    <p>总额度:<span>{{sum()+iphone.fre | currency:'¥'}}</span></p>
</div>



angularJs的模块化

angular.module
压缩的问题

angularJs的工具方法

angular.bind :是当于$.proxy,改this指向;
angular.copy :复制
angular.extend : 对象的复制,相当于继承
var m1 = angular.module('myApp',[]);
    m1.controller('Aaa',['$scope',function($scope){  //m1.controller控制器(函数名,函数内容)
        $scope.name = 'hello'
    }])
function show(n1,n2){
    alert(n1)
    alert(n2)
    alert(this)
}
angular.bind(document,show,3)(4)  //改this为document指向;

var a = { name:'hello' },b = { age:20 };
    var c = angular.copy(a)
    var d = angular.copy(a,b) //a把报有值给了b,相当于 b复制了a;
    console.log(d);


var a = { name:'hello' },b = { age:20 };
    var c = angular.extend(a,b)  //相当于把a 、b 都给了a
    console.log(a);  //所以此时 c == a;

angularJs的工具方法

angular.isArray
angular.isDate
angular.isDefined
angular.isUndefined
angular.isFunction
angular.isNumber
angular.isObject
angular.isString
angular.isElement
angular.version
angular.equals
angular.forEach
angular.fromJson/toJson
angular.identity/noop:传什么输出即什么/空函数
angular.lowercase/uppercase :大小写
angular.element:获取元素,相当于$
angular.bootstrap:初始化的一种方式 动态初始化代替ng-app
angular.injector:注册器,主要在内部使用,外部较少使用
function noop(){} //空函数
//可能的作用如下:如果不传可能出问题;
function transformer(transformationFn,value){
    return (transformationFn || angular.identity(value)) ;
}

//不使用ng-app时
document.onclick = function () {
    var _div = document.getElementsByTagName('div')
    angular.bootstrap(_div[0],['myApp1'])
    angular.bootstrap(_div[1],['myApp2']) //分别初始化调用,(目标元素,加载模块)
  //angular.bootstrap(document,['myApp']) //初始化在document上, 想要触发时再触发发;
}

var _div = document.getElementById('div1')
angular.element(_div).css('background','red')

$scope

$scope.$watch
$scope.$apply

angular.module

controller
run
function Aaa($scope) { //不注入$timeout
    $scope.name = 'hello'
    setTimeout(function(){  //使用原生
        $scope.$apply(function () {  //可以监听函数下的数据是否变化,如果有变化就会影响到视图,可以在第三方的库或原生js直接使用;
            $scope.name = 123
        })
    },2000)
}



angularJs的过滤器

currency
number
lowercase/uppercase
json
limitTo
date
orderBy
filter

过滤器扩展部分

可组合使用过滤器
JS中使用过滤器
$scope/$rootScope/$timeout
$filter
    var m1 = angular.module('myApp',[]);  //模块的写法 模块的写法要带出参数
        m1.controller('Aaa',['$scope',function($scope){
            $scope.name = '456456456.0322021'
            $scope.name = 'heoow'
            $scope.name = {'name':'elmok','age':30}
            $scope.name = ['a','b','c']
            $scope.name ='1231235'
            $scope.name = [   //orderBy,针对下面这种形式,数组里json
                {color:'red',age:20},
                {color:'yeloo',age:22},
                {color:'yeloo',age:23},
                {color:'#f9f9f9',age:24}
            ]
        }])
<div ng-controller="Aaa"> 
    {{name | currency:"¥"}}
    {{name | number :2}} //number只加分隔符 有小数情况下只截取前3位 后面参数代表要保留几位小数点;
    {{name | uppercase}}
    <pre>{{name | json}}</pre> //格式化 注意,需要在pre标签里
    {{name | limitTo:2}}  //后面即代表需要截取几位
    {{ name | date:'yyyy-MM-dd HH:mm:ss Z'}}  //Jan 1, 1970
    {{name | orderBy:'age':true}}  //加true 相反排序 
    {{name |filter:'l'}}   //  针对数据中的value值  加true==整个value值匹配,不能字符匹配
    
</div>

自定义过滤器

angular.module
controller/run
filter
var m1 = angular.module('myApp',[]);

//模块对象下的方法filter调用; 创建首字母变大写的过滤器;
m1.filter('filterUppercase',function(){
    return function (str,num) {
        console.log(num); //2,可找到num了,所以可做下一步操作;
        console.log(str);//返回的是传入的
        return str.charAt(0).toUpperCase() + str.substring(1)
    }
})

//使用
m1.controller('Aaa',['$scope','$filter',function($scope,$filter){
/*
    $scope.name = '456456456.0322021'
    $scope.name = 'heoow'
    $scope.name = {'name':'elmok','age':30}
    $scope.name = ['a','b','c']
    $scope.name ='1231235'
    $scope.name = $filter('uppercase')('heoow') //转大写操作;
    $scope.name = $filter('number')('123456') //转大写操作;
    $scope.name = $filter('number')('123456.12312',1) //转大写操作; //后面为限制小数点个数
    $scope.name = $filter('date')('4512312123','hh') //转日期;
*/
    $scope.name = $filter('filterUppercase')('heoow','2')
}])

ng-repeat指令

遍历集合, 通过in的方式遍历每一项, $index :$index每一项返回index
$first :$first 第一项返回true,其它返回false
$middle: $middle,除非第一项与最后一项,其它返真
$last: $last 最后一项返回true,其它返回true;
$even :偶数行返回true,奇数行返回false
$odd :与上相反
ng-repeat-start : 只循环一个li
ng-repeat-end
var m1 = angular.module('myApp',[])
    m1.controller('Aaa',['$scope',function($scope){
        $scope.dataList = [
                'aaa','bbb','ccc'
        ]
    }])
 <li ng-repeat="d in dataList">{{d}}</li> <!-- d 循环中的每一项 -->

表格小例

var m1 = angular.module('myApp',[])
m1.controller('Aaa',['$scope','$filter',function($scope,$filter){
    var oriArr = [
        {name:'red',age:'29'},
        {name:'black',age:'22'},
        {name:'blue',age:'23'},
        {name:'yellow',age:'24'}
    ];;
    $scope.dataList =oriArr;
    $scope.fnSort = function (arg) {
        //函数挂属性:分别有开关,加属性;一次真一次假,
        arguments.callee['fnSort' + arg] = !arguments.callee['fnSort' + arg];
        $scope.dataList = $filter('orderBy')($scope.dataList, arg, arguments.callee['fnSort' + arg]);
        //排序完结果重新赋值
    }
    $scope.fnfilter = function (){
        $scope.dataList = $filter('filter')(oriArr,$scope.filterVal)
    }
}])
<div ng-controller="Aaa">
    <input type="text" name="" id="" ng-model="filterVal"/> <input type="button" value="Search" ng-click="fnfilter()"/>
    <table border="1">
        <tr>
            <th ng-click="fnSort('name')">姓名</th>
            <th ng-click="fnSort('age')">年龄</th>
        </tr>
        <tr ng-repeat="d in dataList">
            <td>{{d.name}}</td>
            <td>{{d.age}}</td>
        </tr>
    </table>
</div>

隔行变色等;

var m1 = angular.module('myApp',[])
m1.controller('Aaa',['$scope',function($scope){
    $scope.dataList = [
        'aaa','bbb','ccc','ddd','eee','ggg'
    ]
}])
<div ng-controller="Aaa">
    <ul>
    <li ng-repeat="d in dataList">{{$index}}</li> <!-- d 循环中的每一项 -->   $index每一项返回index        
        <li class="{{$even ? 'active' : ''}}" ng-repeat="d in dataList">{{$odd}}</li>
        <li class="{{$even ? 'active' : ''}}" ng-repeat="d in dataList">{{d}}</li>
    </ul>
    
    <!--需求,下面的循环,不改变结构-->
    <div ng-repeat-start="d in dataList">{{d}}</div>
    <p>{{d}}</p>
    <div ng-repeat-end>{{d}}</div>
</div>

事件指令

ng-click/dblclick
ng-mousedown/up
ng-mouseenter/leave
ng-mousemove/over/out
ng-keydown/up/press
ng-focus/blur
ng-submit
ng-selected
ng-change
ng-copy
ng-cut
ng-paste
ng-disabled
服务 $interval
ng-readonly
ng-checked
ng-value
ng-bind
ng-cloak
ng-bind-template
ng-bind-html
http://www.bootcdn.cn/angular.js/
ng-non-bindable
var m1  = angular.module('myApp',[]);
m1.controller('Aaa',['$scope',function($scope){
    $scope.name = 'hwoow'
}])
<div ng-controller="Aaa">
    <input type="checkbox" name="" id="" ng-model="aaa"/> <!-- 点击则aaa改为true,所以选中 -->
    <select name="" id="">
        <option value="1">111</option>
        <option value="2" ng-selected="aaa">222</option>

    </select>
    <input type="text" name="" id="" ng-change="bbb='heoo" ng-model="bbb"/>{{bbb}}
    <!--ng-change必须与ng-model相配合才有用-->
    <br/>
    <input type="text" name="" id="" value="sdaflskldfj" ng-copy="ccc='dd'"/>{{ccc}}  <!-- 复制会输出 -->
    <input type="text" name="" id="" value="sdaflskldfj" ng-cut="ccc=true"/>{{ccc}}  <!-- 剪切会输出 -->

    <input type="text" name="" id="" value="sdaflskldfj" ng-paste="ccc=true"/>{{ccc}}

</div>
var m1 = angular.module('myApp', [])
m1.controller('Aaa', ['$scope', '$interval', function ($scope, $interval) {
    var inow = 5;
    $scope.text = inow + 's'
    $scope.isDisabled = true;
    var _t = $interval(function () {
        $scope.text = inow + 's'
        inow--
        if (inow == 0) {
            $interval.cancel(_t)   //清除定时器;
            $scope.text = '可以点击啦'
            $scope.isDisabled = false;
        }
    }, 1000)
}])
<div ng-controller="Aaa">
    <input type="button" value="{{text}}" ng-disabled="isDisabled"/> <!-- 动态修改按钮的状态; -->
    <input type="text" value="{{text}}" ng-readonly="isDisabled"/>
    <input type="checkbox" value="{{text}}" name="" id="" ng-checked="isDisabled"/>     <!-- 选中与不选 中; -->

    <input type="text" ng-value="text"/> <!-- 加上ng后value ,不需要{}  区别不大,推荐所有使用ng-value 提高用户体验 -->
</div>
var m1 = angular.module('myApp',['ngSanitize']) /* 操作html需要下载:angular-sanitize.js */ 
m1.controller('Aaa',['$scope',function($scope){
    alert(123)
    $scope.text = '<h1>hello</h1>'
}])
<div>{{text}},{{text}}</div>
//换个写法;
<div ng-bind-template="{{text}},{{text}}"></div>
<div ng-cloak>{{text}}</div> <!--  相当于未解析完时标签是display:none;,解析完再显示;-->
<div ng-non-bindable="">{{text}}</div>  <!-- 不想被解析时; -->

css操作

* ng-class
* ng-style
* ng-href
* ng-src
* ng-attr-(suffix) //通用写法;
var m1 = angular.module('myApp',[]) /* 操作html */
m1.controller('Aaa',['$scope',function($scope){
    $scope.text = '<h1>hello</h1>';
    $scope.style = "{color:'red',background:'#f3f3f3}'"
    $scope.sClass={red:true,yellow:true}
    $scope.url="http://www.baidu.com"
}])
var m2 = angular.module('myApp2',[])
m2.controller = ('Bbb',['$scope',function($scope){
}])
<div ng-controller="Aaa">
    <div ng-class="{red:true,color:true}">{{text}}</div>
    <div ng-class="{{sClass}}">{{text}}</div><!-- 注意此处需要加{{}} -->
    <div ng-style="{color:'red',background:'#f3f3f3'}">{{text}}</div>
    <div ng-style="{{style}}">{{text}}</div> <!-- 注意此处需要加{{}} -->
    <a ng-href="{{url}}">aaa</a>
    <a ng-attr-href="{{url}}" ng-attr-title="{{text}}">aaa</a>
</div>

dom操作

ng-show
ng-hide :ng-show与ng-hide:对display操作;
ng-if
ng-swtich :有选择性进行切换; 不需要属性 ,了解即可;
on
default
when
ng-open :ng-open; ff不支持;
var m1 = angular.module('myApp',[]) /* 操作html */
m1.controller('Aaa',['$scope',function($scope){
        $scope.btn = true;
}])
<input type="checkbox" name="" id="" ng-model="btn"/> 
<div ng-switch on="btn"><p ng-switch-default>默认是的</p><p ng-switch-when="false">切换隐藏的</p></div>

未完

seajs入門

最簡單的示例:

目錄結構:


seajs+
    
    js+
        sea.js
        m.js
        show.js
        hide.js
   
     index.html

注意路徑:
index.html

<script src="js/sea.js"></script>

<script>
    seajs.use('./js/m')
</script>
seajs.use(url,function(ex){
    ex代表js文件里的exports; 
}) 
define(function(require,exports,module){ 
        //require,exports,module 名字不能改,也不能改为var r = require等形式;
        //require 模块之间依赖的接口
        //exports对外提供接口
        // 当引入的是sea下面的模块时,那么require执行完的结果就是exports;
        //一个模块 ,只能省略后面,不能省略前面;
})

m.js

define(function (require,exports,module){
var _box = document.getElementById('box')
    var _on = 1;
    document.onclick = function(){
        if(_on){
            require('./show').hide(_box)
        }
        else{
            require('./hide').show(_box)
        }
        _on = !_on;
    }
})

show.js

define(function (require,exports,module){
    exports.show = function(obj){
        obj.style.display = 'block'
    }
})

hide.js

define(function (require,exports,module){
    exports.hide = function(obj){
        obj.style.display = 'none'
    }
})

模塊代碼:遵循统一的写法

// 所有模块都通过 define 来定义
define(function(require, exports, module) {

  // 通过 require 引入依赖
  var $ = require('jquery');
  var Spinning = require('./spinning');

  // 通过 exports 对外提供接口
  exports.doSomething = ...

  // 或者通过 module.exports 提供整个接口
  module.exports = ...

});


1、关键字define, 以及匿名函数的参数一个都不能少, 注意: require, exports, module 参数名称也不能改.

2、exports: 用于声明该模块的对外接口

3、module: 用于表示当前模块的信息,具有如下属性:

id:         模块的唯一表示, require方法需要用到他<br />

exports: 当前模块开放的接口, Object, main.js中是 sum

dependencies: 当前模块的依赖列表



seajs配合grunt打包压缩;需解决ID与路径问题;[仅适用于seajs1.3.1版本,seajs2.0以后不支持模块依赖,方法见更新]

package.json

{
  "name": "js2",
  "version": "0.1.0",
  "devDependencies": {
    "grunt": "~0.4.5",
    "grunt-cmd-concat":"~0.2.8",
    "grunt-cmd-transport":"~0.3.0",
    "grunt-contrib-uglify":"~0.11.0"
  }
}

切換至項目根目錄運行

npm install

Gruntfile.js

module.exports = function(grunt) {
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        transport:{
            js2:{
                files:{
                    '.build' :['1.js','2.js','3.js','4.js']
                }
            }
        },
         concat:{
         js2:{
         files:{
         'dist/m.js' : ['.build/1.js','.build/2.js','.build/3.js','.build/4.js']
         }
         }
         },
         uglify:{
         js:{
         files:{
         'dist/m.min.js': [ 'dist/m.js']
         }
         }
         }

    });
    grunt.loadNpmTasks('grunt-cmd-transport');
    grunt.loadNpmTasks('grunt-cmd-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.registerInitTask('default',['transport','concat','uglify']);
}

運行

grunt

seajs1.3.1



常用API
非官方整理



<h3>Module</h3>
id:模块唯一标识;

uri:模块绝对路径;

dependencies:当前模块依赖;
m.js

define(function (require, exports, module) {
    console.log(module.id); //弹出路径
    console.log(module.uri); //弹出路径
    console.log(module.dependencies);  // 当前模块依赖
})

exports:当前模块对外接口;

m.js

define(function (require, exports, module) {
  console.log(module.exports == exports);  //true                module.exports 对象  //exports一个引用
})

//提供对外接口时:

//这种是无法访问到的;
exports = {
        a:a
    }

//可访问:
exports.a = a;
//可访问:
module.exports = {
    a:a
}

index.html

    seajs.use('m3',function(ex){  
    //ex-->调用的是module.exports这个对象
     console.log(ex.a);
})

require.async:异步加载模块

//默认是同步的
require('m3.js'); 

//可改为异步
require.async('m3.js',func
 console.log('模块加载完成');
})        //此步未加载完成,下面的代码也能运行;

<h3>插件</h3>

安装



<h3>引入多模块</h3>

seajs.use(['m2.js','m3.js'],function(ex2,ex3){
    ex2.drag();
    ex3.pic();  
})
<h3>seajs加ID有利于提取</h3>
index.html

<script src="sea.js" id='seajs'></script>

<h3>如何改造为cmd模块</h3>

//普通
var a = 1;

//seajs下,套个define,再对外提供接口即可

define(function(require,exports,module){
var a = 1;
exports.a = a;
})


<h3>调试接口cache<h3>

gruntjs入門

安裝node.js,安裝gruntjs

npm install -g grunt-cli
npm install grunt --save-dev
grunt –version

1、轉到項目根文件夾下,安裝插件;

npm init

生成 package.json

{
  "name": "elmok",
  "version": "0.1.0",
  "devDependencies": {
        "grunt" : "~0.4.2",
           "grunt-contrib-concat" : "~0.3.0",
        "grunt-contrib-uglify" : "~0.3.2"
  }
}

安裝

npm install
或
npm install grunt-contrib-concat --save-dev  //按具體插件名

2、創建任務
創建Gruntfile.js

pkg: grunt.file.readJSON('package.json')引入

elmok:項目

concat:任務名;files:{新生成文件:[被合併各文件]}

concat:任務名;files:{新生成文件:[被壓縮文件]}

src:[ ] 源文件路徑

dest:[ ] 生成目標文件

banner參數,給目標文件頭部加注釋信息

<%= pkg.name %>,pkg是用grunt.file.readJSON('package.json')读取到的JSON,而且已经转换为JS对象。依照前面package.json的演示样例,这段代码会在写入文件时被替换为"my-project-name"。

JS对象和JSON来做辅助的配置 <%= grunt.template.today("yyyy-mm-dd") %> 按指定格式生成任務時間

grunt.loadNpmTasks('grunt-contrib-concat');加載任務所需插件

grunt.registerTask('default', ['concat', 'uglify']);註冊任務,任務名以數組存

module.exports = function (grunt) {

    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        concat: {
            elmok: {
                files: {
                    'dist/m.js': ['1.js', '2.js', '3.js', '4.js']
                }
            }
        },
        uglify: {
            elmok: {
                files: {
                    'dist/main.min.js': ['dist/main.js']
                }
            }
        }
    });
    grunt.loadNpmTasks('grunt-contrib-concat');
    grunt.loadNpmTasks('grunt-contrib-uglify');
    grunt.registerTask('default', ['concat', 'uglify']);
};

或等等類似

module.exports = function(grunt) {

    // Project configuration.
    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        uglify: {
            options: {
                banner: '/*! <%= pkg.name %> <%= grunt.template.today("yyyy-mm-dd") %> */\n'
            },
            build: {
                src: 'main.js',
                dest: 'main.min.js'
            }
        }
    });

    // Load the plugin that provides the "uglify" task.
    grunt.loadNpmTasks('grunt-contrib-uglify');

    // Default task(s).
    grunt.registerTask('default', ['uglify']);

};

最後執行:

grunt

小拓展:可任意選擇配置; 轉

options: {
    mangle: false, //不混淆变量名
    preserveComments: 'all', //不删除注释,还可以为 false(删除全部注释),some(保留@preserve @license @cc_on等注释)
    footer:'\n/*! <%= pkg.name %> 最后修改于: <%= grunt.template.today("yyyy-mm-dd") %> */'//添加footer
    report: "min"//输出压缩率,可选的值有 false(不输出信息),gzip

},
buildall: {//任务三:按原文件结构压缩js文件夹内所有JS文件
    files: [{
        expand:true,
        cwd:'js',//js目录下
        src:'**/*.js',//所有js文件
        dest: 'output/js'//输出到此目录下
    }]
},
release: {//任务四:合并压缩a.js和b.js
    files: {
        'output/js/index.min.js': ['js/a.js', 'js/main/b.js']
    }
}

backbone 未入門

資源:

backbone中文檔


underscore中文檔

一个实现了web前端MVC模式的JS库
M : model (模型)
V : view (试图)
C : controller (控制器)
就是把模型与视图分离,通过控制器来连接他们
模塊:

Events : 事件驱动方法
Model : 数据模型
Collection : 模型集合器
Router : 路由器(hash)
History : 开启历史管理
Sync : 同步服务器方式
View : 试图(含事件行为和渲染页面)

1)直接創建對像:

/*
var models = new Backbone.Collection;
var views = new Backbone.View;
*/
var model = new Backbone.Model;
model.set('name','hello')
console.log(model.get('name'));

2)给构造函数添加实例方法和静态方法

    var m_1 = new Backbone.Model({'name':'hello'})
    var m_2 = new Backbone.Model({'name':'hi'})
    var coll = new Backbone.Collection()
    coll.add(m_1)
    coll.add(m_2)
    console.log(JSON.stringify(coll)); // 對象解析出字符串;

//Backbone.Model表示模型的構造函數,extend參數 ({json實例方法},{json靜態方法})

    var M = Backbone.Model.extend({
        aaa:function(){
            console.log(123);
        }
    },{
        bbb: function () {
            console.log(456);

        }
    })
    var model = new M
    model.aaa() //實例方法使用實例調用;
    M.bbb();  //靜態使用構造函數直接調用;即相當於多了一個命名空間而已;

//設置默認值:
    var M = Backbone.Model.extend({
        defaults:{
            name:'hello'
        }
    })
    var mo_= new M;
    console.log(mo_.get('name'));

3)继承操作

    var M = Backbone.Model.extend({
        aaa: function () {
            console.log('abc');
        }
    },{
        bbb: function () {
            console.log('def');
        }

    })
    var ChildM = M.extend();
    var mo = new ChildM
    mo.aaa()
    ChildM.bbb()

4)自定义事件

(function () {
    var M = Backbone.Model.extend({
        defaults:{
            name:'hello'
        },
        initialize:function(){
            this.on('change', function () {
                console.log('onchange觸發了');
            })
        }
    })
    var model = new M
    model.set('name','hi')
})();
//指定key值觸發;
(function () {
    var M = Backbone.Model.extend({
        defaults:{
            name:'hello'
        },
        initialize:function(){
            this.on('change:name', function (model) {  //不同的key值觸發;
                console.log(model);
            })
        }
    })
    var model = new M
    model.set('name','hi')
})();


//1、創建模型對像
//2、創建視圖對像,直接在視圖對象裏傳參,指定模型對像,即連接在一起;
//3、對模型修改時,即會觸發視圖對象;

var M = Backbone.Model.extend({
    defaults: {
        name: 'hello'
    }
});

var V = Backbone.View.extend({
    initialize: function () {
        this.listenTo(this.model, 'change', this.show);
    },
    show: function (model) {
        $('body').append('<div>' + model.get('name') + '</div>')
    }
});

var m = new M;          //1、創建模型對像
var v = new V({model: m});  //2、創建視圖對像,直接在視圖對象裏傳參,指定模型對像,即連接在一起;
m.set('name', 'hi')  //3、對模型修改時,即會觸發視圖對象;

5)數據與服務器


(function () {
    Backbone.sync = function (method, model) {
        console.log(method + ': ' + JSON.stringify(model));
        model.id = 1;
    }
    var M = Backbone.Model.extend({
        defaults:{
            name:'hello'
        },
        url:'/user' // ajax提交,一定要指定好url ;
    });
    var m = new M;
    m.save(); //把現在的模型對象保存到服務器上;
    m.save({name:'hi'});  //修改
})();

(function () {
    Backbone.sync = function (method, model) {
        console.log(method + ': ' + JSON.stringify(model));
    }
    var C = Backbone.Collection.extend({
        initialize: function () {
            this.on('reset', function () {
                console.log(123);
            })
        },
        url:'/user' // ajax提交,一定要指定好url ;
    });
    var m = new C;
    m.fetch() //讀取服務器數據;
})();

6)路由與歷史管理

(function () {
    var Workspace = Backbone.Router.extend({
        routes:{
            'help':             'help',
            'search/:query':    'search',  //#search/任意字符;
            'search/:query/p:page': 'search' //#search//kiwis/p7
        },
        help: function () {
            console.log(1);
        },
        search: function (query,page) {
            console.log(2);
        }

    })
    var w = new Workspace
    Backbone.history.start()
    /*
    * 地址後面加#help,彈1;
    * 地址後面加#search/dfk 彈2
    *
    * */
})();

7)事件委託

所有的视图都拥有一个 DOM 元素(el 属性),即使该元素仍未插入页面中去。 视图可以在任何时候渲染,然后一次性插入 DOM 中去,这样能尽量减少 reflows 和 repaints 从而获得高性能的 UI 渲染。 this.el 可以从视图的 tagName, className, id 和 attributes 创建,如果都未指定,el 会是一个空 div。

(function () {
    var V = Backbone.View.extend({
        el:$('body'), //觸發的委託人;
        events:{
            'click input':'aaa',
            'mouseover li':'bbb'
        },
        aaa: function () {
            console.log(1111111);
        },
        bbb: function () {
            console.log(2221222);
        }
    })
    var veiw = new V;
})();



8)前端模板

$(function () {

    var M = Backbone.Model.extend({
        defaults:{
            name:'hello'
        }
    })
    var V = Backbone.View.extend({
        initialize: function () {
            this.listenTo(this.model,'change',this.show)
        },
        show: function (model) {
            $('body').append(this.template(this.model.toJSON()))
        },
        template: _.template($('#template').html())
    })

    var m = new M;
    var v = new V({model:m})
    m.set('name','hdi')
})

調用:

<script type="text/template" id="template">
    <% for(var i=0;i<5;i++) { %>
    <div><%= name %></div>
    <% } %>
</script>


大部分操作:

首先頁面上先對【數據進行修改】 ----> 數據修改包括【模型修改】或【集合修改】--->

當這兩個修改後---> 會觸發相應的【自定義事件】--->

自定義事件找到相應---> 【視圖】--->

回調函數更新視圖----> 視圖的更新通過前端模板獲取到,再生成到---->頁面;

一個模型和一個集合,一個模型對應一個視圖,集合對應大視圖;


<script>
var f = 1;
document.getElementById('tdosclick').onclick = function(){
if(f){

document.getElementById('tdos').style.display = 'block';

}
else{
document.getElementById('tdos').style.display = 'none';
}
f = !f;
}
</script>