关闭

一些前端注意事项整理

标签: 前端app
176人阅读 评论(0) 收藏 举报
分类:

angular

angular 的service实现方法:

1,value 变量
angular.module(‘app’,[]).value(‘realname’,’sqliang’);

2,constant 常量(不可以改变)

angular.module(‘app’,[]).value(‘http’,’www.baidu.com’);

3,factory
angular.module(‘app’,[]).factory(‘Data’,function(){
return {
msg: ‘Hello’,
setMsg: function(){
this.msg = “no Hello”;
}
};
});

4,service
angular.module(‘app’,[]).service(“User”,function(){
this.firstname = “司马”;
this.lastname = “长风”;
this.getName = function(){
return this.firstname + ” ” + this.lastname;
}
});
5,provider
ng-show , ng-hide , ng-hide

文件上传解决方案

普通的文件上传实现方案:

常见异步上传方案:

1,使用第三方控件(Flash,ActiveX,浏览器插件等)
适用与专门的文件上传应用
优点:
交互与可控性好(多文件,进度展示,续传,暂停)
性能好(可使用底层协议)
缺点:
需要浏览器安装插件

2,使用隐藏的iframe模拟异步上传(伪异步上传)
优点:浏览器原生支持,不需要插件,广泛的浏览器兼容性
缺点:交互差,体验差,上传过程基本不可控;性能差

3,使用xhr level2纯ajax异步上传
优点:
(1)支持H5的浏览器原生支持,不需要插件
(2)交互性较好
缺点:受浏览器支持限制
关键过程:
1,创建FormData,放入待上传文件
2,通过xhr操作将FormData发送到服务器,实现文件上传,
3,绑定progress、load、error等事件监听传输过程并在页面显示动态交互信息

var fd = new FormData();
fd.append('myFile',element.files[0]);
// 创建xhr对象
var xhr = new XMLHttpRequest();

// 监听状态,实时响应。
// xhr 和 xhr.upload 都有progress事件,xhr.progress是下载进度,xhr.upload.progress是上传进度
xhr.upload.onprogress = function(event){
    if(event.lengthComputable){
        var percent = Math.round(event.loaded * 100 / event.total);
        console.log("%d%",percent);
    }
};
// 传输开始
xhr.onloadstart = function (event) {
    console.log('load start');

}
// ajax过程成功完成事件
xhr.onload = function(event){
    console.log("load success");
    console.log(xhr.responseText);
}
// ajax 过程发生错误事件
xhr.onerror = function(event){
    console.log("error");
}
// ajax被取消
xhr.onabort = function (event) {
    console.log("abort");
}
// loadend传输结束,不管成功失败都会被触发
xhr.onloadend = function (event) {
    console.log("load end");
}

xhr.open('POST','/upload3',true);
xhr.send(fd);

七天学会nodejs

1,为了实现高性能web服务器,首先看重的是事件机制和异步IO模型的优越性
运行在NodeJS中的JS的用途是操作磁盘文件或搭建HTTP服务器,NodeJS就提供了fs,http等内置对象
2,写的稍微大一点的程序代码都会将代码模块化。nodejs中一般将代码合理拆分到不同的js文件中,每一个文件就是一个模块,二文件路径就是模块名

在编写每一个莫亏啊时,都有require,exports,module三个预订好的变量可供使用
var foo1 = require(‘./foo’);//可以不加 .js
var foo2 = require(‘./foo.js’)

另外,可以使用以下方式加载和使用一个JSON文件。
var data = require(‘./data.json’);

exports对象是当前模块的导出对戏那个,用于导出模块公有方法和属性。别的模块通过require函数使用当前模块时得到的就是当前模块的exports对象
exports.hello = function(){
console.log(“heelo”);
}
module,
通过module对象可以访问当前模块的一些相关信息,但最多的用途是替换当前模块的到处对象。

3,Nodejs使用CMD模块系统,主模块作为程序入口点,所有模块在执行过程中只初始化一次。另外,除非js模块不能满足需求,够足不要轻易使用二进制模块,否则用户会叫苦连天

