javascript

JavaScript 判断对象是否存在的几种写法

在平日的前端开发中，我们会经常遇到一个问题，就是 “某某某对象未定义或者underfined”，为了避免这样的问题，我们在用一个对象或者变量的时候得预先判断，然后做下一步操作，判断对象是否存在的方法有很多种，大致总结了下有如下：

  • 第一种

    1
    2
    3
    if (!myObj) {
    　　var myObj = { };
    }

  • 第二种

    1
    2
    3
    if (!window.myObj) {
    　　var myObj = { };
    }

  • 第三种

    1
    2
    3
    if (!this.myObj) {　　　　
        this.myObj = { };
    }

查看更多

angularjs

angularjs 拦截器与全局错误处理

用angularjs（后面简称 ng）刚开始可能会遇到这样一些疑问，ng 大多时候请求的是静态资源和片段
如何在请求片段的之前去捕获请求，并判断用户是否在登录状态 ，或者用户登录是否过期？

$httpAngularJS 的 $http 服务允许我们通过发送 HTTP 请求方式与后台进行通信。在某些情况下，我们希望可以俘获所有的请求，并且在将其发送到服务端之前进行操作。还有一些情况是我们希望俘获响应，并且在完成完成调用之前处理它。一个很好例子就是处理全局 http 异常。拦截器(Interceptors)应运而生。

查看更多

Highcharts

highcharts 结合phantomjs纯后台生成图片

highcharts 这个图表展示插件我想大家应该都知道，纯javascript编写，相比那些flash图表插件有很大的优势，至少浏览器不用考虑是否装了flash插件，功能也非常的强大，详细请看官网 ，我就不做多介绍了。

那今天咱们讨论的难题是我们平时用highchart生成图片时，首先要在前端展示出图表，然后通过图表的API 按钮或者自定义的按钮 来向后台发起请求，后台获取到图片的SVG信息时，然后根据SVG的信息生成对应的图片或者PDF文件输出到流供客户端下载或者直接保存在服务端。

那么这个图片生成必须依赖前台生成的图表来触发，那有些图片我们又想自动生成又不需要前端，生成后直接通过邮件发送或者写入word文件，该如何做呢？

有人会想可以模拟前台自动向后台发送请求，我这样试过，效率非常不敬人意！后来看了官方的一些介绍，引入了phantomjs 这个好东西，它是个javascript引擎库，基于webkit内核，能解析前台的HTML及javascript并生成对应的图片，最重要的一点是它能够以服务的形式独立运行在后端，接下来是详细步骤：

查看更多

angularjs

angularjs 如何实现自定义html的显示

最近在使用angularjs做一个列表展示的功能，突然发现自定义行的内容里不能包含html标签。于是翻阅了一些资料和API找到了解决的办法。

  • 首先我们看下面一段代码 
1
2
3
4
5
6
<table data-ng-controller="ListController">
    <tr data-ng-repeat="item in items">
        <td>{{item.title}}</td>
        <td>{{item.content}}</td>
    </tr>
</table>
  • 这里item对象的content属性里包含 html标签，例如 item.content=”我是内容”，如果出现这样的内容，不做任何处理的情况下页面会报错，导致内容无法显示，这是因为 angularjs的安全机制 引起的，angularjs渲染时不允许片段里包含html元素，如果需要加入自定义的html片段，需要调用它内部的服务$sce里的trustAsHtml方法来过滤既然angularjs 为我们提供了这个方法，于是我们稍微改写下前端的html，变成下面这样：
1
2
3
4
5
6
<table data-ng-controller="ListController">
    <tr data-ng-repeat="item in items">
        <td>{{item.title}}</td>
        <td>{{getContentHtml(item.content)}}</td>
    </tr>
</table>
  • 接着我们在ListController里定义一个getContentHtml 方法来处理 这段文本内容。ListController 里需要引入$sce 服务
