Docker镜像保存为文件及从文件导入镜像

mikel阅读(914)

http://blog.csdn.net/anxpp/article/details/51810776

转载请注明出处:http://blog.csdn.net/anxpp/article/details/51810776,谢谢!

1、概述

我们制作好镜像后,有时需要将镜像复制到另一台服务器使用。

能达到以上目的有两种方式,一种是上传镜像到仓库中(本地或公共仓库),但是另一台服务器很肯能只是与当前服务器局域网想通而没有公网的,所以如果使用仓库的方式,只能自己搭建私有仓库,这会在另一篇文章中介绍。

如果我们仅仅是要复制到另外少数的服务器,搭建私有仓库显然没有这个必要,而将镜像保存为文件上传到其他服务器再从文件中载入镜像也是一个不错的选择。

可以使用Docker save和Docker load命令来存储和载入镜像。

2、保存镜像为文件

如果要讲镜像保存为本地文件,可以使用Docker save命令。

命令格式:

  1. docker save o 要保存的文件名要保存的镜像

首先查看当前的镜像列表:

  1. docker images

01

比如这里,我们将java8的镜像保存为文件:

  1. docker save o java8 . tar lwieske / java 8

完成后通过ls 命令即可看到文件。

3、从文件载入镜像

从文件载入镜像可以使用Docker load命令。

命令格式:

  1. docker load input 文件

或者

  1. docker load < 文件名

此时会导入镜像以及相关的元数据信息等。

首先使用SSH工具将文件上传到另一台服务器。

然后通过命令载入镜像:

  1. docker load < java8 . tar

导入后可以使用docker images命令查看:

02

 

起飞吧!

Meteor部署在CentOS环境下 - 简书

mikel阅读(1220)

来源: Meteor部署在CentOS环境下 – 简书

在Meteor开发者群里发现很多人在问如何部署Meteor项目,我自己也在部署Meteor项目时遇到了很多问题,所以在这整理一下Meteor部署的方法,虽然主要是针对CentOS系统,但里面涉及的一些问题和解决方法也适合于其他平台。

文章分为两部分,一部分说明部署的流程,二部分是介绍一个工具,一键部署。

第一部分,Meteor项目部署的步骤和坑点

首先说一下Meteor项目部署的步骤流程和一些细节点,这部分内容适合在任何平台上部署的情况。

1,项目打包

meteor build ../production –architecture os.linux.x86_64

这里 –architecture 参数非常重要,这个是指定你部署服务器的运行环境,打包的过程会根据这个环境来编码和打包源代码。

../production 代表打包好的包文件在../production 这个目录里,这个地址你可以任意指定。

2,将发布包上传到服务器

cd ../production

scp  my-project.tar.gz  root@192.168.0.100:/opt/www/

上传到服务器可以用任何合适的方法,我为了演示简便就使用scp的方式。

3,解压发布包

ssh root@192.168.0.100

cd /opt/www/

tar zxvf my-project.tar.gz

注意:这部分内容是在服务器上操作的

找到这个发布包,解压发布包

4,配置安装项目所需要的插件包

cd bundle/programs/server

npm install

my-project.tar.gz文件会解压出一个bundle目录,而bundle/programs/server目录就是项目server代码所在的目录。

所以进入这个目录,运行npm install,npm会自动安装所需的插件、组件。

5,运行meteor

cd ../../

node main.js

或者

export ROOT_URL=http://www.xxx.com

node main.js

虽然服务器代码在 bundle/programs/server 目录里,但入口文件在 bundle 目录下,所以退出来到 bundle,然后运行node main.js 启动服务。

在启动之前可以通过 export ROOT_URL=http://www.xxx.com 方式设置一些环境变量来配置meteor项目的运行。

6,服务器环境搭建和配置

如果在第五步发现你无法运行或者报错了,有可能是你没有安装nodejs,也有可能是你的nodejs版本不对。

meteor 1.3.2 所需要的 nodejs 版本是0.10.43,过高的nodejs版本也会导致meteor项目部署运行报错。

在这说一下nodejs的版本号的问题,不要看0.10.43版本号好像很小,怀疑它不是稳定的版本,之所以nodejs现在最大的版本号会有6.2.0这种很大的编号,是因为之前nodejs的开发团队分裂过,现在有合并在一起了,所以导致版本号比较混乱。6.2.0如果以之前的版本号演进的话大概也就是0.16.0。

不管你是否安装过nodejs或者版本不对,都先安装nvm,鉴于nodejs这么混乱的版本号所以需要一个nvm这样的工具来管理不同的nodejs版本。

安装nvm

curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.31.1/install.sh | bash

安装和使用 nodejs 0.10.43

nvm install 0.10.43

nvm use 0.10.43