4,包(package),js模块的基本单位是单个js文件,但复杂的模块往往由多个子模块子组成,为了便于管理和使用可以把多个子模块组成的大模块称作包,并把所有子模块凡在同一个目录里。

在组成一个包的所有子模块中,需要有一个入口模块,入口模块的到处对象被作为包的到导出对象

— /home/user/lib/
—— cat/
head.js
body.js
index.js

index.js:

var head = require(‘./head’);
var body = require(‘./body’);

exports.create = function (name) {
return {
name: name,
head: head.create(),
body: body.create()
};
}

当模块的文件名是index.js,加载模块时可以使用模块所目录的路径代替模块文件路径:
var cat = require(‘/home/user/lib/cat’);
等价于
var cat = require(‘/home/user/lib/cat/index’);

=====另外,如果想自定义入口模块的文件名和存放位置,就需要在包目录下包含一个package.json文件,并在其中指定入口模块的路径,上例中的cat模块可以重构如下:
— /home/user/lib
- cat/
+ doc/
- lib/
head.js
body.js
main.js
+ test/
package.json

package.json:

{
‘name’: ‘cat’,
‘main’: ‘./lib/mian.js’
}

这样,同样可以使用 require(‘/home/user/lib/cat’)的方式加载模块。NodeJS会根据包目录下的package.json找到入口模块所在位置

版本号:
使用npm下载和发布代码都会接触到版本号,npm使用语义版本号来管理代码:
语义版本号分为X.Y.Z三位,分别代表主版本号,次版本号和补丁版本号,当代码更新时,版本号按以下原则更新:

如果只是修改bug,需要更新Z位;如果是新增了功能,但是向下兼容,需要更新Y位;如果有大变动,向下不兼容,需要更新X位。

=======总结:
1,编写代码前先规划好目录结构,才能做到有条不紊;
2,稍大些的程序可以将代码拆分为多个模块管理,更大些的程序可以使用包来组织模块
3,合理使用node_modules和NODE_PATH来解耦包的使用方式和物理路径
4,使用NPM加入NodeJS生态圈互通有无。

====================
文件操作
让前端觉得如获神器的不是NodeJS能做网络编程,而是NodeJS能够操作文件。几乎也也只需要一些数据处理逻辑,再加上一些文件操作,就能编写出大多数前端工具。

NodeJS通过fs内置模块提供对文件的操作,fs模块提供的API基本上分为三类:

(1)文件属性读写,fs.stat,fs.chmod,fs.chown等
(2)文件内容读写,fs.readFile,fs.readdir,fs.writeFile,fs.mkdir等等
(3)底层文件操作,fs.open,fs.read,fs.write,fs.close等等

异步读取文件与同步读取的处理区别:
fs.readFile(pathname,function(err, data){
if(err){
//deal with error
}else {
//deal with data.
}
});

try {
var data = fs.readFileSync(patheName);
//deal with data.
} catch (err) {
// deal with erro.
}

一些后台知识

1、使用了redis
2、mongoDB
3、Paxos一致性算法,理论复杂,难以实现
4、raft算法

前端工程精粹

前端工程精粹(一,二,三),fis前端自动化工具解决开发性能优化等方案
基于依赖关系表的静态资源管理系统与模板框架设计:

一些项目思考

1,使用fis后,可以本地测试,或者编译部署到测试机,很方便。可以合并,压缩,js,css,以及图片。可以

2,如何基于fis进行commonJS规范编程????==========
fis-pure

=====================

项目相关:
1,如果后台基于nginx和php,文件部署,以后后台添加数据接口(json格式的数据接口),需要注意什么??

====

====
2,目前项目想做前后端分离,由前端来处理路由,模板,发送ajax等(能否推荐一套类似于angular这样的能提供路由,发送http的MV*框架)

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:21681次
    • 积分:859
    • 等级:
    • 排名:千里之外
    • 原创:66篇
    • 转载:2篇
    • 译文:1篇
    • 评论:1条
    最新评论