1
2
3
4
5
6
7
8
9
10
11
12
function ListController($sce,$scope)
{
    $scope.items=[
        {"title":"aaa","content":"<a href='www.peng8.net'>aaaa</a>"},
        {"title":"bbb","content":"<a href='www.peng8.net'>bbbb</a>"}
    ]
    $scope.getContentHtml=function(content)
    {
        //可以在此拼接其他的html
        return $sce.trustAsHtml(content);
    }
}
  • 以上是一种解决方案，那其实还有一种处理方案，也是通过$sce.trustAsHtml，但我们将其写在过滤器中，这样就可以避免多个controller里都要写相应的处理方法，但有些页面的业务逻辑比较复杂，还是得单独写在自己的controller里，依情况而定！为指定的模块 创建过滤器，例如我们为 app.controllers 创建了一个名叫 to_trusted 的过滤器
1
2
3
4
5
6
angular.module('app.controllers', [])
.filter('to_trusted', ['$sce', function ($sce) {
        return function (text) {
            return $sce.trustAsHtml(text);
        };
}]);
  • 前端页面的处理将会更加简洁，我们稍作修改变成如下：
1
2
3
4
5
6
<table data-ng-controller="ListController">
    <tr data-ng-repeat="item in items">
        <td>{{item.title}}</td>
        <td ng-bind-html="item.content | to_trusted"></td>
    </tr>
</table>

这样，angularjs渲染的时候过滤器会自动去处理这段Html。

javascript

html里关于doctype 文档类型的介绍

DOCTYPE 标签 – 定义了标准文档的类型

  • DOCTYPE标签是单独出现的
    • 文档类型，会使浏览器使用相应标准加载网页并显示
    • 文档类型定义在HTML文档的第一行，在html标签之前
    • 文档不定义DOCTYPE，浏览器将无法获知HTML或XHTML文档的类型，因此会进入混乱模式
  • DOCTYPE，简称为DTDs，是英文Document type的缩写，中文“文档类型”

HTML DOCTYPE文档类型举例说明

HTML4.01文档过渡定义类型，此类型定义的文档可以使用HTML中的标签与元素包括一些不被W3C推荐的标签（例如：font、b等），不可以使用框架

1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

HTML4.01文档严格定义类型，此类型定义的文档可以使用HTML中的标签与元素，不能包含不被W3C推荐的标签（例如：font、b等），不可以使用框架

1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

HTML4.01文档框架定义类型，此类型等同于HTML4.01文档过渡定义类型，但可以使用框架

1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

XHTML1.0文档过渡定义类型，此类型定义的文档可以使用HTML中的标签与元素包括一些不被W3C推荐的标签（例如：font、b等），不可以使用框架

1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

XHTML1.0文档严格定义类型，此类型定义的文档只可以使用HTML中定义的标签与元素，不能包含不被W3C推荐的标签（例如：font、b）(梦之都就使用了此类型)，不可以使用框架

1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

XHTML1.0文档框架定义类型，等同于XHTML1.0文档过渡定义类型，但可以使用框架

1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

XHTML1.1文档严格定义类型，等同于XHTML1.0文档过渡定义类型

1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

HTML5文档类型

1
<!DOCTYPE html>

css

css 样式优先级的重新认识

可能一开始接触web前端的开发，没有对css样式有特别深入的了解。只是笼统的知道行内样式的权值最高，其次是ID选择器的优先级>class选择器>html选择器，今天抽时间看了下相关的文章，原来关于样式的权值不是那么简单，给大家分享下心得

样式嵌入分类

  1. 外部样式表
  2. 内部样式表（位于 标签内部）
  3. 内联样式（在 HTML 元素内部）

一般情况下优先级的顺序如下：
（外部样式）External style sheet <（内部样式）Internal style sheet <（内联样式）Inline style
但是不是所有的都遵循这个规则？大部分是，但也有特例，比如：
「如果外部样式放在内部样式的后面，则外部样式将覆盖内部样式。」
示例如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
<head>
    <title>样式覆盖测试</title>    
    <style type="text/css">    
      /* 内部样式 */    
      h1{color:green;}    
    </style>    
    <!-- 引入外部样式 style.css -->    
    <link rel="stylesheet" type="text/css" href="style.css"/>    
    <!-- 设置：h1{color:blue;} -->    
</head>    
<body>    
    <h1>猜猜我是什么颜色？</h1>    
</body>

答案是 blue