通过这一系列的操作,你基本部署完成你的项目了,但每次开发一个新版本就要这样部署一下有些麻烦,所以就有人写了一些部署meteor项目的工具。

第二部分,一键部署工具介绍和使用

其中官方推荐的是mup,mup是将meteor项目部署到服务器主机上。mup还有一个版本mupx,可以将meteor项目部署到docker容器上。

但mup和mupx都只支持ubuntu/debian架构的服务器,而且在国内的网络环境下运行非常慢,因为它们都没有针对国内的网络环境优化npm pacakge服务器。

所以我在mupx的基础将服务器代码移植到CentOS平台上,项目地址在这 mup for centos,如果需要在CentOS上部署,可以到这里去下载使用。github的项目首页有详细的使用说明。在这里我简单的讲一下如何使用mup for centos一键部署Meteor项目到服务器。

1,下载、安装mup for centos

cd /usr/local

git clone https://github.com/romejiang/mupx.git

ln -s mupx/bin/mup bin/mup

mup

进入/usr/local/目录,一般的第三方工具都安装在这。

git下载工具源码,ln连接mup命令

然后执行 mup 命令,如果有显示帮助信息就说明安装完成了。

2,建立项目部署目录

cd ~/projects/myproject

mkdir .deploy

cd .deploy

mup init

进入你的meteor项目所在的目录,建立一个隐藏目录 .deploy,并进入目录,在目录里初始化部署脚本。

3,编辑部署脚本 mup.json

{

“servers”: [

{

“host”: “jcw”, // 部署服务器的地址 ip 或者 域名

“username”: “root”,  // 服务器用户名

// “password”: “password”, // 服务器密码

“pem”: “~/.ssh/id_rsa”, // 可以用ssh验证,就不需要配置密码了

“env”: {} // 服务器需要的环境变量

}

],

“appName”: “zhiq”, // 项目的名称,这个很重要,如果是多个项目部署到一个服务器上,这个名字不能重复,否则会覆盖其他项目

“app”: “/Users/rome/Projects/meteor/zhiq”, // meteor项目在你本地的目录地址

“env”: {

“PORT”: 8181, // 端口,多个项目部署到同一个服务器,也需要修改为不同的端口

“ROOT_URL”: “http://app.yijianapp.com/test” // 项目真实的访问地址

},

“dockerImage”: “romejiang/meteor:v53” // 使用的 Docker 镜像

}

部署脚本里有很多参数,但上面这几个是你会用到的,其他的参数可以不用动,默认值就好。

4,初始化服务器环境

mup setup

mup会根据需要对服务器的配置部署环境,会自动安装docker,mongodb,更新一些包。

5,部署项目

mup deploy

部署项目,项目会部署到服务器的/opt/目录下。

6,再次部署

mup deploy

一次每次更新了代码再次部署是只需要运行 , mup deploy 即可。

Git常用命令

mikel阅读(757)

查看、添加、提交、删除、找回,重置修改文件

git help <command> # 显示command的help

git show # 显示某次提交的内容 git show $id

git co — <file> # 抛弃工作区修改

git co . # 抛弃工作区修改

git add <file> # 将工作文件修改提交到本地暂存区

git add . # 将所有修改过的工作文件提交暂存区

git rm <file> # 从版本库中删除文件

git rm <file> –cached # 从版本库中删除文件,但不删除文件

git reset <file> # 从暂存区恢复到工作文件

git reset — . # 从暂存区恢复到工作文件

git reset –hard # 恢复最近一次提交过的状态,即放弃上次提交后的所有本次修改

git ci <file> git ci . git ci -a # 将git add, git rm和git ci等操作都合并在一起做                                    git ci -am “some comments”

git ci –amend # 修改最后一次提交记录

git revert <$id> # 恢复某次提交的状态,恢复动作本身也创建次提交对象

git revert HEAD # 恢复最后一次提交的状态

查看文件diff

git diff <file> # 比较当前文件和暂存区文件差异 git diff

git diff <id1><id1><id2> # 比较两次提交之间的差异

git diff <branch1>..<branch2> # 在两个分支之间比较

git diff –staged # 比较暂存区和版本库差异

git diff –cached # 比较暂存区和版本库差异

git diff –stat # 仅仅比较统计信息

查看提交记录

git log git log <file> # 查看该文件每次提交记录

git log -p <file> # 查看每次详细修改内容的diff

git log -p -2 # 查看最近两次详细修改内容的diff

git log –stat #查看提交统计信息

tig

Mac上可以使用tig代替diff和log,brew install tig

Git 本地分支管理

查看、切换、创建和删除分支

git br -r # 查看远程分支

git br <new_branch> # 创建新的分支

git br -v # 查看各个分支最后提交信息

