大前端 - TOMMYHU - 专注互联网开发及运营技术,提供相关资料及软件下载,奇趣网络时事评论!
Pages: 12/43 First page Previous page 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 Next page Final page [ View by Articles | List ]
Nov 5
从服务端优化来说,通过对服务端做压缩配置可以大大减小文本文件的体积,从而使加载文本的速度成倍的加快。目前比较通用的压缩方法是启用gzip压缩。它会把浏览器请求的页面,以及页面中引用的静态资源以压缩包的形式发送到客户端,然后在客户端完成解压和拼装.具体是实现不用关心,我们只要将GZip启用就好.下图是使用相关工具检测没有开启网页压缩的效果。如下步骤我们就来具体开启基于apache的GZip压缩支持。

找到并打开apache/conf目录中的httpd.conf文件
httpd.conf中打开deflate_Module和headers_Module模块,具体做法为将 如下两句前面的#去掉:
LoadModule deflate_module modules/mod_deflate.so
LoadModule headers_module modules/mod_headers.so
开启apache服务器gzip压缩
在httpd.conf文件底部加入如下代码配置需要压缩的文件:

SetOutputFilter DEFLATE
# Don’t compress images and other
SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI .(?:exe|t?gz|zip|bz2|sit|rar)$ no-gzip dont-vary
SetEnvIfNoCase Request_URI .(?:pdf|doc)$ no-gzip dont-vary
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css
AddOutputFilterByType DEFLATE application/x-javascript

开启apache服务器gzip压缩
重启apache服务端
开启apache服务器gzip压缩
使用工具重新检测是否开启gzip压缩。考虑到相关广告检测机制具体的gzip检测工具访问地址可以到搜索引擎中去查找。
开启apache服务器gzip压缩
Nov 2
关于控制器如何通信的问题,是不少刚接触angulr的同学想知道的。总的来说,angular控制器通信的方式有三种:
1,利用作用域继承的方式。即子控制器继承父控制器中的内容

2,基于事件的方式。即$on,$emit,$boardcast这三种方式

3,服务方式。写一个服务的单例然后通过注入来使用

利用作用域的继承方式

由于作用域的继承是基于js的原型继承方式,所以这里分为两种情况,当作用域上面的值为基本类型的时候,修改父作用域上面的值会
影响到子作用域,反之,修改子作用域只会影响子作用域的值,不会影响父作用域上面的值;如果需要父作用域与子作用域共享一个值
的话,就需要用到后面一种,即作用域上的值为对象,任何一方的修改都能影响另一方,这是因为在js中对象都是引用类型。
Nov 2
requirejs加载超时,除了将js min化之外,还可以增加requirejs的超时时间,如下

Highslide JS
Oct 3

 随着HTML5和CSS3的飞速发展,越来越多语义化的标签和炫酷的特性被应用到web应用开发中来,各大浏览器厂商纷纷开始支持这些新特性,web开发人员也都兴趣十足地试用这些新特性开发出更绚丽有趣的应用,但是各大浏览器对这些新特性参差不齐地支持(尤其是令人头疼的IE)所带来的版本兼容性问题始终都是萦绕在开发人员心头的噩梦。传统的使用习惯使得我们很难摒弃老版本浏览器,开发人员只能选择令人厌烦的手工测试,测试,再测试。

为了解决这一难题,Modernizr应运而生了。它的名字听起来有点像Modernize, 确实,该名字起源于使得开发体验能够更现代化的目的,但它并非试图使旧的浏览器现代化,也就是使它支持这些新特性(尽管你确实可以通过添加shim/polyfill脚本来让浏览器支持某些不支持的新特性,后面会介绍)。

Sep 3
采用流行方便的大前端脚本语言结构:Angularjs+Nodejs
前端采用Angularjs实现双向绑定,采用sass写css,采用requirejs加载js脚本

angularjs单页入口,采用指令定制页头,页尾以及常用按钮,例如后退,返回主页等

h5开发采用页面自适应,并采用rem作为单位,h5页面会调用webview所在android公布的若干api实现调取系统摄像头等

nodejs采用express+orm,提供restful的api以共调用

关于前端不错的参考:https://github.com/monw3c/angularjs_pingan
Aug 25

While delivering software projects for startups, we’ve come to love AngularJS. We’ve also come to struggle with clean modularity, both the parts that Angular does really well, and the parts that are somewhat missing. RequireJS does a great job where Angular leaves some things to be desired, but using them together is not entirely trivial. What follows is our take at the problem.

Why?

Working with Angular you could worry about a good way to organize code. There are already great how-tos on that, check out this mainly theoretical post by Brian Ford and this practical guide by Cliff Meyers if you haven’t already. I’ll share the way I’m managing code in Angular applications with RequireJS.

Continue reading if you want to:

        
  • stop worrying about including script tags in the right order when building Angular apps;
  •     
  • to load your javascript asynchronously;
  •     
  • to compile code into single minified js file;

