Xiaopei's DokuWiki

These are the good times in your life,
so put on a smile and it'll be alright

User Tools

Site Tools

Trace: • web_frontend

Sidebar

友链

导航

it:web_frontend

Table of Contents

WEB 前端

测试

HTML

semantic

使用 HTML5 正确合理的重构你的网页

CSS

The first time you apply a CSS to a web page

CSS3

CSS3 Introduction

  • Web Fonts - The @font-face Rule
  • Multiple Background Images
    • 可用来制作动静结合的 Background, 比如机器人胸口有几个灯一直闪的效果 1), 机器人是静态图片, 闪灯是 url(“data:image/gif;base64,asdf”)

CSS Search/find

JavaScript

html5

常用函数

  • splice(): 插入、删除或替换数组的元素

函数扩展

  • Underscore.js is a utility-belt library for JavaScript that provides a lot of the functional programming support that you would expect in Prototype.js (or Ruby), but without extending any of the built-in JavaScript objects.
  • php.js

各种类库

effects

rich text

three.js

three.js - JavaScript 3D library

three.js 是 web GL 的第三库. WEB GL 是 JS + OpenGL ES 2.0.

用法: 创建一个div，然后通过js初始化three.js，将内容放入该div

步骤:

  1. 画布的准备
  2. Three.js 的初始化（initThree()）
  3. 相机的准备（initCamera()）
    1. 透视: 近大远小, 更常用
    2. 正交: 远近大小不变, 一般用于建筑
  4. 场景的准备（initScene()）
    1. 雾??
  5. 光源的准备（initLight()）
    1. 可设置多个
  6. 物体的准备（initObject()）
    1. 形状
    2. 材质
  7. 执行绘制（threeStart()）

框架

介绍: 图灵社区 : 阅读 : JavaScript宝座：七大框架论剑

其中与 rails 贴合较紧的有 Ember.js 和 batman.js. ember 人气更高. batman 用 coffeescript. 但只是实现一个 example.com/# 的网站感觉没太大用. 要想跟 rails 结合起来还是挺复杂的.

yeoman

Yeoman - Modern workflows for modern webapps

features:

  • Lightning-fast scaffolding
    Easily scaffold new projects with customizable templates (e.g HTML5 Boilerplate, Twitter Bootstrap), RequireJS and more.
  • Great build process
    Not only do you get minification and concatenation; I also optimize all your image files, HTML, compile your CoffeeScript and Compass files, if you're using AMD, I will pass those modules through r.js so you don't have to.
  • Automatically compile CoffeeScript & Compass
    Our LiveReload watch process automatically compiles source files and refreshes your browser whenever a change is made so you don't have to.
  • Automatically lint your scripts
    All your scripts are automatically run against JSHint to ensure they're following language best-practices.
  • Built-in preview server
    No more having to fire up your own HTTP Server. My built-in one can be fired with just one command.
  • Awesome Image Optimization
    I optimize all your images using OptiPNG and JPEGTran so your users can spend less time downloading assets and more time using your app.
  • Killer package management
    Need a dependency? It's just a keystroke away. I allow you to easily search for new packages via the command-line (e.g. `bower search jquery`), install them and keep them updated without needing to open your browser.
  • PhantomJS Unit Testing
    Easily run your unit tests in headless WebKit via PhantomJS. When you create a new application, I also include some test scaffolding for your app.

components:

  • yo - the scaffolding tool from Yeoman, 类似 rails
  • bower - the package management tool, 类似 bundle
  • grunt - the build tool, 类似 rails 和 rake

安装

  1. 安装 node.js: yeoman 需要 0.8 以上版本的 node.js, ubuntu 下直接 apt 可能版本过低, 所以需要从 launchpad 上找更新的安装: node.js : chris lea
  2. 安装 yeoman: npm install -g yo
  3. 安装 grunt 的其他依赖
    1. ruby
    2. compass gem: gem install compass

使用

$ cd my_web_app
$ npm install -g generator-angular  # install generator
$ yo angular                        # scaffold out a AngularJS project

# Optional. Scaffolding out Angular app’s further pieces
$ yo angular:controller myController
$ yo angular:directive myDirective
$ yo angular:filter myFilter
$ yo angular:service myService
# 更多 angular 相关内容见: https://github.com/yeoman/generator-angular

$ bower install angular-ui          # install a dependency for your project from Bower
# 更多 bower 相关见: http://yeoman.io/packagemanager.html

$ grunt test                        # test your app
$ grunt server                      # preview your app

$ grunt                             # build the application for deployment
# 发布时应注意: http://yeoman.io/deployment.html

git clone

clone 一个 yeoman app 后, 是不带 node_modules 目录的, 这样 grunt 就没法运行, 需按以下步骤初始化: 

$ npm install
# 可能需要 sudo 运行

$ bower update

handlebar.js

js 模板 

<div id="main">
  <!-- placeholder -->
</div>
 
<!-- 定义模板 -->
<script id="entry-template" type="text/x-handlebars-template">
  <div class="entry">
    <h1>
      {{title}} <!-- escape -->
    </h1>
    <div class="body">
      {{body}}  <!-- not escape -->
    </div>
  </div>
</script>
 
<!-- 使用 -->
<script>
  var source = $("#entry-template").html();
  var template = Handlebars.compile(source);
  var context = {title: "my new post", 
                 body: "<p>this is my first post</p>"};
  var html = template(context);
 
  $("#main").html(html);
</script>

bootstrap

Bootstrap

foundation

响应式, 移动设备优先. 但 bootstrap 更火, 还是用 bootstrap 吧…

The most advanced responsive front-end framework in the world.

Foundation: The Most Advanced Responsive Front-end Framework from ZURB

Design

婚礼 wedding

我做的

refs

Performance

1)
WebdriverJS - Selenium 2.0 javascript bindings for nodejs
it/web_frontend.txt · Last modified: 2015/07/11 20:29 by admin

Page Tools

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Noncommercial-Share Alike 4.0 International
CC Attribution-Noncommercial-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki