AngularJS

一个AngularJS web应用中只能出现一个ng-app指令,它相当于main方法。
Angular2以后官方的称呼就叫Angular,不是Angular2,也不是Angular4,而1.x版本的老版本,叫AngularJS。

而在angular1.5的版本之前,都是以directive作为组件化的形式,而directive本身是一个指令,而并非是一个组件,所以它并不能很好的承担组件这一个职责,所以google在angular1.5的版本中推出了component组件。

学习AngularJS 1.x
https://hairui219.gitbooks.io/learning_angular/content/zh/chapter05_1.html

使用ng-init向controller中传递参数,不能立即获取到,是因为 “the controller is being created before the variable is added to the $scope object”

<div ng-include="'modules/units/views/view.html"
     ng-controller="UnitsViewCtrl"
     ng-init="unitId = '123'">
</div>
$scope.setUnitId=function(unitId) {
    $stateParams.id=unitId;
    getData();
}
<div ng-include="'modules/units/views/view.html'"
     ng-controller="UnitsViewCtrl"
     ng-init="setUnitId('123')">
</div>

可以使用$watch,或者在ng-init中调用函数
http://corpus.hubwiz.com/2/angularjs/18608161.html

ng-template寄宿方式

<script type="text/ng-template" id="/tpl.html">
 Content of the template.
 </script>

angular.js 中 父级和 子集 controller 之间的通讯
http://yijiebuyi.com/blog/62f8daffb5c629e85de91ca0b3942985.html

React Native

React Native

React Native 中文网
http://reactnative.cn/

React Native


http://www.jianshu.com/p/a4d16de07350
http://www.jianshu.com/p/7a4899bde137
http://www.reactnative.com/
react-navigation使用技巧
http://www.jianshu.com/p/2f575cc35780

To run your app on iOS:
   cd /Users/hycx/x_workspace/AwesomeProject
   react-native run-ios
   - or -
   Open ios/AwesomeProject.xcodeproj in Xcode
   Hit the Run button
To run your app on Android:
   cd /Users/hycx/x_workspace/AwesomeProject
   Have an Android emulator running (quickest way to get started), or a device connected
   react-native run-android

目前来说用rn对我来说最大的好处应该是同时开发android和ios,大部分代码通用,而且可以使用 code-push 来热更新。
https://www.zhihu.com/question/36722811

在Android手机上运行React-native项目时报错:unable to load script from assets ‘index.android bundle’ ,make sure your bundle is packaged correctly or youu’re runing a packager server

解决方案:
第一步:在 android/app/src/main 目录下创建一个 assets空文件夹
第二步:执行 下面这段命令

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

会发现 assets文件夹下多出两个文件
第三步:重新run程序。

总结:
index.android.bundle是用来调用原生控件的js脚本,每次改变了 index.android.js,都需要使用上面的代码片段更新index.android.bundle,然后打包才可以把新的index.android.js应用上,所以当没有index.android.bundle文件时,RN是无法运行的.

React Native BLE蓝牙通信
http://blog.csdn.net/withings/article/details/71378562?locationNum=3&fps=1
https://github.com/innoveit/react-native-ble-manager

安装chrome扩展程序: React Developer Tools
react-native run-android 命令只需要在手机上还没有安装项目软件时执行,如果已经安装了,只要在手机上手动打开app即可。
react-native start
ifconfig ,查看en0中对应的ip,
打开app,摇晃手机,或者按菜单,或者长按菜单键,打开帮助菜单,在Dev Settings/Debug server host & port for device中填写ip:port。

图片
安卓中使用资源图片:
把ic_launcher.png拷贝放到drawable-hdpi中,

学习React Native必看的几个开源项目
http://www.cnblogs.com/qiangxia/p/5584622.html

react-navigation 简单使用
http://www.jianshu.com/p/2ce08b92cf60
https://reactnavigation.org/docs/intro/
http://www.cnblogs.com/CrazyWL/p/7283600.html

StatusBar 使用
http://blog.csdn.net/mengks1987/article/details/71127885
http://www.hangge.com/blog/cache/detail_1613.html

Javascript

判断对象类型

#判断是Buffer
Object.prototype.toString.call(obj1) === '[object Uint8Array]'
#判断是Array
Object.prototype.toString.call(obj1) === '[object Array]'

JS判断字符串结尾

  String.prototype.endWith=function(endStr){
      var diff=this.length-endStr.length;
      return (diff>=0 && this.lastIndexOf(endStr)==diff)
  }

ES6中export及export default的区别:
但在一个文件或模块中,export、import可以有多个,export default仅有一个。
对于export default,导入的时候没有花括号;对于export,导入的时候有花括号;
http://blog.csdn.net/zhou_xiao_cheng/article/details/52759632

遍历对象

for (var key in obj){
      var value=obj[key];
    }

触发其它元素的点击

//IE浏览器
if(document.all) {
document.getElementById("clickme").click();
}
//其它浏览器
else {
var e = document.createEvent("MouseEvents");
e.initEvent("click", true, true);
document.getElementById("clickme").dispatchEvent(e);
}

Vue

Vue学习要点记录:

Vue 实例暴露了一些有用的实例属性与方法,这些属性与方法都有前缀$,与代理的 data 属性区分。
Vue.js 没有“控制器”的概念。组件的自定义逻辑可以分布在这些钩子中。
钩子:create, mounted、 updated 、destroyed等。
在底层的实现上, Vue 将模板编译成虚拟 DOM 渲染函数。结合响应系统,在应用状态改变时, Vue 能够智能地计算出重新渲染组件的最小代价并应用到 DOM 操作上。如果熟悉虚拟 DOM 并且偏爱 JavaScript 的原始力量,也可以不用模板,直接写渲染(render)函数,使用可选的 JSX 语法。
Mustache语法,胡子语法:{{}}
v-bind:指令可以省略为一个冒号
v-click指令可以省略为一个@
模板内的表达式只能包含单个表达式,应只用于简单的运算。
计算属性:在computed中声明并实现属性值的计算方法。与methods的区别是:计算属性是基于它们的依赖进行缓存的。计算属性只有在它的相关依赖发生改变时才会重新求值。

& 父级作用域: 传递进来的参数必须是父级的函数方法, 然后在指令中,通过 test() 获取到 传递进来的函数,这个还不够,还必须再执行一次 test()() 才是真正的执行这个方法。
@ 本地作用域: 只能传递字符串进来,对于方法或者对象是传递不进来的。
= 双向属性: 可以传递对象进来,也可以是字符串,但是不能传递方法。 同时可以在指令中修改这个对象,父级里面的这个对象也会跟着修改的。
https://segmentfault.com/a/1190000007018923

ES6:

ES6提供的许多新特性。这些新特性中包含一些简便书写的方法:
箭头函数
默认参数
不定参数
解构赋值
模板字条串

ECMAScript 6 入门
http://es6.ruanyifeng.com/

浏览器

插件架构:NPAPI和PPAPI

NPAPI是当今最流行的插件架构,由网景开发,后Mozilla维护,几乎所有浏览器都支持,不过存在很大的安全隐患,插件可以窃取系统底层权限,发起恶意攻击。
2010年,Google在原有网景NPAPI(Netscape Plugin API)基础上开发了新的PPAPI(Pepper Plugin API),将外挂插件全部放到沙盒里运行。最新版本的firefox和chrome都不支持大多数NPAPI插件了。

播放rtmp

HTML5不支持rtmp,由flash插件来支持播放。
下载Adobe Flash Player,对不同的浏览器提供了支持不同类型API的插件版本。
http://get.adobe.com/cn/flashplayer/otherversions/
在Windows上,vlc安装过程中可以看到只提供了Mozilla和ActivX插件勾选。
在Ubuntu上,下载flash_player_npapi_linux.x86_64.tar.gz解压后,拷贝后重启firefox。

sudo cp libflashplayer.so /usr/lib/firefox-addons/plugins/libflashplayer.so

rtsp协议流数据在前端播放,没有特别好的解决方法,需要在本机装一个vlc 插件,依靠这个插件才能让 RTSP 协议 在网页上能播放,但是目前高版本的 Chrome浏览器已不支持 NPAPI 插件,也就是说高版本的 Chrome 浏览器还是不能播放(46 以上的版本都不行)。
对于rtsp,由于新版本的ff、chrome都不支持vlc插件,所以暂只能考虑使用旧版本。
http://www.cnblogs.com/qiaojie/p/5733335.html

Firefox 52.0 分支作为长期支持版本,将会持续到 2018 年三四月份,从该版本起,Firefox 将不再支持除了 Flash 插件之外的所有 NPAPI 插件。
Chrome uses PPAPI-based plugins ONLY now, while vlc-browser-plugin is NPAPI-based

Linux版本的chrome在版本35时已经没有enable-npapi选项了。
Since version 35 NPAPI is no longer supported in Linux versions of Chrome and Chromium. In the Windows versions you can still enable it on the page: chrome://flags/#enable-npapi.

播放rtsp

在angular或vue等框架中使用vcl插件播放rtsp视频时,可以js动态操作vlc播放,如果使用双括号表达式给mrl赋值,可能在firefox中产生每次进入视频页面都需要重新激活插件。

<object type='application/x-vlc-plugin' pluginspage="http://www.videolan.org/" id='vlc1' events='false' width="720" height="410">
  <param name='mrl' value='rtsp://u.itvitv.com/jpm1' />
  <param name='volume' value='0' />
  <param name='autoplay' value='true' />
  <param name='loop' value='false' />
  <param name='fullscreen' value='true' />
  <param name='controls' value='false' />
</object>
var vlc=document.getElementById("vlc1");
var id=vlc.playlist.add($scope.videoUrl);
vlc.playlist.playItem(id);

APP开发架构

NativeApp
跨平台解决方案:
WebApp
dist是指distribution,发布,
dest则是destination,目的。
facebook-reactnative

PhoneGap/Cordova

使用iOS、Android等原生的WebView控件,用浏览器,基本上不能混合开发
Phonegap在每个移动平台(iOS、android、blackberry等)中都实现了一套后台框架,分别与各平台系统API进行交互,从而调用其native API,对应用开发人员提供了统一的JS调用接口,即phonegap API,开发人员只需要采用html、js、css等web技术即可进行移动平台快速开发。
Phonegap的“一次编写,到处运行”是指应用程序开发只需编写前端代码,并且可完全复用到其他平台,复用到其他平台时需要另外搭建相应的开发环境才能运行。

android平台phonegap框架实现原理
http://blog.csdn.net/wuruixn/article/details/7405175

ionic

Ionic 底层打包使用 Cordova ( 和 Phonegap 一样 ) 底层打包用 Cordova 是不错的。 Ionic 是一个全堆栈的混合应用开发框架,可以理解成 Ionic = Cordova + AngularJS + Ionic UI

ionic app 优化三件套,让其更贴近原生app:
禁用ionic 自带的滚动效果
在低版本android中,Crosswalk WebView提供了比原生WebView更好的性能;但是相应的会使app体积大20m左右,这就是其唯一的缺点,但是为了性能,这点问题当然不是问题啦;
引入插件 ionic-native-transitions,这是我个人觉得对app体验最最重要的一步。这能使app的页面切换效果 “纵享丝滑”,告别ionic自带的页面切换卡顿效果!
需要调用支付,蓝牙什么的功能务必用 ionic,因为有 phonegap,后期可以给你省很多事
如果你只是做纯粹展示型的 app 那么 weex 和 rn 都可以,如果 react 熟就 rn,不熟怕麻烦还是 weex

ionic3 教程
http://www.jianshu.com/p/1baf40713c1c

weex / react native / ionic 技术选型
http://www.sunzhongwei.com/weex-react-native-ionic-technology-selection

什么是Bower?

Bower 是 twitter 推出的一款包管理工具,基于nodejs的模块化思想,通过 Bower 来管理模块间的联系。
“包”是指一系列有意义的资源的集合,在bower这里,更多体现在json文件,它是这些资源的配置文件,一个完整的包都应该有一个bower.json文件。
“管理”包含获取,下载,安装,更新,查找,注册等等一系列对资源的操作。