Who?

I assume that you already know what AngularJS is and that you’ve at least heard of AMD and RequireJS. To illustrate the approach I’ll first enable RequireJS for Angular Seed and explain process. Angular Seed structures code by splitting files by type and so will I. It’s also possible to apply this approach if you write modules by entities (you’ll see it from app.controllersmodule implementation).

How?

Angular Seed Project

Let’s check how Angular Seed structures code. Check out the example in your browser or on github (copied from Seed):

        
  • app.js file to bootstrap and set app config;
  •     
  • actual implementation files – controllers, services, directives and filters;
  •     
  • index.html with all script tags included in right order;
  •     
  • or index-async.html that makes use of angular-loader.js and 3-rd party $script loader library to load dependencies asyncronously.

Let’s start the party.

Add RequireJS

Checkout the example in your browser or on github.

Installing dependencies

I used bower to do this for me. See bower.json file:

{  "name": "AngularJS + RequireJS Example",  "version": "0.1",  "main": "index.html",  "ignore": [    "**/.*",    "libs"  ],  "dependencies": {    "angular": "latest",    "requirejs": "latest",    "requirejs-domready": "latest"  }}

Put the .bowerrc file next to bower.json, run bower install and – poof, we have all we need under libs folder.

index.html

Destruction is a good start. Open Angular Seed’s index.html and remove all the <script> tags. Looks cleaner, doesn’t it? Now switch to creation mode and add single script before closing </body> that will load RequireJS and instruct it to look for config in js/main.js with the data-main attribute:

<!doctype html><html lang="en"><head>  <meta charset="utf-8">  <title>My AngularJS AngularJS + RequireJS App</title>  <link rel="stylesheet" href="css/app.css"></head><body>  <ul class="menu">    <li><a href="#/view1">view1</a></li>    <li><a href="#/view2">view2</a></li>  </ul><div data-ng-view></div><div>Angular Require seed app: v<span app-version></span></div><script src="lib/requirejs/require.js" data-main="js/main.js"></script></body></html>

That’s all there’s to it. You can close index.html now, as there is nothing more we need to add to it.

main.js

Time to setup RequireJS config.