git br –merged # 查看已经被合并到当前分支的分支

git br –no-merged # 查看尚未被合并到当前分支的分支

git co <branch> # 切换到某个分支

git co -b <new_branch> # 创建新的分支,并且切换过去

git co -b <new_branch> <branch> # 基于branch创建新的new_branch

git co $id # 把某次历史提交记录checkout出来,但无分支信息,切换到其他分支会自动删除

git co $id -b <new_branch> # 把某次历史提交记录checkout出来,创建成一个分支

git br -d <branch> # 删除某个分支

git br -D <branch> # 强制删除某个分支 (未被合并的分支被删除的时候需要强制)

 分支合并和rebase

git merge <branch> # 将branch分支合并到当前分支

git merge origin/master –no-ff # 不要Fast-Foward合并,这样可以生成merge提交

git rebase master <branch> # 将master rebase到branch,相当于: git co <branch> && git rebase master && git co master && git merge <branch>

 Git补丁管理(方便在多台机器上开发同步时用)

git diff > ../sync.patch # 生成补丁

git apply ../sync.patch # 打补丁

git apply –check ../sync.patch #测试补丁能否成功

 Git暂存管理

git stash # 暂存

git stash list # 列所有stash

git stash apply # 恢复暂存的内容

git stash drop # 删除暂存区

Git远程分支管理

git pull # 抓取远程仓库所有分支更新并合并到本地

git pull –no-ff # 抓取远程仓库所有分支更新并合并到本地,不要快进合并

git fetch origin # 抓取远程仓库更新

git merge origin/master # 将远程主分支合并到本地当前分支

git co –track origin/branch # 跟踪某个远程分支创建相应的本地分支

git co -b <local_branch> origin/<remote_branch> # 基于远程分支创建本地分支,功能同上

git push # push所有分支

git push origin master # 将本地主分支推到远程主分支

git push -u origin master # 将本地主分支推到远程(如无远程主分支则创建,用于初始化远程仓库)

git push origin <local_branch> # 创建远程分支, origin是远程仓库名

git push origin <local_branch>:<remote_branch> # 创建远程分支

git push origin :<remote_branch> #先删除本地分支(git br -d <branch>),然后再push删除远程分支

Git远程仓库管理

GitHub

git remote -v # 查看远程服务器地址和仓库名称

git remote show origin # 查看远程服务器仓库状态

git remote add origin git@ github:robbin/robbin_site.git # 添加远程仓库地址

git remote set-url origin git@ github.com:robbin/robbin_site.git # 设置远程仓库地址(用于修改远程仓库地址) git remote rm <repository> # 删除远程仓库

创建远程仓库

git clone –bare robbin_site robbin_site.git # 用带版本的项目创建纯版本仓库

scp -r my_project.git git@ git.csdn.net:~ # 将纯仓库上传到服务器上

mkdir robbin_site.git && cd robbin_site.git && git –bare init # 在服务器创建纯仓库

git remote add origin git@ github.com:robbin/robbin_site.git # 设置远程仓库地址

git push -u origin master # 客户端首次提交

git push -u origin develop # 首次将本地develop分支提交到远程develop分支,并且track

git remote set-head origin master # 设置远程仓库的HEAD指向master分支

也可以命令设置跟踪远程库和本地库

git branch –set-upstream master origin/master

git branch –set-upstream develop origin/develop

 

修改文件后,如何提交到git服务器,我们现在给出具体步骤:

(1)首先需要add,比如.config是被修改的文件,则  add .config

(2)然后执行 git commit -m "这里写原因,比如:修改了网站 v.jiloc.com"

(3)然后push到git服务器,git push

(4)更新:git pull

(5)查看log:git log

asyncjs,waterfall的使用 - kevin.l - 博客园

mikel阅读(1019)

来源: asyncjs,waterfall的使用 – kevin.l – 博客园

waterfall(tasks, [callback]) (多个函数依次执行,且前一个的输出为后一个的输入)

按顺序依次执行多个函数。每一个函数产生的值,都将传给下一个函数。如果中途出错,后面的函数将不会被执行。错误信息以及之前产生的结果,将传给waterfall最终的callback。

对于学过了js回调机制的小伙伴,waterfall是比较容易理解的,个人的理解就是,waterfall中传入的函数数组tasks中,后一个函数为前一个函数的回调,使用cb(null,args),这样的形式调用下一个函数,如果出现异常,则直接使用cb(new Error(“错误的信息”))这样的方式来捕捉异常,并调用最终的回调函数来处理,在这种情况下,出现异常的函数后面那些函数,将不再继续执行,测试代码如下:

var async = require('async');
var a = 10;
async.waterfall([
    function(cb) {
        console.log("getb")
        setTimeout(function() {
            if (a == 0) {
                cb(new Error("a不能为0"));
            } else {
                var b = 1 / a;
                cb(null, b); //在这里通过回调函数把b传给下一个函数,记得一定要加上null,才能调用数组中得下一个函数,否则,会直接调用最终的回调函数,然后结束函数,则后面的函数将不再执行
                //如果这里写成cb(b);
                //结果会变成:
                /**
                 *getb
                 *0.1
                 **/
            }
        }, 1000);
    },
    function(b, cb) {
        setTimeout(function() {
            console.log("getc")
            var c = b + 1;
            cb(null,c);
        }, 1000);
    }
], function(err, result) {
    if (err) {
        console.log(err);
    } else {
        console.log('c:' + result)
    }
});

当a = 0时,会直接抛出错误,输出如下:
getb
Error: a不能为0
先执行了第一个函数,在第一个函数中抛出异常之后,直接执行最终的回调函数,并没有接着执行第二个函数。
a = 10 时,输出如下:
getb
getc
1.1
先执行了第一个函数,然后把第一个函数算出的b传给了第二个函数,再次算出第二个函数中得C,传给最终的结果result。

学了这么久的前端,第一次把自己学到的东西总结并记录下来,希望小伙伴们多多指点,互相交流,希望可以在这里学到更多,认识更多。

Javascript ES6 let 和 var 比较

mikel阅读(966)

JavaScript ES6 的 let 和 var 的比较

JavaScript 1.7中, let 关键词被添加进来, 我听说它声明之后类似于”本地变量“, 但是我仍然不确定它和 关键词 var 的具体区别。

回答:

不同点在于作用域, var关键词的作用域是最近的函数作用域(如果在函数体的外部就是全局作用域), let 关键词的作用域是最接近的块作用域(如果在任何块意外就是全局作用域),这将会比函数作用域更小。

同样, 像var 一样, 使用let 声明的变量也会在其被声明的地方之前可见。

下面是Demo 例子。

全局(Global)

当在函数体之外它们是平等的。

  1. let me = ‘go’//globally scoped
  2. var i = ‘able’//globally scoped

函数(Function)

当瞎下面这种, 也是平等的。

  1. function ingWithinEstablishedParameters() {
  2.     let terOfRecommendation = ‘awesome worker!’//function block scoped
  3.     var sityCheerleading = ‘go!’//function block scoped
  4. };

块(Block)

这是不同点, let 只是在 for 循环中, var  却是在整个函数都是可见的。

  1. function allyIlliterate() {
  2.     //tuce is *not* visible out here
  3.     for( let tuce = 0; tuce < 5; tuce++ ) {
  4.         //tuce is only visible in here (and in the for() parentheses)
  5.     };
  6.     //tuce is *not* visible out here
  7. };
  8. function byE40() {
  9.     //nish *is* visible out here
  10.     forvar nish = 0; nish < 5; nish++ ) {
  11.         //nish is visible to the whole function
  12.     };
  13.     //nish *is* visible out here
  14. };

文章出处: Javascript – “let” keyword vs “var” keyword

App 模块化实战经验总结 - 观千剑而后识器,操千曲而后晓声。 - 博客频道 - CSDN.NET

mikel阅读(1842)

随着业务的不断发展壮大,App 端所承担的功能也越来越重,特别是代码几易其主之后开始变得杂乱无章,牵一发而动全局的事情时常发生。为了应对团队壮大之后的开发模式,我们必须要对业务进行隔离,同时沉淀出通用组件,完善移动开发的基础设施。1. 痛点模块化之前,我们主要面临以下痛点:业务边界不清晰通用代码与业务代码耦合代码、资源文件大量重复常量满天飞其中业务边界不清晰是最大的痛点,最直接的表现就是处处有

来源: App 模块化实战经验总结 – 观千剑而后识器,操千曲而后晓声。 – 博客频道 – CSDN.NET

随着业务的不断发展壮大,App 端所承担的功能也越来越重,特别是代码几易其主之后开始变得杂乱无章,牵一发而动全局的事情时常发生。为了应对团队壮大之后的开发模式,我们必须要对业务进行隔离,同时沉淀出通用组件,完善移动开发的基础设施。

1. 痛点

模块化之前,我们主要面临以下痛点:

  • 业务边界不清晰
  • 通用代码与业务代码耦合
  • 代码、资源文件大量重复
  • 常量满天飞

2.png

其中业务边界不清晰是最大的痛点,最直接的表现就是处处有雷,经常会引入新的 Bug,而且很多 Bug 往往不能从根本上解决,代码维护成本居高不下。

2. 重构原则