bower与npm
npm是专门管理node模块的管理工具,而bower是node的模块,因为bower是依赖node,npm和git。npm擅长的是管理node模块,而bower管理的范围更大,涉及html,css,js和图片等媒体资源。常在服务器端使用npm,而在客户端使用bower。

gulpjs
gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速度更快。

JSHint、JSCS、ESLint、JSLint
JSHint 可以帮助检测 JavaScript 代码中的错误和潜在的问题
JSCS 是一个 JavaScript 的代码风格检查工具,通过使用这两款 QA Tools 能在团队协作中大大提升代码的正确性、准确性、完整性、简洁性、统一性及易读性。

WebSocket

angular-websocket
https://www.npmjs.com/package/angular-websocket
在angular工程中使用angular-websocket:

#index.html中 
#app.js中 angular.module('appmodule1', ['angular-websocket'])
#controller中
app.controller('UnitsReportsCtrl', function($scope, $websocket) {
        if(!$scope.ws) {
            $scope.ws = $websocket("ws://localhost:8181");

            $scope.ws.onOpen(function (e) {
                console.log('Connection to server opened');
            });
            $scope.ws.onMessage(function (e) {
                console.log('received',e);
            });
        }
        $scope.ws.send('test11');
}

在nodejs中使用websocket
https://github.com/websockets/ws

jQuery

http://www.w3school.com.cn/jquery/index.asp

data-* 属性是 HTML5 中的新属性。
data-* 属性用于存储页面或应用程序的私有自定义数据。
data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。
属性名不应该包含任何大写字母,并且在前缀 “data-” 之后必须有至少一个字符

Jquery中children、find区别
通过children获取的是该元素的下级元素,而通过find获取的是该元素的下级所有元素。
用children:$(“#tb>tbody”).children(“tr:last”).children(“td:eq(1)”).html()
用find:$(“#tb>tbody”).find(“tr:eq(1) td:eq(1)”).html()

javascript不支持函数重载

css

1.CSS之派生选择器(上下文选择器)
上下文选择器的情况有三种:后代选择器,子元素选择器,相邻兄弟选择器。
后代选择器,很重要的一点是第一个参数和第二个参数之间的代数是可以无限的。 用空格分隔
子选择器只会选择某个元素的子元素,而不会扩大到任意的后代元素。用>分隔
相邻兄弟选择器会选择某一元素紧随其后的元素,但是前提是他们拥有相同的父级。用+分隔

http://nanaapril.blogbus.com/logs/225612532.html

2.更多高级css选择器
http://www.qianduan.net/taming-advanced-css-selectors.html
http://www.w3cplus.com/css/advanced-html-css-lesson3-complex-selectors.html

css3

1.边框图片border-image
http://blog.csdn.net/lee_magnum/article/details/12056471

border-width: 4px;
-webkit-border-image: url(“sharebg@2x.png”) 10;
width:290px;

visibility

CSS visibility 属性的定义
默认值: visible
继承性: yes
visibility只是让元素不可见, 元素仍占据着空间。这个属性是可以继承的,继承是指当子元素没有显式设置visibility时继承,但当给一个子元素显式设置成visible时这个子元素就可见了。
确保子元素都隐藏的方法是使用display:none,就不会有上面困扰了。

html转义字符

HTML中空格的转义字符有如下几种:
1. &nbsp;&160#; 不断行的空白(1个字符宽度)
2. &ensp;&8194#; 半个空白(1个字符宽度)
3. &emsp;&8195#; 一个空白(2个字符宽度)
4. &thinsp;&8201#; 窄空白(小于1个字符宽度)

html常用的特殊符号
http://www.jb51.net/onlineread/htmlchar.htm
http://itnote.lone.tw/WEB/HTML/081020-02.htm

 

http://www.w3school.com.cn/html/html_entities.asp

&times;表示乘号

防盗链现象

A 网站引用了 B 站的 图片 ,在 A 站载入这个图片时,浏览器会自动在请求头加上 referer 字段,B 站可能会判断这个referer来防盗链,可能返回一张盗链标识图片或403错误。

反防盗链,在页面中加是下面这个meta:

<meta name="referrer" content="no-referrer">

参考 https://segmentfault.com/q/1010000005803770