require.config({  // alias libraries paths    paths: {        'domReady': '../lib/requirejs-domready/domReady',        'angular': '../lib/angular/angular'    },    // angular does not support AMD out of the box, put it in a shim    shim: {        'angular': {            exports: 'angular'        }    },    // kick start application    deps: ['./bootstrap']});

What just happened? In paths we set aliases for the libraries and plugins used, then we defined that angular should be shimmed and thatbootstrap.js should be loaded to start the application.

bootstrap.js

We’re bootstrapping angular manually now, that’s what bootstrap.js is for. Note that you don’t need ng-app in your html anymore. Also routes.js, which contains angular routes configuration is included into dependencies list.

Note that in this require module we almost have no use of asynchronous loading and we’ll always have chain of angular -> app -> routes, as they depend on each other: angular needs to be present on a page before setting up application module, which is required to exist when defining routes config.

/** * bootstraps angular onto the window.document node */define([    'require',    'angular',    'app',    'routes'], function (require, ng) {    'use strict';    require(['domReady!'], function (document) {        ng.bootstrap(document, ['app']);    });});

We use domReady RequireJS plugin to make sure that DOM is ready when we start the app. Note that before doing so we’re loading the app.jsdependency, in there the main application is defined.

app.js

app.js wraps the definition of the top-level app module and loads the dependencies of its submodules.

define([    'angular',    './controllers/index',    './directives/index',    './filters/index',    './services/index'], function (ng) {    'use strict';    return ng.module('app', [        'app.services',        'app.controllers',        'app.filters',        'app.directives'    ]);});

We agreed to have 4 modules by files types: controllers, directives, filters, services – we require these modules to be loaded before defining the main module.

routes.js

Top level routes definition lives here. It is also possible to have modules to set up their own routes (this case is omitted for now in favour of simplicity).

define(['./app'], function (app) {    'use strict';    return app.config(['$routeProvider', function ($routeProvider) {        $routeProvider.when('/view1', {            templateUrl: 'partials/partial1.html',            controller: 'MyCtrl1'        });        $routeProvider.when('/view2', {            templateUrl: 'partials/partial2.html',            controller: 'MyCtrl2'        });        $routeProvider.otherwise({            redirectTo: '/view1'        });    }]);});

Module structure

A module consists of 3 parts:

        
  • definition;
  •     
  • component;
  •     
  • loader.

Let’s use the app.controllers module as example.

module definition (controllers/module.js)

It’s just like top level app.js: it defines a module.

define(['angular'], function (ng) {    'use strict';    return ng.module('app.controllers', []);});

This file will be used by the module components to attach themselves to (see next section).

module loader (controllers/index.js)

That’s just an empty define block with all module components included. You don’t need to mention module.js here as it’s already required by components. Loader is included as dependency of top level app module. And that’s actually how RequireJS knows about files to load.

define([    './my-ctrl-1',    './my-ctrl-2'], function () {});

module components (controllers/my-ctrl-1.js)

In the case with the app.controllers module it’ll be controllers. Example of controller wrapped in define is:

define(['./module'], function (controllers) {    'use strict';    controllers.controller('MyCtrl1', [function ($scope) {}]);});

Note that we used reference to ./module.js to attach component to its module.

Conclusion

That’s it. Now you have working Angular application powered by RequireJS. You can enjoy the power of not tracking the order of your scripts anymore and you get some powerful minification tooling to boot.

In next articles I’ll show you how to test this application properly, how to compile it into single file and automate workflows with grunt. All this is already enabled in StarterSquad Angular + Require Seed check it out if you can’t wait (I’m a slow typist).

About StarterSquad

StarterSquad is a community of distributed development teams consisting of freelance developers. We specialize in startups and lean innovation. If you want to know more, read more about how we work and if you need any help with Angular, checkout my team.

Tags: , ,
Aug 13
SASS是CSS3的一个扩展,增加了规则嵌套、变量、混合、选择器继承等等。通过使用命令行的工具或WEB框架插件把它转换成标准的、格式良好的CSS代码。

SCSS即是SASS的新语法,是Sassy CSS的简写,是CSS3语法的超集,也就是说所有有效的CSS3样式也同样适合于SASS。

例如:

有兴趣的同学可以到官方网站去了解一下,http://http://sass-lang.com/ ,英文的。
Aug 11
APP开发模式通常分为Web APP与Native APP原生模式两种,这两种模式均各自有自己的优势,到底是采用Native App开发还是采用Web App开发一直是业界争论的焦点,但是随着HTML5的发展及云服务普及,采用HTML5进行Web App开发正在成为一种趋势,用户可以根据应用特点和需求进行选择,亦可选择两者混合模式:

Native App开发

Native App开发即我们所称的传统APP开发模式(原生APP开发模式),该开发针对IOS、Android等不同的手机操作系统要采用不同的语言和框架进行开发,该模式通常是由“云服务器数据+APP应用客户端”两部份构成,APP应用所有的UI元素、数据内容、逻辑框架均安装在手机终端上。

Web App开发

Web App开发即是一种框架型APP开发模式(HTML5  APP 框架开发模式),该开发具有跨平台的优势,该模式通常由“HTML5云网站+APP应用客户端”两部份构成,APP应用客户端只需安装应用的框架部份,而应用的数据则是每次打开APP的时候,去云端取数据呈现给手机用户。



原生APP开发及Web APP开发模式的区别

Web APP需开发“html5云网站”和“APP客户端”,昆明天度网络公司总结这类型APP应用呈现以下特点:

(1)每次打开APP,都要通过APP框架向云网站取UI及数据;

(2)手机用户无法上网则无法访问APP应用中的数据。

(3)框架型的APP无法调用手机终端的硬件设备(语音、摄像头、短信、GPS、蓝牙、重力感应等)

(4)框架型APP的访问速度受手机终端上网的限制,每次使用均会消耗一定的手机上网流量;

(5)框架型APP应用的安装包小巧,只包含框架文件,而大量的UI元素、数据内容刚存放在云端;

(6)APP用户每次都可以访问到实时的最新的云端数据;

(7)APP用户无须频繁更新APP应用,与云端实现的是实时数据交互;

适用企业:电子商务、金融、新闻资讯、企业集团需经常更新内容的APP应用。

Native App(原生型APP)需要开发“云服务器数据中心”和“APP客户端”,昆明天度网络公司总结这类型的APP应用呈现以下特点:

(1)每次获取最新的APP功能,需要升级APP应用;

(2)原生型APP应用的安装包相对较大,包含UI元素、数据内容、逻辑框架;

(3)手机用户无法上网也可访问APP应用中以前下载的数据。

(4)原生型的APP可以调用手机终端的硬件设备(语音、摄像头、短信、GPS、蓝牙、重力感应等)

(5)APP应用更新新功能,涉及到每次要向各个应用商店进行提交审核。

适用企业:游戏、电子杂志、管理应用、物联网等无需经常更新程序框架的APP应用。

到底该如何选择Web App和Native App开发模式

移动Web无所不在,移动Web是目前唯一的支持各种设备访问的平台,与桌面Web一样,移动Web支持各种标准的协议。移动Web也是唯一一个可供开发者发布移动应用的平台,它将各种移动交互与桌面任务有效地连接了起来;而开发Native App可以充分利用设备的特性,而这一点往往是Web浏览器做不到的,所以对一个产品本身而言,Native App是最佳的选择。下面几节将讨论一下Native App的一些主要功能。
Pages: 12/43 First page Previous page 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 Next page Final page [ View by Articles | List ]