模块化并不能一蹴而就,我们在重构的同时也在做新需求,每次看到那一坨旧代码心中就会有无数只”草泥马”奔腾而过,干脆重写的无奈之情难以抑制,结果在红牛的日夜陪伴下写出来的新代码虽然看上去“漂亮”,但是实际上问题更多,得不偿失。吃过几次苦头之后,我们总结出了重构的三项基本原则:

3.png

2.1 渐进式重构

如果一段代码已经比较稳定,可以从中抽取一部分功能重写,不要一上来就全部推翻重写,可以慢慢淘汰掉老代码。

2.2 iOS / Android 互相参考

业务代码总是惊人的相似,两端互相参考的过程中,不但可以 Review 代码,还能加深对业务的理解,可谓一举两得。
实践证明,如果人手紧张,项目早期可以只让一端的开发人员跟需求,另一端直接“翻译代码”,甚至一个人写两端代码。

2.3 理清业务再动手

App 作为业务链的末端,由于角色所限,开发人员对业务的理解比后端要浅,所谓欲速则不达,重构不能急,理清楚业务逻辑之后再动手。(可以找熟悉业务的同学聊一下 — PD、后端、测试

3 模块化过程

所谓模块化,是一个分而治之的过程,概念类似于 SOA,首先进行垂直拆分,过程中必然会催生出业务共享的 Common 模块,而 Common 又可以继续水平拆分,逐渐变薄,直到 Common 消失。

刚开始不需要完美的目标,简单粗暴一点,后续再逐渐改善。

4.png

3.1 抽取 Common

Common 层服务于所有的上层业务,是通用层,不允许引用业务层代码。

  1. 首先把 Common 层用到的 Business 层代码下放到各个业务
  2. 然后把多个 Business 之间共用的代码提取到 Common 层
  3. 资源文件的处理方式与代码一致

5.png

Common 层作为权宜之计,它的命运是向死而生,最终会诞生出许多功能独立的基础模块。而这个过程是漫长的,我们只能在业务隔离的同时,不断丰富 Common 模块,然后在某个节点将其再拆分成一个一个独立模块。

6.png

代码也逃不出分久必合、合久必分的的宿命。

3.2 业务隔离

业务模块之间不能互相依赖,只能单向依赖 common。

7.png

业务之间存在两种耦合关系:

  • 页面耦合
  • 功能耦合

要做到彻底隔离就必须打破这两种耦合关系:

  • 页面解耦 – 跳转协议
  • 功能解耦 – 模块间 RPC

3.2.1 统一跳转协议

页面解耦可以借鉴 Web 的设计原理,给业务模块中对外的页面定义一个 URI,然后页面之间通过 URI 跳转。

举个栗子,A、B 两个页面分属于不同的业务模块,在页面未解耦之前,A 如果要跳转到 B,必须要依赖 B 的模块,那么跳转代码会写成如下形式:

Android

1.Intent intent = new Intent(getContext(), BbbActivity.class);
2.intent.putParcelable(BbbActivity.EXTRA_MESSAGE, message);
3.startActivity(intent);

iOS

1.BbbViewController *bbbVC = [[BbbViewController alloc] init];
2.bbbVC.messageModel = messageModel;
3.[self.navigationController pushViewController:bbbVC animated:YES];

如果 A、B 之间还需要传递数据,就要共享常量、Model,耦合继续加重。

如果我们为 B 页面定义一个 URI – wsc://home/bbb,然后把共享的 messageModel 拍平序列化成 Json 串,那么 A 只需要拼装一个符合 B 页面 scheme 的跳转协议就可以了。

1.wsc://home/bbb?message={ "name":"John", "age":31, "city":"New York" }

URL Router 有很多种实现方式,网上资料也是多如牛毛,这里只提供一种思路。

Android 实现方式

1. 在 AndroidManifest.xml 文件中定义 URI

01.<activity
02.android:name=".ui.BbbActivity"
03.<intent-filter>
04.    <category android:name="android.intent.category.DEFAULT" />
05.    <action android:name="android.intent.action.VIEW" />
06.    <data
07.        android:host="bbb"
08.        android:path="/home"
09.        android:scheme="wsc" />
10.</intent-filter>
11.</activity>

2. 封装跳转 Intent

1.final Uri uri = new Uri.Builder().authority("wsc").path("home/bbb")
2.    .appendQueryParameter("message"new Gson().toJson(messageModel)).build();
3.final Intent intent = new Intent(Intent.ACTION_VIEW);
4.intent.setData(uri);
5.startActivity(intent);

3. 步骤 2 代码进一步封装

1.ZanURLRouter.from(getContext())
2.    .withAction(Intent.ACTION_VIEW)
3.    .withUri("wsc://home/bbb")
4.    .withParcelableExtra("message", messageModel)
5.    .navigate();

iOS实现方式

1. 通过 plist 文件保存 URI 到 Controller class 的映射8.png

2. 封装一个根据 URI 跳转到 Controller 的 SDK

3. 页面跳转

1.[ZanURLRouter routeURL:@"wsc://home/bbb"];

注意事项

  • 两端协议要保持一致
  • 需要通过工程手段保证页面 URI 唯一

3.2.2 模块间 RPC

9.png

「业务 A 」与「Remote: 服务端」之间通过 HTTP 或者其他协议进行远程调用,「Remote: 服务端」是服务提供者,「业务 A 」是服务消费者。

对于「业务 A 」来说,「Local: 业务 B」也是服务提供者,但是两者不存在依赖关系,所以只能通过协议来通信。

  • iOS 通过 protocol 提供服务,利用 BeeHive 做“服务治理”。
  • Android 通过 interface 提供服务,然后我们模仿 Retrofit 做了一个“服务治理”框架 – ServiceRouter,它的优势在于可以只在业务提供方的 module 中定义 interface,解耦更彻底。

10.png

4 代码管理

如果被隔离的业务模块仍然在一个 Project 中,就无法从“物理”上彻底隔绝代码间的相互引用,我们需要从工程上保证业务之间互相独立。

4.1 代码结构

Android (Module) iOS (Project)
11.png 12.png

4.2 独立发版

每一个 subproject 可以独立发版,然后通过坐标依赖组装成 App,以 Android 为例:

13.png

4.3 独立 Repo

现在还没有找到一个很好的代码组织形式,所以我们的观点是:

在团队规模不大的时候,一个人要 Cover 多个子工程,所以没有必要独立 Repo,当一个 Repo 需要多个人 Cover 时可以考虑独立 Repo。

规模 是否独立 Repo
Developer 1 : N projects
Project 1 : N developers

当解耦方案确定之后,模块化其实就是一个体力活,返工重做便成了家常便饭,所以我们觉得比较好的方式应该是专人负责、一气呵成

5 诗和远方

  • 通过移动配置中心动态下发跳转协议
  • 抽取移动端业务通用 UI 组件库
  • 主工程可选择性依赖业务模块

js动态设置Select中Option选中 - F7ANTY的专栏 - 博客频道 - CSDN.NET

mikel阅读(1474)

js动态设置Select中Option选中 Js代码  var select = document.getElementById(selectYear);  var nextYear = ‘2012’;  for(var i=0; i    if(select.options[i].innerHTML == nextYear){

来源: js动态设置Select中Option选中 – F7ANTY的专栏 – 博客频道 – CSDN.NET

js动态设置Select中Option选中

 

Js代码  收藏代码
  1. var select = document.getElementById(“selectYear”);
  2. var nextYear = ‘2012’;
  3. for(var i=0; i<select.options.length; i++){
  4.     if(select.options[i].innerHTML == nextYear){
  5.         select.options[i].selected = true;
  6.         break;
  7.     }
  8. }

 

 

Js代码  收藏代码
  1. /**
  2.  * 设置select选中
  3.  * @param selectId select的id值
  4.  * @param checkValue 选中option的值
  5.  * @author lqy
  6.  * @since 2015-08-21
  7. */
  8. function setSelectChecked(selectId, checkValue){
  9.     var select = document.getElementById(selectId);
  10.     for(var i=0; i<select.options.length; i++){
  11.         if(select.options[i].innerHTML == checkValue){
  12.             select.options[i].selected = true;
  13.             break;
  14.         }
  15.     }
  16. };

转载自http://fanshuyao.iteye.com/blog/1986616

动态增加、删除select 里的option的小例子 - yy280458609的专栏 - 博客频道 - CSDN.NET

mikel阅读(1300)

JS动态添加删除option//动态删除select中的所有options:function delAllOptions(){      document.getElementById(user_dm).options.length=0;}//动态删除select中的某一项option:function delOneOption(indx){      docu

来源: 动态增加、删除select 里的option的小例子 – yy280458609的专栏 – 博客频道 – CSDN.NET

<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″>
<title>JS动态添加删除option</title>
<script>
//动态删除select中的所有options:
function delAllOptions(){
document.getElementById(“user_dm”).options.length=0;
}

//动态删除select中的某一项option:
function delOneOption(indx){
document.getElementById(“user_dm”).options.remove(indx);
}

// 动态添加select中的项option:
function addOneOption(){
//document.getElementByIdx(“user_dm”).options.add(new Option(2,”mytest”));

var selectObj=document.getElementById(“user_dm”);
alert(selectObj.length);
selectObj.options[selectObj.length] = new Option(“mytest”, “2”);
}
</script>
</head>
<body>
<select id=”user_dm” name=”user_dm”>
<option value=”0″ selecte>==请选择人员==</option>
<option value=”1″>test</option>
</select><br>
<input type=”button” onClick=”addOneOption()” value=”添加”>
<input type=”button” onClick=”delOneOption(1)” value=”删除第一个”>
<input type=”button” onClick=”delAllOptions()” value=”清空”>
</body>
</html>
========================================================
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″>
<title>Js动态添加与删除Option对象</TITLE>
<script language=”JavaScript“>
// 添加选项
function addOption(pos){
var objSelect=document.getElementById(“mySelect”);
// 取得字段值
//var strName = document.myForm.myOptionName.value;
// var strValue = document.myForm.myOptionValue.value;
// 建立Option对象
var objOption = new Option(“aaaaaaaa”,”bbbbbbbbb”);
if (pos == -1 & pos > objSelect.options.length)
objSelect.options[objSelect.options.length] = objOption;
else
objSelect.add(objOption, pos);
}
// 删除
function deleteOption(type){
var objSelect=document.getElementById(“mySelect”);
if (type == true)
objSelect.options[objSelect.selectedIndex] = null;
else
objSelect.remove(objSelect.selectedIndex);
}
// 显示选项信息
function showOption(){
var objSelect=document.getElementById(“mySelect”);
var name = objSelect.options[objSelect.selectedIndex].text;
var value = objSelect.options[objSelect.selectedIndex].value;
alert(name + ” = ” + value);
}

//动态删除select中的所有options:
function clearAllOptions(){
var objSelect=document.getElementById(“mySelect”);
objSelect.options.length=0;
}
</script>
</HEAD>
<BODY>
<h2>Js动态添加与删除Option对象</h2>
<hr>

<select id=”mySelect” name=”mySelect”>
<option value=”中国” Selected>中国</option>
<option value=”日本”>日本</option>
<option value=”美国”>美国</option>
</select>
<input type=”button” onclick=”showOption(this.form)” value=”显示”>
<input type=”button” onclick=”deleteOption(true)” value=”删除”>
<input type=”button” onclick=”deleteOption(false)” value=”Remove方法”><br><br>
选项名称 : <input type=”text” name=”myOptionName” value=”英国”><br>
选项的值 : <input type=”text” name=”myOptionValue” value=”value4″>
<input type=”button” onclick=”addOption(-1)” value=”添加”>
<input type=”button” onclick=”addOption(0)” value=”插入到最前面”>
<input type=”button” onclick=”clearAllOptions()” value=”清空”>
</BODY>
</HTML>

js如何获取select下拉框的value以及文本内容 - 渔歌 - 博客园

mikel阅读(1393)

来源: js如何获取select下拉框的value以及文本内容 – 渔歌 – 博客园

select下拉框在项目开发中是经常用到的,特别是在联级菜单方面的应用更为广泛。但是,对于一些初学者来说,如何获取下拉框子节点option的value值和文本内容,还是有一点难度的。
其他的就不说了,现在我就写一段代码,简单的说明一下如何获取value值以及文本内容(text),必要地添加了注释,希望对下拉框还不太熟悉的朋友有所帮助。
html代码:
复制代码
 1 </HEAD>
 2  <BODY>
 3     
 4     书籍分类:
 5     <select id="s1" >
 6         <option value="1">教学类</option>
 7         <option value="2"> 技术类</option>
 8     </select>
 9 </BODY>
10 </HTML>
复制代码

javascrtipt代码:

复制代码
 1 window.onload = function(){
 2     
 3         //首先获得下拉框的节点对象;
 4         var select = document.getElementById("s1");
 5         
 6         //1.如何获得当前选中的值?:
 7         var value = select.value;
 8         
 9         //2.如何获得该下拉框所有的option的节点对象
10         var options = select.options;
11         //注意:得到的options是一个对象数组
12         
13         //3.如何获得第几个option的value值?比如我要获取第一option的value,可以这样:
14         var value1 = options[0].value;
15         //4.如何获得第几个option的文本内容?比如我要获取第一option的文本,可以这样:
16         var text1 = options[0].text;
17         
18         //5.如何获得当前选中的option的索引?
19         var index = select.selectedIndex;
20         
21         //6.如何获得当前选中的option的文本内容?
22         //从第2个问题,我们已经获得所有的option的对象数组options了
23         //又从第5个问题,我们获取到了当前选中的option的索引值
24         //所以我们只要同options[index]下标的方法得到当前选中的option了
25         var selectedText = options[index].text;
26     }
复制代码

 

Meteor.js异步全解 - 码流星 - 博客园

mikel阅读(1149)

来源: Meteor.js异步全解 – 码流星 – 博客园

 翻译来源: http://phucnguyen.info/blog/everything-you-need-to-know-about-async-meteor/

 

Meteor是运行在Node.js之上的。这意味着I/O行为,比如读文件或者发送网络请求不会阻塞整个程序。事实上,当异步行为执行结束后,我们可以提供回调。好了解不?下面会有图画解释。

假设我们想读一个加密过的文件,接着解密出内容:

 

而更通用,多样的事件序列长成这样:

事件序列只是等待执行的函数队列而已。每当调用函数时,就放到事件序列里边去。

当我们执行函数getSecretData去解密并打印文档内容时,函数readFile就会被调用,出现在事件序列里边。

读文件函数readFile并不关心他后面执行什么,这哥们只是告诉系统发送文件,接着就滚蛋了!

 

分分秒,readFile结束。‘callback’回调这货就会跳进事件序列:

很快,收到文件后,英雄归来,完成后面的所有工作。

 

很好很有用吧?! 可是如果任务更复杂,需要多层异步该怎么办?结果就成这吊样:

 

真蛋疼!异步流程控制代码太变态了,无法阅读和维护!要是getSecretData能同步返回内容就好了,像这样:

 

可惜,这样的代码不可行,因为getSecretData会在readFile结束前就执行了,直接返回undefined。解决这问题,非英雄莫属,那就是Fiber-王者归来!

接触Fiber,他是个可以容纳多个函数的无敌英雄!

Fiber其实就是特别的容器函数。他可以跟普通函数一样被扔进事件序列。但他也别有魔力:可以在任意执行点暂停,跳出执行序列,任意时间后再回来,任由程序员调戏!Fiber暂停时,流程控制权就接力到事件序列里边的下一个函数(普通函数,新Fiber函数都可以)。

你可能已经看到好处了:如果Fiber含有费时的I/O行为,它可以跳出事件序列,等待结果。同时,我们也可以运行序列里的下一个函数。人生苦短,时间珍贵!I/O结束,Fiber可以再转回来,从上次执行点接着来.下面是用Fiber写的代码:

 

可能还不好理解是吧?下面的图标更直观:

Fiber发现yield时,他会休息一下!

调用run()就回复Fiber的执行,任何传递到run()将会变成yield()的返回值。

你还叫?“看起来还行。但是yield run这货,我感觉有点奇葩”。

我同意!还有比Fiber更猛的大神。那就是Future!

你可以把Future当作Fiber的抽象。这货提供了更强大的API,像是驯养的Fiber。

 

嘿咻!上面的列子都是可以自由修改getSecretData函数的。可是当异步函数不好修改是怎么办?比如第三方API。小事一桩,不需要修改,包一下就行了!

嗯,好像每次调用下wait就可以了。还是有点烦!

哈哈,用Meteor.warapAsync,他还可以更简便! 

 

实际上,除了吸引眼球,我们还有一些异步相关的话题可以聊聊:

– – –

Future.wrap 和 Meteor.wrapAsync不是万能药

他们只适合原生的纯异步函数。就是有回调,返回error,result那种函数。还有,他们只能在服务器端有用,因为yielding在客户端不行-没用Fibers。

– – –

Meteor.wrapAsync会把你纯真的函数变成双半脸!!!

 

幸运的是,双面函数也不太坏。有时候他们很有用,他们可以同步调用(上面几种方案),也可以异步调用(传一个回调函数)。

服务器端,HTTP.call, collection.insert/update/remove都已经内置了这种包裹方式。比如HTTP,如果直接调用,方法会等到response返回;如果提供回调函数,他就直接跳出,等网络返回response再条用回调函数。

客户端,由于不能用阻塞,只能提供回调函数。

– – –

Fiber 瑕疵

默认,客户端调用是在Fiber里的—–一次一个。这个Fiber可以访问当前用户的环境变量(比如Meteor.userId())。这也会产生问题:

1)服务器端,同步调用HTTP.call这类方法会阻塞当前用户的后续方法。这未必是什么好事情。如果后续方法跟当前方法无关的话,其实可以使用this.unblock(),这样其他方法调用就会在新的Fiber里进行

 

2) “Meteor代码必须在Fiber里边执行”

似曾相识不?错误总是不断当你调用第三方异步API时发生。不能这样搞,因为回掉函数在Fiber之外执行了,无法访问环境变量。一种解决方案就是用Meteor.bindEnvironment包一下,他能返回Fiber包过新版函数。方案2就是用Meteor.wrapAsync(实际wrapAsyncn内部就是调用的bindEnvironment ).


 

希望你对Meteor的异步有所领悟。编码快乐!

 

— 蜗居苏州昆山 自由软件开发者 专注于Javascript全栈开发(Angular.js-Node.js-Meteor.js-Bootstrap) 擅长JavaEE —