工作一年的三两事(三)

2016年马上就要过去了，回首在公司的一年中，工作遇到了不少坑，也学到了不少新知识，至少对于我来说是新知识^_，特此腾出时间记录一下，程序员、语死早，一些话表达不清楚只能靠代码和截图了，见谅见谅。

本篇博文，分三个篇幅：PHP、Ionic、AngularJs。都是在工作项目中接触到的，还有nodejs，但是接触时间比较短，还是先多学学。

三、AngularJs

AngularJS 诞生于2009年，由Misko Hevery 等人创建，后为Google所收购。是一款优秀的前端JS框架，已经被用于Google的多款产品当中。AngularJS有着诸多特性，最为核心的是：MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入等等。

分享一些前端频繁使用的模块代码

弹窗及消息

一开始网上找的，挺好用的一个模块代码，在其基础上进行了一些扩展和改造，即拿即用
先看看如何使用和效果图

消息

在controller中注入

函数调用

效果图

确认弹窗

函数调用

效果图

CSS代码部分：

(这部分要感谢公司前端同事)

/*提示信息*/

.nspop_megcontainer {position: fixed;bottom: 12px;width:100%;z-index: 999;}

.nspop_megcontainer .main {padding: 8px;background-color:#030303;width: 10em;margin: auto;border-radius: 5px;opacity: 0.8;}

.nspop_megcontainer .textContent { color: #ffffff;text-align:center;}

/*确认弹窗样式*/

.confirmPop{text-align:center;width:100%;height:100%;display:table;position:absolute;top: 0;left: 0;z-index: 12;}

.confirmPop_box{display:table-cell;vertical-align:middle;}

.confirmPop_content{width: 70%;margin:0 auto;position:relative;}

.confirmPop_wrap{width: 100%;height: auto;background:#ffffff;border-radius: 10px;}

.confirmPop_img{width: 100%;height: auto;padding: 15px 38%10px;box-sizing: border-box;}

.confirmPop_img img{width: 100%;height: auto;}

.confirmPop_text{width: 100%;height: auto;line-height:20px;padding: 5px 10px;box-sizing: border-box;text-align: center;}

.confirmPop_btn{width: 100%;height: auto;overflow:hidden;padding: 8px;box-sizing: border-box;}

.confirmPop_btn_left{width: -webkit-calc(50% - 8px);width:-moz-calc(50% - 8px);width: calc(50% - 8px);height: 30px;line-height:30px;text-align: center;float: left;background: #e0e0e0;color:#666666;border-radius: 8px;margin: 0 4px;}

.confirmPop_btn_right{width: -webkit-calc(50% - 8px);width:-moz-calc(50% - 8px);width: calc(50% - 8px);height: 30px;line-height:30px;text-align: center;float: left;background: #33ccff;color:#ffffff;border-radius: 8px;margin: 0 4px;}

JS部分

angular.module('app')
.factory("dialogsManager", function ($q, $http, $compile, $timeout, $rootScope) {
    //不明白可加  qq群517568588 交流
    //消息模板
    var megTmp;
    var dialog = {
        megs: [],
        showMessage: showMessage,
        alert: alert,  //未实现
        confirm: confirm, //未实现
        luckPop:luckPop, //中奖弹窗
    };

    //消息展示
    function showMessage(content, options) {
        megTmp = "
" +
        "
" +
        "
{{content}}
" +
        "
" +
        "
";
        if(typeof options == 'undefined') options = {};
        options.bottom = 280;
        options.timeout = 2000;
        options = remove(options);
        //消息文本
        options.scope.content = content;
        msg(options,function(result){
            $timeout(function () {
                result.remove(); //移除消息展示
                options.scope.$destroy();  //摧毁作用域
            }, options.timeout);
        })
    };

    //中奖
    function luckPop(name,number,callback){
        megTmp= '
' +
            '
' +
        '![](img/img_lottery.png)'+
        '![](img/img_lottery_bg.png)
'+
        '
'+
        '
期号：{{number}}
'+
        '
{{name}}
'+
        '
';
        var options = {};
        options.bottom = 0;
        options.timeout = 0;
        options = remove(options);
        options.scope.name = name;
        options.scope.number = number;
        options.scope.click = function(){
            callback();
            options.scope.cancel();
        };
        options.scope.cancel = function(){
            options.scope.mode.remove(); //移除消息展示
            options.scope.$destroy();  //摧毁作用域
        };
        msg(options,function(result){
            options.scope.mode = result;
        })
    }

    //确认框
    //params:{'okText':'确定','cancelText':'取消',template:'是否确定删除该商品？'}
    function confirm(params,success,error){
        if(params.template == '') return;
        megTmp = '
'+
        '
'+
        '
'+
        '
'+
        '
'+
        '![](img/icon_tip.png)
'+
        '
{{template}}
'+
        '
'+
        '
{{cancelText}}
'+
        '
{{okText}}
'+
        '
'+
        '
';
        var options = {
            bottom:0,
            timeout:0
        };
        options = remove(options);
        options.scope.okText = params.okText || '确定';
        options.scope.cancelText = params.cancelText || '取消';
        options.scope.template = params.template;
        options.scope.confirm = function(){
            options.scope.mode.remove(); //移除消息展示
            options.scope.$destroy();  //摧毁作用域
            if(typeof success == 'function') success();
        };
        options.scope.cancel = function(){
            options.scope.mode.remove(); 
            options.scope.$destroy();
            if(typeof error == 'function') error();
        };
        msg(options,function(result){
            options.scope.mode = result;
        })
    }

    //消息创建
    function msg(options,callback){
        var megPromise = $q.when(compileTmp({
            template: megTmp,
            scope: options.scope,
            appendTo: angular.element(document.body)
        }))
        megPromise.then(function (result) {
            dialog.megs.push(result);
            result.css("bottom", options.bottom + "px");
            callback(result);
        })
    }

    //移除和继承
    function remove(options){
        //移除已存在的消息展示
        angular.forEach(dialog.megs, function (item, index) {
            item.remove();
        });
        options = angular.extend({
            bottom: options.bottom, //下边距离
            scope: $rootScope.$new(), //创建一个继承自根的作用域
            timeout: options.timeout  //多少秒后自动隐藏
        }, options);
        return options;
    }

    //编译模板
    function compileTmp(options) {
        var tem = $compile(options.template)(options.scope);
        if (options.appendTo) {
            options.appendTo.append(tem);
        }
        return tem;
    };
    return dialog;
})

弹窗使用的图标

顺便在分享一下AngularJs图片懒加载模块

Git地址 https://github.com/Treri/me-lazyimg

简单介绍一下使用
JS引入

Html代码

 
    ![]({{img}})

好了，这次的代码分享就到这里结束了，明年见

2016-12-30 21:40