0前端 框架 库_千万别去碰js呀 混合APP_webAPP_美工 选有类型的语言，比如TypeScript




常用知识点，技巧

添加库到本地：

（举例 element-ui）
用npm命令行把包下载到本地
在电脑里找到资源文件，比如 C:\Users\XiaoCong\AppData\Roaming\npm\node_modules\element-ui\lib
然后复制到项目的目录下


IDEA 15 里的 js 的报错无视
比如
  同时右侧显示这个 
 
 

临时笔记

component
组件
成分; 零件; [数]要素; 组分;

Angular2怎么使用第三方的component库(如 jquery，easyUI ，Bootstrap 等）




PWA  增强web app helloWorld跑起来了，之前失败是因为Chrome服务器插件要FQ才能下载

https://developers.google.cn/web/fundamentals/getting-started/codelabs/your-first-pwapp/

安装谷歌插件
web-server-for-chrome
https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb/related


黑色主题风格
https://chrome.google.com/webstore/detail/darkness-beautiful-dark-t/imilbobhamcfahccagbncamhpnbkaenm

#####################################################

web前端响应式框架

Bootstrap


#####################################################

Weex 安装 创建项目  都成功，能运行

一直在变化
Weex的文档的确是值得吐槽的。官方的Demo想跑起来遇坑无数

npm install -g weex-toolkit  --registry=https://registry.npm.taobao.org
weex 

无法安装 Weex Toolkit
npm ERR! fetch failed https://registry.npm.taobao.org/weex-toolkit/download/weex-toolkit-0.4.10.tgz
npm WARN retry will retry, error on last attempt: Error: getaddrinfo EAI_AGAIN cdn.npm.taobao.org:443

安装 Weex Toolkit
weex

官方
Weex快速上手教程(Weex Tutorial) 
https://github.com/weexteam/article/issues/4

#####################################################

思路

顺序：
无法FQ，几乎没有镜像
TypeScript  无法用npm和镜像安装
Angular2（官方推荐用 TypeScript）



问题


移动 node_modules 文件夹，源文件名太长

npm install -g rimraf  全局安装
cd xxx[include node_modules folder]
rimraf node_modules(这是文件夹)

使用的是npm里面一个专门用于删除的模块插件，看来这货不仅仅适用于gulp
官方描述：A deep deletion module for node (like rm -rf) 
简单点说，就是模拟unix或者Linux下的rm -rf（强制删除命令）
可能无效：
- 360的粉碎工具
- 魔方的粉碎工具
- windows 内置命令

新技术，技术前沿

浏览器 Fetch ，不用XMLHttpRequest 对象，基于 Promise（不是库），不需要依赖第三方库
jQuery.ajax，是使用 XMLHttpRequest 对象来发送异步请求， jQuery ajax异步请求API 底层是使用XMLHttpRequest技术
也可以自己造轮子，封装XMLHttpRequest 对象相关API

Fetch 是浏览器提供的原生 AJAX 接口。使用 window.fetch 函数可以代替 jQuery.ajax 的 $.ajax、$.get 和 $.post。
浏览器帮你把 jQuery.ajax 给实现了，以后用 fetch 来发送异步请求，jQuery很多现代的网站里都不用了

Progressive Web App已经准备好迎接它的黄金时代。微软正考虑在其浏览器中添加Service Worker支持。而且，他们还遵循W3C Maifest创建了manifold.js，使开发人员可以开发跨平台和设备的托管应用。iOS也提供了一种创建“可主屏化（homescreen-able）”应用的方式

Progressive Web Apps /PWA
Google 发的一些视频讲这个, Manifest, Service Worker, Offline, 各种, 让 Web App 的体验能更接近原生应用:
之前有个东西叫 Application Cache，但是那货就是个 shit
#####################################################

Dart

编辑器无法连到外网升级  D:\Program Files\Dart\DartEditor.exe

Dart 的变量类型是可选的，叫做 static type annotations

#####################################################

JavaScript

实时更改浏览器里的任何页面的内容 所用的的 js代码   /编辑页面
document.body.contentEditable='true';
（本质上是把body标签的contentEditable属性开启，置为true）
360安全浏览器  和 Chrome 支持

如图： 360安全浏览器里F12后，在console窗口里执行js代码：
 

或者
开发过程中，给 html 源代码的body标签的属性 添加contentEditable='true'
给客户的页面要把这句去掉，即最终成品
建议用 js

用浏览器调试

在F12后，控制台里，输入方法名，不要括号，然后回车，会得到这段代码的一部分，鼠标单击后浏览器帮忙定位到那个 js文件，更新后
submitForm



#####################################################

Html5 H5 本地浏览器存储 数据库

浏览器数据库
 IndexedDB API  ---2016年8月 最新，web标准组织推荐的

360有web SQL 数据库，存进去的数据也是key-value这种形式
Web Storage (Second Edition)
W3C Recommendation 19 April 2016
#####################################################

jQuery EasyUI

jquery ajax 返回的是string类型，整个页面的html字符串

是基于jQuery的用户界面插件的集合
text() - 设置或返回所选元素的文本内容，不包括尖括号里的内容
html() - 设置或返回所选元素的内容（包括 HTML 标记<>这种符号）
val() - 设置或返回表单字段的值

(前端   等我工作后 , 看一下是否稳定 )
现阶段还在重复造轮子

ionic creator

Cordova.js 封装原生系统级API
PhoneGap打包
ionic即基于Angular2的框架 , 跨平台移动app框架

<script>只能写在<body>的最后一个标签
 不能在<body>里的其他标签的前面



Dojo 基金赞助
这是个基于web的设计界面的工具
http://maqetta.org/



###################################################################

Visual Studio 更新软件，要重装吗

https://www.visualstudio.com/zh-hans/
https://www.visualstudio.com/vs/
代号是15，正式名称可能是Visual Studio 2016

TypeScript 安装成功，但eclipse 插件安装失败

用TypeScript 做后端开发，有什么框架
用TypeScript 做后端开发，怎么搭配express框架

官方文档
http://www.typescriptlang.org/docs/tutorial.html

{
要先安装好TypeScript 和node JavaScript 运行时runtime

在cmd窗口里  进入项目所在的文件夹，叫 a
cd /d E:\TypeScript\a


新建  test.ts  文件，在里面编辑两行：（不涉及到html DOM，只是个cmd 命令行JavaScript 程序，所以不需要用浏览器提供的 js 运行时，用node的）
var strName:string="strName";   //strName 是string类型的
console.log(strName+" 是string类型的");

编译 .ts文件，生成 js 文件 ---  test.js ，用 tsc 命令
tsc test.ts

运行 .js文件，不是 .ts文件。用node，不是用ts命令，没这种命令
node  test.js

cmd 命令行窗口 输出
strName 是string类型的
}



tsserver是什么   TypeScript

 

所有TS的 （IDE / 编辑器）插件：
 

npm install -g typescript@2.0

成功：
cnpm install -g typescript@2.0
C:\Users\XiaoCong>tsc
Version 2.0.3
Syntax:   tsc [options] [file ...]

Examples: 
       编译
          tsc hello.ts
          tsc --outFile file.js  file.ts
          tsc @args.txt

Options:
 --allowJs                           Allow javascript files to be compiled.
 --allowSyntheticDefaultImports      Allow default imports from modules with no default export. This does not affect code emit, just typechecking.
 --allowUnreachableCode              Do not report errors on unreachable code.
 --allowUnusedLabels                 Do not report errors on unused labels.
 --baseUrl                           Base directory to resolve non-absolute module names.
 -d, --declaration                   Generates corresponding '.d.ts' file.
 --experimentalDecorators            Enables experimental support for ES7 decorators.
 --forceConsistentCasingInFileNames  Disallow inconsistently-cased references to the same file.
 -h, --help                          Print this message.
 --init                              Initializes a TypeScript project and creates a tsconfig.json file.
 --jsx KIND                          Specify JSX code generation: 'preserve' or 'react'
 

[typescript@2.0.3] link C:\Users\XiaoCong\AppData\Roaming\npm\tsc@ -> C:\Users\XiaoCong\AppData\Roaming\npm\tsc
[typescript@2.0.3] link C:\Users\XiaoCong\AppData\Roaming\npm\tsserver@ -> C:\Users\XiaoCong\AppData\Roaming\npm\tsserver
[typescript@2.0] installed at node_modules\.typescript_npminstall\typescript\2.0.3\typescript (1 packages, use 3s, speed 823.92kB/s, json 7.19kB, tarball 2.65MB)
All packages installed (1 packages installed from npm registry, use 3s, speed 819.95kB/s, json 1(7.19kB), tarball 2.65MB)

 
 

TypeScript 


 

Koa 无法下载

NodeJS

这个正常


cnpm -v
4.2.0
npm install cnpm -g --registry=https://registry.npm.taobao.org

SqlPad 可视化查询各种数据库，用图表显示出来 {
npm install  sqlpad -g --registry=https://registry.npm.taobao.org
sqlpad@1.17.2
https://github.com/rickbergfalk/sqlpad
sqlpad --dir c:/sqlpad/ --port 3000 --passphrase secret-encryption-phrase
sqlpad --dir 存的目录  --port 3000 --passphrase 连接数据库的密码
晚点才指定要连接哪个数据库

sqlpad --dir E:/SqlPad/ --port 3000 --passphrase secret-encryption-phrase



刚开始要要邮箱注册一下
835570372@qq.com
1

管理员:
root
1111

ping 192.168.57.30

MySQL配置，在浏览器里
192.168.57.30
 默认端口号为：3306
 
jdbc:mysql://localhost:3306/数据库名? user=root&password=1111&useUnicode=true&characterEncoding=utf-8

registration 登记，注册
}

npm 临时使用远程仓库

npm install XXX -g --registry=https://registry.npm.taobao.org
--registry=https://registry.npm.taobao.org


设定仓库

设置成 淘宝npm镜像仓库：
npm config set registry https://registry.npm.taobao.org --global
然后
npm config list
确认网址被配置
 

npm config set disturl https://npm.taobao.org/dist --global


npm install -g  <module-name>
npm install -g react-native
cnpm install -g react-native

全局安装模块的话 npm install -g <n>
C:\Users\XiaoCong\AppData\Roaming\npm
C:\Users\XiaoCong\AppData\Roaming\npm\node_modules

npm install [name]

npm工具默认是从国外的仓库里下载express （可以临时改， --registry=https://registry.npm.taobao.org
也可以改npm的的配置文件，我放在C:\Users\XiaoCong\.npmrc安装路径下，或者用npm config配置：
npm config list
npm config set registry https://registry.npm.taobao.org
npm info underscore
然后会很快冒出一大长串的东西，没有红色报错
里面会有;
userconfig C:\Users\XiaoCong\.npmrc
registry = "https://registry.npm.taobao.org/"

手动指定仓库的位置
npm install -g   cnpm    --registry=https://registry.npm.taobao.org



node -v
v4.5.0
 
npm -v
2.15.9


npm -v
卸载：npm uninstall -g express
安装 指定好的版本: npm install -g express@3.5.0

cnpm

cnpm install -g typescript



cnpm install express-generator -g

express express-generator1  ------用express-generator创建express-generator1项目，在当前路径 E:\React\express-generator1
cnpm install  ---安装依赖
set DEBUG=express-generator1 & npm start
http://localhost:3000/    浏览器 
 


失败  create-react-app my-app
Creating a new React app in E:\create-react-app\my-app.
 
Installing packages. This might take a couple minutes.
Installing react-scripts from npm...
npm ERR! Windows_NT 10.0.10586
npm ERR! argv "D:\\Program Files (x86)\\nodejs\\node.exe" "D:\\Program Files (x86)\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install" "--save-dev" "--save-exact" "react-scripts"
npm ERR! node v4.4.7
npm ERR! npm  v2.15.8
 
npm ERR! shasum check failed for C:\Users\XiaoCong\AppData\Local\Temp\npm-28664-680e4ff5\registry.npmjs.org\react-scripts\-\react-scripts-0.1.0.tgz
npm ERR! Expected: 400e97d5aac972485b190073b409278266f54869
npm ERR! Actual:   b8466a71ebdd4b0a13468a524424238bd753cee1
npm ERR! From:     https://registry.npmjs.org/react-scripts/-/react-scripts-0.1.0.tgz
npm ERR!
npm ERR! If you need help, you may report this error at:
npm ERR!     <https://github.com/npm/npm/issues>
 
npm ERR! Please include the following file with any support request:
npm ERR!     E:\create-react-app\my-app\npm-debug.log
`npm install --save-dev --save-exact react-scripts` failed




360浏览器里，下载第一个，

n ，管理npm的工具，比如升级后者
npm install -g n  失败
npm ERR! Windows_NT 10.0.10586
npm ERR! argv "D:\\Program Files (x86)\\nodejs\\node.exe" "D:\\Program Files (x86)\\nodejs\\node_modules\\npm\\bin\\npm-cli.js" "install" "-g" "n"
npm ERR! node v4.4.7
npm ERR! npm  v2.15.8
npm ERR! code EBADPLATFORM
 
npm ERR! notsup Unsupported
npm ERR! notsup Not compatible with your operating system or architecture: n@2.1.3
npm ERR! notsup Valid OS:    !win32
npm ERR! notsup Valid Arch:  any
npm ERR! notsup Actual OS:   win32
npm ERR! notsup Actual Arch: x64
 
npm ERR! Please include the following file with any support request:
npm ERR!     C:\Users\XiaoCong\npm-debug.log
 
失败    cnpm install -g n
[n@2.1.3](.\AppData\Roaming\npm\node_modules\n) unsupported: Package require os(!win32) not compatible with your platform(win32)
UnSupportedPlatformError: Package require os(!win32) not compatible with your platform(win32)
UnSupportedPlatformError: Package require os(!win32) not compatible with your platform(win32)
    at _install (C:\Users\XiaoCong\AppData\Roaming\npm\node_modules\cnpm\node_modules\npminstall\lib\install.js:146:19)
    at next (native)
    at onFulfilled (C:\Users\XiaoCong\AppData\Roaming\npm\node_modules\cnpm\node_modules\npminstall\node_modules\co\index.js:65:19)


失败？    cnpm install -g react-native
 
Get /binary-mirror-config/latest from https://registry.npm.taobao.org error: ResponseTimeoutError: Request timeout for 5000ms, GET https://registry.npmjs.org/binary-mirror-config/latest -1 (connected: true, keepalive socket: false)
headers: {}
    at null._onTimeout (C:\Users\XiaoCong\AppData\Roaming\npm\node_modules\cnpm\node_modules\urllib\lib\urllib.js:653:13)
    at Timer.listOnTimeout (timers.js:92:15)
[cross-spawn-async@2.2.4](.\AppData\Roaming\npm\node_modules\.react-native_npminstall\cross-spawn\2.2.3\cross-spawn\node_modules\cross-spawn-async) deprecate: cross-spawn no longer requires a build toolchain, use it instead!
[minimatch@2.0.10](.\AppData\Roaming\npm\node_modules\.react-native_npminstall\glob\4.3.5\glob\node_modules\minimatch) deprecate: Please update to minimatch 3.0.2 or higher to avoid a RegExp DoS issue
[react-native@0.30.0] link C:\Users\XiaoCong\AppData\Roaming\npm\react-native@ -> C:\Users\XiaoCong\AppData\Roaming\npm\react-native
[react-native@*] installed at node_modules\.react-native_npminstall\react-native\0.30.0\react-native (662 packages, use 2m, speed 186.5kB/s, json 4.45MB, tarball 18.08MB)
excute post install scripts...
[spawn-sync@1.0.15] scripts.postinstall: "node postinstall" at .\AppData\Roaming\npm\node_modules\.react-native_npminstall\spawn-sync\1.0.15\spawn-sync
[spawn-sync@1.0.15] scripts.postinstall success, use 387ms
peerDependencies WARNING [react-native@0.30.0] in C:\Users\XiaoCong\AppData\Roaming\npm\node_modules\.react-native_npminstall\react-native\0.30.0\react-native requires a peer of react@~15.2.0 but none was installed
All packages installed (662 packages installed from npm registry, use 2m, speed 184.73kB/s, json 909(4.45MB), tarball 18.08MB)


MEAN
View  Angular2
M  MongoDB
C  express
N nodejs  服务器端的js运行时 runtime
可选---s sail.js

MongoDB 3.2


MEAN Web开发
 TP393.092.2/H625
MEAN Web Development 


）
http://www.npmjs.org/  ， 没有被墙，但太慢了，要等一个晚上，而且很可能因为不稳定而中途断开

淘宝自己做的小工具：
cnpm用的是淘宝自己的“ 镜像 ”仓库（通过npm安装，仓库手动指定为淘宝的“ 镜像仓库 ”）。淘宝镜像仓库每10分钟和npm同步，更新一下

以后都用cnpm替代npm

也可以用npm，只是以后都手动指定仓库的位置
npm install -g cnpm       --registry=https://registry.npm.taobao.org

cnpm install -g create-react-app 成功

C:\Users\XiaoCong>cnpm install -g create-react-app
[create-react-app@0.1.0] link C:\Users\XiaoCong\AppData\Roaming\npm\create-react-app@ -> C:\Users\XiaoCong\AppData\Roaming\npm\create-react-app
[create-react-app@*] installed at node_modules\.create-react-app_npminstall\create-react-app\0.1.0\create-react-app (16 packages, use 2s, speed 63.89kB/s, json 68.7kB, tarball 69.1kB)
All packages installed (16 packages installed from npm registry, use 2s, speed 62.95kB/s, json 17(68.7kB), tarball 69.1kB)

替代npm，用淘宝的


Express 单独

React 单独




用 Vue 写了一个知乎日报 web app http://www.tuicool.com/articles/maYnY3j

音乐播放器   AngularJS和Node.js
http://open.itcast.cn/front/3-432.html

#####################################################
IDE 所见即所得
Google Web Designer
GoogleWebDesigner

DreamWeaver 登录不了，而且要破解
#####################################################

Electron 连不上


范例   npm install XXX -g --registry=https://registry.npm.taobao.org
npm install  --registry=https://npm.taobao.org/mirrors/electron/


npm ERR! fetch failed https://registry.npm.taobao.org/electron/download/electron-1.3.5.tgz
npm WARN retry will retry, error on last attempt: Error: getaddrinfo EAI_AGAIN cdn.npm.taobao.org:443


https://registry.npm.taobao.org/electron/download/electron-1.3.5.tgz

成熟的产品

在cmd的当前目录下创建 Electron1文件夹,--depth 1说明只拷贝最新版本，不用把旧版本也拷贝进来，版本控制
git clone https://github.com/electron/electron-quick-start  Electron1 --depth 1

cd Electron1
npm install && npm start
弄了环境变量


以前叫 Atom-shell（为了开发Atom而开发出来的平台） ，后来被GitHub官方单独出来
被太太了，Node-webkit，国产的

Github发布了为桌面应用开发而生的 Electron 1.0版本 http://www.tuicool.com/articles/7jAbuey


#####################################################

Deco -React Native IDE 暂时只支持 Mac

开源
https://www.decosoftware.com/

#####################################################
WeX5 :
V
C
M
.w 
.js   Tomcat?Node.js?
MySQL



MySQL
有管理工具 , 但只用来创建数据库 , 表的设计和数据填写用IDE

标准Web服务器，可以是tomact、apache、nginx、IIS等任意web服务器
WeX5的调试运行环境（UIServer）

WeX5执行流程
.w 文件是什么时候被解析的？
论坛里说如果不需要服务器的话，可以不用。但这样谁来解析.w 文件？显然浏览器无法识别.w 文件，可能论坛里说的是错的

自带一个Chrome浏览器 , 封装过的

导入eclipse的设置
 
不出很想学了 , 因为用的似乎不是最新的技术
虽然可视化开发起来很快

#####################################################

React_Native 挑出来了，2个文件

#####################################################

SeaJS

一个遵循CMD规范的JavaScript模块加载框架
#####################################################

需要改进的地方 :


捕鱼app的教程不在百度云里
项目的文档结构怪怪的 , 感觉应该需要重新设计一下
视频的名字换一下
打包一下 , 整理到一个文件夹下 , 不然一个一个整合在一起麻烦 , 耗时间
文档开源到GitHub上 , 官方文档更新不及时就让大家辅助更新



Crosswalk is an app runtime based on Chromium/Blink.
Crosswalk是之前的webView的替代 , 更流畅 , 可以弄游戏了

mongodb
body-parser


正经事儿就找 图灵机器人，想扯淡瞎聊就找小黄鸡。

别急着写代码

放弃WebView，使用 Crosswalk 做富文本编辑器

原生的
国内的
星期一的交流一下

ASP.Net WebForm

选择IDE

是不是真的是ionic
ionic Phonegap  Cordova Angular关系


weX5前端UI：完全恪守html5+css3+js，干净纯洁
设备api：采用业界主流Phonegap/Cordova
后端：标准协议，支持所有主流技术和平台
（java、node、php、.net等）

要项目
NDK
图形

自己的路由器的产品
需要设置页面,用户不限制
web app

没有足够的人手搞混合,只能自己搞

Registry url: https://registry.npmjs.org/
Path to npm: D:\Software\Node.js\npm.cmd
Downloading package cache to C:\Users\Administrator\AppData\Local\Microsoft\Node.js\Tools\NpmCache\21dd91b0-4f32-449a-ab4e-bff350c38106\all_packages.json




WeX5跨平台原理 : 本机API Framework采用phonegap(cordova)框架
WeX5采用混合应用（hybrid app）开发模式, UI体系完全基于w3c的html5+css3+js；引入jquery和bootstrap并对移动做了极致优化，效率极高
有基于eclipse的自定义IDE

dreamsxin/WeX5   "起步软件公"司
http://git.oschina.net/X5OK/WeX5

#####################################################
PowerCmd_2.2_增强绿色版
PowerShell  win7自带的cmd增强工具 , 但不够好用 , 没有关键字联想

注册码 :
PCMDA-NNZNV-ZNVNN-CADPM
PCMDA-8CYLA-Y8ACL-CADPM
#####################################################

原理

JS模板技术，template。用正则，有一些关键字，用来标哪些需要被替换
前端框架 自定义的语法 用的是JavaScript模板引擎吗
JavaScript模板引擎的原理(思想)是 字符串替换吧
其中一种实现方法是 正则表达式
TemplateJS
前端框架 自定义的语法 用的是JavaScript模板引擎吗
SeaJS和RequireJS各有各的使用场景，有空的话两个都教
那些前端框架有很多自己的语法，比如Angular2 用ng
这些应该也是用“替换”吧
这一小段是Angular2 的
用到template这个字眼
而且标签里面的(click)不是标准，也就是这个是Angular2 独有的
既然这样，Angular2 应该会用正则替换的方式把(click)这些替换成标准写法，当然，应该用到了JavaScript模板引擎，自己弄正则表达式容易错

#####################################################






posted on 2017-03-25 19:36  xiaoCong2015  阅读(2214)  评论(0)  编辑  收藏  举报

导航