查看更多

jquery

jQuery 滑动滚动条延迟加载图片(附带相册展示插件)

今天为大家推荐一款滑动插件 scrollpagination.js
很多产品展示、文章列表、微博列表展示都用到了这个东西，页面首次加载显示一部分列表信息，当滚动条滑动到一定位置时，就会触发请求后台加载新的数据，通过这种方式来替代传统的分页模式，同时也带来比较友好的用户体验。

  • 源码展示

查看更多

dnn

DNN (DotNetNuke) 7.2版本的安装与介绍

很早就开始使用DNN了，有段时间做产品就没在关注DNN，今儿抽空看了下最新版的DNN，感觉它变得更强大，更快了！

个人认为它不仅仅是一个CMS，已经是一个系统级别的平台。可以说它把微软asp.net webform的应用和功能已经用到极致，目前就asp.net cms这一块无疑是最强的.NET CMS，当然随着MVC的兴起，像Orchard CMS 也逐渐火起来。还有一些老牌的内容管理Kooboo CMS，Umbraco CMS 等都是非常优秀的.NET 开源CMS！

DNN 在它上面可以做任何扩展和开发（系统，网站，论坛，门户，博客等），一切都基于用户控件，用户控件构成一个模块，而一个模块就网站而言，它就是一个零件！

我们开发人员无非就是在这个平台上开发自己的零件，然后填充在我们的系统中。

查看更多

javascript

Asp.net 动态压缩脚本或样式 (网页加载性能提升)

随着jquery、javascript插件越来越多，一些门户站引用的js文件也越来越多
我们随便打开一个网页，鼠标右键查看源代码会发现head区域了加载了N个js文件，导致网页的加载速度非常慢。

当浏览器遇到一个标签时，会运行里面的javascript代码，然后继续解析，依次往下执行，在此期间下一个脚本是等待下载或等待运行的状态，直到第一个脚本执行完毕，如果引用的是外部文件，浏览器首先会下载外部文件的代码，然后解析并运行代码。试想一下，如果head区域放了很多脚本文件，页面解析和用户交互是被完全阻塞的。

查看更多

javascript

Asp.Net和Javscript 判断客户端是否为移动端

本文介绍3种方法（asp.net cs文件，webconfig文件，js文件） 检测访问网站的客户端是手机还是PC端

现在的web网页基本趋向于响应式编程，即服务端只做一份代码，自动判断不同的客户端来加载不同的布局，从而解决了手机端，PC端多份代码的麻烦，但对于那些建站过早的网站，又懒得去弄响应式编程，就只能老老实实用代码判断来定向到不同的页面了。

  1. Asp.Net 后台判断方法

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    private bool IsMobileDevice()
    {
            string u = Request.ServerVariables["HTTP_USER_AGENT"];
            Regex b = new Regex(@"(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino", RegexOptions.IgnoreCase | RegexOptions.Multiline);
            Regex v = new Regex(@"1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-", RegexOptions.IgnoreCase | RegexOptions.Multiline);
            if ((b.IsMatch(u) || v.IsMatch(u.Substring(0, 4))))
            {
                return true;
            }
            else
            {
                return false;
            }
    }

  2. Asp.Net web.config 配置方案

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    <?xml version="1.0" encoding="UTF-8"?>
    <configuration>
      <system.webServer>
        <rewrite>
          <rules>
            <clear />
            <rule name="MobDedect" stopProcessing="true">
              <match url=".*" ignoreCase="false" />
              <conditions logicalGrouping="MatchAny">
                <add input="{HTTP_USER_AGENT}" pattern="(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge|maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino" />
                <add input="{HTTP_USER_AGENT}" pattern="^(1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|awa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|
    ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac(|\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg(g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v)|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m
    \-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g|nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-)" />
              </conditions>
              <action type="Rewrite" url="http://www.peng8.net" />
            </rule>
          </rules>
        </rewrite>
      </system.webServer>
    </configuration>

  3. 纯javascript 方法判断

    1
    (function(a,b){if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))window.location=b;document.write(a)})(navigator.userAgent||navigator.vendor||window.opera,'这里换成移动端的连接地址');