静修-个人博客


  • 首页

  • 分类

  • 归档

  • 标签

  • 搜索

03-H5

发表于 2018-05-03 | 分类于 前端-00-基础
1. 选择器
  • querySelector
  • querySelectorAll
  • getElementsByClassName

classList

  • length : class的长度
  • add() : 添加class方法
  • remove() : 删除class方法
  • toggle() : 切换class方法
2. json的新方法
  • JSON.parse():把字符串转成json,字符串中的属性要严格的加上引号
  • JSON.stringify():把json转化成字符串,会自动的把双引号加上
3. data自定义数据
  • data-name : dataset.name
  • data-name-first : dataset.nameFirst
4. 拖放事件
  • drop不触发的时候:
    dragstart > drag > dragenter > dragover > dragleave > dragend

  • drop触发的时候: (dragover的时候阻止默认事件)
    dragstart > drag > dragenter > dragover > drop > dragend

5. 历史管理
  • onhashchange
  • history
  • pushState : 三个参数 :数据 标题(都没实现) 地址(可选)
  • popstate事件 : 读取数据 event.state
    • 注意:网址是虚假的,需在服务器指定对应页面,不然刷新找不到页面
6. 窗口通信

1.同域下:

  • oMyIframe.contentWindow.document.body.style.background = ‘red’;
  • newWindow = window.open(‘4.window.open.html’, ‘_blank’);
    newWindow.document.body.style.background = ‘red’;
  • window : 当前窗口
    parent : 父级窗口
    top : 顶级窗口
  • window.opener.document.body.style

2.异域:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
oMyIframe.contentWindow.postMessage('1', 'http://www.b.com');

www.b.com:
window.addEventListener('message', function(ev) {
//alert('b.com下的页面接收到了内容了');

//message事件的事件对象下保存了发送过来的内容
//ev.data : 发送过来的数据
//ev.origin: 发送过来的网站

//alert('我接收到了a.com页面发送过来的数据,内容是:' + ev.data);

//alert(ev.origin);


if (ev.data == '1') {
document.body.style.background = 'red';
}

}, false);

03-事件

发表于 2018-05-03 | 分类于 前端-05-react
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
var  Hello= React.createClass({
getInitialState() {
return {
name:"name1"
};
},
//这里直接写事件名称就可以了
handleClick:function(i){
alert(i);
},
render:function() {
return (
<div>
<input type="text"/>
<input type="button" value="按钮" onClick={this.handleClick.bind(this,1)} />
//这里传入参数可以用bind函数
</div>
);
}
});
ReactDOM.render(<Hello></Hello>,document.body);

React点击事件的bind(this)传参问题

1
this.handleclick.bind(this,要传的参数)  handleclick(传过来的参数,event)

04-grunt

发表于 2018-05-03 | 分类于 前端-00-基础
==package.json==
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
{
"name": "grunt-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"grunt": "^1.0.1",
"grunt-contrib-clean": "^1.0.0",
"grunt-contrib-concat": "^1.0.1",
"grunt-contrib-copy": "^1.0.0",
"grunt-contrib-cssmin": "^1.0.1",
"grunt-contrib-imagemin": "^1.0.1",
"grunt-contrib-jshint": "^1.0.0",
"grunt-contrib-uglify": "^2.0.0",
"grunt-contrib-watch": "^1.0.0",
"load-grunt-tasks": "^3.5.2"
}
}
==gruntfile.js==
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
module.exports = function(grunt) {

require('load-grunt-tasks')(grunt);

var config={
app:'app',
dist:'dist',
};

grunt.initConfig({
pkg: grunt.file.readJSON('package.json'),
// config:config,

/*copy:{
dist:{
files: [
{
expand: true, // Enable dynamic expansion.
cwd: 'app/css/', // Src matches are relative to this path.
src: ['**'], // Actual pattern(s) to match.
dest: 'dist/css/', // Destination path prefix.
// ext: ['.js','.html'], // Dest filepaths will have this extension.
extDot: 'first' // Extensions in filenames begin after the first dot
},
],
}
},*/
copy:{
html:{
files:[
{'dist/index.html':'app/index.html'}
]
}
},

clean:{
dist:{
src:['dist/**/*'],
}
},

concat: {
js: {
options:{
separator:';'
},
src: ['app/js/index.js','app/js/index02.js'],
dest: 'dist/js/index.js'
},
css:{
src: ['app/css/reset.css','app/css/index.css'],
dest: 'dist/css/index.css'
},
},

uglify: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
},
dist: {
files: [{
expand: true,
cwd: 'dist/js',
src: ['*.js', '!*.min.js'],
dest: 'dist/js',
ext: '.min.js'
}]
}
},

cssmin: {
options: {
banner: '/*! <%= pkg.name %> <%= grunt.template.today("dd-mm-yyyy") %> */\n'
},
target: {
files: [{
expand: true,
cwd: 'dist/css',
src: ['*.css', '!*.min.css'],
dest: 'dist/css',
ext: '.min.css'
}]
}
},

imagemin: {
/* 压缩图片大小 */
dist: {
options: {
optimizationLevel: 3 //定义 PNG 图片优化水平
},
files: [{
expand: true,
cwd: 'app/img/',
src: ['**/*.{png,jpg,jpeg,gif}'], // 优化 img 目录下所有 png/jpg/jpeg/gif图片
dest: 'dist/img/' // 优化后的图片保存位置,覆盖旧图片,并且不作提示
}]
}
},

});

grunt.registerTask('default', ['copy', 'concat', 'uglify','cssmin','imagemin']);
};

04-js冒泡排序

发表于 2018-05-03 | 分类于 前端-02-js基础复习
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<script type="text/javascript">
function sort (arr) {
for (var i = 0;i<arr.length;i++) {
for (var j = 0; j < arr.length-i-1; j++) {
if (arr[j]>arr[j+1]) {
var temp=arr[j];
arr[j]=arr[j+1];
arr[j+1]=temp;
}
}
}
return arr;
}
var arr=[2,5,3,1,7,8,78,89];
sort(arr);

</script>

04-ref

发表于 2018-05-03 | 分类于 前端-05-react
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
var MyComponent = React.createClass({
handleClick: function() {
alert(this.myTextInput.value);
},
render: function() {
return (
<div>
<input type="text" ref={(ref) => this.myTextInput = ref} />
<input type="button" value="Focus the text input" onClick={this.handleClick} />
</div>
);
}
});

ReactDOM.render(
<MyComponent />,
document.body
);

这里ref在设置的时候加上 ref={(ref)=>this.myTextInput=ref}

05-props

发表于 2018-05-03 | 分类于 前端-05-react

image

05-快速排序

发表于 2018-05-03 | 分类于 前端-02-js基础复习
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
var quickSort = function(arr) {
  if (arr.length <= 1) { return arr; }
  var pivotIndex = Math.floor(arr.length / 2);
  var pivot = arr.splice(pivotIndex, 1)[0];
  var left = [];
  var right = [];
  for (var i = 0; i < arr.length; i++){
    if (arr[i] < pivot) {
      left.push(arr[i]);
    } else {
      right.push(arr[i]);
    }
  }
  return quickSort(left).concat([pivot], quickSort(right));
};

06-babel

发表于 2018-05-03 | 分类于 前端-00-基础
webstorm 配置 es6
  1. cnpm install --save-dev babel-cli
  2. cnpm install --save-dev babel-preset-es2015
  3. 新建一个.babelrc文件:
1
2
3
4
5
{
"presets": [
"es2015"
]
}

4.打开webstorm,进入设置,把JavaScript language version改成ECMAScript 6;
5.点Add watcher ++(file-settings-Tools-file watches)++ 啦,点完之后会弹出一个框,其中大部分设置IDE都帮你搞定了,
下面第三行,Program那一项,填
$ProjectFileDir$/node_modules/.bin/babel.cmd

06-win10搭建react-native

发表于 2018-05-03 | 分类于 前端-05-react

官网链接 stackoverflow
建议:结合官网文档(比较详细),准备科学上网软件

1 安装相应软件

需要==Node==,==React Native==命令行界面,==Python2.7==,==JDK1.8==和==Android Studio==

  • node 官网下载即可,版本8.9.3
    • 需要常用npm包:==yarn== ==react-native-cli==
1
npm install -g react-native-cli yarn
  • python2.7
  • JDK1.8 (可以下脱机版,配置下JAVA_HOME环境变量)
  • 安装Android Studio
    • 下载并安装Android(建议不要装在C盘,占内存太大) Studio。提示您选择安装类型时,请选择“自定义”设置。确保选中以下所有项旁边的框:
      1
      2
      3
      4
      Android SDK
      Android SDK Platform
      Performance (Intel ® HAXM)
      Android Virtual Device

安装完成后在SDK Manager里安装

1
2
3
4
Google APIs
Android SDK Platform 23
Intel x86 Atom_64 System Image
Google APIs Intel x86 Atom_64 System Image

“Android SDK Build-Tools” 选择 23.0.1

配置ANDROID_HOME环境变量

image

2 创建一个新的应用程序

在文件夹里(随便的)右键 git bash

1
react-native init AwesomeProject

==有个坑来了!==

如果您使用Windows,请按以下方式运行命令,或者如果出现错误“无法找到条目文件index.android.js”

1
2
mkdir android\app\src\main\assets
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

3 Android Studio打开Android项目

react-native init AwesomeProject生成一个react-native项目,有一个android文件夹,用Android Studio打开。

配置下adb环境变量。

image

到这里应该结束了,一个正常可用的安卓项目生成完成!


分割线:

学习react-native之前,需要先了解原生js,es6,react.js,基本的node.js下载命令。

06-匿名函数

发表于 2018-05-03 | 分类于 前端-02-js基础复习

Immediately-invoked Function Expression(IIFE,立即调用函数),简单的理解就是定义完成函数之后立即执行。
比较常见的三种写法:

1
2
3
4
5
6
7
8
9
10
11
12
// Crockford's preference - parens on the inside
(function() {
console.log('Welcome to the Internet. Please follow me.');
}());

(function() {
console.log('Welcome to the Internet. Please follow me.');
})();

!function() {
console.log('Welcome to the Internet. Please follow me.');
}();

1…202122…33
静修

静修

322 日志
19 分类
19 标签
© 2019 静修
本站访客数:
由 Hexo 强力驱动
主题 - NexT.Pisces